/* ===========================================================================
   Strona publiczna apps.rmdn.pl — identyfikacja RMDN dział IT.
   Arkusz jest samodzielny (nie dzieli niczego z panelem XAF): część publiczna ma
   być lekka, więc nie ciągnie ani Bootstrapa, ani stylów DevExpress.
   =========================================================================== */

:root {
    --granat: #0B1020;
    --powierzchnia: #121A2F;
    --powierzchnia-jasna: #1B2542;
    --akcent: #4F7CFF;
    --akcent-ciemny: #3D63D6;
    --tekst: #E8ECF6;
    --przygaszony: #9AA6C2;
    --obwodka: #26314F;
    --gradient: linear-gradient(120deg, #4F7CFF 0%, #8B5CF6 55%, #22D3EE 100%);
    --promien: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 2.5rem 1.25rem 3rem;
    background: var(--granat);
    background-image:
        radial-gradient(60rem 40rem at 82% -12%, rgba(34, 211, 238, .16), transparent 70%),
        radial-gradient(52rem 36rem at 8% 108%, rgba(139, 92, 246, .15), transparent 70%);
    background-attachment: fixed;
    color: var(--tekst);
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: Manrope, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -.02em;
    margin: 0;
}

.gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kropka { color: var(--obwodka); margin: 0 .15rem; }

/* --- nagłówek ---------------------------------------------------------------- */
.pasek {
    width: min(72rem, 100%);
    margin: 0 auto 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pasek h1 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); }

.sygnet { border-radius: 12px; flex: 0 0 auto; }

.podtytul { margin: .15rem 0 0; color: var(--przygaszony); font-size: .95rem; }

/* --- siatka kafelków --------------------------------------------------------- */
main { width: min(72rem, 100%); margin: 0 auto; }

.kafelki {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
}

.kafelek {
    background: color-mix(in srgb, var(--powierzchnia) 88%, transparent);
    border: 1px solid var(--obwodka);
    border-radius: var(--promien);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Wstęga marki na górze kafelka — jedyny mocny akcent, reszta zostaje spokojna. */
    background-image: var(--gradient);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top left;
}

.kafelek h2 { font-size: 1.15rem; }

.ikona { margin-bottom: .25rem; }

.ikona img { display: block; border-radius: 12px; }

.ikona-zastepcza {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--powierzchnia-jasna);
    border: 1px solid var(--obwodka);
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--akcent);
}

.meta { margin: 0; font-size: .85rem; color: var(--przygaszony); }

.wersja {
    font-variant-numeric: tabular-nums;
    color: var(--tekst);
    font-weight: 600;
}

.bez-wydania { color: #C4823C; }

.opis { margin: 0; color: var(--przygaszony); font-size: .92rem; }

.pobierz {
    margin-top: auto;
    align-self: flex-start;
    display: inline-block;
    padding: .55rem 1.1rem;
    border-radius: 10px;
    background: var(--akcent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.pobierz:hover { background: var(--akcent-ciemny); }

.pobierz.nieaktywny {
    background: var(--powierzchnia-jasna);
    color: var(--przygaszony);
    cursor: not-allowed;
}

.pusto { color: var(--przygaszony); }

/* --- okno hasła (dialog) ------------------------------------------------------ */
.okno-hasla {
    border: 1px solid var(--obwodka);
    border-radius: var(--promien);
    background: var(--powierzchnia);
    color: var(--tekst);
    padding: 1.5rem;
    width: min(24rem, 92vw);
}

.okno-hasla::backdrop { background: rgba(4, 7, 16, .72); }

.okno-hasla h3 { font-size: 1.1rem; }

.okno-hasla p { margin: .35rem 0 1rem; color: var(--przygaszony); font-size: .9rem; }

.przyciski { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

/* --- formularze --------------------------------------------------------------- */
label {
    display: block;
    font-size: .85rem;
    color: var(--przygaszony);
    margin-bottom: .35rem;
}

input[type=password] {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--obwodka);
    background: var(--granat);
    color: var(--tekst);
    font: inherit;
}

input[type=password]:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 1px;
}

button {
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: 10px;
    background: var(--akcent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button:hover { background: var(--akcent-ciemny); }

button.drugorzedny {
    background: transparent;
    border: 1px solid var(--obwodka);
    color: var(--przygaszony);
}

button.drugorzedny:hover { background: var(--powierzchnia-jasna); }

/* --- osobna strona hasła (wariant bez JavaScriptu) ---------------------------- */
.strona-hasla { display: grid; place-items: center; }

.karta-hasla {
    width: min(26rem, 100%);
    background: color-mix(in srgb, var(--powierzchnia) 88%, transparent);
    border: 1px solid var(--obwodka);
    border-radius: var(--promien);
    padding: 2rem;
}

.karta-hasla h1 { font-size: 1.5rem; margin-top: 1rem; }

.karta-hasla form { margin-top: 1.25rem; display: grid; gap: .75rem; }

.karta-hasla button { justify-self: start; }

.blad {
    margin: 1rem 0 0;
    padding: .6rem .8rem;
    border-radius: 10px;
    border: 1px solid #7A2E36;
    background: rgba(122, 46, 54, .25);
    color: #FFC9CE;
    font-size: .9rem;
}

.powrot {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--przygaszony);
    font-size: .875rem;
    text-decoration: none;
}

.powrot:hover { color: var(--tekst); }

/* --- stopka ------------------------------------------------------------------- */
footer {
    width: min(72rem, 100%);
    margin: 3rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--obwodka);
    color: var(--przygaszony);
    font-size: .85rem;
}

footer a { color: var(--przygaszony); }

footer a:hover { color: var(--tekst); }