/* ==========================================================================
   System obsługi zgłoszeń Verlogic - układ na tablet i telefon

   Zawiera wyłącznie układ, bez kolorów (kolory są w theme.css). Ładowany
   jako ostatni arkusz w _Layout.cshtml i _lightLayout.cshtml.

   Progi:
     - tablet    do 1199 px: gridy w trybie adaptacyjnym DevExpress
                             (HideDataCellsAtWindowInnerWidth = 1300),
                             formularze w jednej kolumnie;
     - telefon   do 767 px:  menu modułów zwinięte do ikony, szablony
                             wierszy pulpitu w układzie pionowym, mniejsze
                             marginesy treści;
     - wąski telefon do 400 px.

   UWAGA co do !important: szerokości kolumn, przycisków i paddingi są
   ustawiane w kodzie Razor (Unit.Pixel, Paddings) i trafiają do atrybutu
   style - arkuszem nie da się ich nadpisać inaczej.
   ========================================================================== */

/* --- wspólne --- */

img {
    max-width: 100%;
}

/* kafelki typów zgłoszeń: cards.css wymusza min-width 420 px, a próg
   zmniejszenia ma dopiero przy 623 px - w oknie 624-860 px kafelek
   wychodził poza ekran. Szerokość płynna, maksymalnie jak dotąd. */
.dxcvFlowCard_MaterialCompact.card {
    min-width: 0 !important;
    width: 420px !important;
    max-width: calc(100vw - 48px) !important;
    box-sizing: border-box;
}

/* --- tablet i mniejsze --- */
@media (max-width: 1199px) {

    .page-section {
        margin: 12px 16px 20px;
    }

    /* formularz danych operatora: odstęp checkboxów (PaddingLeft = 116 px
       w widoku) był wyrównaniem do kolumny podpisów, której w układzie
       jednokolumnowym nie ma */
    #userDetailsLayout .dxflCheckBoxWithTextItemSys {
        padding-left: 0 !important;
    }
}

/* --- poniżej progu zwijania panelu bocznego (960 px) --- */
@media (max-width: 959px) {

    .form-layout-style {
        width: auto !important;
        margin: 16px !important;
    }
}

/* --- telefon --- */
@media (max-width: 767px) {

    /* pasek tytułu: długi tytuł skracany wielokropkiem zamiast spychać
       przyciski akcji poza ekran */
    .page-toolbar .item > h1,
    .dashboard-toolbar .item > h1 {
        max-width: 56vw;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* cele dotyku w paskach - min. 44 px wysokości */
    .page-toolbar .dxm-item:not(.dxm-disabled) .dxm-content,
    .dashboard-toolbar .dxm-item:not(.dxm-disabled) .dxm-content {
        min-width: 44px;
        min-height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-section {
        margin: 8px 8px 16px;
    }

    #messagePanel .dxeBase_MaterialCompact,
    #messagePanel span[id^="messageLabel"] {
        margin: 8px 8px 0;
    }

    /* pola tekstowe: 16 px, inaczej iOS powiększa stronę po dotknięciu pola */
    .dxeEditArea_MaterialCompact,
    .dxeMemoEditArea_MaterialCompact {
        font-size: 16px !important;
    }

    /* --- pulpit: dwie karty jedna pod drugą, bez bocznych wcięć FormLayout --- */
    #dashboardProjectFormLayout .dxflGroupCell_MaterialCompact,
    #dashboardProjectFormLayout .dxflItem_MaterialCompact {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* FormLayout renderuje kontenery jako display: table, a taki box rośnie
       do szerokości treści zamiast trzymać się okna - stały układ tabeli
       przywraca width: 100% */
    #dashboardProjectFormLayout,
    #dashboardProjectFormLayout .dxflGroupContainerSys {
        table-layout: fixed;
    }

    /* Nagłówki kolumn nad kartami pulpitu nie odpowiadają szablonowi wiersza
       (tytuł, numer, status pod sobą) i rozpychały kartę do 630 px przy
       ekranie 390 px. Sortowanie zostaje takie, jak ustawione w widoku. */
    #userTaskGrid tr[id$="_DXHeadersRow0"],
    #activeOrderGrid tr[id$="_DXHeadersRow0"],
    #notAssignedGrid tr[id$="_DXHeadersRow0"],
    #activeProjectGrid tr[id$="_DXHeadersRow0"],
    #newOrderGrid tr[id$="_DXHeadersRow0"],
    #newProjectGrid tr[id$="_DXHeadersRow0"] {
        display: none;
    }

    /* Tabela gridu nie może być szersza niż karta. Szerokości kolumn
       (Width / MinWidth z widoku, np. 2 x 160 px) DevExpress zapisuje
       w ukrytym wierszu pomocniczym tr.dxgvArm jako styl inline - ten
       wiersz trzyma szerokość tabeli także wtedy, gdy nagłówki są ukryte.
       Wiersz danych to jedna komórka colspan, więc te szerokości nic tu
       nie opisują i można je zwolnić. */
    #userTaskGrid .dxgvTable_MaterialCompact,
    #activeOrderGrid .dxgvTable_MaterialCompact,
    #notAssignedGrid .dxgvTable_MaterialCompact {
        table-layout: fixed;
        width: 100% !important;
        min-width: 0 !important;
    }
    #userTaskGrid col,
    #activeOrderGrid col,
    #notAssignedGrid col,
    #userTaskGrid tr.dxgvArm > td,
    #activeOrderGrid tr.dxgvArm > td,
    #notAssignedGrid tr.dxgvArm > td {
        width: auto !important;
        min-width: 0 !important;
    }

    /* Szablon wiersza pulpitu: tabela z komórkami rowspan (typ zgłoszenia
       i termin po 160 px). Na telefonie komórki układają się w pionie:
       tytuł, numer, status, a pod nimi plakietka typu i termin obok siebie.
       "display: contents" na wierszach sprawia, że komórki ze wszystkich
       trzech wierszy są rodzeństwem w jednym kontenerze flex. */
    .dashboard-grid,
    .dashboard-grid > table {
        width: 100%;
    }
    .dashboard-grid > table > tbody {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 12px;
        padding: 10px 14px 12px;
    }
    .dashboard-grid > table > tbody > tr {
        display: contents;
    }
    .dashboard-grid td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        height: auto !important;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .dashboard-grid td.dashboard-row1 {
        display: none;
    }
    .dashboard-grid tr:nth-child(1) > td:not(.dashboard-row1):not(.dashboard-row2) {
        flex: 1 1 100%;
        order: 1;
        width: auto !important;
        font-size: 15px;
    }
    .dashboard-grid tr:nth-child(2) > td {
        flex: 1 1 100%;
        order: 2;
    }
    .dashboard-grid tr:nth-child(3) > td {
        flex: 1 1 100%;
        order: 3;
    }
    .dashboard-grid td.dashboard-row2 {
        order: 4;
        flex: 0 0 auto;
        width: auto !important;
        margin: 6px 0 0 !important;
        text-align: left;
    }
    .dashboard-grid td.dashboard-row2:empty {
        display: none;
    }

    .dashboard-header-left,
    .dashboard-header-left:hover {
        font-size: 16px;
        padding-left: 14px;
    }
    .dashboard-header-right {
        padding-right: 14px;
    }

    /* --- kafelki typów zgłoszeń ---
       CardView i układ karty (tabela FormLayout: obrazek | tytuł, pod spodem
       opis) nie mają zadanej szerokości i rosły do szerokości treści. */
    #orderTaskGrid,
    #orderTaskGrid_DXMainTable {
        width: 100% !important;
        table-layout: fixed;
    }
    .dxcvFlowCard_MaterialCompact.card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0;
        padding: 12px 14px !important;
    }
    .dxcvFlowCard_MaterialCompact.card .dxflFormLayout_MaterialCompact,
    .dxcvFlowCard_MaterialCompact.card table.dxflGroup_MaterialCompact {
        width: 100% !important;
        table-layout: fixed;
    }
    /* komórka z obrazkiem (Width = 200 w widoku) */
    .dxcvFlowCard_MaterialCompact.card td.dxflHACSys {
        width: 84px !important;
    }
    /* element z obrazkiem ma szerokość 200 px z widoku - obrazek wyśrodkowany
       w nim wystawał poza komórkę i wchodził pod tytuł */
    .dxcvFlowCard_MaterialCompact.card td.dxflHACSys > div {
        width: auto !important;
        padding: 0 !important;
    }
    .dxcvFlowCard_MaterialCompact.card img {
        height: 64px !important;
        width: auto;
        padding: 4px 0 !important;
    }
    /* cards.css przesuwa tytuł ujemnym marginesem (-50 px) pod obrazek */
    .dxcvFlowCard_MaterialCompact.card .title {
        margin-left: 0 !important;
        padding-left: 12px !important;
        font-size: 17px;
        overflow-wrap: anywhere;
    }
    .dxcvFlowCard_MaterialCompact.card .comment {
        text-align: left !important;
        padding: 6px 0 0 !important;
        overflow-wrap: anywhere;
    }

    /* nagłówek sekcji "Wybierz typ zgłoszenia" (UserDashboard.css: min-width 95%) */
    .group-list-text {
        min-width: 0 !important;
        white-space: normal !important;
    }

    /* --- gridy w trybie adaptacyjnym: nagłówki kolumn zwinięte do
       "chipsów" zajmowały pół ekranu nad listą --- */
    .grid-view .dxgvAdaptiveHeaderPanel_MaterialCompact,
    .grid-view [id$="_DXHeadersRow0"] .dxgvHeader_MaterialCompact {
        font-size: 11px !important;
    }

    /* --- archiwum: przyciski "Szukaj" / "Wyczyść kryteria" --- */
    #criteriaPanel .dxbButton_MaterialCompact {
        width: 100% !important;
    }

    /* --- formularze: przyciski jeden pod drugim, na całą szerokość --- */
    .form-layout-style table[style*="margin-top: 10px"],
    .form-layout-style table[style*="margin-top: 10px"] > tbody,
    .form-layout-style table[style*="margin-top: 10px"] > tbody > tr,
    .form-layout-style table[style*="margin-top: 10px"] > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
    }
    .form-layout-style table[style*="margin-top: 10px"] .dxbButton_MaterialCompact {
        width: 100% !important;
        margin-bottom: 10px;
    }

    /* --- okna DevExpress (operacje, komentarze) --- */
    .dxpc-mainDiv,
    .dxpc-content {
        max-width: 96vw !important;
    }

    /* --- przeglądarka obrazków w załącznikach: okno powiększenia 800 px --- */
    .dxisControl_MaterialCompact,
    .dxiszWindow_MaterialCompact {
        max-width: 100% !important;
    }

    .empty-state {
        margin: 16px 8px;
        padding: 24px 16px;
    }
}

/* --- wąski telefon --- */
@media (max-width: 400px) {

    .page-toolbar .item > h1,
    .dashboard-toolbar .item > h1 {
        max-width: 48vw;
        font-size: 16px;
    }

    .page-toolbar .item > h1::before,
    .dashboard-toolbar .item > h1::before {
        display: none;
    }
}

/* --- wydruk --- */
@media print {

    .app-header,
    .page-toolbar,
    .dashboard-toolbar,
    .filter-panel,
    [id^="loaderPanel"],
    .dxfabControl_MaterialCompact {
        display: none !important;
    }

    #pageContent {
        padding-top: 0 !important;
    }

    .grid-view.dxgvControl_MaterialCompact,
    .empty-state,
    .form-layout-style {
        box-shadow: none !important;
    }
}