/* Query module semantic adapter. Every module color resolves through the
   shared application palette so light, dark and future variants are inherited. */
.query-module {
    --query-canvas: var(--pp-app-bg);
    --query-surface: var(--pp-surface);
    --query-surface-soft: var(--pp-surface-soft);
    --query-surface-raised: var(--pp-surface-raised);
    --query-border: var(--pp-border);
    --query-border-strong: var(--pp-border-strong);
    --query-text: var(--pp-text);
    --query-muted: var(--pp-text-muted);
    --query-input: var(--pp-input-bg);
    --query-hover: var(--pp-surface-muted);
    --query-selected: var(--pp-accent-soft);
    --query-primary: var(--pp-accent);
    --query-primary-soft: var(--pp-accent-soft);
    --query-danger: var(--bs-danger);
    --query-on-accent: var(--bs-white);
    --query-shadow: 0 12px 30px var(--pp-shadow-color);
    --query-overlay: color-mix(in srgb, var(--pp-navbar-bg) 76%, transparent);
    --query-dialog-header: linear-gradient(120deg,
        color-mix(in srgb, var(--query-primary) 30%, var(--query-surface-raised)),
        color-mix(in srgb, var(--query-primary) 12%, var(--query-surface-raised)));
    background: var(--query-canvas);
    color: var(--query-text);
}

.query-module .main-area,
.query-module .right-workspace,
.query-module .workspace-content,
.query-module #queryTabContent {
    background: var(--query-canvas) !important;
    color: var(--query-text);
}

.query-module .left-panel {
    background: var(--query-surface) !important;
    color: var(--query-text);
    border-color: var(--query-border) !important;
}

.query-module .left-panel .panel-header {
    background: var(--query-surface-soft) !important;
    color: var(--query-text) !important;
    border-color: var(--query-border) !important;
}

.query-module .left-panel .panel-header {
    min-height: 42px;
    padding: .65rem .75rem;
    letter-spacing: .025em;
}

.query-module .query-table-tools {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: .5rem .55rem .4rem;
    color: var(--query-muted);
}

.query-module .query-table-tools > i {
    position: absolute;
    left: .65rem;
    z-index: 1;
    pointer-events: none;
}

.query-module #queryTableSearch {
    width: 100%;
    height: 34px;
    padding: .35rem 3.2rem .35rem 2rem;
    color: var(--query-text);
    background: var(--query-input);
    border: 1px solid var(--query-border);
    border-radius: 9px;
    font-size: .78rem;
    outline: none;
}

.query-module #queryTableSearch:focus {
    border-color: var(--query-primary);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--query-primary) 18%, transparent);
}

.query-module .query-table-count {
    position: absolute;
    right: .45rem;
    min-width: 25px;
    padding: .1rem .35rem;
    color: var(--query-muted);
    background: var(--query-surface-soft);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 700;
    text-align: center;
}

.query-module .left-panel .table-list,
.query-module .left-panel .saved-queries-list {
    background: var(--query-surface);
    color: var(--query-text);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.query-module .left-panel .table-list li,
.query-module .left-panel .saved-queries-list li {
    min-height: 36px;
    padding: .38rem .65rem;
    color: var(--query-text);
    background: var(--query-surface);
    border-bottom: 1px solid var(--query-border);
    transition: background-color .16s ease, color .16s ease;
}

.query-module .left-panel .table-list li:hover,
.query-module .left-panel .saved-queries-list li:hover {
    background: var(--query-hover);
}

.query-module .left-panel .table-list li.active {
    background: var(--query-primary) !important;
    color: var(--query-on-accent) !important;
}

.query-module .left-panel .table-list { min-height: 0; }

.query-module .query-table-empty {
    flex: 1 1 auto;
    padding: 1rem .75rem;
    color: var(--query-muted);
    font-size: .78rem;
    text-align: center;
}

.query-module .saved-queries-dock {
    flex: 0 0 auto;
    margin-top: auto;
    background: var(--query-surface);
    border-top: 1px solid var(--query-border);
}

.query-module .saved-queries-toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .7rem;
    color: var(--query-text);
    background: var(--query-surface-soft);
    border: 0;
    font-size: .8rem;
    font-weight: 700;
    text-align: left;
}

.query-module .saved-queries-toggle:hover { background: var(--query-hover); }
.query-module .saved-queries-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--query-primary) 30%, transparent); outline-offset: -3px; }

.query-module .saved-queries-meta { display: inline-flex; align-items: center; gap: .55rem; }

.query-module .saved-query-count {
    min-width: 23px;
    padding: .1rem .38rem;
    color: var(--query-muted);
    background: var(--query-surface);
    border: 1px solid var(--query-border);
    border-radius: 999px;
    font-size: .67rem;
    text-align: center;
}

.query-module .saved-queries-chevron { transition: transform .18s ease; }
.query-module .saved-queries-toggle[aria-expanded="true"] .saved-queries-chevron { transform: rotate(180deg); }

.query-module .saved-queries-panel {
    max-height: min(36vh, 330px);
    overflow-y: auto;
    border-top: 1px solid var(--query-border);
}

.query-module .saved-queries-panel[hidden] { display: none !important; }
.query-module .saved-queries-list { overflow: visible !important; }
.query-module .saved-query-empty { color: var(--query-muted) !important; cursor: default !important; }
.query-module .saved-query-empty:hover { background: var(--query-surface) !important; }

.query-module .delete-query-btn {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
}

.query-module .delete-query-btn:hover { background: color-mix(in srgb, var(--query-danger) 12%, transparent); }

/* The workspace is a fixed-height column: the tab bar stays put while only the
   active tab's content scrolls, so tabs never scroll out of view (e.g. long
   Results tables). Overrides the shell's whole-content scroll. */
.query-module .workspace-content {
    padding: .75rem !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden !important;
}

.query-module .query-tabbar {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 48px;
    align-items: flex-end;
    gap: .65rem;
    background: var(--query-canvas);
    border-bottom: 1px solid var(--query-border);
}

/* Only the tab content scrolls (vertical); wide tables scroll horizontally
   within their own .table-responsive so no double horizontal scrollbar. */
.query-module #queryTabContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.query-module #queryTabs {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    gap: .2rem;
}

.query-module .query-tab-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    align-self: center;
    padding-bottom: .25rem;
}

.query-module .query-tab-actions .btn-outline-primary {
    --bs-btn-color: var(--query-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--query-primary) 72%, var(--query-border));
    --bs-btn-hover-color: var(--query-on-accent);
    --bs-btn-hover-bg: var(--query-primary);
    --bs-btn-hover-border-color: var(--query-primary);
    --bs-btn-active-color: var(--query-on-accent);
    --bs-btn-active-bg: var(--query-primary);
    --bs-btn-active-border-color: var(--query-primary);
    background: var(--query-surface-raised);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pp-shadow-color) 70%, transparent);
}

.query-module #queryTabs .nav-link {
    min-height: 42px;
    padding: .55rem .9rem;
    color: var(--query-primary);
    background: transparent;
    border-color: transparent;
    border-radius: .55rem .55rem 0 0;
    font-weight: 650;
}

.query-module #queryTabs .nav-link:hover {
    background: var(--query-hover);
    border-color: var(--query-border) var(--query-border) transparent;
}

.query-module #queryTabs .nav-link.active {
    color: var(--query-text);
    background: var(--query-surface);
    border-color: var(--query-border) var(--query-border) var(--query-surface);
}

.query-tooltip .tooltip-inner {
    max-width: 290px;
    padding: .48rem .66rem;
    color: var(--query-surface);
    background: var(--query-text);
    border: 1px solid var(--query-border-strong);
    border-radius: .6rem;
    box-shadow: var(--query-shadow);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.query-tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--query-text); }
.query-tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--query-text); }
.query-tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--query-text); }
.query-tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--query-text); }

.query-module h1,
.query-module h2,
.query-module h3,
.query-module h4,
.query-module h5,
.query-module h6,
.query-module label,
.query-module .form-label { color: var(--query-text); }

.query-module .text-muted,
.query-module .text-secondary,
.query-module .form-text { color: var(--query-muted) !important; }

.query-module .table,
.query-module .table-responsive {
    --bs-table-bg: var(--query-surface);
    --bs-table-color: var(--query-text);
    --bs-table-border-color: var(--query-border);
    color: var(--query-text);
    border-color: var(--query-border) !important;
}

.query-module .table > :not(caption) > * > * {
    background: var(--query-surface) !important;
    color: var(--query-text) !important;
    border-color: var(--query-border) !important;
}

.query-module .table thead > tr > * {
    background: var(--query-surface-soft) !important;
    color: var(--query-text) !important;
    font-weight: 700;
}

.query-module #designerGrid {
    border-color: var(--query-border) !important;
    box-shadow: 0 1px 0 var(--pp-shadow-color);
}

#designerGrid .form-control-sm,
#designerGrid .form-select-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem;
}
#sqlEditor {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    min-height: 300px;
    line-height: 1.55;
}

.query-module :where(.form-control, .form-select, textarea, input[type="text"], input[type="number"]) {
    background-color: var(--query-input) !important;
    color: var(--query-text) !important;
    border-color: var(--query-border-strong) !important;
}

.query-module :where(.form-control, textarea, input)::placeholder {
    color: var(--query-muted) !important;
    opacity: .82;
}

.query-module :where(.form-control, .form-select):focus {
    border-color: var(--query-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--query-primary) 20%, transparent) !important;
}

.query-module :where(.form-control, .form-select)[readonly] {
    background: var(--query-surface-soft) !important;
    color: var(--query-muted) !important;
}

.query-module .form-check-input {
    background-color: var(--query-input);
    border-color: var(--query-border-strong);
}

.query-module .form-check-input:checked {
    background-color: var(--query-primary);
    border-color: var(--query-primary);
}

/* ── Diagram pane ────────────────────────────────────────────────────── */
#diagramContainer {
    position: relative;
    min-height: 200px;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 0.375rem;
}

.query-module #diagramContainer {
    min-height: 300px !important;
    background: var(--query-surface) !important;
    color: var(--query-text);
    border-color: var(--query-border-strong) !important;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--query-muted) 22%, transparent) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
}

.diagram-table-card {
    position: absolute;
    width: 220px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 5;
    cursor: grab;
    user-select: none;
}
.query-module .diagram-table-card {
    background: var(--query-surface-raised);
    color: var(--query-text);
    border-color: var(--query-border);
    box-shadow: var(--query-shadow);
}
.diagram-table-card:active { cursor: grabbing; }
.diagram-table-card .card-header {
    background: #f8f9fa;
    padding: 0.35rem 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.query-module .diagram-table-card .card-header {
    background: var(--query-surface-soft) !important;
    color: var(--query-text) !important;
    border-color: var(--query-border) !important;
}
.diagram-table-card .card-body {
    padding: 0.25rem 0.5rem;
    max-height: 180px;
    overflow-y: auto;
    font-size: 0.75rem;
}
.query-module .diagram-table-card .card-body {
    background: var(--query-surface-raised) !important;
    color: var(--query-text) !important;
}
.diagram-table-card .card-body .form-check {
    margin-bottom: 0;
    padding-left: 1.5rem;
}
.diagram-table-card .card-body .form-check-input {
    margin-right: 0.3rem;
}
.diagram-table-card .remove-table-btn {
    cursor: pointer;
    color: #dc3545;
    font-size: 0.9rem;
}
.query-module .diagram-table-card .remove-table-btn { color: var(--query-danger); }

/* JOIN arrows */
#joinArrowsSvg path {
    stroke: #0d6efd;
    stroke-width: 2;
    fill: none;
    marker-end: url(#joinArrowhead);
}
#joinArrowsSvg path:hover {
    stroke: #dc3545;
    stroke-width: 3;
    cursor: pointer;
}

/* prevent text selection during drag */
.diagram-table-card .card-header {
    cursor: grab;
}
.diagram-table-card .card-header:active {
    cursor: grabbing;
}

/* Draggable field items inside diagram cards */
.diagram-table-card .field-draggable {
    cursor: grab;
    padding: 0.1rem 0;
    transition: background 0.1s;
}
.diagram-table-card .field-draggable:hover {
    background: #e9ecef;
    border-radius: 3px;
}
.query-module .diagram-table-card .field-draggable:hover { background: var(--query-hover); }
.diagram-table-card .field-draggable:active {
    cursor: grabbing;
}

/* JOIN arrow labels */
.join-arrow-label {
    font-size: 0.65rem;
    fill: #dc3545;
    pointer-events: none;
}

.query-module #joinArrowsSvg { color: var(--query-primary); }  /* arrowhead marker uses currentColor */
.query-module #joinArrowsSvg path { stroke: var(--query-primary); }
.query-module #joinArrowsSvg path:hover { stroke: var(--query-danger); }
.query-module .join-arrow-label { fill: var(--query-danger); font-weight: 700; }

.query-module .alert-info {
    color: color-mix(in srgb, var(--query-primary) 78%, var(--query-text));
    background: var(--query-primary-soft);
    border-color: color-mix(in srgb, var(--query-primary) 34%, var(--query-border));
}

.query-module .list-group-item {
    background: var(--query-surface) !important;
    color: var(--query-text) !important;
    border-color: var(--query-border) !important;
}

.query-module code { color: color-mix(in srgb, var(--query-primary) 76%, var(--query-text)); }

/* Query dialogs: Save, JOIN and WHERE editor. */
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-content {
    overflow: hidden;
    color: var(--query-text) !important;
    background: var(--query-surface-raised) !important;
    border: 1px solid var(--query-border) !important;
    border-radius: 14px;
    box-shadow: 0 24px 60px var(--pp-shadow-color) !important;
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-header {
    min-height: 54px;
    padding: .65rem .85rem !important;
    color: var(--query-text) !important;
    background: var(--query-dialog-header) !important;
    border-color: color-mix(in srgb, var(--query-primary) 34%, var(--query-border)) !important;
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-title { color: var(--query-text) !important; }

/* Close button: a self-drawn X (Bootstrap's SVG is removed) that stays visible
   in EVERY theme. The X + chip are tinted from --query-text — the same colour
   as the (always-readable) modal title — so contrast against the header holds
   whether the header is light or dark. */
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close {
    position: relative;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    padding: 0;
    color: var(--query-text) !important;
    background-image: none !important;
    background-color: color-mix(in srgb, var(--query-text) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--query-text) 30%, transparent);
    border-radius: 9px;
    opacity: 1 !important;
    /* Bootstrap's .btn-close-white adds filter: invert(1)… which would flip the
       self-drawn X (currentColor) and make it vanish — neutralise it. */
    filter: none !important;
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close::before,
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2.5px;
    background: currentColor;
    border-radius: 999px;
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-close:hover {
    color: var(--query-on-accent) !important;
    background-color: var(--query-primary);
    border-color: var(--query-primary);
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-primary {
    --bs-btn-bg: var(--query-primary);
    --bs-btn-border-color: var(--query-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--query-primary) 84%, var(--query-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--query-primary) 84%, var(--query-text));
    --bs-btn-color: var(--query-on-accent);
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .btn-secondary {
    --bs-btn-bg: var(--query-surface-muted, var(--query-surface-soft));
    --bs-btn-border-color: var(--query-border-strong);
    --bs-btn-color: var(--query-text);
    --bs-btn-hover-bg: var(--query-hover);
    --bs-btn-hover-border-color: var(--query-primary);
    --bs-btn-hover-color: var(--query-text);
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-body,
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-footer {
    color: var(--query-text) !important;
    background: var(--query-surface-raised) !important;
    border-color: var(--query-border) !important;
}

.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-body { padding: .9rem !important; }
.query-module :where(#saveQueryModal, #joinModal, #whereTabModal) .modal-footer { padding: .7rem .9rem !important; }

.query-module .modal-backdrop.show {
    background: var(--query-overlay);
    opacity: 1;
}

.query-module .tooltip .tooltip-inner,
.query-module + .tooltip .tooltip-inner {
    background: var(--query-text);
    color: var(--query-surface);
    border: 1px solid var(--query-border-strong);
}


/* ── Mobile responsiveness ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .main-area {
        flex-direction: column !important;
    }
    .left-panel {
        width: 100% !important;
        max-height: 40vh;
        overflow-y: auto;
        flex-shrink: 0;
        transition: max-height 0.3s ease;
    }
    .query-module .workspace-content { padding: .5rem !important; }
    .query-module .saved-queries-panel { max-height: 22vh; }
    .query-module .query-tabbar { gap: .35rem; }
    .query-module #queryTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    .query-module #queryTabs .nav-link { white-space: nowrap; }
    .query-module .query-tab-actions { padding-right: .15rem; }
    .left-panel.collapsed {
        max-height: 0;
        overflow: hidden;
    }
    .right-workspace {
        flex: 1 1 auto;
        width: 100% !important;
    }
    /* Diagram cards become static and stack vertically */
    #diagramContainer {
        position: static !important;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .query-module #diagramContainer { min-height: 150px !important; }
    .diagram-table-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }
    /* Hide SVG arrows on mobile (simplifies layout) */
    #joinArrowsSvg {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .query-module *,
    .query-module *::before,
    .query-module *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ── SQL editor (CodeMirror) — theme-aware autocomplete surface ─────────── */
.query-module .CodeMirror {
    height: auto;
    border: 1px solid var(--query-border);
    border-radius: 8px;
    background: var(--query-input);
    color: var(--query-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
}
.query-module .CodeMirror-gutters { background: color-mix(in srgb, var(--query-text) 5%, transparent); border-right: 1px solid var(--query-border); }
.query-module .CodeMirror-linenumber { color: var(--query-muted); }
.query-module .CodeMirror-cursor { border-left: 1.6px solid var(--query-primary); }
.query-module .CodeMirror-selected { background: color-mix(in srgb, var(--query-primary) 18%, transparent) !important; }
.query-module .cm-keyword { color: var(--query-primary); font-weight: 700; }
.query-module .cm-string, .query-module .cm-string-2 { color: var(--bs-success); }
.query-module .cm-number { color: var(--bs-warning); }
.query-module .cm-variable-2, .query-module .cm-type { color: var(--bs-info); }
.query-module .cm-atom, .query-module .cm-builtin { color: var(--bs-danger); }
.query-module .cm-comment { color: var(--query-muted); font-style: italic; }
.query-module .cm-operator, .query-module .cm-punctuation { color: var(--query-muted); }
/* Completion popup is appended to <body>, outside .query-module → use global tokens. */
.CodeMirror-hints {
    z-index: 3000;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    border: 1px solid var(--pp-border, #e2e8f0);
    background: var(--pp-surface, #fff);
    box-shadow: 0 10px 30px -8px rgba(2, 6, 23, .4);
    border-radius: 8px;
}
.CodeMirror-hint { color: var(--pp-text, #0f172a); padding: 2px 10px; }
li.CodeMirror-hint-active { background: var(--pp-accent, #4f46e5); color: var(--bs-white, #fff); }
