/* ============================================================================
   Database Health dashboard — global styles (page + DbHealthTable component)
   Dark HUD theme, cyan accents.
   ============================================================================ */

.dbhealth { color: #e6edf3; }

/* ── Header ───────────────────────────────────────────────────────────────*/
.dbh-header-ico {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #071019;
    background: linear-gradient(135deg, #22d3ee, #0ea5e9);
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.45);
}
.dbh-title {
    font-weight: 800; letter-spacing: 0.5px;
    background: linear-gradient(90deg, #e6f9ff, #7fd7ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dbh-subtitle { color: #8fb6c9; font-size: 0.85rem; }
.dbh-updated { color: #7fa7bb; font-size: 0.78rem; }

.dbh-refresh {
    background: linear-gradient(135deg, #22d3ee, #0ea5e9); color: #04121b;
    font-weight: 700; border: none; border-radius: 10px; padding: 0.5rem 1.25rem;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35);
}
.dbh-refresh:hover:not(:disabled) { filter: brightness(1.08); color: #04121b; }
.dbh-refresh:disabled { opacity: 0.6; }

/* ── KPI tiles ────────────────────────────────────────────────────────────*/
.dbh-tile {
    position: relative; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    background: rgba(13, 24, 38, 0.72);
    border: 1px solid rgba(0, 200, 255, 0.16);
    border-left: 4px solid var(--accent, #38bdf8);
    border-radius: 14px; padding: 1rem 1.15rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
/* KPI-tile top row: label + compact headline count */
.dbh-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dbh-tile-count { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Top-3 mini spark-bar chart inside a KPI tile (bars take the tile's --accent) */
.tile-spark { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.tile-spark-row { display: grid; grid-template-columns: 82px 1fr 42px; align-items: center; gap: 7px; }
.tile-spark-name { font-family: 'JetBrains Mono','Share Tech Mono',monospace; font-size: 0.62rem; color: #9fc9db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-spark-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.tile-spark-bar > span {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
    transform-origin: left; animation: holoGrow 0.7s cubic-bezier(0.19,1,0.22,1) both;
}
.tile-spark-val { font-family: 'JetBrains Mono','Share Tech Mono',monospace; font-size: 0.64rem; color: #dbeef7; text-align: right; font-variant-numeric: tabular-nums; }
.tile-spark-empty { font-size: 0.7rem; color: #6f97ab; text-align: center; padding: 12px 0; }

/* bars shimmer with a periodic light sweep */
.tile-spark-bar > span { position: relative; overflow: hidden; }
.tile-spark-bar > span::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg); animation: holoSheen 3.2s ease-in-out infinite;
}

/* ══ Holographic 3D cursor-tilt KPI tiles (JS: dbhealth-tiles.js) ══════════ */
.dbh-tile.tilt-3d {
    overflow: visible;                     /* let content parallax + glow escape the face */
    transform-style: preserve-3d;
    transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}
.dbh-tile.tilt-3d.is-tilting {
    box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 0 42px color-mix(in srgb, var(--accent) 50%, transparent);
    border-color: color-mix(in srgb, var(--accent) 75%, transparent);
    z-index: 5;
}
/* cursor-tracking specular glare */
.tile-glare {
    position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
    opacity: 0; transition: opacity 0.25s ease; z-index: 7; mix-blend-mode: screen;
    background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
                rgba(150,225,255,0.16), rgba(150,225,255,0.03) 28%, transparent 50%);
}
/* content lifts off the card face for parallax depth when tilting */
.dbh-tile.tilt-3d .dbh-tile-top   { transform: translateZ(30px); }
.dbh-tile.tilt-3d .dbh-tile-count { transform: translateZ(46px); }
.dbh-tile.tilt-3d .holo-gauge     { transform: translateZ(36px); }
.dbh-tile.tilt-3d .tile-spark     { transform: translateZ(22px); }
.dbh-tile.tilt-3d .dbh-tile-foot  { transform: translateZ(14px); }

.dbh-tile.gauge-tile { align-items: center; justify-content: center; text-align: center; gap: 6px; }
.dbh-tile.gauge-tile .dbh-tile-label { align-self: center; }
.gauge-tile .holo-gauge { width: 116px; height: 116px; }
.gauge-tile .gauge-pct { font-size: 1.5rem; }
.dbh-tile.tile-ok     { --accent: #22c55e; }
.dbh-tile.tile-warn   { --accent: #f59e0b; }
.dbh-tile.tile-danger { --accent: #ef4444; }
.dbh-tile.tile-info   { --accent: #38bdf8; }

/* Clickable KPI tiles → jump to their panel */
.dbh-tile-link { cursor: pointer; }
.dbh-tile-link:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: 3px; }
.dbh-tile-link::after {
    content: "\f107"; /* fa chevron-down */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 10px; right: 12px; z-index: 8;
    font-size: 0.72rem; color: var(--accent, #38bdf8);
    opacity: 0; transform: translateY(-3px); transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.dbh-tile-link:hover::after { opacity: 0.85; transform: translateY(0); }

/* Flash a panel when a tile scrolls the user to it */
@keyframes dbhJumpFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #38bdf8) 65%, transparent); }
    100% { box-shadow: 0 0 0 6px transparent; }
}
.dbh-jump-flash { animation: dbhJumpFlash 1s ease-out; border-radius: 14px; }

.dbh-tile-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.8px; color: #8fb6c9; }
.dbh-tile-value { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.1; margin-top: 0.25rem; }
.dbh-tile-value-sm { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbh-tile-unit { font-size: 1.1rem; color: #9fc9db; margin-left: 2px; }
.dbh-tile-foot { font-size: 0.76rem; color: #7fa7bb; margin-top: 0.35rem; }
.dbh-tile-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 0.5rem; overflow: hidden; }
.dbh-tile-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }

/* ── Cards ────────────────────────────────────────────────────────────────*/
.dbh-card {
    background: rgba(13, 24, 38, 0.72);
    border: 1px solid rgba(0, 200, 255, 0.16);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.dbh-card .card-header {
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.10), rgba(0, 200, 255, 0.02));
    border-bottom: 1px solid rgba(0, 200, 255, 0.18);
    padding: 0.7rem 1rem;
}
.dbh-panel-title { color: #dff2ff; font-weight: 600; letter-spacing: 0.3px; }
.dbh-card .card-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Filter box + panel controls ──────────────────────────────────────────*/
.dbh-filter { position: relative; display: flex; align-items: center; }
.dbh-filter-ico { position: absolute; left: 10px; color: #6f97ab; font-size: 0.78rem; pointer-events: none; }
.dbh-filter-input {
    width: 190px; padding-left: 30px; padding-right: 26px;
    background: rgba(0,0,0,0.32); color: #e6edf3;
    border: 1px solid rgba(0, 200, 255, 0.22); border-radius: 8px;
}
.dbh-filter-input::placeholder { color: #6f97ab; }
.dbh-filter-input:focus { background: rgba(0,0,0,0.4); border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.18); color: #fff; }
.dbh-filter-clear { position: absolute; right: 6px; background: none; border: none; color: #7fa7bb; padding: 2px 4px; }
.dbh-filter-clear:hover { color: #fff; }

.dbh-ctl { display: flex; align-items: center; gap: 6px; }
.dbh-ctl label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: #8fb6c9; margin: 0; }
.dbh-select {
    width: auto; min-width: 120px;
    background: rgba(0,0,0,0.32); color: #e6edf3; border: 1px solid rgba(0,200,255,0.22);
}
.dbh-adhoc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: #9fc9db; cursor: pointer; user-select: none; }
.dbh-adhoc-toggle input { accent-color: #22d3ee; }
.dbh-adhoc { color: #ffca7a !important; }   /* ad-hoc / inline SQL query rows */

/* ── Tables ───────────────────────────────────────────────────────────────*/
.dbh-table { color: #dfe9f2; margin-bottom: 0; }
.dbh-table thead th {
    background: rgba(255,255,255,0.03); color: #9fc9db;
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(0,200,255,0.2); white-space: nowrap; user-select: none;
}
.dbh-table thead th.dbh-sortable { cursor: pointer; }
.dbh-table thead th.dbh-sortable:hover { color: #d6f2ff; background: rgba(0,200,255,0.06); }
.dbh-sort-ico { font-size: 0.66rem; opacity: 0.35; margin-left: 4px; }
.dbh-table thead th.dbh-sortable:hover .dbh-sort-ico { opacity: 0.8; }
.dbh-table tbody td { border-color: rgba(255,255,255,0.05); vertical-align: middle; }
.dbh-table.table-hover tbody tr:hover { background: rgba(0,200,255,0.06); }

.dbh-clickable { cursor: pointer; }
.dbh-clickable:hover { background: rgba(34,211,238,0.10) !important; }

.dbh-mono { font-family: 'JetBrains Mono','Share Tech Mono','Consolas',monospace; font-size: 0.82rem; }
.dbh-hot  { color: #ff8a80 !important; font-weight: 700; }
.dbh-warn { color: #ffca7a !important; font-weight: 600; }
.dbh-link { color: #67e8f9; border-bottom: 1px dashed rgba(103,232,249,0.5); }
.dbh-clickable:hover .dbh-link { color: #a5f3fc; border-bottom-color: #a5f3fc; }
.dbh-code {
    font-size: 0.72rem; color: #8be9fd;
    white-space: normal; word-break: break-word;
    display: inline; vertical-align: middle; line-height: 1.45;
}

/* Copy-to-clipboard button inside a cell */
.dbh-cell-copy {
    float: right; margin-left: 8px;
    background: rgba(34,211,238,0.12); color: #a5f3fc;
    border: 1px solid rgba(34,211,238,0.3); border-radius: 6px;
    width: 26px; height: 24px; line-height: 1; font-size: 0.72rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.dbh-cell-copy:hover { background: rgba(34,211,238,0.24); color: #e6f9ff; }
.dbh-cell-copy .fa-check { color: #4ade80; }

/* ══════════════════════════════════════════════════════════════════════════
   HOLOGRAPHIC KIT — scanlines, sheen sweep, neon fills, radial gauge
   ══════════════════════════════════════════════════════════════════════════ */

/* Faint animated scanlines + a soft holo tint over a card */
.holo-surface { position: relative; }
.holo-surface::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background:
        repeating-linear-gradient(0deg, rgba(0,229,255,0.05) 0 1px, transparent 1px 4px),
        radial-gradient(120% 60% at 50% -10%, rgba(0,229,255,0.06), transparent 60%);
    mix-blend-mode: screen; opacity: 0.55;
    animation: holoScan 7s linear infinite;
    border-radius: 14px;
}
@keyframes holoScan { from { background-position: 0 0, 0 0; } to { background-position: 0 8px, 0 0; } }

/* Holographic ranked bar chart */
.holo-chart-body { padding: 0.9rem 1.15rem 1.15rem; position: relative; z-index: 2; }
.holo-row {
    display: grid; grid-template-columns: 220px 1fr 96px 66px;
    align-items: center; gap: 12px; padding: 4px 0;
}
.holo-row.no-badge { grid-template-columns: 220px 1fr 110px; }
.holo-label { font-size: 0.8rem; color: #cfe4f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holo-track {
    height: 22px; border-radius: 7px; position: relative; overflow: hidden;
    background: rgba(3, 18, 30, 0.6);
    box-shadow: inset 0 0 0 1px rgba(0,229,255,0.12), inset 0 0 10px rgba(0,0,0,0.5);
}
.holo-fill {
    position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 7px;
    background: linear-gradient(90deg, #0369a1, #22d3ee 55%, #a855f7);
    box-shadow: 0 0 10px rgba(34,211,238,0.55), inset 0 0 10px rgba(168,85,247,0.35);
    transform-origin: left center;
    animation: holoGrow 0.85s cubic-bezier(0.19,1,0.22,1) both;
    overflow: hidden;
}
.holo-fill::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg); animation: holoSheen 3s ease-in-out infinite;
}
.holo-fill.hot {
    background: linear-gradient(90deg, #b45309, #ef4444 55%, #ff5db1);
    box-shadow: 0 0 14px rgba(239,68,68,0.7), inset 0 0 10px rgba(255,93,177,0.4);
}
@keyframes holoGrow { from { transform: scaleX(0); opacity: 0.2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes holoSheen { 0% { left: -45%; } 55%, 100% { left: 130%; } }
.holo-value { text-align: right; font-size: 0.8rem; color: #dbeef7; font-family: 'JetBrains Mono','Share Tech Mono',monospace; font-variant-numeric: tabular-nums; }
.holo-badge { text-align: center; font-size: 0.72rem; font-weight: 700; color: #9fe8ff; background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.25); border-radius: 6px; padding: 2px 6px; }
.holo-badge.hot { color: #fff; background: rgba(239,68,68,0.85); border-color: rgba(239,68,68,0.9); box-shadow: 0 0 10px rgba(239,68,68,0.5); }

/* Holographic radial gauge (storage) */
.holo-gauge { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.holo-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.gauge-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 9; }
.gauge-arc { fill: none; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); animation: gaugeDraw 1.1s ease-out both; }
.gauge-arc.ok     { stroke: #22d3ee; color: #22d3ee; }
.gauge-arc.warn   { stroke: #fbbf24; color: #fbbf24; }
.gauge-arc.danger { stroke: #f87171; color: #f87171; }
.gauge-ticks line { stroke: rgba(0,229,255,0.25); stroke-width: 1; }
@keyframes gaugeDraw { from { stroke-dashoffset: var(--circ); } }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-pct { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 14px rgba(34,211,238,0.6); }
.gauge-pct.warn { text-shadow: 0 0 14px rgba(251,191,36,0.6); }
.gauge-pct.danger { text-shadow: 0 0 16px rgba(248,113,113,0.7); }
.gauge-sub { font-size: 0.68rem; color: #8fb6c9; margin-top: 3px; letter-spacing: 0.5px; }

/* ── Storage-footprint / index-bloat chart ────────────────────────────────*/
.bloat-legend { display: flex; gap: 14px; font-size: 0.74rem; color: #9fc9db; align-items: center; }
.bloat-legend span { display: inline-flex; align-items: center; }
.bloat-legend .sw { width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; display: inline-block; }
.sw-data  { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.sw-index { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sw-hot   { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 8px rgba(239,68,68,0.7); }

.bloat-body { padding: 1rem 1.25rem 1.25rem; }

.bloat-row {
    display: grid;
    grid-template-columns: 210px 1fr 84px 74px;
    align-items: center; gap: 14px;
    padding: 5px 0;
}
.bloat-row.is-worst { background: rgba(239,68,68,0.06); border-radius: 8px; }
.bloat-row.bloat-clickable { cursor: pointer; border-radius: 8px; transition: background 0.12s; }
.bloat-row.bloat-clickable:hover { background: rgba(34,211,238,0.10); }
.bloat-row.is-open { background: rgba(34,211,238,0.09); }
.bloat-caret { font-size: 0.7rem; color: #6f97ab; margin-right: 8px; transition: transform 0.25s ease, color 0.25s ease; }
.bloat-caret.open { transform: rotate(90deg); color: #22d3ee; }

/* Accordion drilldown — animates height via grid-template-rows 0fr -> 1fr */
.bloat-drill { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.bloat-drill.open { grid-template-rows: 1fr; }
.bloat-drill-inner { overflow: hidden; }
.bloat-drill-pad {
    padding: 10px 10px 14px 26px; margin: 2px 0 8px;
    border-left: 2px solid rgba(34,211,238,0.4);
    background: rgba(0,229,255,0.035); border-radius: 0 8px 8px 0;
    animation: drillFade 0.4s ease 0.05s both;
}
@keyframes drillFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Sci-fi CRT terminal — DROP-statement expander (per unused index) ──────*/
.term-btn {
    background: transparent; border: 1px solid rgba(255,176,84,0.45); color: #ffb454;
    border-radius: 5px; width: 24px; height: 22px; margin-left: 8px; font-size: 0.7rem;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    transition: all 0.15s;
}
.term-btn:hover, .term-btn.active { background: rgba(255,140,0,0.2); color: #ffe0b8; box-shadow: 0 0 9px rgba(255,140,0,0.5); }
.idx-term-active > td { background: rgba(255,176,84,0.05); }
.idx-term-row > td { padding: 2px 6px 10px !important; background: transparent !important; border: none !important; }

.scifi-term {
    position: relative; border-radius: 8px; overflow: hidden;
    background: radial-gradient(130% 120% at 50% -10%, #0c1712, #05090b 78%);
    border: 1px solid rgba(255,176,84,0.35);
    box-shadow: 0 0 20px rgba(255,140,0,0.18), inset 0 0 44px rgba(0,0,0,0.65);
    font-family: 'JetBrains Mono','Share Tech Mono','Consolas',monospace;
    animation: termIn 0.4s cubic-bezier(0.2,0.9,0.3,1) both;
}
@keyframes termIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.scifi-term::after {   /* moving scanlines */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px 3px);
    animation: scifiScan 7s linear infinite; opacity: 0.55;
}
@keyframes scifiScan { from { background-position: 0 0; } to { background-position: 0 90px; } }
.scifi-term::before {  /* CRT flicker + vignette */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.55));
    animation: scifiFlicker 4s steps(40) infinite;
}
@keyframes scifiFlicker { 0%,100% { opacity: 0.9; } 47% { opacity: 0.99; } 48% { opacity: 0.82; } 92% { opacity: 0.87; } }
.scifi-term-bar {
    position: relative; z-index: 4;
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px; border-bottom: 1px solid rgba(255,176,84,0.22);
    background: rgba(255,176,84,0.06); color: #ffcf8f; font-size: 0.66rem; letter-spacing: 1.5px;
}
.scifi-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.scifi-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff8c00; box-shadow: 0 0 6px #ff8c00; opacity: 0.85; }
.scifi-dots i:nth-child(2) { background: #ffc55c; box-shadow: 0 0 6px #ffc55c; }
.scifi-dots i:nth-child(3) { background: #66d9a8; box-shadow: 0 0 6px #66d9a8; }
.scifi-blink2 { animation: blink 1.1s steps(1) infinite; color: #ffb454; margin-left: 6px; }
.scifi-copy {
    background: rgba(255,140,0,0.14); color: #ffd9a8; border: 1px solid rgba(255,176,84,0.4);
    border-radius: 5px; font-size: 0.64rem; letter-spacing: 1px; padding: 2px 8px;
}
.scifi-copy:hover { background: rgba(255,140,0,0.3); color: #fff; }
.scifi-term-body { position: relative; z-index: 3; margin: 0; padding: 10px 12px; max-height: 220px; overflow: auto; font-size: 0.76rem; line-height: 1.55; }
.scifi-term-body .term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.comment { color: #5fbf8a; text-shadow: 0 0 4px rgba(95,191,138,0.4); opacity: 0.9; }
.term-line.cmd { color: #ffb454; text-shadow: 0 0 5px rgba(255,140,0,0.6); }
.scifi-cursor { display: inline-block; width: 8px; height: 14px; background: #ffb454; box-shadow: 0 0 7px #ff8c00; animation: blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Generic table inline expander (Top Queries definition terminal) ──────*/
.dbh-exp-caret { font-size: 0.7rem; color: #6f97ab; margin-right: 8px; transition: transform 0.25s ease, color 0.25s; }
.dbh-clickable:hover .dbh-exp-caret { color: #22d3ee; }
.dbh-exp-caret.open { transform: rotate(90deg); color: #22d3ee; }
.dbh-exp-row > td { padding: 2px 8px 12px !important; background: transparent !important; border: none !important; }
.dbh-exp-inner { animation: termIn 0.35s cubic-bezier(0.2,0.9,0.3,1) both; }
.scifi-term-body-tall { max-height: 360px; }
.scifi-obj { color: #ffd9a8; opacity: 0.8; margin-left: 8px; font-size: 0.62rem; letter-spacing: 0; }

/* ── 3D animated turd — flagged for optimisation 💩 ───────────────────────*/
.turd3d { display: inline-block; margin-left: 8px; vertical-align: middle; perspective: 70px; font-size: 1.45em; line-height: 1; }
.turd3d-spin {
    display: inline-block;
    animation: turdSpin 2.2s ease-in-out infinite, turdBob 1.3s ease-in-out infinite;
    transform-style: preserve-3d;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
}
/* 3D wobble (stays face-on and visible, unlike a full flip that goes edge-on) */
@keyframes turdSpin {
    0%   { transform: rotateY(-38deg) rotateX(8deg); }
    50%  { transform: rotateY(38deg)  rotateX(-5deg); }
    100% { transform: rotateY(-38deg) rotateX(8deg); }
}
@keyframes turdBob  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }

/* ── Fragmentation & space-recovery panel ─────────────────────────────────*/
.frag-body { padding: 0.9rem 1.15rem 1.1rem; position: relative; z-index: 2; }
.frag-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #cfe4f0; font-size: 0.85rem; margin-bottom: 10px; }
.frag-sep { color: #4a6572; }
.frag-legend { display: flex; gap: 14px; font-size: 0.72rem; color: #9fc9db; margin: 4px 0 10px; }
.frag-legend .sw { width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; display: inline-block; }
.frag-row { display: grid; grid-template-columns: 260px 1fr 156px 104px; align-items: center; gap: 12px; padding: 5px 0; }
.frag-name { min-width: 0; }
.frag-idx { font-size: 0.8rem; color: #dbeef7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frag-meta { font-size: 0.68rem; color: #7fa7bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frag-track { height: 22px; background: rgba(3,18,30,0.6); border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,229,255,0.1); }
.frag-bar { height: 100%; display: flex; border-radius: 7px; overflow: hidden; animation: holoGrow 0.8s cubic-bezier(0.19,1,0.22,1) both; transform-origin: left; }
.frag-used { background: linear-gradient(90deg, #075985, #22d3ee); box-shadow: inset 0 0 10px rgba(34,211,238,0.3); }
.frag-reclaim { background: linear-gradient(90deg, #b45309, #fbbf24); box-shadow: inset 0 0 10px rgba(251,191,36,0.3); }
.frag-figs { text-align: right; font-size: 0.76rem; color: #dbeef7; font-family: 'JetBrains Mono','Share Tech Mono',monospace; }
.frag-reclaim-txt { color: #fbbf24; font-size: 0.7rem; }
.rec-badge { text-align: center; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; padding: 3px 5px; }
.rec-badge.rebuild { color: #fff; background: rgba(239,68,68,0.85); box-shadow: 0 0 10px rgba(239,68,68,0.4); }
.rec-badge.reorganize { color: #04121b; background: rgba(251,191,36,0.9); }
.rec-badge.ok { color: #4ade80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); }
.rec-badge.monitor { color: #9fc9db; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.frag-term-wrap { margin: 4px 0 12px; }
.frag-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); line-height: 1.5; }

/* ── Skeleton loading placeholders ────────────────────────────────────────*/
.skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(0,229,255,0.14) 37%, rgba(255,255,255,0.05) 63%);
    background-size: 400% 100%; animation: skelShimmer 1.4s ease infinite; border-radius: 6px;
}
@keyframes skelShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-line { height: 12px; margin: 7px 0; }
.skel-bar { height: 22px; border-radius: 7px; margin: 6px 0; }
.skel-tile { height: 116px; border-radius: 14px; }
.skel-title { height: 16px; width: 200px; }
.skel-scan {
    display: flex; align-items: center; gap: 10px; color: #7fd7ff;
    font-family: 'Share Tech Mono', monospace; letter-spacing: 2px; font-size: 0.82rem;
    text-transform: uppercase; margin: 2px 0 14px;
}
.skel-scan .dot { width: 9px; height: 9px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: skelPulse 1.1s ease-in-out infinite; }
@keyframes skelPulse { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.skel-scan .ell::after { content: ''; animation: skelEll 1.6s steps(4) infinite; }
@keyframes skelEll { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* Segmented Used/Unused/All filter (drilldown modal) */
.dbh-seg { display: inline-flex; border: 1px solid rgba(0,229,255,0.25); border-radius: 8px; overflow: hidden; }
.dbh-seg button {
    background: transparent; color: #9fc9db; border: none; padding: 4px 12px;
    font-size: 0.78rem; font-weight: 600; border-right: 1px solid rgba(0,229,255,0.15);
}
.dbh-seg button:last-child { border-right: none; }
.dbh-seg button:hover { background: rgba(0,229,255,0.08); color: #e6f9ff; }
.dbh-seg button.active { background: rgba(34,211,238,0.85); color: #04121b; }

/* Used / unused status pills */
.dbh-pill { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 5px; padding: 2px 8px; }
.dbh-pill.used   { color: #4ade80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.35); }
.dbh-pill.unused { color: #fca5a5; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.4); }

.dbh-modal.dbh-modal-wide { width: min(1120px, 97vw); }

.bloat-name {
    font-size: 0.8rem; color: #cfe4f0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.worst-tag {
    font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.5px;
    background: #ef4444; color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}

.bloat-track {
    height: 24px; background: rgba(255,255,255,0.05);
    border-radius: 7px; overflow: hidden;
}
.bloat-bar {
    height: 100%; display: flex; border-radius: 7px; overflow: hidden; position: relative;
    transform-origin: left center;
    animation: bloatGrow 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.bloat-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg); animation: holoSheen 3.4s ease-in-out infinite;
}
@keyframes bloatGrow { from { transform: scaleX(0); opacity: 0.2; } to { transform: scaleX(1); opacity: 1; } }

.seg { height: 100%; }
.seg-data  { background: linear-gradient(90deg, #075985, #22d3ee); box-shadow: inset 0 0 12px rgba(34,211,238,0.35); }
.seg-index { background: linear-gradient(90deg, #b45309, #fbbf24); box-shadow: inset 0 0 12px rgba(251,191,36,0.3); }
.seg-index.seg-hot {
    background: linear-gradient(90deg, #b91c1c, #f87171);
    box-shadow: inset 0 0 14px rgba(248,113,113,0.5), 0 0 12px rgba(239,68,68,0.55);
}

.bloat-total {
    text-align: right; font-size: 0.8rem; color: #cfe4f0;
    font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono','Share Tech Mono',monospace;
}
.bloat-ratio {
    text-align: center; font-size: 0.78rem; font-weight: 700; color: #9fc9db;
    background: rgba(255,255,255,0.05); border-radius: 6px; padding: 3px 6px;
}
.bloat-ratio.is-hot {
    color: #fff; background: rgba(239,68,68,0.85); box-shadow: 0 0 12px rgba(239,68,68,0.5);
}

@media (max-width: 700px) {
    .bloat-row { grid-template-columns: 120px 1fr 64px; }
    .bloat-ratio { display: none; }
}

/* ── Definition modal ─────────────────────────────────────────────────────*/
.dbh-modal-backdrop {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(3, 10, 18, 0.72); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 3vh 2vw;
}
.dbh-modal {
    width: min(1000px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
    background: #0b1622; border: 1px solid rgba(0,200,255,0.3); border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); overflow: hidden;
}
.dbh-modal-head {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.85rem 1.1rem; border-bottom: 1px solid rgba(0,200,255,0.2);
    background: linear-gradient(90deg, rgba(0,200,255,0.10), transparent);
}
.dbh-modal-title { font-size: 1rem; color: #e6f9ff; font-weight: 700; }
.dbh-modal-meta { font-size: 0.78rem; margin-top: 2px; }
.dbh-modal-body { overflow: auto; padding: 0; }
.dbh-sql {
    margin: 0; padding: 1.1rem 1.25rem; background: #071019;
    color: #d7e6f0; font-family: 'JetBrains Mono','Share Tech Mono','Consolas',monospace;
    font-size: 0.8rem; line-height: 1.5; white-space: pre; tab-size: 4;
}
.dbh-copy  { background: rgba(34,211,238,0.14); color: #a5f3fc; border: 1px solid rgba(34,211,238,0.35); }
.dbh-copy:hover { background: rgba(34,211,238,0.24); color: #e6f9ff; }
.dbh-close { background: rgba(255,255,255,0.06); color: #cbd7e1; border: 1px solid rgba(255,255,255,0.12); }
.dbh-close:hover { background: rgba(239,68,68,0.2); color: #fff; }