/* ============================================================================
   Redesign of the Table / Attribute windows (Admin.view.main.TableWindow and
   Admin.view.main.AttributeWindow) — see TabDesign/README.md for the spec.

   All accent colors are driven by CSS custom properties: TableWindow uses the
   teal ramp of the Xplain Data design system, AttributeWindow overrides the
   accent variables with the red (--red-500 #DC2A48) ramp.
   ============================================================================ */

body.xadmintool .x-window.table-window {
    /* ---- design tokens (from TabDesign/tokens/colors.css) ---- */
    --tw-white: #FFFFFF;
    --tw-slate-50: #F8F9FA;
    --tw-slate-100: #F2F4F6;
    --tw-slate-200: #E7EAED;
    --tw-slate-300: #D2D7DC;
    --tw-slate-400: #B4BCC4;
    --tw-slate-500: #97A2AD;
    --tw-slate-600: #7E8B99;
    --tw-slate-700: #55606C;
    --tw-slate-800: #3C454F;
    --tw-slate-900: #2A3138;
    --tw-plum-500: #644162;

    /* ---- accent ramp: teal for TableWindow ---- */
    --tw-accent-50: #F1FBFA;
    --tw-accent-100: #E4F6F5;
    --tw-accent-200: #C0EAE7;
    --tw-accent-400: #68CCC6;
    --tw-accent-500: #589999;
    --tw-accent-700: #3F7373;
    --tw-header-grad-top: #FBFDFD;
    --tw-focus-ring: rgba(88, 153, 153, .55);

    /* ---- typography ---- */
    --tw-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tw-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* accent ramp: red for AttributeWindow (derived from --red-500 #DC2A48) */
body.xadmintool .x-window.table-window.xattribute-window {
    --tw-accent-50: #FDF3F5;
    --tw-accent-100: #FBE4E9;
    --tw-accent-200: #F7CBD3;
    --tw-accent-400: #EA6C83;
    --tw-accent-500: #DC2A48;
    --tw-accent-700: #A82039;
    --tw-header-grad-top: #FDFBFC;
    --tw-focus-ring: rgba(220, 42, 72, .45);
}

/* ----------------------------------------------------------------------------
   Window frame
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window {
    font-family: var(--tw-font-body);
    background: var(--tw-white);
    border: 1px solid var(--tw-slate-200) !important;
    border-radius: 14px;
    box-shadow: 16px 16px 22px #a9a9a9;
    overflow: hidden;
}
body.xadmintool .x-window.table-window .x-window-body {
    background: var(--tw-white);
    border: 0 !important;
    /* the older "glass" design (packages/local/xplain-new/sass/etc/Main.scss)
       rendered the body as a separate floating card — reset its own frame so
       body and header form one single card again */
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   1.1 Title bar
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window .x-window-header {
    background: var(--tw-white) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tw-slate-200) !important;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    /* the "glass" design detached the header from the body with a 4px margin
       plus a drop shadow — that produced the visible gap below the title bar */
    margin: 0 !important;
    box-shadow: none !important;
}
body.xadmintool .x-window.table-window .x-window-header .x-title-text {
    font-family: var(--tw-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tw-slate-900);
}

/* status pill — read-only indicator of the window mode (TABLE | ATTRIBUTE) */
body.xadmintool .x-window.table-window .xwinStatusPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tw-accent-50);
    border: 1px solid var(--tw-accent-200);
    color: var(--tw-accent-700);
    font-family: var(--tw-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
    margin: 0 6px;
    cursor: default;
}
body.xadmintool .x-window.table-window .xwinStatusPill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--tw-accent-500);
    flex-shrink: 0;
}

/* ============================================================================
   Minimized window chip — see design_handoff_minimized_windows/README.md
   (variant 1d "reduziert, Punkt vorne").

   A minimized window is the collapsed Ext window: only its header is visible,
   and the header is styled into a compact pill carrying the type dot, the
   window name and a restore button that appears on hover / keyboard focus.
   The dot color follows the window's own accent ramp (teal for TableWindow,
   red for AttributeWindow), which is the codebase equivalent of the handoff's
   green / red type marker.
   Keep Admin.util.Constants.WIN_MINIMIZED_HEIGHT in sync with the chip height
   below — it is used to stack the rows of minimized windows.
   ============================================================================ */

body.xadmintool .x-window.table-window.xwinMinimized {
    border-radius: 999px;
    border: 1px solid #E7ECF0 !important;
    box-shadow: 0 4px 10px rgba(42, 49, 56, .05);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.xadmintool .x-window.table-window.xwinMinimized:hover,
body.xadmintool .x-window.table-window.xwinMinimized:focus-within {
    border-color: #C9D3DA !important;
    box-shadow: 0 6px 16px rgba(42, 49, 56, .09);
}
body.xadmintool .x-window.table-window.xwinMinimized.x-window-active {
    box-shadow: 0 3px 8px rgba(42, 49, 56, .10);
}

/* the header IS the chip: one flat 34px row, no bottom border, fully rounded */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header {
    height: 34px;
    min-height: 34px;
    /* no padding at all: both insets of the chip are set on the children instead
       (margin-left on the title, right on the restore button), so that they are
       measured from the chip's own edges and not from a shifted padding box */
    padding: 0;
    border: 0 !important;
    border-radius: 999px;
    background: #FFFFFF !important;
    cursor: pointer;
}

/* the type marker: the only colored element of the chip. Rendered in front of
   the label, hence as a ::before of the title - the status pill itself is hidden
   while minimized (through Ext, see prepareMinimizedChip(): Ext lays the header
   out with absolute positions and would keep reserving space for an element that
   is only hidden by CSS). */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-title-text::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    /* both insets of the dot are set here: Ext positions the title container
       absolutely and overrides a margin set on it, but the dot is a normal inline
       box inside the label and keeps its margins */
    margin-left: 14px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--tw-accent-500);
    vertical-align: middle;
    flex: 0 0 auto;
}

/* the label */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-title-text {
    /* font-family and color have to win against the global
       "body .x-title-text { font-family: Inter !important }" and
       "body.xadmintool .x-window-header .x-title-text { color: #171a26 !important }"
       of the compiled app stylesheet (resources/admin-all_1.css) */
    font-family: var(--tw-font-body) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.005em;
    color: #3B454E !important;
    /* the label is limited by the fixed title width above (119px minus the 30px the
       dot and its margins take), the design's own 180px cap is wider than the chip */
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* All chips share one width (Admin.util.Constants.WIN_MINIMIZED_WIDTH = 160), so
   the title gets a fixed width as well instead of the one Ext computes:
   160 - 22 restore button - 9 gap - 8 right inset - 2 border = 119px.
   table-layout: fixed makes the label ellipsize inside that width - the title is
   a table / table-cell pair in Ext, and an auto table would just grow instead. */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-title {
    width: 119px !important;
    table-layout: fixed;
    padding: 0;
    margin: 0;
}

/* the restore button: the window's own minimize tool, re-labelled while the
   window is minimized (Admin.view.main.TableWindowController#onMinimize adds
   the xwinChipRestore class). Hidden until the chip is hovered or focused. */
/* note: the remaining tools (close, ...) are hidden by
   Admin.view.main.TableWindowController#prepareMinimizedChip via setVisible(false),
   NOT by CSS - a tool hidden by CSS alone still occupies width in Ext's header
   layout calculation, which would truncate the label. */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-tool.xwinChipRestore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    /* Ext positions the header's children absolutely and computes their left offset
       in its own layout pass - a value that can be stale for a tool whose size
       changed while the window was being collapsed, which cut the button in half.
       Pinning it to the right edge keeps it fully inside the chip in any case. */
    right: 8px !important;
    left: auto !important;
    margin: 0 0 0 9px;
    padding: 0;
    border-radius: 999px;
    background: #EEF2F5;
    opacity: 0;
    transform: scale(.85);
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
body.xadmintool .x-window.table-window.xwinMinimized:hover .x-window-header .x-tool.xwinChipRestore,
body.xadmintool .x-window.table-window.xwinMinimized:focus-within .x-window-header .x-tool.xwinChipRestore {
    opacity: 1;
    transform: scale(1);
}
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-tool.xwinChipRestore:hover {
    background: #E1E7EC;
}
/* replace the tool's own glyph by the restore icon (two diagonal arrows
   pointing out of opposite corners, 12px, stroke 1.7, round caps) */
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-tool.xwinChipRestore .x-tool-tool-el {
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 0 !important;
}
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-tool.xwinChipRestore .x-tool-tool-el::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #4E5B67;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 8.5v3.5h3.5M12 5.5V2H8.5M12 2 7.5 6.5M2 12l4.5-4.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 8.5v3.5h3.5M12 5.5V2H8.5M12 2 7.5 6.5M2 12l4.5-4.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

/* keyboard focus ring on the chip */
body.xadmintool .x-window.table-window.xwinMinimized:focus-visible,
body.xadmintool .x-window.table-window.xwinMinimized .x-window-header .x-tool.xwinChipRestore:focus-visible {
    outline: 3px solid var(--tw-focus-ring);
    outline-offset: 2px;
}

/* window control buttons (restore / maximize) and tools (minimize, close) */
body.xadmintool .x-window.table-window .x-window-header a.xplainWindowIcon {
    background: transparent;
    border: 0;
    border-radius: 7px;
    transition: background-color .15s ease;
}
body.xadmintool .x-window.table-window .x-window-header a.xplainWindowIcon:hover {
    background: var(--tw-slate-100);
}
body.xadmintool .x-window.table-window .x-window-header a.xplainWindowIcon .x-btn-icon-el {
    color: var(--tw-slate-500);
    font-size: 15px;
}
body.xadmintool .x-window.table-window .x-window-header a.xplainWindowIcon:hover .x-btn-icon-el {
    color: var(--tw-slate-800);
}
body.xadmintool .x-window.table-window .x-window-header .x-tool {
    border-radius: 7px;
    transition: background-color .15s ease;
}
body.xadmintool .x-window.table-window .x-window-header .x-tool:hover {
    background: var(--tw-slate-100);
}
body.xadmintool .x-window.table-window .x-window-header .x-tool-tool-el {
    color: var(--tw-slate-500);
    background-color: transparent;
}
body.xadmintool .x-window.table-window .x-window-header .x-tool:hover .x-tool-tool-el {
    color: var(--tw-slate-800);
}

/* ----------------------------------------------------------------------------
   1.1.1 "CSV settings" button + CSV info bar (only shown in DummyTableWindows
         that depict a CSV file)
   ---------------------------------------------------------------------------- */
/* !important is needed here: admin-all.css resets the background and the border of
   ALL buttons within a window header (body.xadmintool .x-window-header .x-btn) */
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn {
    background: var(--tw-white) !important;
    border: 1px solid var(--tw-slate-300) !important;
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0 6px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn:hover {
    background: var(--tw-accent-50) !important;
    border-color: var(--tw-accent-400) !important;
}
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn .x-btn-inner {
    font-family: var(--tw-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tw-slate-700) !important;
}
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn .x-btn-icon-el {
    color: var(--tw-slate-500) !important;
    font-size: 13px;
}
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn:hover .x-btn-inner,
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn:hover .x-btn-icon-el {
    color: var(--tw-accent-700) !important;
}
body.xadmintool .x-window.table-window .x-window-header a.x-btn.xwinCsvSettingsBtn.x-btn-focus {
    box-shadow: 0 0 0 3px var(--tw-focus-ring);
}

body.xadmintool .x-window.table-window .xwinCsvInfoBar {
    background: var(--tw-slate-50);
    /* !important: admin-all.css resets the bottom border of all docked items (.x-docked-top) */
    border-bottom: 1px solid var(--tw-slate-200) !important;
    padding: 9px 16px;
}
body.xadmintool .x-window.table-window .xwinCsvInfoBarInner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
}
body.xadmintool .x-window.table-window .xwinCsvInfoItem {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
body.xadmintool .x-window.table-window .xwinCsvInfoKey {
    font-family: var(--tw-font-body);
    font-size: 12px;
    color: var(--tw-slate-600);
}
body.xadmintool .x-window.table-window .xwinCsvInfoValue {
    font-family: var(--tw-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tw-slate-900);
}

/* ----------------------------------------------------------------------------
   1.2 Toolbar
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window .x-toolbar.xwinToolbar {
    background: var(--tw-slate-50) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tw-slate-200) !important;
    padding: 10px 16px;
}

/* default toolbar buttons ("View As...", "Add To Tree", ...) */
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn {
    background: var(--tw-white);
    border: 1px solid var(--tw-slate-300);
    border-radius: 8px;
    padding: 5px 10px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn .x-btn-inner {
    font-family: var(--tw-font-body);
    font-size: 12.5px;
    color: var(--tw-slate-700);
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn .x-btn-icon-el {
    color: var(--tw-slate-500);
    font-size: 14px;
    transition: color .15s ease;
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn:hover {
    background: var(--tw-white);
    border-color: var(--tw-accent-400);
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn:hover .x-btn-inner,
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn:hover .x-btn-icon-el {
    color: var(--tw-accent-700);
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn.x-btn-focus {
    box-shadow: 0 0 0 3px var(--tw-focus-ring);
}

/* icon-only buttons (help / refresh / more) */
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn.xwinIconBtn {
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
    padding: 5px 6px;
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn.xwinIconBtn:hover {
    background: var(--tw-slate-200);
    border-color: transparent;
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn.xwinIconBtn .x-btn-icon-el {
    font-size: 15px;
    color: var(--tw-slate-500);
}
body.xadmintool .x-window.table-window .xwinToolbar a.x-btn.xwinIconBtn:hover .x-btn-icon-el {
    color: var(--tw-slate-800);
}

/* offline badge (only rendered while the client is offline) */
body.xadmintool .x-window.table-window .offline-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FDECEF;
    border: 1px solid #F7CBD3;
    color: #DC2A48 !important;
    font-family: var(--tw-font-body);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.xadmintool .x-window.table-window .offline-hint .fa {
    font-size: 13px;
    color: #DC2A48;
}

/* "New / Hidden Columns" pill (and the hierarchy hint in AttributeWindows) */
body.xadmintool .x-window.table-window .hiddenColsInfo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tw-accent-50);
    border: 1px solid var(--tw-accent-200);
    border-radius: 8px;
    padding: 5px 11px;
    font-family: var(--tw-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tw-accent-700) !important;
    white-space: nowrap;
    transition: background-color .15s ease;
}
body.xadmintool .x-window.table-window .hiddenColsInfo:hover {
    background: var(--tw-accent-100);
}
body.xadmintool .x-window.table-window .hiddenColsInfo::before {
    font-size: 14px;
}

/* ----------------------------------------------------------------------------
   1.4 Column header (the core of the redesign): three stacked levels —
       source name (read-only) / Xplain name (text input) / data type (button)
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window .x-grid-header-ct {
    background: transparent !important;
    border: 0 !important;
}
body.xadmintool .x-window.table-window .x-column-header {
    background: linear-gradient(180deg, var(--tw-header-grad-top) 0%, var(--tw-accent-50) 100%) !important;
    border-bottom: 1px solid var(--tw-accent-200) !important;
    border-right: 1px solid var(--tw-slate-200) !important;
}
body.xadmintool .x-window.table-window .x-column-header-over,
body.xadmintool .x-window.table-window .x-column-header-open {
    background: linear-gradient(180deg, var(--tw-header-grad-top) 0%, var(--tw-accent-100) 100%) !important;
}
body.xadmintool .x-window.table-window .x-column-header-inner {
    padding: 9px 10px 10px;
}

/* level 1 — source attribute name (read-only) */
body.xadmintool .x-window.table-window .x-column-header-text {
    font-family: var(--tw-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tw-slate-500);
    min-height: 16px;
}
body.xadmintool .x-window.table-window .x-column-header .dbKeyElem {
    color: var(--tw-plum-500);
    font-size: 12px;
}
body.xadmintool .x-window.table-window .x-column-header .dbForeignKeyElem {
    font-size: 12px;
}
/* the column menu trigger should not stand out against the teal wash */
body.xadmintool .x-window.table-window .x-column-header-trigger {
    background-color: transparent !important;
}

/* level 2 — Xplain name (text input) */
body.xadmintool .x-window.table-window .xtablenamefield {
    margin: 6px 0 0 0 !important;
}
body.xadmintool .x-window.table-window .xtablenamefield input {
    background: var(--tw-white);
    border: 1px solid var(--tw-slate-300);
    border-radius: 7px;
    padding: 5px 8px;
    height: auto;
    font-family: var(--tw-font-body);
    font-size: 12.5px !important;
    font-weight: 600;
    color: var(--tw-slate-900);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.table-window .xtablenamefield input:hover {
    border-color: var(--tw-slate-400);
}
body.xadmintool .x-window.table-window .xtablenamefield input:focus {
    border-color: var(--tw-accent-500);
    box-shadow: 0 0 0 3px var(--tw-focus-ring);
}

/* level 3 — data type (menu button, styled like a select).
   The lighter border vs. the name input is deliberate: the name is the
   primary edit affordance, the type is secondary. */
body.xadmintool .x-window.table-window a.xtabletypebutton {
    background: var(--tw-white) !important;
    border: 1px solid var(--tw-slate-200) !important;
    border-radius: 7px;
    padding: 4px 8px;
    margin: 6px 0 0 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.table-window a.xtabletypebutton .x-btn-inner {
    font-family: var(--tw-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tw-slate-700);
    text-align: left;
}
body.xadmintool .x-window.table-window a.xtabletypebutton:hover {
    border-color: var(--tw-accent-400) !important;
}
body.xadmintool .x-window.table-window a.xtabletypebutton.x-btn-focus {
    border-color: var(--tw-accent-500) !important;
    box-shadow: 0 0 0 3px var(--tw-focus-ring);
}

/* ----------------------------------------------------------------------------
   1.5 Data cells
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window .x-grid-item {
    background: var(--tw-white);
    color: var(--tw-slate-700);
}
body.xadmintool .x-window.table-window .x-grid-item-alt {
    background: var(--tw-slate-50);
}
body.xadmintool .x-window.table-window .x-grid-item-over {
    background: var(--tw-slate-100);
}
body.xadmintool .x-window.table-window .x-grid-item-selected {
    background: var(--tw-accent-100) !important;
}
body.xadmintool .x-window.table-window .x-grid-cell {
    border-bottom: 1px solid var(--tw-slate-100);
    border-right: 0;
}
body.xadmintool .x-window.table-window .x-grid-cell-inner {
    font-family: var(--tw-font-body);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--tw-slate-700);
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* numeric columns use the mono face (tdCls set by TableWindowController) */
body.xadmintool .x-window.table-window .x-grid-cell.twCellNum .x-grid-cell-inner {
    font-family: var(--tw-font-mono);
    font-size: 11.5px;
    color: var(--tw-slate-800);
}

/* custom scrollbars inside the grid */
body.xadmintool .x-window.table-window .x-grid-view::-webkit-scrollbar,
body.xadmintool .x-window.table-window .x-panel-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
}
body.xadmintool .x-window.table-window .x-grid-view::-webkit-scrollbar-thumb,
body.xadmintool .x-window.table-window .x-panel-body::-webkit-scrollbar-thumb {
    background: #C7D0D8;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
body.xadmintool .x-window.table-window .x-grid-view::-webkit-scrollbar-track,
body.xadmintool .x-window.table-window .x-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ----------------------------------------------------------------------------
   1.6 Status bar
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.table-window .x-toolbar.xwinStatusBar {
    background: var(--tw-slate-50) !important;
    border: 0 !important;
    border-top: 1px solid var(--tw-slate-200) !important;
    padding: 9px 16px;
}
body.xadmintool .x-window.table-window .xwinStatusBar .x-component {
    font-family: var(--tw-font-body);
    font-size: 12px;
    color: var(--tw-slate-600);
}
body.xadmintool .x-window.table-window .xwinStatusBar .xwinStatusDivider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--tw-slate-300);
    vertical-align: middle;
    margin: 0 10px;
}
body.xadmintool .x-window.table-window .xwinStatusBar .xwinStatusSchema {
    color: var(--tw-accent-700);
    font-weight: 600;
}
body.xadmintool .x-window.table-window .xwinStatusBar .xwinStatusSchema .fa {
    font-size: 14px;
}

/* ----------------------------------------------------------------------------
   DummyTableWindow: "Analysis Data" / "Catalog Data" buttons.
   Analysis Data creates an XTable (teal, like the TableWindow accent),
   Catalog Data creates an XAttribute (red, like the AttributeWindow accent).
   ---------------------------------------------------------------------------- */
body.xadmintool a.tableTypeButton span {
    border-radius: 8px;
    transition: background-color .15s ease;
}
body.xadmintool a.tableTypeButton.tableTypeButtonAnalysis span {
    background: #589999 !important;   /* teal-500 */
}
body.xadmintool a.tableTypeButton.tableTypeButtonAnalysis:hover span {
    background: #4A8686 !important;   /* teal-600 */
}
body.xadmintool a.tableTypeButton.tableTypeButtonCatalog span {
    background: #DC2A48 !important;   /* red-500 */
}
body.xadmintool a.tableTypeButton.tableTypeButtonCatalog:hover span {
    background: #C02540 !important;   /* darker red for hover */
}