/* ============================================================================
   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;
}

/* ----------------------------------------------------------------------------
   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;
}
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 windows (bottom strip): drop the "TABLE" / "ATTRIBUTE" label,
   keep only the small pill with the colored dot */
body.xadmintool .x-window.table-window.xwinMinimized .xwinStatusPill {
    font-size: 0;
    gap: 0;
    padding: 4px;
}

/* 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.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 */
}