/* ==========================================================================
   System obsługi zgłoszeń Verlogic - warstwa wizualna

   Ten sam język wizualny co w pozostałych aplikacjach www (System zarządzania
   projektem, Baza Spawania): tokeny kolorów, karty, przyciski, tabele,
   pasek tytułu strony - przeniesiony na kontrolki DevExpress (motyw
   MaterialCompact).

   Plik ładowany jest PO arkuszach DevExpressa, Layout.css i arkuszach
   z sekcji "Head" widoków - dlatego przy równej specyficzności wygrywa.
   Nie zmienia istniejących arkuszy, tylko je nadpisuje.

   Kolor wiodący #0B518E to kolor bazowy motywu z Web.config (baseColor)
   i kolor logo Verlogic. Pary tekst/tło spełniają WCAG AA:
     biały na #0B518E          8,0:1
     tekst podstawowy na bieli 15,3:1
     tekst drugorzędny         6,2:1
     tekst pomocniczy          4,8:1

   DevExpress zapisuje część ustawień z widoków Razor (BackColor, ForeColor,
   Border...) jako styl w atrybucie "style" - stąd !important tam, gdzie
   nadpisujemy właśnie takie ustawienia.
   ========================================================================== */

:root {
    /* marka */
    --brand:        #0B518E;
    --brand-dark:   #083C6A;
    --brand-light:  #E6EEF6;
    --brand-tint:   #F2F6FB;
    --accent:       #E3642B;   /* akcent graficzny (kreska przy tytule) - nigdy jako kolor tekstu */

    /* tekst */
    --ink:          #1F2430;
    --ink-soft:     #5B6170;
    --ink-faint:    #6B7280;
    --on-brand:     #FFFFFF;

    /* powierzchnie */
    --bg:           #F4F6F9;
    --surface:      #FFFFFF;
    --line:         #D8DEE8;
    --line-soft:    #E8ECF2;

    /* stany */
    --ok:           #1F7A4D;
    --ok-bg:        #E8F5EE;
    --warn:         #8A5A00;
    --warn-bg:      #FDF4E3;
    --danger:       #B42318;
    --danger-bg:    #FDECEA;

    /* kształt i rytm */
    --r-sm: 4px;
    --r:    8px;
    --r-lg: 12px;
    --shadow:    0 1px 2px rgba(31, 36, 48, .06), 0 2px 8px rgba(31, 36, 48, .06);
    --shadow-lg: 0 8px 28px rgba(31, 36, 48, .14);

    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --- podstawy --- */

/* Layout.css i Account.css kładą na html/body tło-obrazek (background_page.svg,
   ~15 tys. linii SVG). Jednolite tło jest czytelniejsze i lżejsze. */
html, body, .form {
    background: var(--bg);
    color: var(--ink);
}

body {
    font-family: var(--font);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; }
a { color: var(--brand); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* ==========================================================================
   Pasek górny (panel "headerPanel")
   ========================================================================== */

.app-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
    padding-bottom: 0 !important;
}

.header-menu {
    background-color: var(--surface) !important;
}

.app-header .header-menu .item,
.app-header .header-menu .item .dxm-content,
.app-header .header-menu .item a.dx {
    color: var(--ink-soft);
    font-size: 14px;
}

.app-header .header-menu .item.hovered {
    background-color: var(--brand-tint);
}
.app-header .header-menu .item.hovered,
.app-header .header-menu .item.hovered .dxm-content {
    color: var(--brand) !important;
}

/* aktywny moduł - podkreślenie w kolorze marki */
.app-header .header-menu .item.selected {
    color: var(--brand);
    font-weight: 600;
    border-bottom: inset 3px var(--brand);
}

.header-menu .account-background {
    background-color: var(--brand-light);
}

/* menu konta i menu modułów zwinięte do ikony */
.header-sub-menu {
    border: 1px solid var(--line) !important;
    border-radius: var(--r);
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.header-sub-menu .item {
    color: var(--ink);
}
.header-sub-menu .dxm-hovered {
    background-color: var(--brand-tint) !important;
}
.header-sub-menu .dxm-hovered,
.header-sub-menu .dxm-hovered a.dx,
.header-sub-menu .dxm-hovered .dxm-content {
    color: var(--brand) !important;
}

/* ==========================================================================
   Pasek tytułu strony (menu "pageToolbar")
   ========================================================================== */

.page-toolbar,
.dashboard-toolbar {
    background-color: var(--brand) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.page-toolbar .item > h1,
.dashboard-toolbar .item > h1 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
}

/* akcent - krótka kreska przed tytułem, jak w pozostałych aplikacjach */
.page-toolbar .item > h1::before,
.dashboard-toolbar .item > h1::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -3px;
    border-radius: 2px;
    background: var(--accent);
}

.page-toolbar .item .dxm-content,
.dashboard-toolbar .item .dxm-content {
    border-radius: var(--r-sm);
}

.page-toolbar .dxm-item.dxm-hovered:not(.dxm-disabled),
.dashboard-toolbar .dxm-item.dxm-hovered:not(.dxm-disabled) {
    background-color: rgba(255, 255, 255, .14) !important;
}

/* przycisk wyszukiwania w stanie wciśniętym */
.page-toolbar .dxm-item.dxm-checked,
.dashboard-toolbar .dxm-item.dxm-checked {
    background-color: rgba(255, 255, 255, .22) !important;
}

/* panel wyszukiwania pod paskiem */
.filter-panel {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   Komunikaty (panel "messagePanel" w widokach)
   ========================================================================== */

/* Etykieta ma w widokach czerwony tekst na tle strony - zamiast tego
   czytelny pasek alertu. */
#messagePanel .dxeBase_MaterialCompact,
#messagePanel span[id^="messageLabel"] {
    display: block;
    box-sizing: border-box;
    margin: 12px 24px 0;
    padding: 12px 16px !important;
    border: 1px solid #F3C7C2;
    border-radius: var(--r);
    background: var(--danger-bg);
    color: var(--danger) !important;
    font-size: 14px;
    font-weight: 500;
    width: auto !important;
}
#messagePanel span[id^="messageLabel"]:empty {
    display: none;
}

/* ==========================================================================
   Tabele (GridView)
   ========================================================================== */

/* każdy grid to osobna karta */
.grid-view.dxgvControl_MaterialCompact {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-family: var(--font);
    color: var(--ink);
}

.dxgvHeader_MaterialCompact {
    background: var(--brand-tint) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line-soft) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    /* bez wersalików - kolumny mają sztywne szerokości z widoku (150 px)
       i wersaliki ucinały podpisy ("NUMER ZGŁOSZE...") */
}
.dxgvHeader_MaterialCompact td { color: var(--ink-soft); }

.dxgvDataRow_MaterialCompact td.dxgv,
.dxgvGroupRow_MaterialCompact td.dxgv,
.dxgvEmptyDataRow_MaterialCompact td.dxgv {
    border-color: var(--line-soft) !important;
}

/* najechanie - jasne tło marki zamiast pełnego koloru; tekst zostaje ciemny */
.dxgvDataRowHover_MaterialCompact {
    background: var(--brand-tint) !important;
    color: var(--ink) !important;
    cursor: pointer;
}

.dxgvFocusedRow_MaterialCompact,
.dxgvSelectedRow_MaterialCompact,
.grid-view .focused {
    background-color: var(--brand-light) !important;
    color: var(--ink) !important;
}

.dxgvGroupRow_MaterialCompact {
    background: var(--surface) !important;
    color: var(--brand) !important;
}

.dxgvEmptyDataRow_MaterialCompact {
    color: var(--ink-soft);
}
.dxgvEmptyDataRow_MaterialCompact td.dxgv {
    padding: 28px 20px !important;
}

/* tytuł gridu (pulpit) - nagłówek karty */
.grid-view .dxgvTitlePanel_MaterialCompact {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: 0 !important;
}

/* stronicowanie */
.dxgvPagerBottomPanel_MaterialCompact,
.dxgvPagerTopPanel_MaterialCompact {
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
}
.dxpLite_MaterialCompact .dxp-num,
.dxpLite_MaterialCompact .dxp-current {
    min-width: 32px;
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--r-sm);
    text-decoration: none !important;
}
.dxpLite_MaterialCompact .dxp-num { color: var(--brand); }
.dxpLite_MaterialCompact .dxp-num:hover { background: var(--brand-tint); }
.dxpLite_MaterialCompact .dxp-current {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
}
.dxpLite_MaterialCompact .dxp-summary { color: var(--ink-soft); }

/* treść list (Realizowane zgłoszenia, Zadania, Archiwum) */
.page-section {
    margin: 16px 24px 24px;
}

/* ==========================================================================
   Pulpit - karty "Zadania do wykonania" i "Realizowane zgłoszenia"
   ========================================================================== */

/* Nagłówek karty: tytuł (link do listy) i licznik w jednym wierszu.
   UserDashboard.css układał je jako komórki tabeli z min-width: 100%
   na tytule - razem z licznikiem przekraczały szerokość karty. */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
}

.dashboard-header-left,
.dashboard-header-left:hover {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 60px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink) !important;
    padding-left: 18px;
}
.dashboard-header-left:hover,
.dashboard-header-left:focus-visible {
    color: var(--brand) !important;
    text-decoration: underline !important;
}

/* licznik: zamiast obrazka "kółka" plakietka w kolorze marki */
.dashboard-header-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    height: auto;
    padding-right: 18px;
}
.dashboard-header-right > img {
    display: none !important;
}
.dashboard-header-right-cnt {
    position: static;
    display: inline-block;
    height: auto;
    min-width: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* wiersze szablonu - delikatniejsze linie niż darkgray */
.dashboard-grid .dashboard-row1,
.dashboard-grid .dashboard-row2,
.dashboard-grid .dashboard-row3 {
    border-bottom-color: var(--line-soft) !important;
}

.dashboard-grid td {
    color: var(--ink-soft);
}

/* typ zgłoszenia - plakietka zamiast pogrubionego tekstu */
.dashboard-grid .dashboard-row2 .dxeBase_MaterialCompact:not(:empty) {
    display: inline-block;
    padding: 2px 10px !important;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 600 !important;
    white-space: nowrap;
}

/* nagłówek sekcji "Wybierz typ zgłoszenia" */
.group-list-text,
.file-list-text {
    color: var(--ink) !important;
    font-weight: 600;
}

/* ==========================================================================
   Kafelki typów zgłoszeń (CardView "orderTaskGrid")
   ========================================================================== */

.dxcvFlowCard_MaterialCompact.card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.dxcvFlowCard_MaterialCompact.card:hover {
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* cards.css powiększał tekst przy najechaniu (16 -> 18 pt) - karta "skakała" */
.card:hover .text,
.card .title:hover {
    font-size: inherit;
}

.card .title,
.card .title .dxflCaption_MaterialCompact {
    color: var(--ink) !important;
}

.card .comment,
.card .dxflNestedControlCell_MaterialCompact.comment {
    color: var(--ink-soft) !important;
}

/* ==========================================================================
   Formularze (FormLayout, pola edycyjne)
   ========================================================================== */

.dxflCaption_MaterialCompact,
.dxflCaptionCell_MaterialCompact {
    color: var(--ink-soft) !important;
    font-weight: 600;
}

.dxflGroupBoxCaption_MaterialCompact {
    color: var(--ink);
    font-weight: 600;
}

.dxeTextBox_MaterialCompact,
.dxeButtonEdit_MaterialCompact,
.dxeMemo_MaterialCompact {
    border-radius: var(--r-sm);
}

.dxeFocused_MaterialCompact {
    box-shadow: 0 0 0 3px rgba(11, 81, 142, .15) !important;
}

/* karta formularza (dane operatora, zmiana hasła) */
.form-layout-style.dxflFormLayout_MaterialCompact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    box-sizing: border-box;
    max-width: 760px;
    padding: 8px 12px 16px;
}

/* panel kryteriów archiwum */
.dxrpControl_MaterialCompact,
.dxrpControl_MaterialCompact .dxrpcontent {
    border-radius: var(--r-lg);
}
.dxrpControl_MaterialCompact {
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.dxrpControl_MaterialCompact .dxrpHeader_MaterialCompact {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    color: var(--ink) !important;
    font-weight: 600;
}

/* ==========================================================================
   Przyciski
   ========================================================================== */

.dxbButton_MaterialCompact {
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: none !important;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.dxbButtonHover_MaterialCompact {
    box-shadow: 0 2px 6px rgba(11, 81, 142, .25) !important;
}

/* ==========================================================================
   Okna (PopupControl), panel ładowania
   ========================================================================== */

.dxpcLite_MaterialCompact .dxpc-mainDiv,
.dxpcLite_MaterialCompact.dxpc-mainDiv {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dxpcLite_MaterialCompact .dxpc-headerText {
    font-weight: 600;
    color: var(--ink);
}

.dxlpLoadingPanel_MaterialCompact {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
    color: var(--ink);
}

/* pływający przycisk operacji na zgłoszeniu */
.dxfabControl_MaterialCompact .dx-fab-main-button {
    box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   Strony informacyjne (błąd, brak dostępu, brak zgłoszeń, zmiany zapisane)
   ========================================================================== */

.empty-state {
    max-width: 560px;
    margin: 48px auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.empty-state img {
    max-width: 120px;
    height: auto;
}
.empty-state h2 {
    margin: 16px 0 8px;
    font-size: 20px;
    color: var(--ink);
}
.empty-state p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.5;
}

.warning-message-text {
    color: var(--ink) !important;
}

/* ==========================================================================
   Logowanie - układ "auth"
   ========================================================================== */

.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.auth .box {
    width: 100%;
    max-width: 440px;
    margin: 48px 0 24px;
}

.auth .logo {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
.auth .logo img {
    width: 100%;
    max-width: 260px;
    height: auto;
    /* logo ma białe tło - "multiply" wtapia je w tło strony */
    mix-blend-mode: multiply;
}

.card-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}
.card-panel > header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.card-panel > header h1 {
    margin: 0;
    font-size: 20px;
    color: var(--ink);
}
.card-panel > header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}
.card-panel > .body {
    padding: 8px 12px 12px;
}

/* FormLayout logowania - bez własnego tła, wypełnia kartę */
.auth .dxflFormLayout_MaterialCompact {
    background: transparent !important;
    width: 100%;
}
.auth .dxflFormLayout_MaterialCompact .dxeTextBox_MaterialCompact,
.auth .dxflFormLayout_MaterialCompact .dxeButtonEdit_MaterialCompact {
    width: 100% !important;
}
/* komórki FormLayout mają display: table i kurczą się do treści - przycisk
   "Zaloguj" (Width = 100%) zostawał wąski */
.auth .dxflNestedControlCell_MaterialCompact {
    width: 100%;
    box-sizing: border-box;
}
.auth #SignInButton {
    width: 100% !important;
}

.auth .formLayout-generalErrorText {
    margin-top: 0;
    padding: 11px 14px;
    border: 1px solid #F3C7C2;
    border-radius: var(--r);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 14px;
}

.auth-info {
    max-width: 440px;
    margin: 0 auto 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
}
.auth-info a { font-weight: 600; }

.auth-footer {
    margin-top: auto;
    width: 100%;
    padding: 16px 0 20px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .auth .box { margin-top: 20px; }
    .card-panel > header { padding: 16px 16px 12px; }
    .card-panel > .body { padding: 4px 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}