/* ------------------------------------------------------------------ *
 *  RMDN Pomoc — panel. Szata graficzna wg identyfikacji RMDN IT
 *  (F:\Claude Code\Strona WWW RMDN\identyfikacja\BRAND-RMDN.md).
 * ------------------------------------------------------------------ */
:root {
    --rmdn-it-bg: #0B1020;
    --rmdn-it-surface: #121A2F;
    --rmdn-it-line: #243050;
    --rmdn-it-primary: #4F7CFF;
    --rmdn-it-primary-dark: #3358D6;
    --rmdn-it-violet: #8B5CF6;
    --rmdn-it-cyan: #22D3EE;
    --rmdn-it-mint: #34D399;
    --rmdn-it-text: #E6EAF5;
    --rmdn-it-muted: #A9B3CC;
    --rmdn-it-light-bg: #F5F7FC;
    --rmdn-it-light-text: #0F172A;
    --rmdn-it-light-muted: #5B6478;
    --rmdn-it-grad: linear-gradient(120deg, #4F7CFF 0%, #8B5CF6 55%, #22D3EE 100%);

    /* kolory akcentu dla motywu DevExpress/Bootstrap */
    --bs-primary: var(--rmdn-it-primary);
    --bs-primary-rgb: 79, 124, 255;
    --bs-link-color: var(--rmdn-it-primary);
    --bs-link-hover-color: var(--rmdn-it-primary-dark);
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
    /* Bez komponentu SplashScreen nikt nie zdejmuje z <app> stylu ukrywającego
       (XAF odsłania go dopiero w hideLoadingPanel splash-a), a własny wskaźnik
       ładowania XAF (#xaf-loading) działa niezależnie. */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Warstwa komunikatu o błędzie obwodu Blazora — domyślnie ukryta.
   Bez tej reguły „Application Error" wisi na ekranie od pierwszego renderu,
   bo komponent BlazorError jest w _Host.cshtml zawsze. */
#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ---------------------------------------------------------- ekran startowy --- */
#applicationLoadingPanel {
    background: var(--rmdn-it-bg);
    color: var(--rmdn-it-text);
}

#applicationLoadingPanel .loading-caption {
    color: var(--rmdn-it-text);
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- logowanie --- */
.xaf-logon-window,
.dxbl-window-content .xaf-logon {
    border-top: 3px solid transparent;
    border-image: var(--rmdn-it-grad) 1;
}

/* --------------------------------------------------------------- nagłówek --- */
.xaf-header,
.dxbl-toolbar.xaf-main-toolbar {
    background: var(--rmdn-it-bg);
    color: var(--rmdn-it-text);
}

.xaf-header .xaf-title,
.xaf-header a,
.xaf-header .dxbl-btn {
    color: var(--rmdn-it-text);
}

/* pasek marki: sygnet RMDN IT po lewej stronie tytułu */
.xaf-header .xaf-title::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 0.55rem;
    vertical-align: -4px;
    background-image: url('../images/sygnet-rmdn-it.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* cienka listwa w kolorach marki pod nagłówkiem */
.xaf-header::after {
    content: "";
    display: block;
    height: 3px;
    background: var(--rmdn-it-grad);
}

/* ------------------------------------------------------------------ menu --- */
.xaf-navigation .dxbl-treeview-item.dxbl-active,
.xaf-navigation .dxbl-listbox-item.dxbl-selected {
    background-color: rgba(79, 124, 255, 0.14);
    border-left: 3px solid var(--rmdn-it-primary);
}

/* ----------------------------------------------------------------- akcje --- */
.dxbl-btn-primary,
.btn-primary {
    background-color: var(--rmdn-it-primary);
    border-color: var(--rmdn-it-primary);
}

.dxbl-btn-primary:hover,
.btn-primary:hover {
    background-color: var(--rmdn-it-primary-dark);
    border-color: var(--rmdn-it-primary-dark);
}

/* --------------------------------------------------------------- statusy --- */
/* kolory statusów zadań: done/failed/approved czytelne na pierwszy rzut oka */
.status-done { color: var(--rmdn-it-mint); }
.status-failed { color: #F87171; }
.status-approved { color: var(--rmdn-it-primary); }
.status-new { color: var(--rmdn-it-violet); }

/* --------------------------------------------------- treść zadania w liście --- */
/* Skrypty SQL są wieloliniowe — bez tego jeden wiersz tabeli rozpycha się na całą
   wysokość ekranu (zgłoszenie RMDN). Dwa wiersze wystarczą, żeby rozpoznać zadanie;
   pełna treść jest w szczegółach. Szablon komórki nadaje tę klasę w WygladListyController. */
.pomoc-tresc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;      /* zachowuje wcięcia SQL w tych dwóch widocznych wierszach */
    word-break: break-word;
    max-height: 3.1em;
    line-height: 1.45;
}

/* ===== Wątek zgłoszenia (styl Zammad) ===== */
.watek { display: flex; flex-direction: column; gap: 14px; padding: 8px 4px 16px; max-width: 1100px; }
.watek-pusty { padding: 12px; color: #6B7280; }
.watek-wpis { display: flex; gap: 10px; align-items: flex-start; }
.watek-agent { flex-direction: row-reverse; }
.watek-awatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .8rem; color: #fff; background: #F59E0B; letter-spacing: .02em; }
.watek-agent .watek-awatar, .watek-ja { background: var(--rmdn-it-primary); }
.watek-wewn .watek-awatar { background: #9CA3AF; }
.watek-dymek { flex: 1 1 auto; min-width: 0; border-radius: 10px; padding: 10px 14px; background: #F3F4F6; border: 1px solid #E5E7EB; }
.watek-agent .watek-dymek { background: #EEF3FF; border-color: #D6E0FF; }
.watek-wewn .watek-dymek { background: #FFF8DB; border-color: #F3E4A6; }
.watek-naglowek { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: .82rem; color: #6B7280; margin-bottom: 6px; }
.watek-kto { font-weight: 600; color: #111827; }
.watek-rodzaj { text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.watek-auth { font-size: .7rem; padding: 1px 6px; border-radius: 8px; background: #FEE2E2; color: #991B1B; }
.watek-auth.ok { background: #DCFCE7; color: #166534; }
.watek-blad { font-size: .78rem; padding: 1px 6px; border-radius: 8px; background: #FEE2E2; color: #991B1B; }
.watek-ok { font-size: .78rem; color: #166534; }
.watek-czas { margin-left: auto; white-space: nowrap; font-size: .78rem; color: #6B7280; }
.watek-adresaci { font-size: .78rem; color: #6B7280; margin-bottom: 6px; }
.watek-tresc { font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.watek-tresc img { max-width: 100%; height: auto; }
.watek-tresc img[data-zablokowany] { display: none; }
.watek-tresc table { max-width: 100%; }
.watek-tresc p { margin: 0 0 .6em; }
.watek-skrocona { max-height: 20em; overflow: hidden; position: relative; }
.watek-skrocona::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(transparent, #F3F4F6); }
.watek-agent .watek-skrocona::after { background: linear-gradient(transparent, #EEF3FF); }
.watek-wiecej { display: inline-block; margin-top: 6px; font-size: .8rem; }
.watek-uwaga { margin-top: 8px; font-size: .78rem; color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 4px 8px; }
.watek-zalaczniki { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; }
.watek-odpowiedz { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.watek-formularz { flex: 1 1 auto; border: 2px dashed #C7CBD3; border-radius: 10px; padding: 10px 14px; background: #fff; }
.watek-tryb { display: flex; gap: 18px; font-size: .85rem; margin-bottom: 8px; }
.watek-tryb label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.watek-pola { display: flex; gap: 12px; margin-bottom: 8px; font-size: .85rem; }
.watek-pola label { flex: 1 1 50%; display: flex; gap: 6px; align-items: center; }
.watek-pola input { flex: 1 1 auto; border: 1px solid #D1D5DB; border-radius: 6px; padding: 4px 8px; font-size: .85rem; }
.watek-formularz textarea { width: 100%; border: 1px solid #D1D5DB; border-radius: 6px; padding: 8px; font: inherit; font-size: .9rem; resize: vertical; }
.watek-przyciski { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ===== edytor odpowiedzi: pasek, pole contenteditable, zalaczniki ===== */
.watek-pasek { display: flex; gap: 4px; margin-bottom: 6px; }
.watek-pasek button { border: 1px solid #D1D5DB; background: #fff; border-radius: 5px; padding: 2px 8px; font-size: .8rem; cursor: pointer; }
.watek-pasek button:hover { background: #F3F4F6; }
.watek-edytor { min-height: 8em; max-height: 40vh; overflow: auto; border: 1px solid #D1D5DB; border-radius: 6px; padding: 8px; font-size: .9rem; line-height: 1.45; background: #fff; }
.watek-edytor:focus { outline: 2px solid rgba(79,124,255,.35); }
.watek-edytor:empty::before { content: attr(data-placeholder); color: #9CA3AF; }
.watek-edytor img { max-width: 100%; height: auto; }
.watek-edytor.watek-drop { outline: 2px dashed var(--rmdn-it-primary); }
.watek-pliki { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: .82rem; }
.watek-pliki span { background: #F3F4F6; border-radius: 12px; padding: 2px 10px; }
.watek-pliki a { margin-left: 6px; color: #991B1B; text-decoration: none; cursor: pointer; }
.watek-dodaj input[type=file] { display: none; }
.watek-dodaj label { cursor: pointer; font-size: .82rem; color: var(--rmdn-it-primary); }