/* ============================================
   Syncfusion and Tabulator follow the look (plan 10, ~/.claude/plans/new-look/).
   Scoped to every look except Classic: Classic keeps each library's own Bootstrap theme untouched.
   Syncfusion is only the Office editors, so this repaints colours,
   corners and fonts and leaves their structure alone.
   ============================================ */

/* --- Syncfusion (bootstrap5.css is literal colours, so only the font and the primary buttons) --- */
:root[data-look]:not([data-look="classic"]) :is(.e-control, .e-css) {
    font-family: var(--opdms-font);
}
:root[data-look]:not([data-look="classic"]) .e-btn.e-primary,
:root[data-look]:not([data-look="classic"]) .e-css.e-btn.e-primary {
    background-color: var(--opdms-primary);
    border-color: var(--opdms-primary);
    color: var(--opdms-on-primary);
    border-radius: var(--opdms-radius-btn);
}

/* --- Tabulator (tabulator_bootstrap5 stays the base; colours and header style come from the tokens) --- */
:root[data-look]:not([data-look="classic"]) .tabulator {
    border-color: var(--opdms-border);
    border-radius: var(--opdms-radius-card);
    font-size: inherit;
    background-color: var(--opdms-surface);
}
:root[data-look]:not([data-look="classic"]) .tabulator .tabulator-header,
:root[data-look]:not([data-look="classic"]) .tabulator .tabulator-header .tabulator-col {
    background-color: var(--opdms-th-bg);
    color: var(--opdms-th-color);
    border-color: var(--opdms-border);
}
:root[data-look]:not([data-look="classic"]) .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: var(--opdms-th-size);
    text-transform: var(--opdms-th-case);
    letter-spacing: var(--opdms-th-track);
    font-weight: var(--opdms-th-weight);
}
:root[data-look]:not([data-look="classic"]) .tabulator .tabulator-tableholder .tabulator-table {
    background-color: var(--opdms-surface);
    color: var(--opdms-text);
}
:root[data-look]:not([data-look="classic"]) .tabulator-row {
    background-color: var(--opdms-surface);
}
:root[data-look]:not([data-look="classic"]) .tabulator-row.tabulator-row-even {
    background-color: var(--opdms-subtle);
}
:root[data-look]:not([data-look="classic"]) .tabulator-row .tabulator-cell {
    border-color: var(--opdms-border);
}
:root[data-look]:not([data-look="classic"]) .tabulator-row.tabulator-selectable:hover {
    background-color: var(--opdms-fill);
}
:root[data-look]:not([data-look="classic"]) .tabulator-row.tabulator-selected,
:root[data-look]:not([data-look="classic"]) .tabulator-row.tabulator-selected:hover {
    background-color: var(--opdms-primary-bg);
}
:root[data-look]:not([data-look="classic"]) .tabulator-footer {
    background-color: var(--opdms-subtle);
    border-color: var(--opdms-border);
    color: var(--opdms-text-secondary);
}