/* --- DARK MODE SETTINGS - GRADIENT EDITION --- */

/* Główne kontenery - gradient od góry do dołu dla efektu głębi */
.ui.card, .ui.segment, .ui.attached.segment {
    background: linear-gradient(180deg, rgba(55, 55, 55, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%) !important;
    border: 1px solid #444 !important;
    color: #eeeeee !important;
    /* Delikatny cień zewnętrzny i wewnętrzny (rim light) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Nagłówki boksów - metaliczny, ciemny gradient */
.ui.top.attached.message {
    background: linear-gradient(180deg, #2a2a2a 0%, #161718 100%) !important;
    border: 1px solid #444 !important;
    border-bottom: 1px solid rgba(224, 57, 151, 0.4) !important; /* Subtelne różowe podkreślenie nagłówka */
}

/* Kolor tekstu w nagłówkach + lekki cień pod literami */
.ui.top.attached.message .header {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Menu górne - ciemniejsze, żeby logo lepiej "siedziało" */
.ui.menu.huge {
    background: linear-gradient(180deg, rgba(35, 36, 37, 0.98) 0%, rgba(20, 21, 22, 1) 100%) !important;
    border-bottom: 2px solid #e03997 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Napisy w menu - dodany efekt po najechaniu (hover) */
.ui.menu .item {
    color: #ffffff !important;
    transition: background 0.3s ease;
}

.ui.menu .item:hover {
    background: rgba(224, 57, 151, 0.1) !important; /* Delikatny różowy błysk przy najechaniu */
}

/* Tło inputa do szukania postaci - bardziej wklęsły efekt */
.ui.input input {
    background: #222 !important;
    color: white !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Naprawa koloru tekstu w newsach (jeśli był za ciemny) */
.ui.segment p, .ui.segment div {
    color: #cccccc !important;
}