:root {
    --bg: #0a0a12;
    --bg-elevated: #12101c;
    --bg-inset: #0d0c16;
    --border: #241f36;
    --border-hover: #362d54;
    --text: #e8e6f2;
    --text-muted: #9891ab;
    --accent: #8b5cf6;
    --accent-rgb: 139, 92, 246;
    --accent-hover: #7c3aed;
    --success: #22c55e;
    --success-rgb: 34, 197, 94;
    --error: #ef4444;
    --error-rgb: 239, 68, 68;
    --warning: #f59e0b;
    --alert-error-text: #fca5a5;
    --alert-info-text: #c4b5fd;
    --alert-success-text: #86efac;
    --shadow: rgba(0, 0, 0, 0.4);
    --radius: 10px;
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --chart-6: #9085e9;
}

    :root[data-theme="light"] {
        --bg: #f5f4fa;
        --bg-elevated: #ffffff;
        --bg-inset: #edecf5;
        --border: #ddd9ea;
        --border-hover: #c9c4dc;
        --text: #1a1825;
        --text-muted: #6b6580;
        --accent: #7c3aed;
        --accent-rgb: 124, 58, 237;
        --accent-hover: #6d28d9;
        --success: #16a34a;
        --success-rgb: 22, 163, 74;
        --error: #dc2626;
        --error-rgb: 220, 38, 38;
        --warning: #b45309;
        --alert-error-text: #b91c1c;
        --alert-info-text: #6d28d9;
        --alert-success-text: #15803d;
        --shadow: rgba(15, 10, 30, 0.12);
        --chart-1: #2a78d6;
        --chart-2: #eb6834;
        --chart-3: #1baf7a;
        --chart-4: #eda100;
        --chart-5: #e87ba4;
        --chart-6: #4a3aa7;
    }

body, .topbar, .panel, .sidebar, .modal, .modal-backdrop, .toast,
.data-table th, .data-table td, .kv-table td, .table-list-item,
input, select, textarea {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

* {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--border-hover);
            background-clip: padding-box;
        }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hidden {
    display: none !important;
}

.topbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.topbar-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.2px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-footer {
    border-top: 1px solid var(--border);
}

.app-footer-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 18px 24px;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.app-footer-build {
    opacity: 0.7;
}

.login-label {
    color: var(--text-muted);
    font-size: 13px;
}

.container-wide {
    max-width: 1800px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

h1 {
    font-size: 22px;
    margin: 0 0 6px;
}

h2 {
    font-size: 18px;
    margin: 0;
}

h3 {
    font-size: 15px;
    margin: 24px 0 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.muted {
    color: var(--text-muted);
}

code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 13px;
}

.panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

.panel-narrow {
    max-width: 420px;
    margin: 60px auto;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 14px;
}

    .field span {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        color: var(--text-muted);
    }

    .field input:not([type="checkbox"]), .field select, .field textarea, select, textarea, input[type="text"], input[type="password"], input[type="number"] {
        width: 100%;
        padding: 10px 12px;
        background-color: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font-size: 14px;
    }

        .field input:focus, .field select:focus, select:focus, input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

    /* the native dropdown arrow looks different per OS, so this swaps in one solid triangle matching --text-muted; baked in per-theme as a data URI since background-image can't read CSS vars */
    select, .field select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239891ab' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 12px;
        padding-right: 2.25rem;
    }

        :root[data-theme="light"] select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6580' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        }

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    input[type="checkbox"]:hover {
        border-color: var(--accent);
    }

    input[type="checkbox"]:checked {
        background: var(--accent);
        border-color: var(--accent);
    }

        input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    input[type="checkbox"]:disabled {
        /* --border alone is too faint on an empty checkbox, and opacity on top made it nearly invisible, so the label ended up looking unanchored */
        border-color: var(--border-hover);
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 16px;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--accent-hover);
    }

.btn-secondary {
    background: var(--bg-inset);
    border-color: var(--border);
    color: var(--text);
}

    .btn-secondary:hover {
        border-color: var(--accent);
    }

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}

    .btn-ghost:hover {
        color: var(--text);
        border-color: var(--accent);
    }

.btn-danger {
    background: transparent;
    border-color: var(--error);
    color: var(--error);
}

    .btn-danger:hover {
        background: var(--error);
        color: #fff;
    }

.btn-block {
    width: 100%;
}

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
}

.theme-toggle-btn {
    padding: 7px;
}

    .theme-toggle-btn svg {
        display: block;
        width: 18px;
        height: 18px;
    }

    .theme-toggle-btn .icon-moon { display: none; }
    :root[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; }
    :root[data-theme="light"] .theme-toggle-btn .icon-moon { display: block; }

.sidebar-toggle-btn {
    padding: 7px;
}

    .sidebar-toggle-btn svg {
        display: block;
        width: 18px;
        height: 18px;
    }

    .sidebar-toggle-btn .icon-expand { display: none; }
    body.sidebar-collapsed .sidebar-toggle-btn .icon-collapse { display: none; }
    body.sidebar-collapsed .sidebar-toggle-btn .icon-expand { display: block; }

.nav-icon {
    flex-shrink: 0;
}

.pk-icon {
    vertical-align: -2px;
    color: var(--warning);
}

.sidebar-actions .btn-block {
    justify-content: flex-start;
}

.panel-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .action-row input[type="text"] {
        flex: 1;
        min-width: 200px;
    }

    /* checkbox-field's margin-bottom is for stacked forms; kill it here or it throws off centering in an action-row */
    .action-row .checkbox-field {
        margin-bottom: 0;
    }

.search-result-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
    padding: 8px 10px;
    gap: 4px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

    .search-result-row:last-child {
        border-bottom: none;
    }

    .search-result-row:hover {
        background: var(--bg-inset);
    }

.search-result-table {
    font-weight: 600;
    font-size: 12px;
    color: var(--accent);
}

.search-result-preview {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}

.alert-error {
    background: rgba(var(--error-rgb), 0.12);
    color: var(--alert-error-text);
    border: 1px solid rgba(var(--error-rgb), 0.3);
}

.alert-info {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--alert-info-text);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.alert-success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--alert-success-text);
    border: 1px solid rgba(var(--success-rgb), 0.25);
}

.status-line {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 10px 0;
    background: var(--bg-inset);
    border: 1px solid var(--border);
}

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .tab-btn.active {
        color: var(--text);
        border-bottom-color: var(--accent);
    }

    .tab-btn:hover {
        color: var(--text);
    }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .data-table th, .data-table td {
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .data-table th {
        color: var(--text-muted);
        font-weight: 500;
        position: sticky;
        top: 0;
        background: var(--bg-elevated);
        z-index: 1;
    }

    .data-table tbody tr:hover {
        background: var(--bg-inset);
    }

    .data-table td.cell-null {
        color: var(--text-muted);
        font-style: italic;
    }

    .data-table td.cell-actions {
        white-space: nowrap;
        text-align: right;
    }

    .data-table th.cell-select, .data-table td.cell-select {
        width: 1%;
        text-align: center;
    }

    .data-table tbody tr.row-highlighted {
        background: rgba(var(--accent-rgb), 0.14);
    }

    .data-table tbody tr.row-highlighted:hover {
        background: rgba(var(--accent-rgb), 0.2);
    }

#structureColumnsTable, #tablePropertiesTable, #viewColumnsTable, #routineParamsTable {
    margin-bottom: 16px;
}

.activity-current-session {
    background: rgba(var(--accent-rgb), 0.08);
}

.activity-status-running {
    color: var(--success);
    font-weight: 600;
}

.activity-status-sleeping {
    color: var(--text-muted);
}

.activity-blocked {
    border-left: 3px solid var(--warning);
}

.activity-blocker {
    border-left: 3px solid var(--error);
}

.activity-blocked-by {
    color: var(--warning);
    font-weight: 600;
}

.blocking-chains {
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

    .blocking-chains h3 {
        margin: 0 0 8px;
        font-size: 14px;
    }

.blocking-chain-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
}

.blocking-chain-children {
    margin-left: 22px;
    border-left: 1px dashed var(--border);
    padding-left: 12px;
}

.blocking-chain-session {
    font-weight: 600;
}

.blocking-chain-arrow {
    color: var(--text-muted);
}

.chart-panel {
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

    .chart-panel h3 {
        margin-top: 0;
    }

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

    .chart-grid .chart-panel {
        margin-bottom: 0;
    }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 12px;
    max-height: 50vh;
    overflow-y: auto;
}

.chart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.chart-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.chart-panel-expandable {
    cursor: pointer;
}

    .chart-panel-expandable:hover {
        border-color: var(--accent);
    }

.modal.chart-expand-modal {
    max-width: min(96vw, 1100px);
}

.modal.share-history-modal {
    max-width: min(96vw, 700px);
}

/* Chart.js fills whatever box its canvas sits in, so this gives it one, taller than before since the legend now lives inside it too */
.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 210px;
}

.chart-canvas-wrap-expand {
    height: 420px;
}

.chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text);
    box-shadow: 0 8px 24px var(--shadow);
    z-index: 50;
}

.plan-panel {
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.plan-statement {
    margin-bottom: 16px;
}

    .plan-statement:last-child {
        margin-bottom: 0;
    }

.plan-statement-text {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-node {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
}

.plan-node-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
}

.plan-node-op {
    font-size: 14px;
}

.plan-node-object {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.plan-node-stats {
    font-size: 12px;
    margin-top: 4px;
}

.plan-children {
    margin-left: 20px;
    padding-left: 12px;
    margin-top: 8px;
    border-left: 1px dashed var(--border);
}

.fk-autocomplete {
    position: relative;
    flex: 1;
    min-width: 0;
}

.fk-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 8px 24px var(--shadow);
}

.fk-suggestion-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

    .fk-suggestion-item:hover {
        background: var(--bg-inset);
    }

.fk-suggestion-value {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.fk-suggestion-context {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-menu {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow);
    z-index: 60;
    padding: 4px;
    min-width: 140px;
}

.context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .context-menu-item:hover {
        background: var(--bg-inset);
    }

    .context-menu-item.context-menu-item-danger {
        color: var(--error);
    }

.fk-link {
    color: var(--accent);
    text-decoration: none;
}

    .fk-link:hover {
        text-decoration: underline;
    }

.table-scroll {
    overflow: auto;
    max-width: 100%;
    max-height: 65vh;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.modal .table-scroll {
    margin-bottom: 16px;
}

.kv-table td:first-child {
    color: var(--text-muted);
    width: 220px;
    white-space: nowrap;
}

.frag-cell-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fixed layout + colgroup widths (see queryStoreTable/missingIndexesTable markup) keep every column, including the Action button,
   on screen without horizontal scrolling; the one unspecified-width column in each colgroup just takes whatever's left */
.table-fixed-layout {
    table-layout: fixed;
}

.cell-truncate-flex {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.frag-cell-actions {
    white-space: nowrap;
}

.frag-actions {
    display: flex;
    gap: 8px;
}

.frag-badge {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.frag-ok {
    color: var(--success);
    border: 1px solid var(--success);
}

.frag-warning {
    color: var(--warning);
    border: 1px solid var(--warning);
}

.frag-critical {
    color: var(--error);
    border: 1px solid var(--error);
}

.help-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-inset);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .help-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

.help-popover {
    border: 1px solid var(--border);
    background: var(--bg-inset);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.kind-badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.code-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    margin: 0 0 14px;
}

/* without this a big generated script grows the modal past the viewport and scrolls the buttons away - scoped to modals only, other inline definitions already scroll fine */
.modal .code-block {
    max-height: 55vh;
    overflow-y: auto;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

    .list-row:last-child {
        border-bottom: none;
    }

.list-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.idx-col-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
    font-size: 13px;
}

.trigger-card {
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}

    .trigger-card:last-child {
        margin-bottom: 0;
    }

.trigger-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

    .trigger-header strong {
        font-size: 14px;
    }

.ai-panel {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-inset);
}

    .ai-panel h3 {
        margin: 0 0 8px;
    }

.ai-row {
    display: flex;
    gap: 8px;
}

    .ai-row input {
        flex: 1;
    }

.ai-hint {
    margin: 8px 0 0;
    font-size: 12px;
}

.history-panel {
    margin-bottom: 16px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .history-header h3 {
        margin: 0;
    }

.history-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.history-row {
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

    .history-row:last-child {
        border-bottom: none;
    }

    .history-row:hover {
        background: var(--bg-inset);
    }

.history-sql {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.history-empty {
    padding: 10px;
}

.history-name {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.history-delete-btn {
    flex-shrink: 0;
    padding: 2px 8px;
}

.diagram-scroll {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    max-height: 70vh;
}

.diagram-svg {
    display: block;
}

.diagram-table {
    cursor: pointer;
}

.diagram-table-box {
    fill: var(--bg-inset);
    stroke: var(--border);
    stroke-width: 1;
}

.diagram-table:hover .diagram-table-box {
    stroke: var(--accent);
    stroke-width: 2;
}

.diagram-table-header {
    fill: var(--accent);
    opacity: 0.18;
}

.diagram-table-title {
    fill: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.diagram-column-text {
    fill: var(--text-muted);
    font-size: 11px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.diagram-pk {
    fill: var(--text);
    font-weight: 600;
}

.diagram-pk-icon {
    color: var(--warning);
}

.diagram-fk-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    opacity: 0.55;
    pointer-events: none;
}

.diagram-fk-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12px;
    cursor: pointer;
}

.diagram-fk:hover .diagram-fk-line {
    stroke-width: 3;
    opacity: 1;
}

.diagram-arrow-head {
    fill: var(--accent);
    opacity: 0.8;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

/* the toggle button lives in the topbar, outside .app-shell, so the flag has to sit on body for both to see it */
body.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
    gap: 0;
}

body.sidebar-collapsed .sidebar-column {
    display: none;
}

.sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}

.sidebar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

/* a visibly separate card, not just another collapsible group, since server-wide items should read as their own kind of thing */
.sidebar-admin {
    border-top: 2px solid var(--warning);
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 24px 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.sidebar-group-toggle:hover {
    color: var(--text);
}

.sidebar-group-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.sidebar-group-toggle[aria-expanded="false"] .sidebar-group-chevron {
    transform: rotate(-90deg);
}

.table-search {
    margin-bottom: 8px;
}

.table-list {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.table-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
}

    .table-list-item:hover {
        background: var(--bg-inset);
        color: var(--text);
    }

    .table-list-item.active {
        background: rgba(var(--accent-rgb), 0.14);
        color: var(--text);
    }

    .table-list-item .list-item-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-list-item .row-count {
        flex-shrink: 0;
        font-size: 11px;
        color: var(--text-muted);
    }

.favorite-star-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.5;
}

    .favorite-star-btn:hover {
        opacity: 1;
        color: var(--warning);
    }

    .favorite-star-btn.is-favorite {
        opacity: 1;
        color: var(--warning);
    }

        .favorite-star-btn.is-favorite .favorite-star-icon {
            fill: currentColor;
        }

.workspace {
    min-width: 0;
}

.workspace-empty {
    padding: 32px 24px;
}

    .workspace-empty > .muted {
        text-align: center;
        margin-bottom: 24px;
    }

.dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.stat-tile {
    flex: 1;
    min-width: 130px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

    .stat-tile:hover {
        border-color: var(--accent);
    }

    /* every tile is a <button> - disabled is what makes a non-clickable one inert */
    .stat-tile:disabled {
        cursor: default;
        opacity: 1;
    }

        .stat-tile:disabled:hover {
            border-color: var(--border);
        }

.stat-tile-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.stat-tile-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.dashboard-section h3 {
    margin-bottom: 8px;
}

.dashboard-table-row {
    cursor: pointer;
}

    .dashboard-table-row:hover {
        background: var(--bg-inset);
    }

.filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

    .filter-row select, .filter-row input {
        width: auto;
    }

    .filter-row .spacer {
        flex: 1;
    }

.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

    .pagination select {
        width: auto;
    }

.pk-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

    .pk-editor label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    .pk-editor label:has(input:disabled) {
        opacity: 0.6;
        cursor: not-allowed;
    }

.column-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

#newTableView .action-row {
    margin-top: 24px;
}

.column-editor-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
}

    .column-editor-row .col-name {
        width: 160px;
    }

    .column-editor-row .col-type {
        width: 130px;
    }

    .column-editor-row .col-length {
        width: 80px;
    }

    /* same deal as .action-row: checkbox-field's stacked-form margin-bottom throws off centering here too */
    .column-editor-row .checkbox-field {
        margin-bottom: 0;
    }

.sql-editor-container {
    width: 100%;
    height: 200px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    resize: vertical;
}

/* routine definitions run longer than a typical query, so a taller default means less scrolling - still resizable */
#routineDefinitionEditorContainer {
    height: 500px;
}

/* host for Monaco's hover/suggest widgets, appended straight to body so the editor's own overflow: hidden can't clip them */
.monaco-overflow-widgets-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 250;
}

/* Monaco covers the widget colors fine but never defines border/shadow vars, so these render flat without help - !important
   beats Monaco's own equally-specific rule injected after this file */
.monaco-overflow-widgets-host .monaco-hover,
.monaco-overflow-widgets-host .suggest-widget {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px var(--shadow) !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 10, 0.7);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    z-index: 100;
}

.modal {
    width: 100%;
    max-width: 520px;
    margin: 0;
}

.form-row {
    display: flex;
    gap: 10px;
}

    .form-row .field {
        flex: 1;
    }

/* a label input and a short dropdown don't need to stretch across a full-width view panel */
#shareCreateView .form-row {
    max-width: 640px;
}

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
}

.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    max-width: 340px;
    box-shadow: 0 8px 24px var(--shadow);
}

    .toast.toast-error {
        border-left-color: var(--error);
    }

    .toast.toast-success {
        border-left-color: var(--success);
    }

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar-column {
        position: static;
    }
}