/* html-query-plan: layout and theme. Colors are variables on .qp-root; the theme is
   .qp-theme-light, .qp-theme-dark, or .qp-theme-auto (follows prefers-color-scheme). */

.qp-root,
.qp-tt-layer {
    --qp-fg: #1f2328;
    --qp-muted: #656d76;
    --qp-bg: #ffffff;
    --qp-hover: #f3f4f6;
    --qp-border: #d0d7de;
    --qp-arrow: #c8ccd1;
    --qp-arrow-stroke: #8c959f;
    --qp-tt-bg: #ffffff;
    --qp-tt-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    --qp-cost-low: #9a6700;
    --qp-cost-medium: #bc4c00;
    --qp-cost-high: #cf222e;
    --qp-missing-index: #1a7f37;
    --qp-icon-filter: none;
    color: var(--qp-fg);
    font: 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.qp-root.qp-theme-dark,
.qp-tt-layer.qp-theme-dark {
    --qp-fg: #e6edf3;
    --qp-muted: #9198a1;
    --qp-bg: #0d1117;
    --qp-hover: #1c2128;
    --qp-border: #3d444d;
    --qp-arrow: #3d444d;
    --qp-arrow-stroke: #656c76;
    --qp-tt-bg: #161b22;
    --qp-tt-shadow: 0 4px 14px rgba(0, 0, 0, .6);
    --qp-cost-low: #d29922;
    --qp-cost-medium: #f0883e;
    --qp-cost-high: #ff7b72;
    --qp-missing-index: #56d364;
    /* The Microsoft icons are dark strokes on transparent: invert the lightness, keep the hue */
    --qp-icon-filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
    .qp-root.qp-theme-auto,
    .qp-tt-layer.qp-theme-auto {
        --qp-fg: #e6edf3;
        --qp-muted: #9198a1;
        --qp-bg: #0d1117;
        --qp-hover: #1c2128;
        --qp-border: #3d444d;
        --qp-arrow: #3d444d;
        --qp-arrow-stroke: #656c76;
        --qp-tt-bg: #161b22;
        --qp-tt-shadow: 0 4px 14px rgba(0, 0, 0, .6);
        --qp-cost-low: #d29922;
        --qp-cost-medium: #f0883e;
        --qp-cost-high: #ff7b72;
        --qp-missing-index: #56d364;
        --qp-icon-filter: invert(1) hue-rotate(180deg);
    }
}

/* Nodes */

div.qp-node {
    margin: 2px;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
}

div.qp-node:hover {
    background-color: var(--qp-hover);
    border-color: var(--qp-border);
}

div.qp-node,
div.qp-tt {
    font-size: 11px;
    line-height: 1.3;
}

.qp-node > div {
    text-align: center;
}

.qp-label {
    font-weight: 600;
}

.qp-label2 {
    color: var(--qp-muted);
}

.qp-cost {
    color: var(--qp-muted);
}

.qp-cost[data-cost-level="low"] { color: var(--qp-cost-low); font-weight: 600; }
.qp-cost[data-cost-level="medium"] { color: var(--qp-cost-medium); font-weight: 600; }
.qp-cost[data-cost-level="high"] { color: var(--qp-cost-high); font-weight: 700; }

div[class|='qp-icon'] {
    height: 24px;
    width: 24px;
    margin: 0 auto 2px;
    background-repeat: no-repeat;
    position: relative;
    filter: var(--qp-icon-filter);
}

/* Overlays (warning, parallel, batch) at 12 px over the bottom of the icon. They sit
   inside the icon and inherit its filter; applying the same filter again restores
   their colors, since invert + hue-rotate(180deg) is its own inverse. */
.qp-iconwarn,
.qp-iconpar,
.qp-iconbatch {
    filter: var(--qp-icon-filter);
    height: 12px;
    width: 12px;
    position: absolute;
    top: 12px;
    background-repeat: no-repeat;
}

.qp-iconpar {
    left: 12px;
}

/* Statement header */

.qp-statement-header {
    border-color: var(--qp-border);
    border-style: solid;
    border-width: 1px 0;
    padding: 0.3em;
    color: var(--qp-muted);
}

.qp-statement-header,
.qp-statement-header-row > div {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.qp-statement-header-row {
    width: 100%;
    height: 15.6px;
}

.qp-statement-header-row > div {
    /* Absolute, it starts after the header's padding: 100% would stick out of the plan */
    width: calc(100% - 0.6em);
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.missing-index {
    color: var(--qp-missing-index);
}

/* Tooltip */

.qp-tt {
    top: 4em;
    left: 2em;
    border: 1px solid var(--qp-border);
    border-radius: 6px;
    background-color: var(--qp-tt-bg);
    box-shadow: var(--qp-tt-shadow);
    color: var(--qp-fg);
    padding: 6px 8px;
    width: 30em;
}

.qp-tt div,
.qp-tt table {
    font-family: inherit;
    text-align: left;
}

.qp-tt table {
    border-width: 0;
    border-spacing: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
}

.qp-tt td,
.qp-tt th {
    font-size: 11px;
    border-bottom: solid 1px var(--qp-border);
    padding: 2px 1px;
}

.qp-tt td {
    text-align: right;
    padding-left: 10px;
}

.qp-tt th {
    text-align: left;
    font-weight: 600;
}

.qp-bold,
.qp-tt-header {
    font-weight: 600;
}

.qp-tt-header {
    text-align: center;
}

/* Layout - can't touch this */
.qp-tt {
    position: absolute;
    z-index: 1;
    white-space: normal;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

div.qp-node .qp-tt,
.qp-noCssTooltip div.qp-node:hover .qp-tt {
    visibility: collapse;
}

div.qp-node:hover .qp-tt {
    visibility: visible;
}

/* With JS tooltips the tooltip shown is a copy on the body: the hidden originals leave
   the layout, where they widened the scrollable area of the plan past its last node */
.qp-noCssTooltip div.qp-node .qp-tt {
    display: none;
}

.qp-tt table {
    white-space: nowrap;
}

.qp-node {
    position: relative;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.qp-node-outer {
    height: 64px;
    display: table-cell;
}

.qp-tr {
    display: table;
}

.qp-tr > div {
    display: table-cell;
    padding-left: 20px;
}

.qp-root {
    position: relative;
    display: inline-block;
}

.qp-root svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.qp-root polyline {
    pointer-events: auto;
    fill: var(--qp-arrow);
    stroke: var(--qp-arrow-stroke);
}

.qp-root .qp-row-count {
    font: 9px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    fill: var(--qp-muted);
}

/* Container with fitWidth: scrolls when the plan is wider than the reduced size */
.qp-fit {
    overflow-x: auto;
}

/* icons:start */
/* Operator icons: Microsoft, MicrosoftDocs/sql-docs, CC BY 4.0. Generated by tools/sprite-microsoft.py */
div[class|='qp-icon'], .qp-iconwarn, .qp-iconpar, .qp-iconbatch { background-image: url('qp_icons.png'); background-size: 240px 216px; }
.qp-icon-Catchall { background-position: -120px -72px; }
.qp-icon-ArithmeticExpression { background-position: -48px -0px; }
.qp-icon-Assert { background-position: -72px -0px; }
.qp-icon-Assign { background-position: -96px -0px; }
.qp-icon-Bitmap { background-position: -144px -0px; }
.qp-icon-BookmarkLookup { background-position: -24px -144px; }
.qp-icon-ClusteredIndexDelete { background-position: -168px -0px; }
.qp-icon-ClusteredIndexInsert { background-position: -192px -0px; }
.qp-icon-ClusteredIndexScan { background-position: -0px -24px; }
.qp-icon-ClusteredIndexSeek { background-position: -24px -24px; }
.qp-icon-ClusteredIndexMerge { background-position: -216px -0px; }
.qp-icon-KeyLookup { background-position: -24px -144px; }
.qp-icon-ClusteredIndexUpdate { background-position: -48px -24px; }
.qp-icon-Collapse { background-position: -72px -24px; }
.qp-icon-ComputeScalar { background-position: -216px -24px; }
.qp-icon-Concatenation { background-position: -0px -48px; }
.qp-icon-ConstantScan { background-position: -48px -48px; }
.qp-icon-Convert { background-position: -72px -48px; }
.qp-icon-CursorCatchall { background-position: -96px -48px; }
.qp-icon-Declare { background-position: -120px -48px; }
.qp-icon-Delete { background-position: -144px -48px; }
.qp-icon-DistributeStreams { background-position: -0px -120px; }
.qp-icon-Dynamic { background-position: -192px -48px; }
.qp-icon-EagerSpool { background-position: -192px -144px; }
.qp-icon-FetchQuery { background-position: -216px -48px; }
.qp-icon-Filter { background-position: -0px -72px; }
.qp-icon-GatherStreams { background-position: -216px -96px; }
.qp-icon-HashMatch { background-position: -24px -72px; }
.qp-icon-HashMatchRoot { background-position: -24px -72px; }
.qp-icon-HashMatchTeam { background-position: -24px -72px; }
.qp-icon-If { background-position: -24px -48px; }
.qp-icon-Insert { background-position: -48px -72px; }
.qp-icon-InsertedScan { background-position: -72px -72px; }
.qp-icon-Intrinsic { background-position: -96px -72px; }
.qp-icon-IteratorCatchall { background-position: -120px -72px; }
.qp-icon-Keyset { background-position: -168px -72px; }
.qp-icon-LanguageElementCatchall { background-position: -192px -72px; }
.qp-icon-LazySpool { background-position: -192px -144px; }
.qp-icon-LogRowScan { background-position: -216px -72px; }
.qp-icon-MergeInterval { background-position: -0px -96px; }
.qp-icon-MergeJoin { background-position: -24px -96px; }
.qp-icon-NestedLoops { background-position: -48px -96px; }
.qp-icon-NonclusteredIndexDelete { background-position: -72px -96px; }
.qp-icon-NonclusteredIndexInsert { background-position: -96px -96px; }
.qp-icon-IndexScan { background-position: -120px -96px; }
.qp-icon-IndexSeek { background-position: -144px -96px; }
.qp-icon-NonclusteredIndexSpool { background-position: -168px -96px; }
.qp-icon-NonclusteredIndexUpdate { background-position: -192px -96px; }
.qp-icon-OnlineIndexInsert { background-position: -96px -96px; }
.qp-icon-ParameterTableScan { background-position: -48px -120px; }
.qp-icon-PopulateQuery { background-position: -72px -120px; }
.qp-icon-RIDLookup { background-position: -144px -72px; }
.qp-icon-RefreshQuery { background-position: -96px -120px; }
.qp-icon-RemoteDelete { background-position: -120px -120px; }
.qp-icon-RemoteInsert { background-position: -144px -120px; }
.qp-icon-RemoteQuery { background-position: -168px -120px; }
.qp-icon-RemoteScan { background-position: -192px -120px; }
.qp-icon-RemoteUpdate { background-position: -216px -120px; }
.qp-icon-RepartitionStreams { background-position: -24px -120px; }
.qp-icon-Result { background-position: -0px -144px; }
.qp-icon-RowCountSpool { background-position: -192px -144px; }
.qp-icon-Segment { background-position: -48px -144px; }
.qp-icon-Sequence { background-position: -72px -144px; }
.qp-icon-SequenceProject { background-position: -96px -144px; }
.qp-icon-SnapShot { background-position: -120px -144px; }
.qp-icon-Sort { background-position: -144px -144px; }
.qp-icon-Split { background-position: -168px -144px; }
.qp-icon-Spool { background-position: -192px -144px; }
.qp-icon-Statement { background-position: -0px -144px; }
.qp-icon-StreamAggregate { background-position: -216px -144px; }
.qp-icon-Switch { background-position: -0px -168px; }
.qp-icon-TableDelete { background-position: -24px -168px; }
.qp-icon-TableInsert { background-position: -48px -168px; }
.qp-icon-TableScan { background-position: -96px -168px; }
.qp-icon-TableSpool { background-position: -120px -168px; }
.qp-icon-WindowSpool { background-position: -192px -144px; }
.qp-icon-TableUpdate { background-position: -144px -168px; }
.qp-icon-TableValuedFunction { background-position: -168px -168px; }
.qp-icon-Top { background-position: -192px -168px; }
.qp-icon-UDX { background-position: -216px -168px; }
.qp-icon-Update { background-position: -0px -192px; }
.qp-icon-While { background-position: -192px -72px; }
.qp-icon-StmtCursor { background-position: -96px -48px; }
.qp-icon-StmtCond { background-position: -24px -48px; }
.qp-icon-FastForward { background-position: -96px -48px; }
.qp-icon-WindowAggregate { background-position: -24px -0px; }
.qp-icon-AdaptiveJoin { background-position: -0px -0px; }
.qp-icon-IndexSpool { background-position: -168px -96px; }
.qp-icon-IndexInsert { background-position: -96px -96px; }
.qp-icon-IndexDelete { background-position: -72px -96px; }
.qp-icon-IndexUpdate { background-position: -192px -96px; }
.qp-icon-ColumnStoreIndexScan { background-position: -168px -24px; }
.qp-icon-ColumnStoreIndexInsert { background-position: -120px -24px; }
.qp-icon-ColumnStoreIndexDelete { background-position: -96px -24px; }
.qp-icon-ColumnStoreIndexUpdate { background-position: -192px -24px; }
.qp-icon-ColumnStoreIndexMerge { background-position: -144px -24px; }
.qp-icon-DeletedScan { background-position: -168px -48px; }
.qp-icon-TableMerge { background-position: -72px -168px; }
.qp-icon-BatchHashTableBuild { background-position: -120px -0px; }
.qp-iconwarn { background-position: -24px -192px; }
.qp-iconpar { background-position: -36px -192px; }
.qp-iconbatch { background-position: -24px -204px; }
/* icons:end */