html, body {
    height: 100%;
}

body {
    margin: 0;
}

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

.pre-loading-panel {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #fff));
    opacity: 1;
    transition: opacity 0.25s ease;
}

.pre-loading-hide {
    opacity: 0;
    pointer-events: none;
}

.pre-loading-image {
    width: min(72vw, 760px);
    height: min(24vw, 220px);
    background: transparent url('../images/fleet-management-software.svg') center center / contain no-repeat;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 210px;
    height: 24px;
}

#applicationLoadingPanel .loading {
    width: 360px;
    height: 360px;
}

#applicationLoadingPanel .loading-image-wrapper {
    width: 220px;
    height: 220px;
    min-width: 220px;
    min-height: 220px;
    background-color: transparent !important;
    border-radius: 50%;
}

#applicationLoadingPanel .loading-image {
    width: 180px;
    height: 180px;
    object-fit: contain;
}

#applicationLoadingPanel .loading-border {
    width: 220px !important;
    height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    border-width: 8px !important;
    border-radius: 50% !important;
    box-sizing: border-box;
}

#applicationLoadingPanel .loading-floated-circle {
    width: 220px !important;
    height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    border: none !important;
    border-radius: 50% !important;
    box-sizing: border-box;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 300deg,
        var(--dxds-color-border-primary-default-rest, var(--bs-primary)) 300deg 360deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px)) !important;
}

#applicationLoadingPanel .loading-caption {
    display: none !important;
}

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


.welcome-image-viewer {
    width: 100%;
    height: 500px;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
.welcome-image-viewer .img-thumbnail {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: none !important;
}

.xaf-pivot-table {
    height: 100%;
}

.dx-htmleditor-content {
    background-color: white;
}

.xaf-richedit-mergemail {
    height: 800px;
}

/* DocumentFile/TaskAttachedFile PDF preview: let the viewer use the available page height
   instead of ending halfway down the detail view. */
.xaf-layout-item:has([data-editor-alias="PdfViewerPropertyEditor"]),
.xaf-layout-item:has(.dxbl-pdf-viewer),
.xaf-layout-item:has(iframe[src*="pdf"]),
.xaf-layout-item:has(object[type="application/pdf"]),
.xaf-layout-item:has(embed[type="application/pdf"]),
dxbl-form-layout-item:has([data-editor-alias="PdfViewerPropertyEditor"]),
dxbl-form-layout-item:has(.dxbl-pdf-viewer),
dxbl-form-layout-item:has(iframe[src*="pdf"]),
dxbl-form-layout-item:has(object[type="application/pdf"]),
dxbl-form-layout-item:has(embed[type="application/pdf"]) {
    min-height: calc(100vh - 190px);
}

.xaf-layout-item:has([data-editor-alias="PdfViewerPropertyEditor"]) iframe,
.xaf-layout-item:has(.dxbl-pdf-viewer) iframe,
.xaf-layout-item:has(iframe[src*="pdf"]) iframe,
.xaf-layout-item:has(object[type="application/pdf"]) object,
.xaf-layout-item:has(embed[type="application/pdf"]) embed,
dxbl-form-layout-item:has([data-editor-alias="PdfViewerPropertyEditor"]) iframe,
dxbl-form-layout-item:has(.dxbl-pdf-viewer) iframe,
dxbl-form-layout-item:has(iframe[src*="pdf"]) iframe,
dxbl-form-layout-item:has(object[type="application/pdf"]) object,
dxbl-form-layout-item:has(embed[type="application/pdf"]) embed,
.dxbl-pdf-viewer {
    width: 100% !important;
    min-height: calc(100vh - 190px) !important;
    height: calc(100vh - 190px) !important;
}

/* Welcome dashboard — ramki wokół każdego panelu (chart/lista/logo).
   XAF v25.2 dla DashboardView używa nowego renderu Blazor z klasami dxbl-fl-*
   (nie dxbl-flg-*). welcome-panel-group ląduje na dxbl-form-layout-group
   przez WelcomeDashboardStylingController; każdy panel = dxbl-form-layout-item. */
/* Welcome layout: rozciągnij cały dashboard na pełną szerokość */
dxbl-form-layout-group.welcome-panel-group {
    width: 100% !important;
    display: block !important;
}
/* Main = pionowo (Koszty pełna szerokość, potem BottomRow) */
dxbl-form-layout-group.welcome-panel-group > div.dxbl-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}
/* BottomRow (zagnieżdżona) = 2 równe kolumny (Zadania | Pojazdy) */
dxbl-form-layout-group.welcome-panel-group dxbl-form-layout-group.welcome-panel-group {
    width: 100% !important;
    display: block !important;
}
dxbl-form-layout-group.welcome-panel-group dxbl-form-layout-group.welcome-panel-group > div.dxbl-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 6px !important;
    flex-direction: unset !important;
    width: 100% !important;
}

.welcome-panel-group .dxbl-fl-item,
dxbl-form-layout-group.welcome-panel-group dxbl-form-layout-item {
    border: 2px solid #6b7280 !important;
    border-radius: 10px !important;
    padding: 14px 18px 18px 18px !important;
    margin: 6px !important;
    background-color: #fafbfc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Chart canvas musi zostać w obrębie panelu */
.welcome-panel-group .dxbl-chart {
    width: 100% !important;
    max-width: 100% !important;
}

/* Caption (tytuł panelu) — label.dxbl-fl-cpt */
.welcome-panel-group .dxbl-fl-cpt {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--bs-emphasis-color, #2d2d2d);
    padding: 0 0 8px 0 !important;
    margin: 0 0 10px 0 !important;
    border-bottom: 1px solid var(--bs-border-color-translucent, #e2e2e2);
    display: block;
    width: 100%;
}

/* Stały minimalny rozmiar wykresów w dashboardach — żeby pie/bar nie skakały
   gdy XAF zmienia layout ramki. */
.dxbl-chart {
    min-height: 380px !important;
    height: 380px !important;
}

/* DxGrid: wymuszenie pełnej szerokości kontenera (NextColumn + % w DataGridListViewController). */
.datadrive-grid-stretch,
.datadrive-grid-stretch .dxbl-grid {
    width: 100%;
}

.datadrive-grid-stretch .dxbl-grid-table {
    width: 100%;
}

/* Czat AI (Asystent AI): DxAIChat v26.1 NIE ma parametru Height — wysokość wyłącznie przez CSS.
   Bez tego komponent rośnie z liczbą wiadomości i „ucieka" pod spód (brak scrolla). Wypełniamy panel
   splittera (który ma Height=calc(100vh-140px)) i pozwalamy wewnętrznej liście wiadomości przewijać. */
.fleet-chat-host,
.fleet-chat-host .fleet-chat-splitter {
    height: 100%;
}

.fleet-chat {
    height: 100%;
    min-height: 0;
}

/* Wewnętrzny obszar wiadomości DxAIChat ma scrollować; input zostaje przyklejony na dole. */
.fleet-chat .dxbl-ai-chat,
.fleet-chat > .dxbl-ai-chat {
    height: 100%;
    min-height: 0;
}

/* Panel czatu AI przy projektancie raportów (DesignerAiChatPanel), od Task 6 wewnątrz pływającego
   DxWindow (nie dokowany obok) — ten sam powód, co .fleet-chat wyżej: DxAIChat bez wysokości
   narzuconej przez CSS rośnie z liczbą wiadomości. */
.designer-ai-chat {
    height: 100%;
    min-height: 0;
}

.designer-ai-chat .dxbl-ai-chat {
    height: 100%;
    min-height: 0;
}

/* Wnętrze DxWindow (BodyCssClass) musi mieć realną wysokość, żeby .designer-ai-chat height:100%
   miało od czego liczyć — DxWindow ma stały Height (patrz DesignerAiChatPanel.razor), ale bez tej
   reguły jego body domyślnie rośnie do wysokości treści zamiast wypełniać okno. */
.designer-ai-window-body {
    height: 100%;
    min-height: 0;
}

/* Spinner generacji raportu w prawym panelu czatu (obracające się kółko) */
.dd-report-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #dbe4ef;
    border-top-color: #2c5282;
    border-radius: 50%;
    animation: dd-report-spin 0.9s linear infinite;
}
@keyframes dd-report-spin {
    to { transform: rotate(360deg); }
}

.dme-root {
    width: 100%;
}

.dme-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.4fr);
    gap: 14px;
    align-items: start;
}

.dme-list,
.dme-map {
    min-width: 0;
}

.dme-list-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.dme-grid {
    width: 100%;
}

.dme-views {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.dme-type-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dme-type-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

@media (max-width: 1100px) {
    .dme-layout {
        grid-template-columns: 1fr;
    }
}