/* SuperViz surface inside Totaly.
 *
 * Retunes the renderer design tokens to the Totaly canvas and lays out the
 * division chart grids. The renderers read the --ac-* custom properties, so
 * overriding them here restyles all 31 chart types without touching renderer
 * code.
 */

:root,
[data-theme='dark'],
[data-app-theme='dark'] {
  --ac-text: #E8E6E2;
  --ac-muted: #A8AEB8;
  --ac-axis: #6B717C;
  --ac-grid: #2A2C2C;
  --ac-surface: #1F2121;
  --ac-elevated: #2A2C2C;
  --ac-border: #303232;
  --ac-focus: #2196F3;
  /* Preset/Superset chart ink is Roboto. Inter was never loaded in index.html,
     so canvas text fell through to system UI fonts and read softer than Preset. */
  --ac-font: Roboto, Helvetica, Arial, sans-serif;
  --ac-font-size: 12px;
  --ac-space-1: var(--space-1, 4px);
  --ac-space-2: var(--space-2, 8px);
  --ac-space-3: var(--space-3, 12px);
  --ac-space-4: var(--space-4, 16px);

  --sv-accent: #2196F3;
  --sv-card: #1F2121;
  --sv-card-border: #2C2E2E;
  --sv-title: #9EA1A8;
  --sv-muted: #6A7080;
  --sv-hover-border: #3D4040;
  --sv-danger: #EE6E8C;
  /* Keep skeleton clearly above the card so "still loading" never reads as an
     empty finished tile (was #232525/#2C2F2F on #1F2121 - nearly invisible). */
  --sv-skeleton-a: #2A2E32;
  --sv-skeleton-b: #3A4048;
}

[data-theme='light'],
[data-app-theme='light'],
[data-app-theme='og'] {
  --ac-text: #1B1D21;
  --ac-muted: #5C636E;
  --ac-axis: #9AA1AA;
  --ac-grid: #E6E8EB;
  --ac-surface: #FFFFFF;
  --ac-elevated: #F5F6F8;
  --ac-border: #DFE2E6;
  --ac-focus: #1976D2;

  --sv-card: #FFFFFF;
  --sv-card-border: #E3E6EA;
  --sv-title: #33383F;
  --sv-muted: #6B7280;
  --sv-skeleton-a: #EFF1F3;
  --sv-skeleton-b: #E4E7EA;
}

/* ---- Layout ---- */

.sv-page {
  /* The app topbar is fixed and translucent. With no top padding the division
     tab strip renders underneath it and reads as clipped and faded. Clear it. */
  padding: var(--space-5, 20px) var(--space-5, 20px) 56px;
  --num-color: var(--ac-text);
}

.sv-section + .sv-section {
  margin-top: 40px;
}

.sv-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: var(--border-width, 1px) solid var(--sv-card-border);
}

.sv-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-title);
}

.sv-section-blurb {
  margin: 0;
  font-size: 12px;
  color: var(--sv-muted);
}

.sv-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3, 12px);
}

.sv-card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sv-card);
  border: var(--border-width, 1px) solid var(--sv-card-border);
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* The reference console gives every tile a hover border so the card reads as a
   discrete object you can act on. Without it the grid looked like a flat wall. */
.sv-card:hover {
  border-color: var(--sv-hover-border);
}

.sv-card.sv-card-focus {
  border-color: var(--sv-hover-border, #4F98A3);
  box-shadow: 0 0 0 2px rgba(79, 152, 163, 0.35);
}

.sv-card[data-span='4'] { grid-column: span 4; }
.sv-card[data-span='6'] { grid-column: span 6; }
.sv-card[data-span='8'] { grid-column: span 8; }
.sv-card[data-span='12'] { grid-column: span 12; }

.sv-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 11px 13px 4px;
  position: relative;
}

/* Quieter card titles so series ink dominates - Preset chrome stays back. */
.sv-card-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sv-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-card-body {
  position: relative;
  flex: 1;
  min-height: 240px;
  padding: 4px 10px 10px;
}

.sv-card[data-span='12'] .sv-card-body { min-height: 300px; }
.sv-card[data-span='4'] .sv-card-body { min-height: 180px; }

/* ---- Loading, empty and error states ---- */

/* Preset-style spinner: quiet ring + label. Shimmer alone read as blank tiles. */
.sv-skeleton {
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
}

.sv-skeleton-ring {
  width: 22px;
  height: 22px;
  border: 2px solid var(--sv-card-border, #2C2E2E);
  border-top-color: var(--sv-muted, #7A808C);
  border-radius: 50%;
  animation: sv-spin 0.85s linear infinite;
}

.sv-skeleton-label {
  font: 500 12px var(--ac-font);
  color: var(--sv-muted);
  letter-spacing: 0.01em;
}

@keyframes sv-spin {
  to { transform: rotate(360deg); }
}

@keyframes sv-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-skeleton-ring { animation: none; border-top-color: var(--sv-muted, #7A808C); opacity: 0.7; }
}

.sv-empty,
.sv-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 180px;
  padding: 16px;
  text-align: center;
}

.sv-empty strong,
.sv-error strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-title);
}

.sv-empty span,
.sv-error span {
  font-size: 11px;
  line-height: 1.5;
  color: var(--sv-muted);
  max-width: 30ch;
}

.sv-error strong { color: var(--sv-danger); }

/* ---- Division tabs ---- */

.sv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.sv-tab {
  appearance: none;
  border: 1px solid var(--sv-card-border);
  background: transparent;
  color: var(--sv-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.sv-tab:hover {
  color: var(--sv-title);
  border-color: var(--sv-accent);
}

.sv-tab[aria-selected='true'] {
  color: #fff;
  background: var(--sv-accent);
  border-color: var(--sv-accent);
}

.sv-tab:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  .sv-card[data-span='4'],
  .sv-card[data-span='8'] { grid-column: span 6; }
}

@media (max-width: 820px) {
  .sv-page {
    padding: 14px 14px 44px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
  }
  .sv-grid { gap: 10px; }
  .sv-card,
  .sv-card[data-span='4'],
  .sv-card[data-span='6'],
  .sv-card[data-span='8'],
  .sv-card[data-span='12'] { grid-column: span 12; }
  .sv-card-body { min-height: 240px; }
}

/* ============ console chrome ============
   Bridges the ported console stylesheet (shell.css) to the sv-* grid this
   page already renders: the head and toolbar wrapper, per-tile actions, the
   expanded tile, the table view host and the toast host. */

.sv-page .sv-chrome { margin-bottom: 4px; }
.sv-page .sh-page-count { font-size: 12px; margin-left: 2px; }

.sv-page .sv-table-host { margin-top: var(--space-1, 4px); }

/* Tile actions stay visible (Preset card chrome) so Edit / export are findable
   without hunting on hover. */
.sv-card-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  opacity: 1;
}
.sv-card-actions .icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: var(--sv-muted);
  cursor: pointer;
}
.sv-card-actions .icon-btn:hover {
  color: var(--ac-text);
  border-color: var(--sv-hover-border);
  background: var(--svc-surface-2, #262727);
}
.sv-card-actions .icon-btn[data-sv-act="edit"] {
  color: var(--sv-title, #E3E1DD);
}

/* Expanded tile. Fixed rather than fullscreen API so the app chrome and the
   Escape-to-collapse behaviour stay consistent with the rest of the page. */
.sv-card.sv-card-full {
  position: fixed;
  inset: 24px;
  z-index: 180;
  margin: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.sv-card.sv-card-full .sv-card-body { height: calc(100% - 44px); }
.sv-card.sv-card-full .sv-card-actions { opacity: 1; }
.sv-page.sv-has-full::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 170;
  background: rgba(0, 0, 0, 0.62);
}

.sv-toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 240;
}

@media (max-width: 820px) {
  .sv-card.sv-card-full { inset: 12px; }
  .sv-card-actions { opacity: 1; }
}

/* Row actions sit side by side. The ported rule did not reach this markup, so
   it is stated explicitly here rather than edited in the ported file. */
.sv-page .sh-row-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}
.sv-page .sh-row-actions .icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: var(--sv-muted);
  cursor: pointer;
}
.sv-page .sh-row-actions .icon-btn:hover {
  color: var(--ac-text);
  border-color: var(--sv-hover-border);
  background: var(--svc-surface-2, #262727);
}
.sv-page .sh-table th.sh-actions-cell { text-align: right; }

/* Numeric columns align right and use tabular figures so digits line up. */
.sv-page .sh-table .sh-num {
  text-align: right;
  font-variant-numeric: var(--num-variant, tabular-nums lining-nums);
  font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1);
  font-weight: var(--num-weight-table, 500);
}
.sv-page .sh-table th.sh-num .sh-field-type { float: none; }
.sv-page .sh-field-type {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}