html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/*.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/logo.png');
    mask: url('../images/logo.png');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 180px;
    height: 24px;
}
*/
.header-logo {
    background-image: url(../images/paypaklogo.svg);
    width: 180px;
    height: 85%;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.logon-template-header {
    height: 75px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.loading-image {
    width: 50px;
    height: 50px;
}

.gn_rightalign {
    text-align: right !important;
}

.gn_centeralign {
    text-align: center !important;
}

.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}

.xaf-component-image {
    border-radius: 50% !important;
    filter: drop-shadow(5px 5px 5px #999);
}

.img-thumbnail {
    border: hidden !important;
}

.xaf-alert-message {
    white-space: pre-line !important;
}

/* Target the parent container that wraps the date field */
.dxbl-fl-ctrl:has(.fixed-width-date-field) {
    max-width: 150px !important;
    flex: 0 0 auto !important;
}

/* Width Definitions */
.custom-numeric-width {
    width: 150px !important;
}

.custom-date-width {
    width: 150px !important;
}

.custom-text-short {
    width: 200px !important;
}

.custom-dropdown-width {
    width: 400px !important;
}

.custom-tagbox-width {
    width: 400px !important;
}

.custom-text-long {
    width: 400px !important;
    flex-grow: 1 !important;
}

/* Layout Logic: Prevents stretching and aligns items */
.custom-numeric-width,
.custom-date-width,
.custom-text-short,
.custom-dropdown-width,
.custom-tagbox-width {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
}

/* Internal Component Fixes */
.custom-numeric-width .dxbl-input-group,
.custom-date-width .dxbl-date-edit,
.custom-text-short .dxbl-text-edit,
.custom-dropdown-width .dxbl-combobox,
.custom-tagbox-width .dxbl-tagbox {
    width: 100% !important;
}

/* 1. Target the label container to prevent the row from stretching */
.dxbl-fl-item:has(.xaf-file-data-editor) {
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

/* 2. Target the Choose File combo box directly using XAF's internal class */
.xaf-file-data-editor {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
    flex-grow: 0 !important;
    display: inline-flex !important;
}

/* 3. Ensure the text inside (the filename) truncates properly */
.xaf-file-data-editor .dxbl-text-edit-template {
    width: 100% !important;
    overflow: hidden;
}

/* 4. Fix the progress bar container seen in your HTML */
.xaf-file-data-editor + .progress-container,
.dxbl-fl-ctrl:has(.xaf-file-data-editor) .progress-container {
    width: 400px !important;
}

/* Team Leave Calendar — hide Resources dropdown from scheduler toolbar */
.dxbl-sc-tb-wrapper .dxbl-btn-group:has(dxbl-toolbar-item[text="Resources"]) {
    display: none !important;
}

/* Team Leave Calendar — shrink month cells so all 5 weeks fit on screen without scrolling */
dxbl-month-view td.dxbl-sc-time-cell {
    height: 135px !important;
}

/* ── Team Leave Calendar — tooltip ───────────────────────────────────── */
.ct-tooltip {
    min-width: 220px;
    max-width: min(340px, 90vw);
    box-sizing: border-box;
}

/* ── Team Leave Calendar — mobile / responsive ───────────────────────── */
@media (max-width: 767px) {
    /* Toolbar: scroll horizontally instead of wrapping/clipping */
    .dxbl-sc-tb-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    /* Month cells: halve the height so the full month fits without vertical scroll */
    dxbl-month-view td.dxbl-sc-time-cell {
        height: 72px !important;
    }

    /* Appointment text: tighter on small cells */
    .dxbl-sc-appointment-content {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    /* Tooltip: full width on very small screens */
    .ct-tooltip {
        max-width: 95vw;
    }

    /* Scheduler itself: use full remaining viewport height on mobile */
    .dxbl-scheduler {
        min-height: 420px;
    }
}

/* Hide Copy Cell Value action from toolbar */
button[data-action-name="Copy Cell Value"] {
    display: none !important;
}

.dxbl-btn[data-action-name="Support Action"] {
    border: none !important;
}

/* Global fix for all XAF Blazor grids */
dxbl-grid.dxbl-grid {
    height: calc(100vh - 300px);
    min-height: 400px;
}

/* Quick Edit — dirty (changed) row highlight */
.qe-row-dirty > td:not(.dxbl-grid-empty-cell) {
    background-color: color-mix(in srgb, var(--bs-warning), transparent 80%) !important;
}

/* Quick Edit — locked row */
.qe-row-locked > td:not(.dxbl-grid-empty-cell) {
    opacity: 0.5;
}

/* Quick Edit — dirty + locked */
.qe-row-dirty.qe-row-locked > td:not(.dxbl-grid-empty-cell) {
    background-color: color-mix(in srgb, var(--bs-warning), transparent 80%) !important;
    opacity: 0.6;
}