/* Colored References — webview results panel */

:root {
    --row-height: 22px;
    --header-height: 24px;
    --grid: var(--cr-grid, 40% 20% 56px 14% 20%);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    color: var(--vscode-foreground);
    background: var(--vscode-editor-background);
    font-family: var(--vscode-font-family);
    font-size: var(--vscode-font-size);
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- toolbar ------------------------------------------------------------ */

#toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--vscode-panel-border, transparent);
    flex: 0 0 auto;
}

#summary {
    color: var(--vscode-descriptionForeground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
}

#summary b {
    color: var(--vscode-foreground);
}

#filter {
    width: 200px;
    padding: 2px 6px;
    color: var(--vscode-input-foreground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border, transparent);
    border-radius: 2px;
    font-family: inherit;
    font-size: inherit;
}

#filter:focus {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

#filter::placeholder {
    color: var(--vscode-input-placeholderForeground);
}

.toolbar-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
    background: var(--vscode-button-secondaryBackground, transparent);
    border: 1px solid var(--vscode-contrastBorder, transparent);
    border-radius: 2px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.toolbar-button:hover {
    background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
}

.toolbar-button[aria-pressed='true'] {
    color: var(--vscode-button-foreground);
    background: var(--vscode-button-background);
}

.toolbar-button:focus-visible {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

/* --- table -------------------------------------------------------------- */

#head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: var(--grid);
    height: var(--header-height);
    background: var(--vscode-keybindingTable-headerBackground, var(--vscode-editor-background));
    border-bottom: 1px solid var(--vscode-panel-border, var(--vscode-editorWidget-border));
    user-select: none;
}

#head .th {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

#head .th:hover {
    background: var(--vscode-toolbar-hoverBackground);
}

#head .th .label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#head .th .arrow {
    flex: 0 0 auto;
    opacity: 0;
    font-size: 9px;
}

#head .th[data-sorted] .arrow {
    opacity: 0.9;
}

#head .th:focus-visible {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

/* Column resize grip: sits on the right edge of every header cell. */
#head .grip {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

#head .grip:hover,
body.resizing #head .grip {
    background: var(--vscode-sash-hoverBorder);
    opacity: 0.6;
}

body.resizing {
    cursor: col-resize;
    user-select: none;
}

#table {
    flex: 1 1 auto;
    overflow: auto;
}

#body {
    outline: none;
}

.row {
    display: grid;
    grid-template-columns: var(--grid);
    height: var(--row-height);
    align-items: center;
    cursor: pointer;
}

.row:hover {
    background: var(--vscode-list-hoverBackground);
}

.row.selected {
    color: var(--vscode-list-inactiveSelectionForeground);
    background: var(--vscode-list-inactiveSelectionBackground);
}

#body:focus-within .row.selected,
#body:focus .row.selected {
    color: var(--vscode-list-activeSelectionForeground);
    background: var(--vscode-list-activeSelectionBackground);
}

.row .td {
    padding: 0 8px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.td.code {
    font-family: var(--vscode-editor-font-family);
    font-size: var(--vscode-editor-font-size);
    color: var(--cr-fg-default);
}

.td.line {
    text-align: right;
    color: var(--vscode-editorLineNumber-foreground);
    font-family: var(--vscode-editor-font-family);
}

.td.file,
.td.project,
.td.member {
    color: var(--vscode-descriptionForeground);
}

.td.file .name {
    color: var(--vscode-foreground);
}

/* --- group headers ------------------------------------------------------ */

.group {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--row-height);
    padding: 0 8px;
    font-weight: 600;
    background: var(--vscode-sideBarSectionHeader-background);
    border-top: 1px solid var(--vscode-sideBarSectionHeader-border, transparent);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
}

.group .twisty {
    flex: 0 0 auto;
    width: 10px;
    text-align: center;
    opacity: 0.8;
}

.group .count,
.group .project {
    font-weight: normal;
    color: var(--vscode-descriptionForeground);
}


/* --- code tokens -------------------------------------------------------- */

.tok-comment { color: var(--cr-comment); font-style: italic; }
.tok-string  { color: var(--cr-string); }
.tok-keyword { color: var(--cr-keyword); }
.tok-control { color: var(--cr-control); }
.tok-number  { color: var(--cr-number); }
.tok-type    { color: var(--cr-type); }
.tok-call    { color: var(--cr-call); }
.tok-punct   { color: var(--cr-fg-default); }

.hit {
    background: var(--vscode-editor-findMatchHighlightBackground);
    border: 1px solid var(--vscode-editor-findMatchHighlightBorder, transparent);
    border-radius: 2px;
    margin: 0 -1px;
}


/* --- empty state -------------------------------------------------------- */

#empty {
    padding: 16px;
    color: var(--vscode-descriptionForeground);
}

#empty[hidden] {
    display: none;
}