/* base sizes */
.page {
    --sidebar-w: 260px; /* expanded width */
    --sidebar-w-sm: 56px; /* collapsed width */
}

/* Make the main container a flex row (you already have this; keeping here for clarity) */
.page {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

    /* Sidebar: fixed-width column that can shrink */
    .page > .sidebar-host {
        flex: 0 0 var(--sidebar-w);
        width: var(--sidebar-w);
        overflow: hidden; /* hide menu when narrower */
        transition: width .2s ease; /* nice animation */
    }

    /* Collapsed state: shrink the sidebar */
    .page.sidebar-collapsed > .sidebar-host {
        flex-basis: var(--sidebar-w-sm);
        width: var(--sidebar-w-sm);
    }

    /* Main takes the rest */
    .page > main {
        flex: 1 1 auto;
        min-width: 0; /* prevents overflow pushing layout */
    }

/* Ensure inner scroll area can shrink */
.sidebar-scroll {
    min-width: 0;
    height: 100%;
    overflow: auto;
}

/* Optional: on mobile, convert to an off-canvas drawer */
@media (max-width: 1024px) {
    .page {
        position: relative;
    }

        .page > .sidebar-host {
            position: fixed;
            inset: 0 auto 0 0;
            transform: translateX(-100%);
            width: 80vw;
            max-width: 300px;
            box-shadow: none;
        }

        .page.sidebar-expanded > .sidebar-host {
            transform: translateX(0);
        }
}

/* shared vars */
.page {
    --sidebar-w: 260px;
    --sidebar-w-sm: 56px;
}

.page {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.sidebar-scroll {
    height: 100%;
    overflow: auto;
    min-width: 0;
}

/* ===================== DESKTOP (push layout) ===================== */
@media (min-width: 1025px) {
    .page > .sidebar-host {
        position: sticky;
        top: 0;
        height: 100vh;
        flex: 0 0 var(--sidebar-w);
        width: var(--sidebar-w);
        overflow: hidden;
        transition: width .2s ease;
        transform: none !important; /* ensure no mobile transform leaks in */
        box-shadow: none;
        z-index: 101;
    }

    .page.sidebar-collapsed > .sidebar-host {
        flex-basis: var(--sidebar-w-sm);
        width: var(--sidebar-w-sm);
    }

    .page > main {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* scrim never shows on desktop */
    .sidebar-scrim {
        display: none !important;
    }
}

/* ===================== MOBILE (overlay drawer) ===================== */
@media (max-width: 1024px) {
    .page {
        position: relative;
    }

        .page > .sidebar-host {
            position: fixed;
            inset: 0 auto 0 0;
            height: 100vh;
            width: 80vw;
            max-width: 300px;
            transform: translateX(-100%);
            transition: transform .25s ease;
            box-shadow: none;
            z-index: 1001;
        }

        .page.sidebar-expanded > .sidebar-host {
            transform: translateX(0);
        }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        display: none;
        background: transparent;
        z-index: 1000;
    }

    .page.sidebar-expanded > .sidebar-scrim {
        display: block;
    }
}

/* make window body fill and scroll nicely */
.json-win .k-window-content {
    height: 100%;
    padding: 12px;
}

.json-window {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.json-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

    .json-preview pre {
        white-space: pre-wrap;
        word-break: break-word;
    }

/* keep everything on one line so the table grows and scrolls horizontally */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

/* give the table freedom to be wider than its container */
.table-responsive .table {
    min-width: 100%;
    width: max-content;
}

/* optional: make Actions column wide enough for the two buttons */
.table-nowrap th.actions,
.table-nowrap td.actions {
    min-width: 140px;
}

/* optional: sticky header while scrolling horizontally/vertically */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

/* layout + scrolling */
.k-tooltip .k-popup-content .compact-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
}

.k-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.k-tooltip .tooltip-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.k-tooltip .pre-json {
    white-space: pre-wrap;
    margin: 0;
}

/* copy buttons */
.k-tooltip .copy-pill,
.k-tooltip .copy-mini {
    border: 1px solid gray;
    border-radius: 9999px;
    cursor: pointer;
    background: rgba(250,250,250,.95);
    color: #111;
    font-weight: 600;
}

.k-tooltip .copy-pill {
    padding: 6px 12px;
    font-size: .8125rem;
}

.k-tooltip .copy-mini {
    padding: .125rem .375rem;
    font-size: .75rem;
}

    .k-tooltip .copy-pill:hover, .k-tooltip .copy-mini:hover {
        background: rgba(250,250,250,.70);
    }

/* reuse the same pill styles you used for the window; just scope to tooltip */
.k-tooltip .copy-pill,
.k-tooltip .copy-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid gray;
    background: rgba(250,250,250,.95);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.k-tooltip .copy-mini {
    padding: .125rem .375rem;
    font-size: .75rem;
}

    .k-tooltip .copy-pill:hover, .k-tooltip .copy-mini:hover {
        background: rgba(250,250,250,.7);
    }

    /* copied state */
    .k-tooltip .copy-pill.copied span::after,
    .k-tooltip .copy-mini.copied::after {
        content: " ✓";
        margin-left: 4px;
        font-weight: 700;
    }

.k-tooltip .copy-pill.copied span::after {
    content: " ✓";
    margin-left: 4px;
    font-weight: 700;
}

/* kill the always-on dim on mobile */
@media (max-width: 1024px) {
    .page > .sidebar-host {
        box-shadow: none; /* <-- important */
    }
}

/* Desktop: no overlay */
@media (min-width: 1025px) {
    .sidebar-scrim {
        display: none !important;
    }

    .page > .sidebar-host {
        box-shadow: none;
    }
}

/* Mobile: drawer + scrim */
@media (max-width: 1024px) {
    .page {
        position: relative;
    }

        .page > .sidebar-host {
            position: fixed;
            inset: 0 auto 0 0;
            width: 80vw;
            max-width: 300px;
            height: 100vh;
            transform: translateX(-100%);
            transition: transform .25s ease;
            background: #fff; /* your menu bg */
            box-shadow: 0 2px 16px rgba(0,0,0,.2); /* small shadow just for the panel */
            z-index: 1001;
        }

        .page.sidebar-expanded > .sidebar-host {
            transform: translateX(0);
        }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        display: none; /* hidden by default */
        background: rgba(0,0,0,.35); /* the dimmer */
        border: 0;
        padding: 0;
        z-index: 1000;
    }

    .page.sidebar-expanded > .sidebar-scrim {
        display: block;
    }
}


/* Make Telerik tooltips light and on-brand */
.compact-info p {
    margin: 0;
    padding: 1px;
}

.compact-info hr {
    margin: 3px;
    margin-left: 0px;
    padding: 1px;
}

.compact-info h7 {
    font-weight: 600;
}

.compact-info {
    display: flex;
    flex-direction: column;
    height: 100%; /* let the tooltip’s Height="550px" apply */
}

.compact-info-name p {
    padding-left: 10px;
}

.tooltip-header {
    /* nothing special—just content sizes itself */
}

.tooltip-body {
    flex: 1; /* fill remaining height */
    overflow-y: auto; /* scroll vertically if too tall */
    overflow-x: hidden;
    word-wrap: break-word;
    background-color: #fff;
}

.tooltip-section-header {
    padding-left: 0px;
}

.tooltip-body .table {
    width: 100%;
    table-layout: auto; /* auto so columns size to content */
}

    /* Prevent the first column from wrapping */
    .tooltip-body .table th,
    .tooltip-body .table td:first-child {
        white-space: nowrap;
        padding-left: 10px;
    }

    /* Allow the second column to wrap */
    .tooltip-body .table td:nth-child(2) {
        white-space: normal;
        word-wrap: anywhere;
    }

.k-popup.k-tooltip,
.k-tooltip,
.k-tooltip .k-popup-content {
    background: #fce9ec; /* light surface */
    color: var(--bs-body-color, #212529); /* readable text */
    border: 1px solid rgba(0,0,0,.12);
    border-radius: var(--brand-radius, .5rem);
    box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}

    /* If your theme renders a little arrow ("callout"), tint it to match */
    .k-tooltip .k-callout,
    .k-tooltip .k-tooltip-callout {
        color: #fff; /* newer themes use `color` for callout fill */
        border-color: #fff; /* older themes use border color */
    }

    /* Keep your layout/scrolling from earlier overrides */
    .k-tooltip .k-popup-content .compact-info {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .k-tooltip .tooltip-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }