/* ── Dialog title bar: primary colour, white text, draggable ───────── */
.mud-dialog-container .mud-dialog .mud-dialog-title {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
    cursor: move;
    user-select: none;
    touch-action: none;   /* iPad: a finger on the title bar drags the dialog instead of scrolling the page */
}

    /* Title text, icons and the close (X) button - all white */
    .mud-dialog-container .mud-dialog .mud-dialog-title .mud-typography,
    .mud-dialog-container .mud-dialog .mud-dialog-title .mud-icon-root,
    .mud-dialog-container .mud-dialog .mud-dialog-title .mud-button-close {
        color: var(--mud-palette-primary-text) !important;
    }

    /* Close button keeps a normal pointer, not the move cursor */
    .mud-dialog-container .mud-dialog .mud-dialog-title .mud-button-close {
        cursor: pointer;
    }

/* Breathing room between the coloured bar and the content */
.mud-dialog-container .mud-dialog .mud-dialog-title + .mud-dialog-content {
    padding-top: 16px;
}


/* ── Touch-friendly scroll area (use class="touch-scroll") ─────────── */
.touch-scroll {
    overflow: auto;                    /* scroll both ways */
    -webkit-overflow-scrolling: touch; /* smooth finger scrolling on iPhone/iPad */
    touch-action: pan-x pan-y;         /* finger swipes scroll left/right and up/down */
    overscroll-behavior: contain;      /* scrolling the table doesn't scroll the page behind */
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    /* Firefox scrollbar */
    scrollbar-width: auto;
    scrollbar-color: var(--mud-palette-primary) #ececec;
}

    /* Chrome / Edge: thick, easy-to-grab scrollbars */
    .touch-scroll::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    .touch-scroll::-webkit-scrollbar-track {
        background: #ececec;
    }

    .touch-scroll::-webkit-scrollbar-thumb {
        background: var(--mud-palette-primary);
        border-radius: 7px;
        border: 3px solid #ececec;
    }

        .touch-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--mud-palette-primary-darken);
        }

    .touch-scroll::-webkit-scrollbar-corner {
        background: #ececec;
    }


/* ── Simple data table for dialogs (use class="detail-table") ──────── */
.detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .detail-table th,
    .detail-table td {
        padding: 8px 14px;
        white-space: nowrap;
        text-align: left;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    /* Column headers stay visible while scrolling down */
    .detail-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--mud-palette-background-gray, #f5f5f5);
        font-weight: 600;
    }

    .detail-table tbody tr:nth-child(even) {
        background: rgba(0, 0, 0, 0.025);
    }

    .detail-table tbody tr:hover {
        background: rgba(0, 0, 0, 0.06);
    }