/* ============================================================
   Grid — additive styles only.
   Row colors, pager, cell borders → handled by common-theme via tokens.
   We only add fonts, animations, readonly/nested, scrollbar.
   ============================================================ */

/* ── Row height — override Serenity default of 30px ─────────── */
:root {
  --sg-row-height: 40px;
  --sg-cell-height: 40px;
}

/* ── Column header font ──────────────────────────────────────── */
.slick-header-column,
.slick-group-header-column {
  font-family: var(--header-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ── Cell font & color ───────────────────────────────────────── */
/* Serenity renders cells as <a> links — override so they inherit  */
/* body color (black) instead of --bs-link-color (blue).           */
.slick-cell {
  font-family: var(--s-tabular-font);
  color: var(--bs-body-color);
}
.slick-cell a {
  color: inherit;
}
.slick-cell a:hover {
  color: var(--bs-primary);
}

/* ── Group totals — fix hardcoded colors in common-theme ────── */
.slick-group-totals .slick-cell {
  background-color: var(--bs-primary-bg-subtle);
  border-top: 1px solid var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
  font-weight: 700;
}

/* ── Inline action animation ─────────────────────────────────── */
.inline-action {
  display: inline-block;
  transition: transform 0.12s ease, color 0.12s ease;
  transform-origin: center;
  cursor: pointer;
}
.inline-action:hover {
  transform: scale(1.18);
  color: var(--bs-primary) !important;
}

/* ── Drill-down link cells ───────────────────────────────────── */
.slick-cell a.grid-link {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--bs-primary, #0d6efd) 55%, transparent);
}
.slick-cell a.grid-link:hover {
  text-decoration: none;
  border-bottom-color: var(--bs-primary, #0d6efd);
}

/* ── Read-only nested grid ───────────────────────────────────── */
.readonly-grid .grid-toolbar { display: none !important; }
.readonly-grid {
  min-height: 420px;
  height: auto !important;
  max-height: 600px;
  overflow-y: auto;
}
.nested-grid-style {
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  height: 500px;
}

/* ── Card container (view-switch card mode) ──────────────────── */
.card-container {
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--s-card-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
}
.card-items { --bs-gutter-y: var(--s-row-gap); }
.card-container .card {
  height: 12em;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  overflow-y: auto;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
* {
  scrollbar-color: var(--s-scroll-thumb) var(--s-scroll-track);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece { background: var(--s-scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--s-scroll-thumb);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--s-scroll-thumb-hover); }
.s-sidebar-groups { scrollbar-color: transparent transparent; }
.s-sidebar-groups:hover { scrollbar-color: var(--s-scroll-thumb) transparent; }

/* ── AppSettings inline-edit grid (SP2) ─────────────────────────────── */
.s-edit {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  border-radius: 6px;
  padding: 0 6px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #1d1d1f);
}
.s-edit.dirty { background: #fff3cd; }
:root.theme-cosmos-dark .s-edit.dirty { background: #4a3f1a; }
.s-edit.error { border-color: var(--bs-danger, #dc3545); }
.s-apply-button.disabled { opacity: .5; pointer-events: none; }

/* ── Audit Logs: before/after CHANGES section (Summary tab, below Record) ── */
/* Single rounded frame around the table; rows separated by a hairline only
   (no per-cell box borders), so it reads as one clean grid instead of two. */
.audit-changes .audit-changes-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8125rem;
  table-layout: fixed;
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  border-radius: 6px;
  overflow: hidden;
}
.audit-changes-grid th,
.audit-changes-grid td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.08));
}
.audit-changes-grid tbody tr:last-child td { border-bottom: 0; }
.audit-changes-grid thead th {
  background: var(--bs-tertiary-bg, #f2f2f4);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.audit-changes-grid tbody tr:nth-child(even):not(.audit-row-changed) {
  background: color-mix(in srgb, var(--bs-body-color, #000) 2.5%, transparent);
}
.audit-changes-grid th:first-child,
.audit-changes-grid td:first-child { width: 28%; }
.audit-changes-grid .audit-empty { color: var(--bs-secondary-color, #888); font-style: italic; }
/* Changed rows: tint + colored before/after so edits jump out. */
.audit-changes-grid .audit-row-changed { background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, transparent); }
.audit-changes-grid .audit-field.changed { font-weight: 600; }
.audit-changes-grid .audit-old.changed { color: var(--bs-danger, #dc3545); text-decoration: line-through; }
.audit-changes-grid .audit-new.changed { color: var(--bs-success, #198754); }