/* ============================================================
   robotack-datatable-theme.css — house skin layer.
   Loaded LAST on datatable pages, after:
     base-tokens.css (house design tokens; or the project's full design system)
     bootstrap(.rtl).min.css (mechanics for datatable dialogs)
     datatables.min.css
     robotack-datatable-core.css (component mechanics)
   Responsibilities:
   1) Bridge the core CSS theme hooks (--adminuiux-*) to house tokens.
   2) Map Bootstrap variables/components onto the house design system.
   3) Re-assert house styles that Bootstrap's reboot/components clobber.
   4) Style the DataTable itself like the native .tbl tables.
   Dark mode rides on html.dark; the assets fragment mirrors it to
   html[data-bs-theme="dark"] so Bootstrap + core dark rules activate too.
   ============================================================ */

/* ---------- 1) Theme bridge for the core layer ---------- */
:root {
  --adminuiux-theme-1: var(--primary, #5840EF);
  --adminuiux-theme-1-rgb: 88, 64, 239;
  --adminuiux-theme-2: var(--accent-pink, #E46DCE);
  --adminuiux-theme-2-rgb: 228, 109, 206;
  --adminuiux-theme-accent-1: var(--sky, #315C9E);
  --adminuiux-theme-accent-1-rgb: 49, 92, 158;
}

/* ---------- 2) Bootstrap variable mapping ---------- */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  --bs-body-color: var(--ink, #222222);
  --bs-body-bg: var(--paper, #F5F7FC);
  --bs-primary: var(--primary, #5840EF);
  --bs-primary-rgb: 88, 64, 239;
  --bs-secondary-color: var(--ink-3, #706B7F);
  --bs-border-color: var(--line, #D8D9E7);
  --bs-border-radius: 11px;
  --bs-border-radius-sm: 9px;
  --bs-border-radius-lg: 14px;
  --bs-link-color: var(--primary-hover, #462DE6);
  --bs-link-hover-color: var(--primary-active, #321AD1);
  --bs-emphasis-color: var(--ink, #222222);
}
html.dark,
[data-bs-theme="dark"] {
  --bs-body-color: var(--ink, #F0EAE1);
  --bs-body-bg: var(--paper, #1C1712);
  --bs-border-color: var(--line, #3D342C);
  --bs-emphasis-color: var(--ink, #F0EAE1);
}

/* ---------- 3) Reboot protection: keep the admin shell intact ---------- */
body {
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif) !important;
  background: var(--page-gradient, linear-gradient(135deg, #FDE7F3 0%, #EAE9FF 50%, #DFFFEE 100%));
  color: var(--ink, #222222);
}

/* house buttons (admin.css) vs Bootstrap .btn — same class name, the
   skin loads last so these win and Bootstrap variant buttons inherit the
   house base look. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 11px;
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.2;
  border: 1px solid #D7D1F8;
  background: var(--secondary-action-bg, #F3F0FF);
  color: var(--primary-active, #321AD1);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: #BEB4F5; color: var(--primary-active, #321AD1); background: var(--secondary-action-hover, #E8E3FF); }
.btn:active { border-color: #A99DF1; background: #DDD7FF; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring, rgba(88,64,239,.18)); }
.btn.primary { background: var(--primary, #5840EF); color: #fff; border-color: var(--primary, #5840EF); box-shadow: 0 6px 14px rgba(var(--primary-rgb), .26); }
.btn.primary:hover { background: var(--primary-hover, #462DE6); color: #fff; border-color: var(--primary-hover, #462DE6); }
.btn.primary:active { background: var(--primary-active, #321AD1); color: #fff; border-color: var(--primary-active, #321AD1); }
.btn.dark, .btn.dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.gold, .btn.gold:hover { background: var(--gold); color: #3a2a10; border-color: var(--gold); }
.btn.danger { background: var(--card-bg, #fff); color: var(--rose); }
.btn.danger:hover { background: var(--rose-soft); border-color: var(--rose); }
html.dark .btn { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
html.dark .btn:hover { background: var(--paper-3); }
html.dark .btn.primary { background: var(--ember); border-color: var(--ember); color: #fff; }

/* Bootstrap variant buttons (generated by the datatable UI) → house tones */
.btn-primary, .btn-theme {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-theme:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-primary:active, .btn-theme:active { background: var(--primary-active) !important; border-color: var(--primary-active) !important; }
.btn-outline-primary { color: var(--ember-deep) !important; border-color: var(--ember) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary.active { background: var(--ember-soft) !important; color: var(--ember-deep) !important; }
.btn-outline-secondary { color: var(--ink-2) !important; border-color: var(--line) !important; background: transparent !important; }
.btn-outline-secondary:hover, .btn-outline-secondary.active { background: var(--paper-2) !important; color: var(--ink) !important; }
.btn-outline-danger { color: var(--rose) !important; border-color: var(--rose) !important; }
.btn-outline-danger:hover { background: var(--rose-soft) !important; color: var(--rose) !important; }
.btn-secondary { background: var(--paper-2) !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.btn-link { color: var(--ember-deep) !important; text-decoration: none; }
.btn-light { background: var(--paper-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }

/* house's design system styles a class named .modal (its own dialog card:
   white bg, 480px wide, border, 20px radius, shadow, overflow:hidden).
   Bootstrap's full-viewport overlay container shares that class name, so those
   card styles bleed onto it: the visual ones paint a giant white sheet, and the
   box ones (width/max-width/overflow) shrink the fixed overlay, pin it to the
   left (right side + close button pushed off-screen) and clip its scroll.
   Restore Bootstrap's overlay box — Bootstrap modals here always carry
   .fade / tabindex, legacy scrim modals don't. */
.modal.fade,
.modal[tabindex] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
}
html.dark .modal.fade,
html.dark .modal[tabindex] { background: transparent; }

/* Legacy house scrim modals must survive Bootstrap's .modal mechanics
   (display:none/position:fixed) on pages that load this bundle. */
.scrim > .modal {
  display: flex !important;
  position: relative !important;
  z-index: auto;
  width: auto;
  height: auto;
  overflow: visible;
}

/* ---------- 4) Bootstrap components in house clothes ---------- */
.modal-content {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  box-shadow: var(--shadow-3, 0 10px 70px rgba(33, 26, 21, .18));
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
}
.modal-header { border-bottom: 1px solid var(--line-2); padding: 16px 20px; }
.modal-footer { border-top: 1px solid var(--line-2); padding: 12px 20px; }
.modal-title {
  font-family: var(--font-disp, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.modal-backdrop { background-color: rgba(33, 26, 21, .45); }
html.dark .modal-content { background: var(--card); }

.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2, 0 4px 34px rgba(33, 26, 21, .10));
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  font-size: 13px;
  background: var(--card, #fff);
  color: var(--ink);
}
.dropdown-item { color: var(--ink-2); font-weight: 700; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--paper-2); color: var(--ink); }
.dropdown-item.active { background: var(--primary-soft); color: var(--primary-active); }

.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  background-color: var(--card, #fff);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 4px var(--ember-soft);
  background-color: var(--card, #fff);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-4); font-weight: 600; }
.form-label { font-size: 11.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.form-check-input:checked { background-color: var(--ember); border-color: var(--ember); }
.form-check-input:focus { border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); }
html.dark .form-control, html.dark .form-select { background-color: var(--paper-2); }

.badge { font-family: var(--font-text, 'Hanken Grotesk', sans-serif); font-weight: 800; letter-spacing: .04em; }
.alert { border-radius: 12px; font-weight: 600; }
.nav-tabs .nav-link { color: var(--ink-2); font-weight: 800; }
.nav-tabs .nav-link.active { color: var(--primary-active); border-bottom-color: var(--primary); }

/* ---------- 5) The DataTable itself → native .tbl look ---------- */
table.dataTable {
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  font-size: 13.5px;
  color: var(--ink);
  border-collapse: collapse;
}
table.dataTable thead th {
  text-align: start;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper);
  white-space: nowrap;
  /* Sticky within .adm-body.scroll-y — replaces the broken JS FixedHeader plugin
     which only listened to window scroll (never fires since body has overflow:hidden). */
  position: sticky;
  top: 0;
  z-index: 4;
}
table.dataTable tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  background: transparent;
}
table.dataTable tbody tr:hover td { background: var(--primary-soft); }
table.dataTable.dataTable tbody tr { background: transparent; }
html.dark table.dataTable thead th { background: var(--paper-2); }
html.dark table.dataTable tbody tr:hover td { background: var(--paper-2); }

/* DataTables 2.x chrome (length menu, info, paging, processing) */
div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 8px 12px;
  background: var(--card, #fff);
  color: var(--ink);
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  font-weight: 600;
  font-size: 13px;
  outline: none;
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 4px var(--ember-soft);
}
div.dt-container .dt-search label,
div.dt-container .dt-length label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
html.dark div.dt-container .dt-search input,
html.dark div.dt-container .dt-length select { background: var(--paper-2); }

/* Info + pagination footer row: its own row under the table */
div.dt-container .dt-layout-row:has(.dt-info),
div.dt-container .dt-layout-row:has(.dt-paging) {
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
  margin-top: 2px;
}
div.dt-container .dt-paging .dt-paging-button {
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--ink-2) !important;
  font-weight: 800;
  font-size: 12.5px;
  padding: 6px 11px;
  background: transparent;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled { opacity: .4; }
div.dt-container div.dt-processing > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* Row grouping header rows from the engine */
tr.robotack-group-row td {
  background: var(--paper-2) !important;
  font-weight: 800;
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: .04em;
}

/* Anomaly highlighted cells — rose family instead of Robocast red */
td.robotack-cell-anomaly {
  background: var(--rose-soft) !important;
  box-shadow: inset 0 0 0 1px var(--rose);
  border-radius: 6px;
}

/* Dropdown value pills rendered in cells: keep house tag geometry */
.robotack-dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Toolbar block generated above the table */
.robotack-toolbar .btn, .robotack-dt-toolbar .btn { font-size: 12.5px; }

/* ---------- 6) Typography inside datatable dialogs ---------- */
.robotack-viz-modal, .robotack-tools-modal, .robotack-adv-modal {
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
}

/* ---------- 7) RTL niceties (page sets dir="rtl" for Arabic) ---------- */
[dir="rtl"] table.dataTable thead th { text-align: right; }
[dir="rtl"] .dropdown-menu { text-align: right; }

/* ---------- 8) Page-level helpers for datatable pages ---------- */
.rc-dt-surface { overflow: visible; }
.rc-dt-surface .dt-container { width: 100%; }
.rc-dt-ltr { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }

/* ---------- 9) Overflow mode, in house colours ----------
   The core layer owns the mechanics (wrapper, scrolling, edge geometry);
   this only restates the colours in design-system tokens so the fades and the
   mode control track the theme, including dark mode. */
.robotack-table-overflow::before {
  background: linear-gradient(to right, color-mix(in srgb, var(--ink, #222222) 16%, transparent), transparent);
}
.robotack-table-overflow::after {
  background: linear-gradient(to left, color-mix(in srgb, var(--ink, #222222) 16%, transparent), transparent);
}
[dir="rtl"] .robotack-table-overflow::before {
  background: linear-gradient(to left, color-mix(in srgb, var(--ink, #222222) 16%, transparent), transparent);
}
[dir="rtl"] .robotack-table-overflow::after {
  background: linear-gradient(to right, color-mix(in srgb, var(--ink, #222222) 16%, transparent), transparent);
}

.robotack-table-overflow.is-scroll > .robotack-table-overflow-scroll {
  scrollbar-color: color-mix(in srgb, var(--primary, #5840EF) 42%, var(--line, #D8D9E7)) transparent;
}

.robotack-overflow-seg {
  border-color: var(--line, #D8D9E7);
  background: var(--paper, #F5F7FC);
}
.robotack-overflow-seg-btn { color: var(--ink-2, #5B576A); }
.robotack-overflow-seg-btn:hover:not(.is-active) {
  background: var(--secondary-action-bg, #F3F0FF);
  color: var(--ink, #222222);
}
.robotack-overflow-seg-btn.is-active {
  background: var(--primary, #5840EF);
  color: #fff;
}
.robotack-overflow-hint { color: var(--ink-3, #706B7F); opacity: 1; }

html.dark .robotack-overflow-seg { background: var(--paper-2, #211F31); border-color: var(--line, #3B3850); }
html.dark .robotack-overflow-seg-btn:hover:not(.is-active) { background: var(--paper-3, #29263C); }