/* ==========================================================================
   Epaka — shared premium design layer
   Loaded AFTER the Tailwind CDN <script> in every page's <head>, so these
   rules win the cascade for equal-specificity Tailwind utility selectors
   (single class, e.g. .shadow-md) without editing any class name used by
   JS (classList.add/remove/toggle, querySelector). Purely visual — no
   markup, IDs, event handlers or data flow are touched by this file.
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-feature-settings: "cv11", "ss01";
}

/* --------------------------------------------------------------------------
   Elevation system — Tailwind's default shadows are dark/boxy. This swaps
   in a softer, more diffused scale (lower opacity, larger spread) that
   reads as "premium SaaS" instead of "2018 template". Same utility class
   names are kept (shadow-sm / shadow-md / ...), so every one of the ~220
   existing usages across the app is upgraded automatically.
   -------------------------------------------------------------------------- */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 1px 0 rgba(15, 23, 42, 0.03) !important;
}
.shadow {
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04) !important;
}
.shadow-md {
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.10), 0 2px 5px -3px rgba(15, 23, 42, 0.06) !important;
}
.shadow-lg {
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.06) !important;
}
.shadow-xl {
    box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.18), 0 6px 12px -6px rgba(15, 23, 42, 0.08) !important;
}
.shadow-2xl {
    box-shadow: 0 24px 56px -18px rgba(15, 23, 42, 0.24), 0 8px 16px -8px rgba(15, 23, 42, 0.10) !important;
}

/* --------------------------------------------------------------------------
   Accessible, on-brand focus ring. Inputs/buttons across the app already
   use `outline-none` + a colored `focus:border-*`, which drops the native
   focus indicator. This adds it back as a soft ring, additive only —
   no existing class is renamed or removed.
   -------------------------------------------------------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.10);
}

/* Subtle lift on clickable cards (dashboard tiles, list rows) — scoped to
   the exact recipe already used across the app so it never touches
   elements that merely happen to share one of these classes for other
   reasons. Box-shadow only (no transform), so it can never fight the
   existing active:scale-95 / hover:-translate-y-* utility transforms. */
.cursor-pointer.rounded-2xl.border,
.cursor-pointer.rounded-xl.border,
button.rounded-2xl.border.border-slate-200,
button.rounded-xl.border.border-slate-200 {
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cursor-pointer.rounded-2xl.border:hover,
.cursor-pointer.rounded-xl.border:hover,
button.rounded-2xl.border.border-slate-200:hover,
button.rounded-xl.border.border-slate-200:hover {
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.12), 0 2px 6px -3px rgba(15, 23, 42, 0.06);
}

/* --------------------------------------------------------------------------
   Skeleton loading blocks — used in place of plain "Ładowanie..." text
   wherever a container is later fully overwritten by real data. Same
   shimmer look everywhere, opt-in via .skeleton / .skeleton-line etc.
   -------------------------------------------------------------------------- */
@keyframes epaka-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #eef1f5 25%, #f7f8fa 37%, #eef1f5 63%);
    background-size: 200% 100%;
    animation: epaka-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.75rem;
}
.skeleton-line { height: 0.75rem; border-radius: 9999px; }
.skeleton-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Small typographic polish — antialiased numerals in stat/money displays.
   -------------------------------------------------------------------------- */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Tiny uppercase status/role badges (px-2 py-0.5 rounded-full etc.) read
   tighter with a touch of letter-spacing — matched by the arbitrary-value
   font-size Tailwind class the app already uses for every badge. */
[class*="text-[0.65rem]"][class*="uppercase"],
[class*="text-[0.6rem]"][class*="uppercase"] {
    letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Custom select chevron — replaces each browser's inconsistent native
   arrow with one consistent premium indicator, no extra request (inline
   SVG data-URI). Every <select> already reserves right-side padding via
   its existing p-2/p-3 utility class, which this simply extends.
   -------------------------------------------------------------------------- */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.25rem !important;
}


/* ==========================================================================
   EPAKA 2.0 — warstwa wizualna "Aurora" (zasady Apple Design, patrz
   .claude/skills/apple-design): szybka reakcja na dotyk, sprężyste wejścia,
   materiały półprzezroczyste, tracking zależny od rozmiaru, szanowanie
   prefers-reduced-motion / -transparency / -contrast. Wyłącznie CSS —
   żadna klasa ani ID używane przez JS nie jest zmieniane.
   ========================================================================== */

:root {
    --ep-ease: cubic-bezier(0.2, 0.9, 0.3, 1);          /* wejście: szybki start, miękkie lądowanie */
    --ep-ease-out: cubic-bezier(0.3, 0, 0.8, 0.15);      /* wyjście: lustrzane do wejścia */
    --ep-ring: rgba(15, 23, 42, 0.06);                   /* cienka obwódka zamiast ciężkiej ramki */
    --ep-glass: rgba(255, 255, 255, 0.72);
    --ep-red: #e60000;
}

/* --- Tło strony: spokojny gradient zamiast płaskiego szarego --- */
body.bg-slate-50 {
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(230, 0, 0, 0.055), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(99, 102, 241, 0.06), transparent 55%),
        #f6f7fb !important;
    background-attachment: fixed !important;
}

/* --- Typografia: tracking zależny od rozmiaru (duże = ciaśniej), tabularne cyfry --- */
body { font-optical-sizing: auto; }
h1, .text-2xl, .text-3xl, .text-4xl, .text-5xl { letter-spacing: -0.022em; }
h2, .text-xl { letter-spacing: -0.016em; }
h3, .text-lg { letter-spacing: -0.01em; }
.font-extrabold, .font-black { font-variant-numeric: tabular-nums; }
p, .text-sm { line-height: 1.5; }

/* --- Reakcja natychmiast na dotyk (feedback na pointer-down, nie przy puszczeniu) --- */
button, [role="button"], .cursor-pointer, a.block {
    transition: transform 0.28s var(--ep-ease), box-shadow 0.2s ease, background-color 0.18s ease,
                border-color 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
    touch-action: manipulation; /* bez 300 ms opóźnienia dotyku */
}
button:active:not(:disabled), [role="button"]:active, .cursor-pointer:active {
    transform: scale(0.965);
    transition-duration: 0.09s;
}
button:disabled { cursor: not-allowed; }

/* --- Wejście zakładek: sprężyste; tylko transform + opacity (płynne także na słabych telefonach) --- */
@keyframes ep-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.tab-content.active { animation: ep-enter 0.45s var(--ep-ease) both; }

/* --- Górny pasek: szklany materiał, bez twardej linii (zanika, nie "tnie") --- */
header.sticky {
    background: var(--ep-glass) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 8px 24px -16px rgba(15, 23, 42, 0.18) !important;
}
header.sticky img[alt="Profil"] {
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.3) !important;
}

/* --- Dolna nawigacja: szkło z jasną krawędzią (światło na materiale), aktywna zakładka z "pigułką" --- */
#mainNav {
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    backdrop-filter: blur(26px) saturate(190%);
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#mainNav .nav-btn { position: relative; border-radius: 1rem; }
#mainNav .nav-btn span:last-child { letter-spacing: 0.01em; }
#mainNav .nav-btn::before {
    content: "";
    position: absolute;
    inset: 6px 8px;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(230, 0, 0, 0.10), rgba(230, 0, 0, 0.04));
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.35s var(--ep-ease);
    z-index: -1;
}
#mainNav .nav-btn.text-epaka-red::before { opacity: 1; transform: scale(1); }
#mainNav .nav-btn.text-epaka-red { font-weight: 800; }
#mainNav .nav-icon { transition: transform 0.4s var(--ep-ease) !important; }

/* --- Karty i panele: większy promień, cienka obwódka, głębia warstwowa --- */
.rounded-2xl { border-radius: 1.25rem; }
.rounded-3xl { border-radius: 1.75rem; }
.rounded-xl  { border-radius: 0.95rem; }

.bg-white.border.border-slate-200,
.bg-white.rounded-2xl.border,
.bg-white.rounded-xl.border {
    border-color: var(--ep-ring) !important;
}
.bg-white.rounded-2xl.shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12) !important;
}
.cursor-pointer.rounded-2xl.border:hover,
button.rounded-2xl.border.border-slate-200:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.22), 0 4px 10px -6px rgba(15, 23, 42, 0.08) !important;
}

/* --- Emoji w kafelkach: "ikony aplikacji" w kolorowych, miękkich kapsułach --- */
#dashboardContent > div > .flex-col > span.text-xl,
#adminDashboardGrid > div > .flex-col > span.text-xl,
#adminDashboardGrid > div > .flex > span.text-2xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
    font-size: 1.3rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px -2px rgba(15, 23, 42, 0.15);
}
#dashboardContent > div:nth-child(1) > .flex-col > span.text-xl { background: linear-gradient(145deg, #d1fae5, #a7f3d0); }
#dashboardContent > div:nth-child(2) > .flex-col > span.text-xl { background: linear-gradient(145deg, #ffedd5, #fed7aa); }
#dashboardContent > div:nth-child(3) > .flex-col > span.text-xl { background: linear-gradient(145deg, #ede9fe, #ddd6fe); }
#dashboardContent > div:nth-child(4) > .flex-col > span.text-xl { background: linear-gradient(145deg, #dbeafe, #bfdbfe); }

/* --- Menu "Więcej": prawdziwa siatka aplikacji (kolorowe ikony, spokojne etykiety) --- */
#more .grid > button {
    padding: 1.1rem 0.75rem;
    gap: 0.6rem;
}
#more .grid > button > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.1rem;
    font-size: 1.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 14px -8px rgba(15, 23, 42, 0.35);
}
#more .grid > button > span:last-child { letter-spacing: -0.005em; }
#more .grid > button:nth-child(8n+1) > span:first-child { background: linear-gradient(145deg, #e0f2fe, #bae6fd); }
#more .grid > button:nth-child(8n+2) > span:first-child { background: linear-gradient(145deg, #ffe4e6, #fecdd3); }
#more .grid > button:nth-child(8n+3) > span:first-child { background: linear-gradient(145deg, #dcfce7, #bbf7d0); }
#more .grid > button:nth-child(8n+4) > span:first-child { background: linear-gradient(145deg, #fef3c7, #fde68a); }
#more .grid > button:nth-child(8n+5) > span:first-child { background: linear-gradient(145deg, #ede9fe, #ddd6fe); }
#more .grid > button:nth-child(8n+6) > span:first-child { background: linear-gradient(145deg, #ffedd5, #fed7aa); }
#more .grid > button:nth-child(8n+7) > span:first-child { background: linear-gradient(145deg, #cffafe, #a5f3fc); }
#more .grid > button:nth-child(8n+8) > span:first-child { background: linear-gradient(145deg, #fae8ff, #f5d0fe); }

/* --- Przyciski główne: delikatny gradient + podświetlona krawędź, jak przycisk fizyczny --- */
button.bg-slate-800, button.bg-slate-900 {
    background-image: linear-gradient(180deg, #3b4658, #1e293b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px -10px rgba(15, 23, 42, 0.6) !important;
}
button.bg-epaka-red {
    background-image: linear-gradient(180deg, #ff2a2a, #d10000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -10px rgba(230, 0, 0, 0.7) !important;
}
button.bg-emerald-600, button.bg-emerald-500 {
    background-image: linear-gradient(180deg, #34d399, #059669);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -10px rgba(5, 150, 105, 0.65) !important;
}

/* --- Pola formularzy: miękkie, większe, z wyraźnym ale delikatnym fokusem --- */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="date"], input[type="time"], input[type="search"], select, textarea {
    border-radius: 0.95rem;
    border-color: rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    background-color: #fff;
    border-color: rgba(230, 0, 0, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(230, 0, 0, 0.09);
}

/* --- Chipy / plakietki statusów: pełna "pigułka" i czytelniejszy napis --- */
.rounded-full[class*="bg-"][class*="text-"][class*="font-"] { letter-spacing: 0.005em; }

/* --- Okna i arkusze: materializują się (rozmycie + skala), tło przygaszone --- */
@keyframes ep-materialize {
    from { opacity: 0; transform: scale(0.94) translateY(8px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.fixed.inset-0 > .bg-white.rounded-3xl, .fixed.inset-0 > .bg-white.rounded-2xl {
    animation: ep-materialize 0.38s var(--ep-ease) both;
}

/* --- Skeleton: spokojniejszy, szklisty --- */
.skeleton-card {
    border-color: var(--ep-ring);
    border-radius: 1.25rem;
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.14);
}

/* --- Zaznaczanie tekstu i pasek przewijania w tonacji aplikacji --- */
::selection { background: rgba(230, 0, 0, 0.9); color: #fff; }

/* ==========================================================================
   Dostępność (zasada Apple: ruch dostosowany do potrzeb użytkownika)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tab-content.active { animation: ep-fade 0.2s ease both; }
    @keyframes ep-fade { from { opacity: 0; } to { opacity: 1; } }
    button:active:not(:disabled), [role="button"]:active, .cursor-pointer:active { transform: none; }
    .cursor-pointer.rounded-2xl.border:hover, button.rounded-2xl.border.border-slate-200:hover { transform: none; }
    .fixed.inset-0 > .bg-white.rounded-3xl, .fixed.inset-0 > .bg-white.rounded-2xl { animation: ep-fade 0.2s ease both; }
    #wizard *, #wizard *::before { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .wz-bounce, .wz-glow, .wz-shake { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    header.sticky, #mainNav { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .bg-white.border.border-slate-200, .bg-white.rounded-2xl.border { border-color: rgba(15, 23, 42, 0.35) !important; }
    header.sticky, #mainNav { background: #fff !important; }
}

/* Karta "Do spakowania" na pulpicie — ta sama kapsuła na ikonę co pozostałe kafelki */
#wysylkaDashCard .flex > span.text-2xl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; font-size: 1.3rem;
    background: linear-gradient(145deg, #fef3c7, #fde68a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px -2px rgba(15, 23, 42, 0.15);
}

/* Pola daty/godziny nie wypychają kart poza ekran (iOS Safari ma dla nich sztywną szerokość) */
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; }

/* Panel szefa ma ciemny pasek z białym tekstem — ciemne szkło zamiast białego (inaczej napis znika) */
header.sticky.text-white {
    background: rgba(15, 23, 42, 0.78) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -18px rgba(2, 6, 23, 0.7) !important;
}
header.sticky.text-white img { border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: none !important; }
@media (prefers-reduced-transparency: reduce) {
    header.sticky.text-white { background: #0f172a !important; }
}

/* --- Ekran logowania: tło "aurora" i karta ze szkła, wejście sprężyste --- */
body:not([class]) {
    background:
        radial-gradient(700px 480px at 15% 10%, rgba(230, 0, 0, 0.13), transparent 60%),
        radial-gradient(640px 460px at 90% 85%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(520px 380px at 80% 5%, rgba(251, 191, 36, 0.12), transparent 60%),
        #f5f6fb;
    background-attachment: fixed;
}
body:not([class]) > .bg-white.rounded-2xl.shadow-xl {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 1.75rem;
    box-shadow: 0 30px 70px -30px rgba(30, 27, 75, 0.35), 0 8px 20px -12px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    animation: ep-materialize 0.6s var(--ep-ease) both;
}
@media (prefers-reduced-transparency: reduce) {
    body:not([class]) > .bg-white.rounded-2xl.shadow-xl { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    body:not([class]) > .bg-white.rounded-2xl.shadow-xl { animation: none; }
}

/* ==========================================================================
   Ikony (Lucide, icons.svg) — zastępują emotki. Rozmiar liczony w em, więc
   ikona przejmuje wielkość z dotychczasowych klas tekstu (text-xl, text-3xl…),
   a kolor z currentColor (np. aktywna zakładka = czerwona).
   ========================================================================== */
.ic {
    width: 1.15em; height: 1.15em;
    display: inline-block; flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    overflow: visible;
}
.ic-dot { width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.text-3xl > .ic, .text-4xl > .ic, .text-5xl > .ic, .text-6xl > .ic, .text-9xl > .ic { stroke-width: 1.75; }
#mainNav .nav-icon .ic { width: 1.35rem; height: 1.35rem; stroke-width: 2.1; }
#mainNav .nav-icon { filter: none !important; line-height: 1; }

/* Kapsuły ikon: kolor kreski w tonacji tła kapsuły */
#more .grid > button > span:first-child .ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.9; }
#more .grid > button:nth-child(8n+1) > span:first-child { color: #0369a1; }
#more .grid > button:nth-child(8n+2) > span:first-child { color: #be123c; }
#more .grid > button:nth-child(8n+3) > span:first-child { color: #15803d; }
#more .grid > button:nth-child(8n+4) > span:first-child { color: #b45309; }
#more .grid > button:nth-child(8n+5) > span:first-child { color: #6d28d9; }
#more .grid > button:nth-child(8n+6) > span:first-child { color: #c2410c; }
#more .grid > button:nth-child(8n+7) > span:first-child { color: #0e7490; }
#more .grid > button:nth-child(8n+8) > span:first-child { color: #a21caf; }
#dashboardContent > div > .flex-col > span.text-xl,
#adminDashboardGrid > div > .flex-col > span.text-xl,
#adminDashboardGrid > div > .flex > span.text-2xl,
#wysylkaDashCard .flex > span.text-2xl { color: #475569; }
#dashboardContent > div:nth-child(1) > .flex-col > span.text-xl { color: #047857; }
#dashboardContent > div:nth-child(2) > .flex-col > span.text-xl { color: #c2410c; }
#dashboardContent > div:nth-child(3) > .flex-col > span.text-xl { color: #6d28d9; }
#dashboardContent > div:nth-child(4) > .flex-col > span.text-xl { color: #1d4ed8; }
#wysylkaDashCard .flex > span.text-2xl { color: #b45309; }
#dashboardContent .ic, #adminDashboardGrid .ic, #wysylkaDashCard .flex > span.text-2xl .ic { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   Okienka aplikacji (config.js: uiAlert / uiConfirm) — zamiast systemowych
   alert()/confirm(). Czysty CSS, bez zależności od buildu Tailwinda.
   ========================================================================== */
#epToastHost {
    position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 12px);
    z-index: 10040; display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none; padding: 0 16px;
}
.ep-toast {
    pointer-events: auto; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    max-width: 440px; width: max-content;
    padding: 11px 16px; border-radius: 16px;
    font-size: 14px; font-weight: 600; line-height: 1.35; color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35), 0 2px 8px -4px rgba(15, 23, 42, 0.12);
    animation: ep-toast-in 0.32s var(--ep-ease) both;
}
.ep-toast .ic { width: 20px; height: 20px; flex-shrink: 0; }
.ep-toast.ep-ok .ic { color: #059669; }
.ep-toast.ep-error .ic { color: #e60000; }
.ep-toast.ep-out { animation: ep-toast-out 0.2s ease both; }
@keyframes ep-toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ep-toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }

.ep-dialog-backdrop {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: ep-fade-in 0.18s ease both;
}
.ep-dialog-backdrop.ep-out { animation: ep-fade-out 0.16s ease both; }
@keyframes ep-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ep-fade-out { to { opacity: 0; } }
.ep-dialog {
    width: 100%; max-width: 360px; text-align: center;
    background: #fff; border-radius: 24px; padding: 24px 20px 18px;
    box-shadow: 0 30px 70px -30px rgba(15, 23, 42, 0.5);
    animation: ep-materialize 0.3s var(--ep-ease) both;
}
.ep-dialog-icon {
    width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.ep-dialog-icon .ic { width: 24px; height: 24px; }
.ep-dialog-icon.ep-ask { background: #f1f5f9; color: #334155; }
.ep-dialog-icon.ep-ok { background: #d1fae5; color: #047857; }
.ep-dialog-icon.ep-error { background: #fee2e2; color: #dc2626; }
.ep-dialog-text {
    font-size: 15px; line-height: 1.5; color: #1e293b; font-weight: 500;
    margin-bottom: 20px; max-height: 50vh; overflow-y: auto; overflow-wrap: anywhere; text-align: left;
}
.ep-dialog-text:not(:has(br)) { text-align: center; }
.ep-dialog-actions { display: flex; gap: 10px; }
.ep-btn {
    flex: 1; padding: 13px 14px; border-radius: 14px; font-size: 15px; font-weight: 700;
    border: 0; cursor: pointer;
}
.ep-btn-ghost { background: #f1f5f9; color: #334155; }
.ep-btn-primary { background: #0f172a; color: #fff; }
.ep-btn-danger { background: #e60000; color: #fff; }
.ep-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.25); }
@media (prefers-reduced-motion: reduce) {
    .ep-toast, .ep-dialog, .ep-dialog-backdrop { animation: none !important; }
}