/* Static styles that InnerFormSkeleton.razor and ListFull.razor used to render inline in a <style>
   element of every instance - one 17 KB copy per form, tab component and list template, re-sent in
   each render batch and re-parsed by the browser (adding a stylesheet restyles the whole document).
   Linked once, last in StyleLinksComponent, so the rules still come after the theme stylesheets. */

/* ---- InnerFormSkeleton ---- */
.inner-form-window {
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Chromeless-cover mode (activities): no title bar; the form's own cover is the top of
   the window and the window controls float over it as a translucent pill, top-right. */
.inner-form-window.chromeless-cover .inner-form-scroll {
    margin-top: 0 !important;
}

.cover-float-controls {
    position: absolute;
    /* Tucked fully inside the top-right: enough top offset to sit clear of the rounded
       corner, and enough right inset to clear the content scrollbar (~17px) plus a margin
       so the pill never overhangs the edge. */
    top: 10px;
    right: 30px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px 3px;
    border-radius: 999px;
    background: rgba(23, 28, 38, 0.6);
}

    .cover-float-controls button,
    .cover-float-controls .cover-float-btn {
        width: 26px;
        height: 26px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

        .cover-float-controls button:hover,
        .cover-float-controls .cover-float-btn:hover {
            background: rgba(255, 255, 255, 0.18);
        }

    .cover-float-controls i {
        color: #fff;
    }

    /* The close control is a ButtonDropdown; neutralise its default (bright) borderless
       hover so it matches the translucent pill instead of flashing white. */
    .cover-float-controls .ButtonDropdown,
    .cover-float-controls .ButtonDropdownSide {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #fff !important;
        border-radius: 50% !important;
    }

    .cover-float-controls .ButtonDropdownSide {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cover-float-controls .ButtonDropdownSide:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            color: #fff !important;
        }

.page-form-window {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.inner-form-window.maximized {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    min-height: 0 !important;
    /* Square corners when maximized - rounded corners clip a full-bleed cover and show white
       triangles in the top corners. Also drop the 1px ui_border-1 frame that leaves a thin
       light line around the edges. */
    border-radius: 0 !important;
    border: none !important;
}


.inner-form-window .dxbl-tabs {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

    .inner-form-window .dxbl-tabs-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.inner-form-window.maximized .dxbl-tabs-content {
    overflow: hidden !important;
}

.inner-form-window .dxbl-tabs-content-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.inner-form-window.maximized .dxbl-tabs-content-panel {
    overflow: hidden !important;
}

/* Maximized clipping (above) is meant for tabs whose content scrolls internally (lists,
   trees, spreadsheet). A plain form-field tab that is taller than the window would just be
   clipped with no way to reach the bottom. For those tabs let the content overflow so the
   outer .main-tab-content scroller can reach it. */
.inner-form-window.maximized .dxbl-tabs-content:not(:has(.ListFullContentWrapper)):not(:has(.TreeListContentWrapper)):not(:has(.spreadsheet-tab-content)),
.inner-form-window.maximized .dxbl-tabs-content-panel:not(:has(.ListFullContentWrapper)):not(:has(.TreeListContentWrapper)):not(:has(.spreadsheet-tab-content)) {
    overflow: visible !important;
}

/* inner-form-content-wrapper is a bounded-height flex ITEM (via align-self:stretch
   in InnerFormSkeletonContent's flex-row context), but it is not a flex container,
   so its block children cannot inherit that bounded height. Making it a flex column
   allows the form's outer load-content-body to become a flex child and receive a
   definite height, which in turn lets dxbl-tabs → dxbl-tabs-content-panel also
   resolve to a definite height and anchor the full height chain. */
.inner-form-window .inner-form-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* When the form's own LoadContent wraps a tab manager (all "New*" forms), make it
   fill inner-form-content-wrapper. This completes the height chain so that
   dxbl-tabs-content-panel becomes height-bounded, enabling the rule below to
   constrain the list and keep the horizontal scrollbar in the visible area. */
.inner-form-window .inner-form-content-wrapper > .load-content-body:has(.dxbl-tabs):not(.hiddenHeight) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The per-tab content element (.dxbl-tabs-content, a child of the content panel)
   is now a bounded-height flex column. LoadContent wraps the list in a plain block
   (.load-content-body) that would otherwise break the flex height chain down to
   the list. The grid would then grow to its full row height and its horizontal
   scrollbar would end up below the visible area (scroll works, but bar is hidden).
   Scoped with :has() to only the wrappers that contain a list, leaving form-field
   tabs alone. */
.inner-form-window .dxbl-tabs-content > .load-content-body:has(.ListFullContentWrapper):not(.hiddenHeight) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Same reasoning as the ListFull rule above, for XTreeListGroup's own host div
   (.TreeListContentWrapper) - a separate component with its own height mechanics
   (h-100 + optional MaxHeight cap), not covered by the :has(.ListFullContentWrapper)
   selector above. */
.inner-form-window .dxbl-tabs-content > .load-content-body:has(.TreeListContentWrapper):not(.hiddenHeight) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.univer-spreadsheet-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}


.inner-form-window .inner-form-scroll {
    min-height: 0;
    overflow-y: auto;
}

.save-panel-holder {
    flex-shrink: 0;
    background-color: var(--bs-body-bg, white);
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    padding: 0.5rem;
    width: 100%;
    gap: 10px;
    box-sizing: border-box;
    z-index: 2;
}

.inner-form-window .main-tab-content {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

.inner-form-window.maximized .main-tab-content {
    overflow-y: auto !important;
}

.inner-form-window .spreadsheet-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.inner-form-window .dxbl-tabs-content:has(.spreadsheet-tab-content) {
    overflow: visible !important;
}

.spreadsheet-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
}

.spreadsheet-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.spreadsheet-toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    color: #0f766e;
    background: #ccfbf1;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
    flex-shrink: 0;
}

.spreadsheet-toolbar-text {
    min-width: 0;
}

.spreadsheet-title {
    font-weight: 700;
    color: #172033;
    line-height: 1.1;
}

.spreadsheet-subtitle {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.1;
}

.spreadsheet-name {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    border-radius: 3px;
    padding: 0 2px;
    margin-left: -2px;
}

.spreadsheet-name:hover {
    background: rgba(100, 116, 139, 0.12);
}

.spreadsheet-name.editing {
    cursor: text;
    overflow: visible;
    text-overflow: clip;
    outline: none;
    background: #fff;
    color: #172033;
    box-shadow: 0 0 0 1px #2563eb;
}

.spreadsheet-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spreadsheet-autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    user-select: none;
}

.spreadsheet-autosave-status.saved {
    color: #16a34a;
}

.spreadsheet-autosave-status.saving {
    color: #2563eb;
}

.spreadsheet-autosave-status.pending {
    color: #b45309;
}

.spreadsheet-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.spreadsheet-action-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

.spreadsheet-action-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.spreadsheet-action-button.secondary {
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

.spreadsheet-action-button.secondary:not(:disabled):hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.spreadsheet-action-button.primary {
    color: #ffffff;
    background: #0f766e;
    border-color: #0f766e;
}

.spreadsheet-action-button.primary:not(:disabled):hover {
    background: #115e59;
    border-color: #115e59;
}

.spreadsheet-workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem;
}

.inner-form-window .spreadsheet-wrapper {
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 400px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.spreadsheet-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

.spreadsheet-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

/* Windowed (non-maximized) form: the window is height:fit-content (indefinite), so
   the height:100% links from .dxbl-tabs down to .spreadsheet-tab-content resolve to
   auto and the spreadsheet collapses to .spreadsheet-wrapper's 400px min-height,
   leaving dead space below. Flex stretching distributes the real space without
   needing definite heights. Engaged only while the spreadsheet tab is the active
   one, so the Main tab keeps its plain scrolling layout. */
.inner-form-window .inner-form-scroll:has(.dxbl-tabs-content.dxbl-active .spreadsheet-tab-content) {
    display: flex;
    flex-direction: column;
}

.inner-form-window .inner-form-scroll:has(.dxbl-tabs-content.dxbl-active .spreadsheet-tab-content) > .dxbl-tabs {
    flex: 1 1 auto;
    min-height: 0;
}

.inner-form-window .dxbl-tabs-content-panel:has(> .dxbl-tabs-content.dxbl-active .spreadsheet-tab-content) {
    flex: 1 1 auto;
    min-height: 0;
}

.inner-form-window .dxbl-tabs-content.dxbl-active > .spreadsheet-tab-content {
    flex: 1 1 auto;
    min-height: 0;
}


.inner-form-window.maximized .inner-form-scroll {
    overflow-y: hidden !important;
}

.inner-form-window.maximized .inner-form-scroll,
.inner-form-window.maximized .dxbl-tabs-content,
.inner-form-window.maximized .dxbl-tabs-content-panel,
.inner-form-window.maximized .InnerFormSkeletonContent,
.inner-form-window.maximized .spreadsheet-wrapper {
    min-height: 0 !important;
    height: 100% !important;
}

/* Presence avatars in the form header: the shared ViewedByUsers CSS is built for a vertical
   sidebar (absolutely-positioned, stacked icons). Re-flow it into a compact horizontal row
   with a tooltip that drops below the avatar. [2026-07-10] */
.inner-form-presence {
    margin-right: 0.25rem;
}

.inner-form-presence .app-connected-user-list-wrapper {
    flex-direction: row;
    gap: 0;
    align-items: center;
    padding-left: 6px;
}

.inner-form-presence .app-connected-user-wrapper {
    flex-direction: row;
    align-items: center;
    margin-left: -6px;
}

.inner-form-presence .app-connected-user-wrapper:first-child {
    margin-left: 0;
}

.inner-form-presence .app-connected-user-icon {
    position: static;
    margin: 0;
    height: 1.75rem;
    width: 1.75rem;
    min-height: 0;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg, #fff);
    outline: 1px solid rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inner-form-presence .app-connected-user-summary {
    left: auto;
    right: 0;
    top: 2.25rem;
    z-index: 3000;
}

.co-edit-banner {
    background-color: #e7f1ff;
    color: #084298;
    border: 1px solid #b6d4fe;
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    gap: 0.4rem;
}



/* Scroll to top button */
.scroll-to-top-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-primary, #007bff);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.8;
}

.scroll-to-top-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.scroll-to-top-btn:active {
    transform: scale(0.95);
}

/* ---- ListFull ---- */
.dxbl-list-box-item-selected{
    color: #000 !important;
}

.dxbl-splitter-pane-content{
    padding-top: 0 !important;
    
}



.dxbl-grid.ui_dxdatagrid.all-pointer {
    padding-top: 0 !important;
}

.dxbl-grid-group-panel-container{
    margin: 2px !important;
}


.dxbl-text{
    margin-bottom: 0 !important;
}

.terra-live-row-blink,
.terra-live-row-blink > td,
.terra-live-row-blink .dxbl-grid-cell {
    animation: terra-live-row-blink 1.4s ease-out 1;
}

@keyframes terra-live-row-blink {
    0% {
        background-color: rgba(72, 187, 120, 0.24) !important;
        box-shadow: inset 0 0 0 9999px rgba(72, 187, 120, 0.18);
    }
    45% {
        background-color: rgba(72, 187, 120, 0.14) !important;
        box-shadow: inset 0 0 0 9999px rgba(72, 187, 120, 0.10);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 9999px rgba(72, 187, 120, 0);
    }
}

/* The filter-values menu renders its "Apply" action as .dxbl-btn-primary, but in this
   theme the button's base background resolves to near-transparent (only the hover colour
   shows) and the disabled state is barely visible. Pin it to the system primary blue
   (--action-primary) so it matches the other primary buttons. Scoped to the filter menu
   so no other primary button is affected. */
.dxbl-filter-menu-dropdown .dxbl-btn-primary {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
    color: #fff !important;
}

.dxbl-filter-menu-dropdown .dxbl-btn-primary:hover {
    background-color: #0069d9 !important;
    border-color: #0062cc !important;
}

.dxbl-filter-menu-dropdown .dxbl-btn-primary.dxbl-disabled,
.dxbl-filter-menu-dropdown .dxbl-btn-primary:disabled {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
    color: #fff !important;
    opacity: 0.65 !important;
}


/* ===== PHONE (<768px): shared overrides; desktop untouched ===== */
@media (max-width: 767.98px) {
    /* Shell */
    .MainFormContentHost {
        left: 0 !important;
        width: 100% !important;
    }

    .MainFormContentHost .MainFormGridArea {
        height: calc(100dvh - 50px) !important;
        padding-inline: 0.25rem;
    }

    .appUpperRow {
        width: 100%;
        padding-left: 3rem;
    }

    .appUpperLogo {
        left: 3rem;
        height: 26px;
    }

    .appUpperRow > div[style*="width: 200px"] {
        display: none;
    }

    /* Forms */
    [data-column-count] {
        grid-template-columns: 1fr !important;
    }

    .card-content-wrapper {
        padding: 0.5rem;
    }

    .innerform-savepanel > [data-column-count] {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    input,
    textarea,
    select,
    .dxbl-text-edit-input {
        font-size: 16px;
    }

    /* Popups: full screen like .maximized */
    div:has(> .inner-form-window:not(.page-form-window)) {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .inner-form-window:not(.page-form-window) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        overflow: auto;
    }

    /* Filters / toolbars */
    .innerform-filterpanel {
        flex-wrap: wrap !important;
        padding: 0.5rem;
    }

    .innerform-filterpanelControls,
    .innerform-filterpanelButtons {
        flex-wrap: wrap;
    }

    /* Time tracker */
    .tt-c2 {
        left: 40px;
        width: 110px;
        min-width: 110px;
    }

    .tt-c1 {
        width: 40px;
        min-width: 40px;
    }

    .tt-r2 {
        right: 0;
    }

    .tt-sticky-r {
        position: static;
    }
}

@media (max-width: 767.98px) {
    /* List: left panel stacks above the grid */
    .ListFullWrapper {
        flex-direction: column !important;
        overflow-y: auto;
    }

    .ListFullWrapper > .dxbl-splitter-pane,
    .ListFullWrapper > dxbl-splitter-pane {
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    .ListTemplateLeftPanel {
        max-height: 40vh;
        overflow: auto;
    }

    /* DevExpress popups / windows / dropdowns stay inside the viewport */
    .dxbl-popup-portal .dxbl-popup,
    .dxbl-modal-content,
    .dxbl-window,
    .dxbl-dropdown {
        max-width: 100vw !important;
    }

    .dxbl-window {
        left: 0 !important;
        width: 100vw !important;
    }

    .ui_toast-container {
        max-width: 96vw;
    }

    /* Overflow safety net */
    .inner-form-window img,
    .inner-form-window textarea,
    .inner-form-window .dxbl-text-edit,
    .inner-form-window .dxbl-listbox {
        max-width: 100%;
    }

    .inner-form-window .card-body,
    .inner-form-window .card-content-wrapper {
        min-width: 0;
        overflow-x: auto;
    }

    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 767.98px) {
    /* Tabs: swipe-scroll strip, thumb-sized tabs */
    .dxbl-tabs-tablist .dxbl-scroll-viewer-content {
        height: 2.75rem;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .dxbl-tabs-tablist .dxbl-scroll-viewer-content::-webkit-scrollbar {
        display: none;
    }

    .dxbl-tabs-item {
        --dxbl-tabs-tab-padding-x: 0.75rem;
        min-height: 2.75rem;
        white-space: nowrap;
        font-size: 14px;
        scroll-snap-align: start;
    }

    .dxbl-tabs-tablist .dxbl-scroll-viewer-content ul {
        scroll-snap-type: x proximity;
    }
}

@media (max-width: 767.98px) {
    /* List grids as cards (rows marked by GridCards.js) */
    .ui_dxdatagrid table.dxbl-grid-table:has(tr[data-card-row]) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .ui_dxdatagrid table.dxbl-grid-table:has(tr[data-card-row]) > colgroup,
    .ui_dxdatagrid table.dxbl-grid-table:has(tr[data-card-row]) > thead {
        display: none;
    }

    .ui_dxdatagrid table.dxbl-grid-table:has(tr[data-card-row]) > tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
    }

    tr[data-card-row] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        background: #fff;
        border: 1px solid #dfdfdf;
        border-radius: 6px;
        padding: 10px 12px;
        height: auto !important;
    }

    tr[data-card-row] > td {
        display: block;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: 13px;
        overflow-wrap: anywhere;
        background: transparent !important;
    }

    tr[data-card-row] > td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        color: #6b7280;
    }

    tr[data-card-row] > td[data-card-title] {
        grid-column: 1 / -1;
        order: -1;
        font-size: 15px;
        font-weight: 600;
    }

    tr[data-card-row] > td[data-card-title]::before {
        display: none;
    }

    tr[data-card-row] > td[data-card-util] {
        grid-column: 1 / -1;
        order: -2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        min-height: 36px;
    }

    tr[data-card-row] > td:not([data-card-util]):empty {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* Card tweaks from first phone test */
    tr[data-card-row] > td[data-card-util] {
        grid-column: auto;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1;
    }

    tr[data-card-row] > td[data-card-util] * {
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    tr[data-card-row] > td[data-card-util]:last-of-type,
    tr[data-card-row] > td[data-card-util] ~ td[data-card-util] {
        justify-content: flex-end;
    }

    tr[data-card-row] > td[data-card-util]:first-child {
        justify-content: flex-start;
    }

    tr[data-card-row] > td > * {
        padding-left: 0 !important;
        text-align: left !important;
    }

    .dxbl-grid-group-panel,
    .dxbl-grid-group-panel-container {
        display: none !important;
    }

    .appUpperLogo {
        height: 18px;
    }
}

@media (max-width: 767.98px) {
    /* Card layout v2: flex rows, no sideways scroll, folded extras, no footer */
    tr[data-card-row] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 12px;
    }

    tr[data-card-row] > td {
        flex: 1 1 calc(50% - 6px);
        box-sizing: border-box;
    }

    tr[data-card-row] > td[data-card-title] {
        flex: 1 0 100%;
        order: -1;
    }

    tr[data-card-row] > td[data-card-util] {
        flex: 0 0 auto;
        order: -2;
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    tr[data-card-row] > td[data-card-util]:first-child {
        margin-right: auto;
    }

    tr[data-card-row] > td[data-card-blank] {
        display: none;
    }

    tr[data-card-row][data-card-more]:not([data-card-open]) > td[data-card-extra] {
        display: none;
    }

    tr[data-card-row][data-card-more]::after {
        content: "▾";
        flex: 1 0 100%;
        text-align: center;
        color: #1e9be9;
        font-size: 14px;
        line-height: 24px;
        border-top: 1px solid #eef0f2;
        margin-top: 4px;
        order: 99;
    }

    tr[data-card-row][data-card-more][data-card-open]::after {
        content: "▴";
    }

    .ui_dxdatagrid:has(tr[data-card-row]) .dxbl-scroll-viewer-content {
        overflow-x: hidden !important;
    }

    .ui_dxdatagrid:has(tr[data-card-row]) .dxbl-scroll-viewer-hor-scroll-bar {
        display: none !important;
    }

    /* No footer summary, no page-size selector; pager only when there are several pages */
    .ui_dxdatagrid tfoot,
    .ui_dxdatagrid .dxbl-pager-page-size-selector {
        display: none !important;
    }

    .ui_dxdatagrid[data-card-single-page] .dxbl-grid-bottom-panel {
        display: none !important;
    }

    /* List stats strip: drop the "Iš viso" block */
    .list-stats-states,
    .list-stats-divider {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Card action line: edit, delete and checkbox side by side, thumb-sized */
    tr[data-card-row] > td[data-card-util] {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 48% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 14px;
        min-height: 44px !important;
    }

    tr[data-card-row] > td[data-card-util] ~ td[data-card-util] {
        margin-left: auto !important;
    }

    tr[data-card-row] > td[data-card-util] > div {
        display: flex !important;
        align-items: center;
        gap: 14px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    tr[data-card-row] > td[data-card-util] svg {
        width: 28px !important;
        height: 28px !important;
        padding: 8px;
        box-sizing: content-box;
    }

    tr[data-card-row] > td[data-card-util] input[type="checkbox"],
    tr[data-card-row] > td[data-card-util] .dxbl-checkbox-check-element {
        width: 26px !important;
        height: 26px !important;
    }

    tr[data-card-row] > td[data-card-util] .dxbl-checkbox {
        padding: 9px;
    }
}

@media (max-width: 767.98px) {
    tr[data-card-row] > td[data-card-util] svg {
        width: 22px !important;
        height: 22px !important;
        padding: 11px;
    }

    tr[data-card-row] > td[data-card-util] input[type="checkbox"],
    tr[data-card-row] > td[data-card-util] .dxbl-checkbox-check-element {
        width: 22px !important;
        height: 22px !important;
    }

    .appUpperLogo {
        height: 14px;
        top: 18px;
        left: 3.25rem;
    }
}

@media (max-width: 767.98px) {
    /* Inner forms (popups such as New client) */
    .inner-form-window:not(.page-form-window) {
        display: flex;
        flex-direction: column;
    }

    .inner-form-window .card-header {
        flex-wrap: nowrap;
        padding-inline: 0.5rem;
    }

    /* Maximise is meaningless full screen; presence avatars take header room */
    .inner-form-window .card-header button:has(.fa-expand, .fa-compress),
    .inner-form-window .card-header .inner-form-presence {
        display: none !important;
    }

    .inner-form-window .inner-form-scroll {
        overflow-x: hidden;
        overflow-y: auto;
        padding-inline: 0.25rem;
        margin-top: 0.25rem !important;
        -webkit-overflow-scrolling: touch;
    }

    .inner-form-window .inner-form-content-wrapper {
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* Card headers carrying buttons (address cards) wrap instead of overflowing */
    .inner-form-window .card-header span[style*="margin-left: auto"] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Thumb-sized inputs and save bar */
    .inner-form-window .dxbl-text-edit,
    .inner-form-window .dxbl-dropdown-edit,
    .inner-form-window .dxbl-combobox,
    .inner-form-window .dxbl-date-edit {
        min-height: 44px;
    }

    .innerform-savepanel button,
    .innerform-savepanel .dxbl-btn {
        min-height: 44px;
    }

    .innerform-savepanel {
        padding: 0.25rem 0.5rem;
    }

    /* Logo upload: whole zone is the tap target, drag hint is useless */
    .logo-drop-zone .drag-drop-hint {
        display: none;
    }

    .logo-drop-zone .avatar-button,
    .logo-drop-zone .avatar-rentangle {
        min-height: 64px;
    }
}

@media (max-width: 767.98px) {
    /* Tabs: compact two-level strip */
    .dxbl-tabs {
        --dxbl-tabs-font-size: 14px;
        --dxbl-tabs-tab-padding-x: 0.65rem;
        --dxbl-tabs-tab-padding-y: 0.25rem;
    }

    .dxbl-tabs-item,
    .dxbl-tabs-item .dxbl-text {
        font-size: 14px !important;
        line-height: 1.2;
    }

    .dxbl-tabs-item {
        min-height: 2.5rem;
        padding-block: 0.25rem;
        border-left-width: 2px !important;
    }

    .dxbl-tabs-tablist .dxbl-scroll-viewer-content {
        height: 2.5rem;
    }

    .dxbl-scroll-viewer-content ul {
        border-bottom-width: 3px !important;
    }

    .dxbl-tabs-content-panel {
        margin-top: 0.25rem !important;
    }

    /* Bottom bar: one row, equal thumb-sized buttons */
    .innerform-savepanel > [data-column-count] {
        flex-wrap: nowrap !important;
        justify-content: stretch;
        align-items: stretch;
        gap: 0.4rem;
    }

    .innerform-savepanel > [data-column-count] > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .innerform-savepanel > [data-column-count] > div[style*="width: 10px"] {
        display: none;
    }

    .innerform-savepanel > [data-column-count] > :first-child:not(:only-child) {
        flex: 0 0 auto;
    }

    .innerform-savepanel button,
    .innerform-savepanel .dxbl-btn {
        font-size: 14px;
        padding-inline: 0.4rem;
        width: 100%;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    /* Bottom bar: every control the same width and height */
    .innerform-savepanel > [data-column-count] > :not(:first-child:not(:only-child)),
    .innerform-savepanel > [data-column-count] > :only-child {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .innerform-savepanel .ButtonDropdown {
        display: flex !important;
        width: 100% !important;
        height: 44px;
    }

    .innerform-savepanel .ButtonDropdown .ButtonDropdownSide.OneClickAction {
        flex: 1 1 auto;
        justify-content: center;
    }

    .innerform-savepanel .ButtonDropdown p {
        margin: 0;
        font-size: 14px;
    }

    .innerform-savepanel .dxbl-btn,
    .innerform-savepanel button {
        height: 44px;
    }

    /* Tabs: a bit smaller again */
    .dxbl-tabs-item,
    .dxbl-tabs-item .dxbl-text {
        font-size: 13px !important;
    }

    .dxbl-tabs-item {
        min-height: 2.25rem;
        --dxbl-tabs-tab-padding-x: 0.5rem;
    }

    .dxbl-tabs-tablist .dxbl-scroll-viewer-content {
        height: 2.25rem;
    }
}

@media (max-width: 767.98px) {
    /* Tab picker (TabPicker.js): a marked strip shows only its active tab; a tap opens the list */
    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) button:not(.dxbl-tabs-item),
    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) .dxbl-btn:not(.dxbl-tabs-item) {
        display: none !important;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) .dxbl-scroll-viewer-content {
        height: auto !important;
        overflow: visible !important;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) ul {
        display: flex;
        flex-direction: column;
        border-bottom: 0 !important;
        padding: 0;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) li {
        position: relative;
        width: 100%;
        margin: 0 !important;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) li:not(:has(.dxbl-active)) {
        display: none;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) li::after {
        content: "▾";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        pointer-events: none;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) .dxbl-tabs-item {
        width: 100% !important;
        box-sizing: border-box;
        min-height: 44px;
        justify-content: flex-start;
        border: 1px solid #1e9be9 !important;
        border-radius: 4px;
        background: #fff !important;
        color: #1e9be9 !important;
        font-weight: 600;
        font-size: 15px !important;
        padding-inline: 12px;
    }

    .dxbl-tabs-tablist:not(.dxbl-date-time-edit-tabs *):is([data-tab-picker], :has(ul > li:nth-child(2))) .dxbl-tabs-item::after {
        display: none !important;
    }

    /* Merged outer strip: hidden (by TabPicker.js) only while its first tab is active AND the inner
       strip that replaces it is actually laid out */
    .dxbl-tabs-tablist[data-tab-hide] {
        display: none !important;
    }

    .tab-picker-menu {
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: flex-end;
    }

    .tab-picker-sheet {
        width: 100%;
        max-height: 80dvh;
        overflow-y: auto;
        background: #fff;
        border-radius: 12px 12px 0 0;
        padding: 6px 0 12px;
    }

    .tab-picker-sheet button {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        border: 0;
        border-bottom: 1px solid #f1f3f5;
        background: #fff;
        text-align: left;
        font-size: 15px;
        color: #212529;
    }

    .tab-picker-sheet button.active {
        color: #1e9be9;
        font-weight: 600;
    }

    .tab-picker-sheet button:disabled {
        color: #9c9ca6;
    }
}

@media (max-width: 767.98px) {
    /* Cards: values left-aligned like every other field, smaller action icons, clear expand arrow */
    tr[data-card-row] > td:not([data-card-util]),
    tr[data-card-row] > td:not([data-card-util]) * {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    tr[data-card-row] > td[data-card-util] svg {
        width: 20px !important;
        height: 20px !important;
        padding: 10px;
    }

    tr[data-card-row] > td[data-card-util] {
        gap: 4px;
    }

    tr[data-card-row] > td[data-card-util] input[type="checkbox"],
    tr[data-card-row] > td[data-card-util] .dxbl-checkbox-check-element {
        width: 18px !important;
        height: 18px !important;
    }

    tr[data-card-row] > td[data-card-util] .dxbl-checkbox {
        padding: 12px;
    }

    tr[data-card-row][data-card-more]::after {
        font-size: 22px;
        line-height: 36px;
        font-weight: 700;
        background: #f3f9fe;
        border-radius: 0 0 6px 6px;
        margin: 6px -12px -10px;
        flex: 1 0 calc(100% + 24px);
    }

    /* The whole list page scrolls instead of clipping when cards are expanded */
    .MainFormContentHost .MainFormGridArea {
        overflow-y: auto !important;
    }

    /* List tree: hidden, opened as a full-screen overlay by PhoneListTree.js */
    [data-tree-pane]:not([data-tree-open]) {
        display: none !important;
    }

    [data-tree-pane][data-tree-open] {
        display: block !important;
        visibility: visible !important;
        transform: none !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        z-index: 2500;
        background: #fff;
        padding: 56px 8px 8px;
        box-sizing: border-box;
        overflow: auto;
    }

    [data-tree-pane][data-tree-open] .ListTemplateLeftPanel {
        max-height: none;
    }

    .phone-tree-toggle,
    .phone-tree-close {
        display: none;
        position: fixed;
        width: 48px;
        height: 48px;
        border-radius: 24px;
        border: 0;
        background: #1e9be9;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        align-items: center;
        justify-content: center;
    }

    .phone-tree-toggle[data-show] {
        display: flex;
        left: 12px;
        bottom: 16px;
        z-index: 1200;
    }

    html[data-tree-overlay] .phone-tree-toggle {
        display: none;
    }

    html[data-tree-overlay] .phone-tree-close {
        display: flex;
        top: 8px;
        right: 8px;
        z-index: 2600;
    }
}

@media (max-width: 767.98px) {
    /* Yes/no columns: small checkbox on the same line as the name */
    tr[data-card-row] > td[data-card-bool] {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    tr[data-card-row] > td[data-card-bool]::before {
        display: inline !important;
        font-size: 13px;
        color: #374151;
    }

    tr[data-card-row] > td[data-card-bool] input[type="checkbox"],
    tr[data-card-row] > td[data-card-bool] .dxbl-checkbox-check-element {
        width: 16px !important;
        height: 16px !important;
    }

    tr[data-card-row] > td[data-card-bool] .dxbl-checkbox {
        padding: 0 !important;
        min-height: 0 !important;
    }
}

@media (max-width: 767.98px) {
    /* Empty action cells (list without edit/delete) take no room */
    tr[data-card-row] > td[data-card-util][data-card-blank] {
        display: none !important;
    }

    /* The list splitter's separator and collapse arrow are useless once the tree is an overlay */
    .ListFullWrapper [class*="splitter-sep"],
    .ListFullWrapper [class*="splitter-resiz"],
    .ListFullWrapper [class*="splitter-collapse"],
    .ListFullWrapper [class*="splitter-expand"],
    .ListFullWrapper [class*="splitter-gutter"] {
        display: none !important;
    }

    tr[data-card-row] > td[data-card-bool]::before {
        color: #6b7280;
    }
}

@media (max-width: 767.98px) {
    /* Spreadsheet tab: compact toolbar, thumb-sized equal Import / Export buttons, more sheet */
    .spreadsheet-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .spreadsheet-toolbar-icon,
    .spreadsheet-toolbar .spreadsheet-title {
        display: none !important;
    }

    .spreadsheet-toolbar-text .spreadsheet-subtitle {
        font-size: 13px;
    }

    .spreadsheet-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .spreadsheet-toolbar-actions .spreadsheet-action-button {
        min-height: 44px;
        width: 100%;
        font-size: 14px;
    }

    .spreadsheet-toolbar-actions .spreadsheet-autosave-status {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 1.25rem;
    }

    .spreadsheet-workspace {
        padding: 0.25rem;
    }

    .inner-form-window .spreadsheet-wrapper {
        min-height: 0;
        border-radius: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    /* Dashboard: one chart card per row, full width */
    .DashboardPanel {
        width: 100% !important;
        padding: 0.5rem;
    }

    .DashboardPanel .inputcard-contentspannedgroup {
        gap: 0.5rem;
    }

    .DashboardPanelItem {
        min-height: 300px;
        padding: 0.75rem;
    }

    /* Inline minimum widths that exceed a phone screen */
    [style*="min-width:500px"],
    [style*="min-width: 500px"],
    [style*="min-width:300px"],
    [style*="min-width: 300px"],
    [style*="min-width:260px"],
    [style*="min-width: 260px"],
    [style*="min-width:250px"],
    [style*="min-width: 250px"],
    [style*="min-width:230px"],
    [style*="min-width: 230px"],
    [style*="min-width:210px"],
    [style*="min-width: 210px"] {
        min-width: 0 !important;
    }

    /* DevExpress windows opened with a fixed pixel width */
    [class*="dxbl-window"],
    dxbl-window {
        max-width: 100vw !important;
        max-height: 100dvh !important;
    }

    /* Time tracker: stacked filters; the day matrix keeps its own sideways scroll */
    .tt-filter-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .tt-filter-buttons {
        margin-left: 0;
    }

    .tt-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tt-scroll {
        max-height: calc(100dvh - 260px);
        min-height: 220px;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    /* Kanban */
    .kanban-filter-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .kanban-filter-actions {
        flex-wrap: wrap;
    }

    .kanban-filter-summary {
        align-self: flex-start;
        white-space: normal;
    }

    .kanban-board {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .kanban-swimlanes-scroll {
        padding-right: 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .kanban-column-draggable {
        cursor: default;
    }

    .kanban-col-grip {
        display: none;
    }

    /* Calendar */
    .SchedulerFilterFieldsPanel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .ListTemplateFitlerPanelButtons {
        margin: 0 !important;
    }

    .scheduler-splitter-container,
    .demo-sc-size {
        min-height: 360px !important;
    }

    .demo-sc-size {
        height: calc(100dvh - 300px) !important;
    }
}

@media (max-width: 767.98px) {
    /* Kanban and Calendar declare their layout in a page <style> that loads after this file:
       these rules need !important / extra specificity to win. */
    .kanban-page .kanban-filter-panel,
    .kanban-filter-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .kanban-page .kanban-filter-fields,
    .kanban-page .kanban-filter-secondary,
    .kanban-page .kanban-filter-actions {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .kanban-page .kanban-filter-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start;
    }

    .kanban-page .kanban-filter-checks label,
    .kanban-page .kanban-filter-checks {
        white-space: normal;
    }

    .SchedulerFilterFieldsPanel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .SchedulerFilterFieldsPanel .ListTemplateFilterFieldsPanelControlWrapper {
        justify-content: flex-start !important;
    }

    .SchedulerFilterFieldsPanel .ListTemplateFitlerPanelButtons {
        margin: 0 !important;
        width: auto !important;
    }
}


@media (max-width: 767.98px) {
    /* Kanban and Calendar: only Raktas until the eye is opened */
    .kanban-page .kanban-filter-fields:has(.kanban-filter-secondary.FilterHidden) > [data-column-count]:first-child > :not(:first-child),
    .SchedulerFilterSelectionPanel:has(> .hidden) > [data-column-count]:first-child > :not(:first-child) {
        display: none !important;
    }
}

.calendar-week-strip {
    display: none;
}

@media (max-width: 767.98px) {
    .calendar-week-strip {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        margin: 0 0 0.5rem;
    }

    .calendar-week-strip button {
        min-height: 56px;
        padding: 2px 0;
        border: 1px solid #dfdfdf;
        border-radius: 8px;
        background: #fff;
        color: #212529;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .calendar-week-strip button span:first-child {
        font-size: 11px;
        color: #6b7280;
        text-transform: capitalize;
    }

    .calendar-week-strip button b {
        font-size: 16px;
    }

    .calendar-week-strip button.today {
        border-color: #1e9be9;
        background: #e6f4fe;
        color: #1e9be9;
    }

    .calendar-week-strip .strip-dots {
        display: flex;
        gap: 2px;
        height: 6px;
    }

    .calendar-week-strip .appointment-dot {
        width: 6px;
        height: 6px;
        border-radius: 3px;
    }
}

@media (max-width: 767.98px) {
    /* Bottom bar, crowded forms (three or more drop-down buttons): two rows
       [?] [Reports] [Actions] / [  ] [Save] [Close], Save under Reports */
    .innerform-savepanel > [data-column-count]:has(> .ButtonDropdown ~ .ButtonDropdown ~ .ButtonDropdown) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem;
        align-items: stretch;
    }

    .innerform-savepanel > [data-column-count]:has(> .ButtonDropdown ~ .ButtonDropdown ~ .ButtonDropdown):has(> div[style*="visibility"]) {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .innerform-savepanel > [data-column-count]:has(> .ButtonDropdown ~ .ButtonDropdown ~ .ButtonDropdown) > .ButtonDropdownGreen {
        grid-column: auto;
    }

    .innerform-savepanel > [data-column-count]:has(> .ButtonDropdown ~ .ButtonDropdown ~ .ButtonDropdown):has(> div[style*="visibility"]) > .ButtonDropdownGreen {
        grid-column: 2;
    }

    .innerform-savepanel > [data-column-count]:has(> .ButtonDropdown ~ .ButtonDropdown ~ .ButtonDropdown) > * {
        flex: none !important;
        min-width: 0 !important;
    }

    /* Drop-down buttons: label shrinks with an ellipsis, chevron never overlaps it */
    .innerform-savepanel .ButtonDropdown .ButtonDropdownSideText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .innerform-savepanel .ButtonDropdown .ButtonDropdownSide.OneClickAction {
        min-width: 0;
        overflow: hidden;
    }

    .innerform-savepanel .ButtonDropdown .ButtonDropdownSide.MultipleSelectionAction {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    /* Card grids: no header parts or other non-card rows left over (group, filter, summary) */
    .ui_dxdatagrid:has(tr[data-card-row]) thead,
    .ui_dxdatagrid:has(tr[data-card-row]) [class*="grid-header"]:not([class*="empty"]),
    .ui_dxdatagrid:has(tr[data-card-row]) tbody > tr:not([data-card-row]):not([class*="empty"]) {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    /* List action panel: the page's own controls (CustomActionPanel) get a full-width row below
       the built-in buttons instead of being squeezed beside them */
    .ListTemplateActionPanel {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .ListTemplateActionPanel .CustomActionPanel {
        order: 10;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ListTemplateActionPanel .CustomActionPanel > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    .ListTemplateActionPanel .CustomActionPanel button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    /* The page's own action controls follow the filter eye: hidden while the filters are hidden */
    .ListTemplate:has(.ListTemplateFilterSelectionPanel.FiltersHidden) .ListTemplateActionPanel .CustomActionPanel {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Hidden list filters: only the first control (the key / Raktas field) stays, however the
       page nests its filter groups */
    .ListTemplateFilterSelectionPanel.FiltersHidden [data-column-count] > :not(:first-child) {
        display: none !important;
    }
}

.phone-grid-new {
    display: none;
}

@media (max-width: 767.98px) {
    /* An empty custom-actions container must not become a second line of the list toolbar */
    .ListTemplateActionPanel .CustomActionPanel:not(:has(*)) {
        display: none !important;
    }

    .phone-grid-new[data-show] {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
        border: 0;
        border-radius: 28px;
        background: #1e9be9;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        align-items: center;
        justify-content: center;
        z-index: 1200;
    }

    /* Inside a popup form the bottom bar takes the lowest part of the screen */
    .phone-grid-new[data-in-form] {
        bottom: 7.5rem;
        z-index: 3000;
    }
}

@media (max-width: 767.98px) {
    /* List toolbar: [Selected, print] [page's own controls] [columns], one line. The middle
       wrapper is always 100% wide, so a wrapping flex row pushed the right button to a second
       line. A grid keeps the three in one row; the page's controls drop to a row of their own
       only when they exist and the filters are open. */
    .ListTemplateActionPanel {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 0.5rem !important;
    }

    .ListTemplateActionPanel > div:first-child {
        grid-column: 1;
    }

    .ListTemplateActionPanel > div:last-child {
        grid-column: 3;
        justify-self: end;
    }

    .ListTemplateActionPanel > div:nth-child(2) {
        width: auto !important;
        min-width: 0;
    }

    .ListTemplateActionPanel > div:nth-child(2):has(.CustomActionPanel > *) {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% !important;
    }

    .ListTemplate:has(.ListTemplateFilterSelectionPanel.FiltersHidden) .ListTemplateActionPanel > div:nth-child(2) {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Gantt (GanttViewOrder3): the page's own <style> loads after this file, hence !important */
    .SchedulerFilterFieldsPanel {
        overflow: visible !important;
        min-height: 0 !important;
    }

    .scheduler-main-container {
        margin-top: 0.25rem !important;
        min-height: 60dvh;
    }

    .scheduler-toolbar-container {
        margin-bottom: 0.25rem !important;
    }

    /* Graph panel: whole width, taller, list and chart stacked instead of side by side */
    .gantt-overlay-pane {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 75% !important;
        max-height: none !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .chart-overlay-splitter {
        flex-direction: column !important;
    }

    .chart-overlay-splitter > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

.ncp-switch {
    display: none;
}

@media (max-width: 767.98px) {
    /* NewConstructorProduct: the two 50% halves become one full-width half at a time */
    .ncp-switch {
        display: flex;
        margin: 0 0 0.5rem;
        border: 1px solid #1e9be9;
        border-radius: 6px;
        overflow: hidden;
        width: 100%;
    }

    .ncp-switch button {
        flex: 1 1 0;
        min-height: 44px;
        border: 0;
        background: #fff;
        color: #1e9be9;
        font-size: 15px;
        font-weight: 600;
    }

    .ncp-switch button + button {
        border-left: 1px solid #1e9be9;
    }

    .ncp-switch button.active {
        background: #1e9be9;
        color: #fff;
    }

    .ncp-splitter {
        flex-direction: column !important;
        height: auto !important;
    }

    .ncp-splitter > * {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-width: 0 !important;
    }

    .ncp-splitter [class*="splitter-sep"],
    .ncp-splitter [class*="splitter-resiz"],
    .ncp-splitter [class*="splitter-collapse"],
    .ncp-splitter [class*="splitter-expand"] {
        display: none !important;
    }

    .ncp-pane-0 .ncp-right,
    .ncp-pane-1 .ncp-left {
        display: none !important;
    }

    .ncp-left,
    .ncp-right {
        min-height: 60dvh;
    }
}

@media (max-width: 767.98px) {
    /* Gantt graph panel: the chart keeps a usable height and the panel scrolls */
    .chart-overlay-splitter {
        overflow-y: auto !important;
    }

    .chart-visual-host {
        min-height: 240px !important;
    }
}

@media (max-width: 767.98px) {
    /* Gantt graph panel as a full-screen sheet under the top bar: chart first, list below, one
       scroll. It was an absolutely placed 75% box inside the page, so it hid the schedule,
       left the chart a thin strip and could sit below the visible screen. */
    .gantt-overlay-pane {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        z-index: 2000 !important;
        border-radius: 0 !important;
    }

    .gantt-overlay-pane .chart-content-pane {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chart-overlay-splitter {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    .chart-overlay-splitter > :has(.chart-visual-host) {
        order: -1;
        height: 300px !important;
    }

    .chart-visual-host {
        min-height: 280px !important;
    }
}

@media (max-width: 767.98px) {
    /* Gantt graph sheet: no splitter arrow/bar (it collapses the list pane to a blank area) and
       no drag grip (the sheet is full screen) */
    .chart-overlay-splitter [class*="splitter-sep"],
    .chart-overlay-splitter [class*="splitter-resiz"],
    .chart-overlay-splitter [class*="splitter-collapse"],
    .chart-overlay-splitter [class*="splitter-expand"],
    .chart-overlay-splitter [class*="splitter-gutter"],
    .gantt-overlay-resize-handle {
        display: none !important;
    }

    .chart-overlay-splitter > * {
        display: block;
    }
}

@media (max-width: 767.98px) {
    /* Gantt graph sheet, final sizing: the chart takes whatever the list does not need, so the
       sheet has no empty band at the bottom; a long list scrolls inside its own half */
    .gantt-overlay-pane .chart-content-pane {
        overflow: hidden !important;
    }

    .chart-overlay-splitter {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .chart-overlay-splitter > :has(.chart-visual-host) {
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 260px !important;
        order: -1;
    }

    .chart-overlay-splitter > :not(:has(.chart-visual-host)) {
        flex: 0 1 auto !important;
        max-height: 50% !important;
        overflow-y: auto !important;
    }

    .chart-visual-host {
        height: 100% !important;
        min-height: 260px !important;
    }
}

@media (max-width: 767.98px) {
    /* Gantt graph sheet: the chart needs a definite height (it drew itself taller than its
       flex-stretched pane and lost its bottom axis); the list takes and scrolls the rest */
    .chart-overlay-splitter > :has(.chart-visual-host) {
        flex: 0 0 auto !important;
        height: 45dvh !important;
        min-height: 260px !important;
    }

    .chart-overlay-splitter > :not(:has(.chart-visual-host)) {
        flex: 1 1 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 767.98px) {
    /* Time tracker: narrow employee column and slim day columns, so more days fit on screen;
       the Darbuotojas filter drop-down is hidden (only the key field stays) */
    .tt-grid .tt-c2 {
        left: 36px;
        width: 90px;
        min-width: 90px;
    }

    .tt-filter-panel [data-column-count] > :not(:first-child) {
        display: none !important;
    }

    .tt-grid .tt-c1 {
        width: 36px;
        min-width: 36px;
    }

    .tt-grid .tt-day,
    .tt-grid .tt-cell {
        width: 30px;
        min-width: 30px;
        padding-inline: 0;
    }

    .tt-grid {
        font-size: 10px;
    }

    .tt-grid .tt-sum {
        width: 44px;
        min-width: 44px;
    }
}

@media (max-width: 767.98px) {
    /* Time tracker: the sum columns scroll with the days (the header cells kept their right
       offset because .tt-grid thead th is more specific than the earlier rule); the tab-number
       column is dropped and the day columns slimmed, about 13 days fit across */
    .tt-grid thead th.tt-sticky-r,
    .tt-grid .tt-r1,
    .tt-grid .tt-r2 {
        position: static !important;
        right: auto !important;
    }

    .tt-grid thead th.tt-sticky-r {
        position: sticky !important;
        top: 0;
    }

    .tt-grid .tt-c1 {
        display: none;
    }

    .tt-grid .tt-c2 {
        left: 0;
        width: 80px;
        min-width: 80px;
    }

    .tt-grid .tt-day,
    .tt-grid .tt-cell {
        width: 24px;
        min-width: 24px;
    }

    .tt-grid .tt-sum {
        width: 40px;
        min-width: 40px;
    }
}