/* ============================================================
   QUERY DISPLAY — BASE
   File: query-base.css

   PURPOSE
   ------------------------------------------------------------
   Shared renderer mechanics only.

   This file MUST NOT define:
   - colors
   - fonts
   - font sizes
   - borders
   - border radius
   - visual spacing
   - semantic group-specific widths
   - field-specific widths
   - table visual styling
   - theme-specific appearance

   Semantic backend attributes:
   - data-group
   - data-direction
   - data-layout-type
   - data-size
   ============================================================ */


/* ============================================================
   GLOBAL BOX MODEL
   ============================================================ */

.query-result-modal,
.query-result-modal *,
.query-result-modal *::before,
.query-result-modal *::after {
    box-sizing: border-box;
}


/* ============================================================
   MODAL
   ============================================================ */

.query-result-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
}

.query-result-modal.is-open {
    display: block;
}

.query-result-modal-backdrop {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow-y: auto;
}

.query-result-modal-dialog {
    position: relative;

    width: 100%;
    max-height: 100vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.query-result-modal-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.query-result-modal-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.query-result-modal-title {
    min-width: 0;
    margin: 0;
    text-align:left;
    overflow-wrap: anywhere;
}

.query-result-modal-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.query-result-modal-close {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;

    cursor: pointer;
}

.query-result-modal-body {
    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;
}


/* ============================================================
   THEME SELECTOR
   ============================================================ */

.query-result-theme-container {
    flex: 0 0 auto;
}

.query-result-theme-control {
    display: flex;
    align-items: center;
}

.query-result-theme-label {
    flex: 0 0 auto;
}

.query-result-theme-selector {
    max-width: 100%;
}


/* ============================================================
   COMPONENT
   ============================================================ */

.query-component {
    width: 100%;
    min-width: 0;
}

.query-component-header {
    display: flex;
    align-items: center;
}

.query-component-title {
    min-width: 0;
    margin: 0;

    overflow-wrap: anywhere;
}

.query-component-body {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   COMPONENT LAYOUT
   ------------------------------------------------------------
   layout_type describes HOW the component is rendered.

   component_type describes WHAT the component represents.

   component_type is never interpreted as styling here.
   ============================================================ */

.query-component[data-layout-type] {
    width: 100%;
}


/* ============================================================
   COMPONENT SIZE
   ------------------------------------------------------------
   Structural size semantics.

   Themes control visual presentation.
   ============================================================ */

.query-component[data-size="small"] {
    max-width: 640px;
}

.query-component[data-size="medium"] {
    max-width: 960px;
}

.query-component[data-size="large"] {
    max-width: 1200px;
}

.query-component[data-size="full"] {
    max-width: 100%;
}


/* ============================================================
   GROUPS
   ============================================================ */

.query-groups {
    width: 100%;
    min-width: 0;
}

.query-group {
    min-width: 0;
}

.query-group[data-group] {
    min-width: 0;
}

.query-group-label,
.query-group-title {
    min-width: 0;
}

.query-group-values {
    min-width: 0;
}


/* ============================================================
   GROUP DIRECTION
   ============================================================ */

.query-group-values {
    display: flex;
    min-width: 0;
}

.query-group-values[data-direction="horizontal"] {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;

    width: max-content;
    max-width: 100%;
}

.query-group-values[data-direction="vertical"] {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;

    width: 100%;
}


/* ============================================================
   GROUP VALUES
   ============================================================ */

.query-group-value {
    min-width: 0;
    flex: 0 0 auto;
}

.query-group-values[data-direction="horizontal"]
.query-group-value {
    width: auto;
}

.query-group-values[data-direction="vertical"]
.query-group-value {
    width: 100%;
}


/* ============================================================
   FIELD
   ============================================================ */

.query-field {
    min-width: 0;

    display: flex;
    align-items: baseline;
}

.query-field-label {
    flex: 0 0 auto;
    min-width: 0;
}

.query-field-value {
    min-width: 0;
    flex: 1 1 auto;

    overflow-wrap: anywhere;
}


/* ============================================================
   HORIZONTAL FIELD
   ============================================================ */

.query-group-values[data-direction="horizontal"]
.query-group-value
.query-field {
    width: auto;
}

.query-group-values[data-direction="horizontal"]
.query-group-value
.query-field-value {
    flex: 0 1 auto;

    white-space: nowrap;
}


/* ============================================================
   VERTICAL FIELD
   ============================================================ */

.query-group-values[data-direction="vertical"]
.query-group-value
.query-field {
    width: 100%;
}

.query-group-values[data-direction="vertical"]
.query-group-value
.query-field-value {
    white-space: normal;
}


/* ============================================================
   TABLE WRAPPER
   ============================================================ */

.query-table-wrapper {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   TABLE STRUCTURE
   ------------------------------------------------------------
   NO VISUAL TABLE STYLING HERE.
   ============================================================ */

.query-table {
    width: max-content;
    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: auto;
}

.query-table thead,
.query-table tbody {
    width: 100%;
}

.query-table th,
.query-table td {
    min-width: 0;
    vertical-align: top;
}


/* ============================================================
   GENERIC DATA-GROUP SUPPORT
   ------------------------------------------------------------
   data-group identifies semantic meaning only.

   No group value is interpreted here.
   ============================================================ */

.query-table [data-group] {
    min-width: 0;
}


/* ============================================================
   TABLE GROUP CONTENT
   ============================================================ */

.query-table [data-group]
.query-group-values {
    min-width: 0;
}

.query-table [data-group]
.query-group-values[data-direction="horizontal"] {
    display: flex;
    flex-direction: row;

    width: max-content;
    max-width: 100%;
}

.query-table [data-group]
.query-group-values[data-direction="vertical"] {
    display: flex;
    flex-direction: column;

    width: 100%;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.query-empty {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ============================================================
   RESPONSIVE STRUCTURE
   ============================================================ */

@media (max-width: 768px) {

    .query-result-modal-backdrop {
        align-items: flex-end;
    }

    .query-result-modal-dialog {
        width: 100%;
        max-height: 92vh;
    }

    .query-result-modal-header {
        align-items: center;
    }

    .query-result-modal-actions {
        flex: 0 0 auto;
    }

    .query-result-theme-control {
        align-items: center;
    }

    .query-result-theme-selector {
        max-width: 180px;
    }

    .query-table-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .query-table {
        width: max-content;
        min-width: 100%;
    }
}


@media (max-width: 480px) {

    .query-result-modal-dialog {
        max-height: 95vh;
    }

    .query-result-modal-actions {
        gap: 6px;
    }

    .query-result-theme-label {
        display: none;
    }

    .query-result-theme-selector {
        max-width: 130px;
    }
}