/* ================================
   RESET
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background: #09090b;
    --sidebar: #101012;
    --panel: #131316;
    --panel-hover: #18181c;

    --border: #28282d;

    --text: #f4f4f5;
    --text-secondary: #8c8c95;

    --red: #9e2429;
    --red-dark: #51171a;
    --red-light: #d35a5f;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    overflow: hidden;
}


/* ================================
   CAŁA APLIKACJA
================================ */

.app {
    display: flex;
    width: 100%;
    height: 100vh;
}


/* ================================
   SIDEBAR
================================ */

.sidebar {
    width: 265px;
    height: 100vh;

    background: var(--sidebar);
    border-right: 1px solid var(--border);

    display: flex;
    flex-direction: column;

    padding: 20px 14px;
}


/* LOGO */

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 5px 8px 24px 8px;

    border-bottom: 1px solid var(--border);
}

.logo-placeholder {
    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        145deg,
        #8f2529,
        #351012
    );

    border: 1px solid #a43b40;

    font-size: 12px;
    font-weight: 700;
}

.logo-text h2 {
    font-size: 17px;
    font-weight: 700;
}

.logo-text span {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);
    font-size: 10px;
}


/* ================================
   MENU
================================ */

.sidebar-nav {
    flex: 1;
    padding-top: 22px;
}

.nav-section {
    margin-bottom: 26px;
}

.nav-section-title {
    display: block;

    padding-left: 11px;
    margin-bottom: 8px;

    color: #696970;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.nav-item {
    height: 42px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 13px;
    margin-bottom: 4px;

    border-radius: 9px;

    color: #aaaab0;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition: 0.2s;
}

.nav-item:hover {
    background: var(--panel-hover);
    color: white;
}

.nav-item.active {
    background: linear-gradient(
        90deg,
        #4c171a,
        #351214
    );

    border: 1px solid #70262a;

    color: white;
}

.nav-item.active .nav-icon {
    color: #e06c70;
}

.nav-icon {
    width: 18px;

    text-align: center;

    color: #74747c;
}


/* ================================
   DÓŁ SIDEBARA
================================ */

.sidebar-bottom {
    border-top: 1px solid var(--border);

    padding-top: 12px;
}

.period-box {
    padding: 12px;

    background: #171113;

    border: 1px solid #502024;
    border-radius: 10px;

    margin-bottom: 10px;
}

.period-box span {
    display: block;

    color: var(--text-secondary);

    font-size: 10px;

    margin-bottom: 5px;
}

.period-box strong {
    font-size: 11px;
}

.logout-button {
    width: 100%;
    height: 38px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: #9c9ca3;

    cursor: pointer;

    transition: 0.2s;
}

.logout-button:hover {
    background: #1b1b1f;
    color: white;
}


/* ================================
   GŁÓWNA CZĘŚĆ
================================ */

.main {
    flex: 1;

    height: 100vh;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(110, 20, 25, 0.08),
            transparent 25%
        ),
        var(--background);
}


/* ================================
   TOPBAR
================================ */

.topbar {
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    border-bottom: 1px solid var(--border);

    background: rgba(9, 9, 11, 0.9);
}

.page-title h1 {
    font-size: 19px;
}

.page-title p {
    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 11px;
}


/* ================================
   PROFIL
================================ */

.profile {
    min-width: 155px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 11px;

    background: #141416;

    border: 1px solid var(--border);
    border-radius: 30px;

    cursor: pointer;

    transition: 0.2s;
}

.profile:hover {
    background: #1a1a1e;
}

.profile-avatar {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #502024;

    color: white;

    font-size: 13px;
    font-weight: 700;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-info {
    flex: 1;
}

.profile-info strong {
    display: block;

    font-size: 13px;
}

.profile-info span {
    display: block;

    margin-top: 2px;

    color: var(--text-secondary);

    font-size: 9px;
}

.profile-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d74d53;

    box-shadow: 0 0 7px rgba(215, 77, 83, 0.7);
}


/* ================================
   CONTENT
================================ */

.content {
    padding: 24px;
}


/* TYMCZASOWY PANEL */

.welcome-box {
    min-height: 300px;

    padding: 32px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0)
        ),
        var(--panel);
}

.welcome-label {
    color: #b8494e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.welcome-box h2 {
    margin-top: 12px;

    font-size: 26px;
}

.welcome-box p {
    margin-top: 10px;

    max-width: 500px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.6;
}


/* ================================
   SCROLLBAR
================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0c0c0e;
}

::-webkit-scrollbar-thumb {
    background: #29292e;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a40;
}
/* =====================================
   GÓRNE STATYSTYKI
===================================== */

.top-stats {
    display: grid;

    grid-template-columns:
        1fr
        1.25fr
        1fr
        1fr;

    gap: 14px;

    margin-bottom: 18px;
}


/* KARTA */

.stat-card {
    position: relative;

    min-height: 130px;

    padding: 18px 19px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(130, 28, 34, 0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #151518,
            #111113
        );

    border: 1px solid #29292e;
    border-radius: 15px;

    transition:
        transform 0.2s,
        border-color 0.2s,
        background 0.2s;
}


/* DELIKATNY CZERWONY BLASK */

.stat-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -60px;
    top: -60px;

    border-radius: 50%;

    background: rgba(135, 28, 33, 0.08);

    filter: blur(25px);

    pointer-events: none;
}


.stat-card:hover {
    transform: translateY(-2px);

    border-color: #3c3c43;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(145, 31, 37, 0.22),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #18181b,
            #121214
        );
}


/* =====================================
   HEADER KARTY
===================================== */

.stat-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    color: #77777f;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
}


.stat-icon {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #1b1b1f;

    border: 1px solid #29292e;
    border-radius: 7px;

    color: #8e8e96;

    font-size: 12px;
}


/* =====================================
   WARTOŚĆ
===================================== */

.stat-value {
    margin-top: 11px;

    color: #f2f2f4;

    font-size: 30px;
    font-weight: 700;

    letter-spacing: -1px;
}


.stat-value small {
    color: #77777f;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0;
}


/* =====================================
   ZMIANA WZGLĘDEM OKRESU
===================================== */

.stat-change {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 8px;

    font-size: 10px;
    font-weight: 600;
}


.stat-change span {
    color: #696970;

    font-weight: 400;
}


.stat-change.positive {
    color: #6fba83;
}


.stat-change.negative {
    color: #d55b61;
}


/* =====================================
   OBECNY OKRES
===================================== */

.period-date {
    margin-top: 15px;

    color: #f0f0f2;

    font-size: 16px;
    font-weight: 700;
}


.period-footer {
    display: flex;

    justify-content: space-between;

    margin-top: 13px;

    color: #77777f;

    font-size: 10px;
}


.period-footer strong {
    color: #aaaab0;

    font-weight: 500;
}


.period-progress {
    width: 100%;
    height: 4px;

    margin-top: 8px;

    overflow: hidden;

    background: #29292d;

    border-radius: 10px;
}


.period-progress-fill {
    width: 29%;
    height: 100%;

    background: #9e2429;

    border-radius: 10px;

    box-shadow:
        0 0 8px rgba(158, 36, 41, 0.35);
}


/* =====================================
   OBNIŻKA MINUT
===================================== */

.stat-description {
    margin-top: 8px;

    color: #6f6f77;

    font-size: 10px;
}


/* =====================================
   PUSTA KARTA
===================================== */

.stat-card-empty {
    border-style: dashed;
}


.empty-stat {
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #515158;

    font-size: 11px;
}


/* =====================================
   TYMCZASOWY DASHBOARD
===================================== */

.dashboard-placeholder {
    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(120, 25, 30, 0.06),
            transparent 35%
        ),
        #111113;

    border: 1px solid #28282d;
    border-radius: 16px;
}


.dashboard-placeholder span {
    color: #9e2429;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


.dashboard-placeholder h2 {
    margin-top: 8px;

    font-size: 20px;
}


.dashboard-placeholder p {
    max-width: 420px;

    margin-top: 7px;

    color: #696970;

    font-size: 11px;

    line-height: 1.6;
}


/* =====================================
   RESPONSYWNOŚĆ
===================================== */

@media (max-width: 1200px) {

    .top-stats {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 800px) {

    .sidebar {
        width: 210px;
    }

    .top-stats {
        grid-template-columns: 1fr;
    }

}
/* =====================================
   DASHBOARD GRID
===================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(350px, 1fr);
    gap: 16px;
}

.user-statistics,
.faction-trips {
    background: linear-gradient(
        145deg,
        #141416,
        #111113
    );

    border: 1px solid #28282d;
    border-radius: 15px;

    padding: 20px;
}


/* =====================================
   PANEL HEADER
===================================== */

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.panel-label {
    display: block;

    margin-bottom: 5px;

    color: #9e2429;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.panel-header h2 {
    font-size: 16px;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #77777f;

    font-size: 9px;
}

.legend-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a62c31;

    box-shadow: 0 0 6px rgba(166, 44, 49, 0.5);
}


/* =====================================
   WYKRES
===================================== */

.chart {
    height: 245px;

    display: flex;

    position: relative;

    margin-top: 5px;
}

.chart-y-axis {
    width: 30px;
    height: 200px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #55555c;

    font-size: 9px;

    padding-top: 2px;
}

.chart-area {
    position: relative;

    flex: 1;

    height: 200px;
}

.chart-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #242428;
}

.line-20 {
    top: 0;
}

.line-15 {
    top: 25%;
}

.line-10 {
    top: 50%;
}

.line-5 {
    top: 75%;
}

.line-0 {
    bottom: 0;
}


/* =====================================
   SŁUPKI
===================================== */

.bars {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-around;

    padding: 0 20px;
}

.bar-column {
    position: relative;

    width: 11%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.bar {
    width: 100%;

    min-width: 28px;
    max-width: 48px;

    border-radius: 6px 6px 2px 2px;

    background: linear-gradient(
        180deg,
        #772126,
        #401518
    );

    border: 1px solid #85282d;

    transition:
        transform 0.2s,
        filter 0.2s;
}

.bar-column:hover .bar {
    transform: translateY(-3px);

    filter: brightness(1.25);
}

.bar-column.active .bar {
    background: linear-gradient(
        180deg,
        #b7353b,
        #6b1d21
    );

    border-color: #c34147;

    box-shadow: 0 0 15px rgba(164, 40, 46, 0.18);
}

.bar-column span {
    position: absolute;

    bottom: -22px;

    color: #66666d;

    font-size: 9px;
}

.bar-value {
    margin-bottom: 5px;

    color: #77777f;

    font-size: 9px;

    opacity: 0;

    transition: 0.2s;
}

.bar-column:hover .bar-value,
.bar-column.active .bar-value {
    opacity: 1;
}


/* =====================================
   MINI STATYSTYKI
===================================== */

.user-stat-bottom {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 8px;
}

.mini-stat {
    padding: 13px 15px;

    background: #101012;

    border: 1px solid #252529;
    border-radius: 10px;
}

.mini-stat span {
    display: block;

    margin-bottom: 7px;

    color: #626269;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.mini-stat strong {
    color: #e9e9eb;

    font-size: 19px;
}

.mini-stat small {
    margin-left: 4px;

    color: #606067;

    font-size: 8px;
}


/* =====================================
   PRZYCISK
===================================== */

.small-button {
    padding: 7px 10px;

    background: #171719;

    border: 1px solid #29292e;
    border-radius: 7px;

    color: #888890;

    font-size: 8px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}

.small-button:hover {
    background: #1e1e22;
    color: white;

    border-color: #3a3a40;
}


/* =====================================
   WYJAZDY FRAKCJI
===================================== */

.faction-total {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 14px 15px;

    margin-bottom: 19px;

    background:
        linear-gradient(
            110deg,
            rgba(120, 27, 32, 0.13),
            rgba(120, 27, 32, 0.02)
        );

    border: 1px solid #3c2022;
    border-radius: 10px;
}

.faction-total span {
    display: block;

    color: #76767d;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.faction-total strong {
    display: block;

    margin-top: 4px;

    color: #ededee;

    font-size: 24px;
}

.faction-total-icon {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #351719;

    border: 1px solid #572126;
    border-radius: 8px;

    color: #c14c51;

    font-size: 13px;
}


/* =====================================
   LISTA WYJAZDÓW
===================================== */

.trips-title {
    margin-bottom: 8px;

    color: #5f5f66;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;
}

.trip-list {
    display: flex;
    flex-direction: column;
}

.trip-item {
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-bottom: 1px solid #222226;
}

.trip-item:last-child {
    border-bottom: none;
}

.trip-number {
    width: 42px;

    color: #8f3035;

    font-size: 9px;
    font-weight: 700;
}

.trip-info {
    flex: 1;
}

.trip-info strong {
    display: block;

    color: #c7c7cb;

    font-size: 10px;
    font-weight: 600;
}

.trip-info span {
    display: block;

    margin-top: 4px;

    color: #57575e;

    font-size: 8px;
}

.trip-status {
    padding: 4px 7px;

    border-radius: 5px;

    font-size: 7px;
    font-weight: 700;
}

.trip-status.completed {
    color: #70a97f;

    background: rgba(68, 122, 82, 0.1);

    border: 1px solid rgba(68, 122, 82, 0.2);
}


/* =====================================
   RESPONSYWNOŚĆ DASHBOARDU
===================================== */

@media (max-width: 1100px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}
.empty-trips {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.empty-trips-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    background: #18181b;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #55555d;
}

.empty-trips strong {
    color: #85858d;

    font-size: 10px;
}

.empty-trips span {
    max-width: 210px;

    margin-top: 5px;

    color: #505057;

    font-size: 8px;

    line-height: 1.5;
}
/* =====================================
   DOLNA CZĘŚĆ DASHBOARDU
===================================== */

.bottom-dashboard {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(350px, 1fr);

    gap: 16px;

    margin-top: 16px;
}


/* =====================================
   WSPÓLNE PANELE
===================================== */

.ranking-panel,
.announcement-panel {
    min-height: 280px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #141416,
            #111113
        );

    border: 1px solid #28282d;
    border-radius: 15px;
}


/* =====================================
   RANKING
===================================== */

.ranking-period {
    padding: 6px 9px;

    color: #77777f;

    background: #18181b;

    border: 1px solid #29292e;
    border-radius: 6px;

    font-size: 8px;
}


.ranking-header {
    display: grid;

    grid-template-columns:
        45px
        1fr
        80px;

    padding: 0 12px 9px 12px;

    border-bottom: 1px solid #242428;

    color: #55555d;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.ranking-header span:last-child {
    text-align: right;
}


/* =====================================
   PUSTY RANKING
===================================== */

.ranking-empty {
    min-height: 170px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.ranking-empty-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    background: #18181b;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #55555d;

    font-size: 15px;
}


.ranking-empty strong {
    color: #85858d;

    font-size: 10px;
}


.ranking-empty span {
    max-width: 220px;

    margin-top: 6px;

    color: #505057;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================
   OGŁOSZENIA
===================================== */

.announcement-icon {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #291719;

    border: 1px solid #502126;
    border-radius: 7px;

    color: #b74348;

    font-size: 11px;
    font-weight: 700;
}


.announcement-empty {
    min-height: 175px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.announcement-empty-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 11px;

    background:
        linear-gradient(
            145deg,
            #281719,
            #191315
        );

    border: 1px solid #472024;
    border-radius: 10px;

    color: #a4383e;

    font-size: 14px;
    font-weight: 700;
}


.announcement-empty strong {
    color: #85858d;

    font-size: 10px;
}


.announcement-empty span {
    max-width: 220px;

    margin-top: 6px;

    color: #505057;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================
   RESPONSYWNOŚĆ
===================================== */

@media (max-width: 1100px) {

    .bottom-dashboard {
    display: grid;

    /* IDENTYCZNE PROPORCJE JAK dashboard-grid */
    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(350px, 1fr);

    gap: 16px;

    margin-top: 16px;
    width: 100%;
}

}
.bottom-dashboard {
    width: 100%;
}

.ranking-panel,
.announcement-panel {
    width: 100%;
    min-width: 0;
}
/* =====================================
   WIĘKSZE I CZYTELNIEJSZE CZCIONKI
===================================== */

/* Opisy sekcji: TWOJA AKTYWNOŚĆ, SAFD, RANKING itd. */
.panel-label {
    font-size: 11px;
}

/* Tytuły paneli */
.panel-header h2 {
    font-size: 18px;
}

/* Górne kafelki */
.stat-card-header {
    font-size: 11px;
}

.stat-description {
    font-size: 11px;
}

.stat-change {
    font-size: 11px;
}

.period-footer {
    font-size: 11px;
}

/* Legenda wykresu */
.chart-legend {
    font-size: 10px;
}

/* Daty i wartości na wykresie */
.chart-y-axis {
    font-size: 10px;
}

.bar-column span {
    font-size: 10px;
}

.bar-value {
    font-size: 10px;
}

/* Małe statystyki pod wykresem */
.mini-stat span {
    font-size: 10px;
}

.mini-stat strong {
    font-size: 21px;
}

.mini-stat small {
    font-size: 10px;
}

/* Wyjazdy frakcji */
.faction-total span {
    font-size: 10px;
}

.trips-title {
    font-size: 10px;
}

/* PUSTE WYJAZDY - element ze screena */
.empty-trips strong {
    font-size: 13px;
}

.empty-trips span {
    max-width: 280px;
    font-size: 10px;
    line-height: 1.6;
}

/* Ranking */
.ranking-period {
    font-size: 10px;
}

.ranking-header {
    font-size: 10px;
}

.ranking-empty strong {
    font-size: 13px;
}

.ranking-empty span {
    max-width: 280px;
    font-size: 10px;
    line-height: 1.6;
}

/* Ogłoszenia */
.announcement-empty strong {
    font-size: 13px;
}

.announcement-empty span {
    max-width: 280px;
    font-size: 10px;
    line-height: 1.6;
}

/* Przyciski */
.small-button {
    font-size: 10px;
}
/* =====================================
   ROZWIJANY PROFIL
===================================== */

.profile-wrapper {
    position: relative;
}


/* STRZAŁKA */

.profile-arrow {
    margin-left: 2px;

    color: #66666e;

    font-size: 10px;

    transition: transform 0.2s ease;
}

.profile-wrapper.open .profile-arrow {
    transform: rotate(180deg);
}


/* =====================================
   DROPDOWN
===================================== */

.profile-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 340px;

    padding: 16px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(125, 27, 33, 0.12),
            transparent 35%
        ),
        #121214;

    border: 1px solid #2b2b30;
    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);

    z-index: 1000;


    /* UKRYTY */
    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px) scale(0.98);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s;
}


/* OTWARTY */

.profile-wrapper.open .profile-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}


/* =====================================
   HEADER PROFILU
===================================== */

.profile-dropdown-header {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 15px;

    border-bottom: 1px solid #29292e;
}


.profile-big-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #652025,
            #361316
        );

    border: 1px solid #813038;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}


.profile-dropdown-user {
    min-width: 0;
}


.profile-dropdown-user strong {
    display: block;

    color: #f0f0f2;

    font-size: 15px;
}


.profile-dropdown-user > span {
    display: block;

    margin-top: 3px;

    color: #8b8b93;

    font-size: 11px;
}


.profile-department {
    display: inline-flex;

    margin-top: 7px;

    padding: 4px 7px;

    background: rgba(130, 32, 37, 0.12);

    border: 1px solid rgba(151, 43, 49, 0.25);
    border-radius: 5px;

    color: #b9565b;

    font-size: 9px;
    font-weight: 600;
}


/* =====================================
   STATYSTYKI PROFILU
===================================== */

.profile-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 7px;

    margin-top: 14px;
}


.profile-stat {
    padding: 11px 8px;

    background: #0e0e10;

    border: 1px solid #252529;
    border-radius: 8px;

    text-align: center;
}


.profile-stat span {
    display: block;

    min-height: 22px;

    color: #66666e;

    font-size: 8px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0.4px;
}


.profile-stat strong {
    display: block;

    margin-top: 5px;

    color: #eeeeef;

    font-size: 18px;
}


/* =====================================
   SEKCJE
===================================== */

.profile-section {
    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid #252529;
}


.profile-section-title {
    display: block;

    margin-bottom: 7px;

    color: #626269;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;
}


.profile-row {
    min-height: 32px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.profile-row span {
    color: #85858d;

    font-size: 11px;
}


.profile-row strong {
    color: #c9c9cd;

    font-size: 11px;
    font-weight: 600;

    text-align: right;
}


.profile-row .profile-good {
    color: #67ad7a;
}


/* =====================================
   MOTYW
===================================== */

.profile-theme-row {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.profile-theme-title {
    display: block;

    color: #c9c9cd;

    font-size: 11px;
    font-weight: 600;
}


.profile-theme-row small {
    display: block;

    margin-top: 3px;

    color: #606067;

    font-size: 9px;
}


.theme-toggle {
    width: 39px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #19191d;

    border: 1px solid #303036;
    border-radius: 8px;

    color: #aaaab2;

    cursor: pointer;

    transition: 0.2s;
}


.theme-toggle:hover {
    background: #222226;

    color: white;

    border-color: #414148;
}


.theme-toggle-icon {
    font-size: 14px;
}


/* =====================================
   PEŁNY PROFIL
===================================== */

.profile-full-button {
    width: 100%;
    height: 37px;

    margin-top: 14px;

    background:
        linear-gradient(
            90deg,
            #351719,
            #271315
        );

    border: 1px solid #572329;
    border-radius: 8px;

    color: #c65a60;

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}


.profile-full-button:hover {
    background:
        linear-gradient(
            90deg,
            #461b1e,
            #321619
        );

    color: #e06b71;
}
/* =====================================
   JASNY MOTYW
===================================== */

body.light-theme {
    --background: #f2f3f5;
    --sidebar: #ffffff;

    --panel: #ffffff;
    --panel-hover: #f1f1f3;

    --border: #dedee3;

    --text: #19191d;
    --text-secondary: #77777f;
}


/* =====================================
   TŁO
===================================== */

body.light-theme .main {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(145, 35, 40, 0.04),
            transparent 25%
        ),
        #f2f3f5;
}


/* =====================================
   SIDEBAR
===================================== */

body.light-theme .sidebar {
    background: #ffffff;

    border-color: #dedee3;
}


body.light-theme .sidebar-logo {
    border-color: #e0e0e4;
}


body.light-theme .logo-text h2 {
    color: #19191d;
}


body.light-theme .nav-item {
    color: #696970;
}


body.light-theme .nav-item:hover {
    background: #f3f3f5;
    color: #18181c;
}


body.light-theme .nav-item.active {
    background:
        linear-gradient(
            90deg,
            #f6e9ea,
            #f9f2f3
        );

    border-color: #e7c5c8;

    color: #8d272c;
}


body.light-theme .period-box {
    background: #faf4f5;

    border-color: #ead0d2;

    color: #252529;
}


body.light-theme .logout-button:hover {
    background: #f2f2f4;

    color: #18181c;
}


/* =====================================
   TOPBAR
===================================== */

body.light-theme .topbar {
    background: rgba(255, 255, 255, 0.94);

    border-color: #dedee3;
}


body.light-theme .page-title h1 {
    color: #19191d;
}


/* =====================================
   PROFIL NA GÓRZE
===================================== */

body.light-theme .profile {
    background: #ffffff;

    border-color: #dedee3;
}


body.light-theme .profile:hover {
    background: #f7f7f8;
}


body.light-theme .profile-info strong {
    color: #202024;
}


/* =====================================
   GÓRNE KARTY
===================================== */

body.light-theme .stat-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(145, 35, 40, 0.06),
            transparent 45%
        ),
        #ffffff;

    border-color: #dedee3;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.025);
}


body.light-theme .stat-card:hover {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(145, 35, 40, 0.08),
            transparent 45%
        ),
        #ffffff;

    border-color: #d0d0d6;
}


body.light-theme .stat-value {
    color: #19191d;
}


body.light-theme .period-date {
    color: #19191d;
}


body.light-theme .stat-icon {
    background: #f5f5f7;

    border-color: #dedee3;

    color: #6c6c73;
}


body.light-theme .period-progress {
    background: #e3e3e7;
}


/* =====================================
   GŁÓWNE PANELE
===================================== */

body.light-theme .user-statistics,
body.light-theme .faction-trips,
body.light-theme .ranking-panel,
body.light-theme .announcement-panel {
    background: #ffffff;

    border-color: #dedee3;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.025);
}


body.light-theme .panel-header h2 {
    color: #19191d;
}


/* =====================================
   WYKRES
===================================== */

body.light-theme .chart-line {
    background: #e8e8eb;
}


body.light-theme .bar {
    background:
        linear-gradient(
            180deg,
            #b74449,
            #8f292e
        );

    border-color: #a83439;
}


/* =====================================
   MINI STATYSTYKI
===================================== */

body.light-theme .mini-stat {
    background: #fafafa;

    border-color: #e2e2e6;
}


body.light-theme .mini-stat strong {
    color: #19191d;
}


/* =====================================
   WYJAZDY FRAKCJI
===================================== */

body.light-theme .faction-total {
    background:
        linear-gradient(
            110deg,
            #faf0f1,
            #ffffff
        );

    border-color: #ead1d3;
}


body.light-theme .faction-total strong {
    color: #19191d;
}


body.light-theme .empty-trips strong,
body.light-theme .ranking-empty strong,
body.light-theme .announcement-empty strong {
    color: #606067;
}


/* =====================================
   RANKING
===================================== */

body.light-theme .ranking-header {
    border-color: #e7e7ea;
}


body.light-theme .ranking-period {
    background: #f6f6f7;

    border-color: #dedee3;
}


/* =====================================
   ROZWIJANY PROFIL
===================================== */

body.light-theme .profile-dropdown {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(145, 35, 40, 0.05),
            transparent 35%
        ),
        #ffffff;

    border-color: #dcdce1;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12);
}


body.light-theme .profile-dropdown-header,
body.light-theme .profile-section {
    border-color: #e4e4e7;
}


body.light-theme .profile-dropdown-user strong {
    color: #19191d;
}


body.light-theme .profile-stat {
    background: #f7f7f8;

    border-color: #e1e1e5;
}


body.light-theme .profile-stat strong {
    color: #19191d;
}


body.light-theme .profile-row strong {
    color: #34343a;
}


body.light-theme .profile-theme-title {
    color: #34343a;
}


body.light-theme .theme-toggle {
    background: #f4f4f6;

    border-color: #dcdce1;

    color: #55555d;
}


body.light-theme .theme-toggle:hover {
    background: #ebebee;

    border-color: #ccccd2;

    color: #19191d;
}


/* =====================================
   SCROLLBAR W JASNYM MOTYWIE
===================================== */

body.light-theme::-webkit-scrollbar-track,
body.light-theme .main::-webkit-scrollbar-track {
    background: #eeeeef;
}


body.light-theme::-webkit-scrollbar-thumb,
body.light-theme .main::-webkit-scrollbar-thumb {
    background: #c9c9ce;
}
/* =====================================
   POPRAWKI PRZYCISKÓW - JASNY MOTYW
===================================== */

/* ZOBACZ WSZYSTKIE */
body.light-theme .small-button {
    background: #f5f5f7;
    border-color: #d9d9df;

    color: #55555d;
}

body.light-theme .small-button:hover {
    background: #ebebee;
    border-color: #ccccd2;

    color: #19191d;
}


/* IKONA - BRAK WYJAZDÓW */
body.light-theme .empty-trips-icon {
    background: #f5f5f7;
    border-color: #dcdce1;

    color: #77777f;
}


/* IKONA - PUSTY RANKING */
body.light-theme .ranking-empty-icon {
    background: #f5f5f7;
    border-color: #dcdce1;

    color: #77777f;
}


/* IKONA - BRAK OGŁOSZEŃ */
body.light-theme .announcement-empty-icon {
    background: #fff4f4;
    border-color: #edcfd1;

    color: #a6383e;
}


/* IKONKA W WYJAZDACH FRAKCJI */
body.light-theme .faction-total-icon {
    background: #f9e9ea;
    border-color: #e8c4c7;

    color: #9f3036;
}


/* =====================================
   PROFIL - JASNY MOTYW
===================================== */

/* PRZYCISK OTWÓRZ PEŁNY PROFIL */
body.light-theme .profile-full-button {
    background: #fff5f5;

    border-color: #e3bfc2;

    color: #9e2d33;
}

body.light-theme .profile-full-button:hover {
    background: #f9e7e8;

    border-color: #d9aaae;

    color: #812329;
}


/* AVATAR */
body.light-theme .profile-big-avatar {
    background:
        linear-gradient(
            145deg,
            #a7353b,
            #7e2429
        );

    border-color: #b94b50;

    color: white;
}


/* BADGE SAFD */
body.light-theme .profile-department {
    background: #fff1f2;

    border-color: #e8c7ca;

    color: #9e3036;
}


/* =====================================
   DODATKOWE ELEMENTY
===================================== */

body.light-theme .announcement-icon {
    background: #fff2f3;

    border-color: #e9c7ca;

    color: #a9363c;
}


/* Wszystkie zwykłe ikonki mają być jasne */
body.light-theme .empty-stat {
    color: #888890;
}
/* =====================================
   RAPORTY SK
===================================== */

.sk-content {
    padding-bottom: 50px;
}

.sk-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sk-panel,
.sk-unit-panel {
    padding: 20px;

    background: linear-gradient(145deg, #141416, #111113);

    border: 1px solid #28282d;
    border-radius: 15px;
}

.sk-panel-header,
.sk-unit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}

.sk-panel-header h2,
.sk-unit-header h2 {
    font-size: 17px;
}

.sk-required-info,
.unit-counter {
    padding: 6px 9px;

    background: #18181b;

    border: 1px solid #29292e;
    border-radius: 6px;

    color: #77777f;

    font-size: 10px;
}


/* POLA */

.sk-main-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.sk-field {
    display: flex;
    flex-direction: column;
}

.sk-field label {
    margin-bottom: 7px;

    color: #aaaab1;

    font-size: 11px;
    font-weight: 600;
}

.sk-field input,
.sk-field select,
.sk-field textarea {
    width: 100%;

    padding: 11px 12px;

    outline: none;

    background: #0e0e10;

    border: 1px solid #29292e;
    border-radius: 8px;

    color: #e9e9eb;

    font-family: inherit;
    font-size: 11px;

    transition: 0.2s;
}

.sk-field input,
.sk-field select {
    height: 42px;
}

.sk-field input:focus,
.sk-field select:focus,
.sk-field textarea:focus {
    border-color: #7e292e;

    box-shadow:
        0 0 0 3px rgba(137, 38, 44, 0.08);
}

.sk-field small {
    margin-top: 6px;

    color: #5e5e65;

    font-size: 9px;
}

.sk-type-field {
    max-width: 520px;

    margin-top: 15px;
}


/* =====================================
   JEDNOSTKI
===================================== */

.sk-units-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.vehicle-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.vehicle-card {
    min-height: 62px;

    padding: 10px;

    background: #0e0e10;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #a5a5ac;

    text-align: left;

    cursor: pointer;

    transition: 0.18s ease;
}

.vehicle-card:hover {
    background: #18181b;

    border-color: #3c3c42;
}

.vehicle-card strong {
    display: block;

    color: #d2d2d6;

    font-size: 12px;
}

.vehicle-card span {
    display: block;

    margin-top: 5px;

    color: #626269;

    font-size: 9px;
}


/* WYBRANY WÓZ */

.vehicle-card.selected {
    background:
        linear-gradient(
            135deg,
            rgba(121, 28, 34, 0.32),
            rgba(73, 21, 25, 0.22)
        );

    border-color: #842c31;

    box-shadow:
        0 0 0 1px rgba(139, 38, 44, 0.08);
}

.vehicle-card.selected strong {
    color: #f1d7d9;
}

.vehicle-card.selected span {
    color: #b9676c;
}


/* =====================================
   OPIS
===================================== */

.sk-description-panel {
    padding-bottom: 18px;
}

.sk-description-label {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.sk-description-label span {
    color: #626269;

    font-size: 9px;
}

.sk-field textarea {
    min-height: 135px;

    resize: vertical;

    line-height: 1.6;
}


/* =====================================
   WYŚLIJ
===================================== */

.sk-submit-row {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}

.sk-submit-info {
    color: #626269;

    font-size: 10px;
}

.sk-submit-button {
    min-width: 155px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 17px;

    background:
        linear-gradient(
            135deg,
            #8f292f,
            #671d22
        );

    border: 1px solid #a0363c;
    border-radius: 9px;

    color: white;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;
}

.sk-submit-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.12);
}


/* =====================================
   POWIADOMIENIA
===================================== */

.toast-container {
    position: fixed;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;

    gap: 8px;

    z-index: 9999;

    pointer-events: none;
}

.swd-toast {
    min-width: 330px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    background: #151518;

    border: 1px solid #303036;
    border-radius: 10px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45);

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.25s,
        transform 0.25s;
}

.swd-toast.show {
    opacity: 1;

    transform: translateY(0);
}

.swd-toast-icon {
    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(68, 126, 82, 0.13);

    border: 1px solid rgba(79, 146, 96, 0.28);
    border-radius: 7px;

    color: #70b582;

    font-size: 13px;
}

.swd-toast strong {
    display: block;

    color: #e9e9eb;

    font-size: 11px;
}

.swd-toast span {
    display: block;

    margin-top: 2px;

    color: #73737b;

    font-size: 9px;
}


/* =====================================
   RAPORTY SK - JASNY MOTYW
===================================== */

body.light-theme .sk-panel,
body.light-theme .sk-unit-panel {
    background: #ffffff;

    border-color: #dedee3;
}

body.light-theme .sk-panel-header h2,
body.light-theme .sk-unit-header h2 {
    color: #19191d;
}

body.light-theme .sk-required-info,
body.light-theme .unit-counter {
    background: #f5f5f7;

    border-color: #dedee3;
}

body.light-theme .sk-field label {
    color: #55555d;
}

body.light-theme .sk-field input,
body.light-theme .sk-field select,
body.light-theme .sk-field textarea {
    background: #fafafa;

    border-color: #dcdce1;

    color: #19191d;
}

body.light-theme .vehicle-card {
    background: #fafafa;

    border-color: #dedee3;
}

body.light-theme .vehicle-card:hover {
    background: #f3f3f5;
}

body.light-theme .vehicle-card strong {
    color: #34343a;
}

body.light-theme .vehicle-card.selected {
    background: #fff1f2;

    border-color: #d9a4a8;
}

body.light-theme .vehicle-card.selected strong {
    color: #86282d;
}

body.light-theme .swd-toast {
    background: #ffffff;

    border-color: #dcdce1;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.12);
}

body.light-theme .swd-toast strong {
    color: #19191d;
}


/* RESPONSYWNOŚĆ */

@media (max-width: 1200px) {

    .sk-main-fields {
        grid-template-columns: repeat(2, 1fr);
    }

    .sk-units-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .sk-main-fields {
        grid-template-columns: 1fr;
    }

}
/* =====================================
   WYBÓR DOWÓDCY Z DISCORDA
===================================== */

.required-star {
    color: #b93b42;
}


/* KONTENER */

.commander-select {
    position: relative;
}


/* =====================================
   GŁÓWNY PRZYCISK
===================================== */

.commander-trigger {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 7px 12px;

    background: #0e0e10;

    border: 1px solid #29292e;
    border-radius: 8px;

    color: #e9e9eb;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.commander-trigger:hover {
    background: #111113;

    border-color: #3a3a40;
}


/* OTWARTA LISTA */

.commander-select.open .commander-trigger {
    border-color: #7e292e;

    box-shadow:
        0 0 0 3px rgba(137, 38, 44, 0.08);
}


/* STRZAŁKA */

.commander-arrow {
    flex-shrink: 0;

    color: #686870;

    font-size: 13px;

    transition: transform 0.2s ease;
}


.commander-select.open .commander-arrow {
    transform: rotate(180deg);
}


/* PLACEHOLDER */

.commander-placeholder {
    color: #66666e;

    font-size: 11px;
}


/* =====================================
   WYBRANY UŻYTKOWNIK
===================================== */

.commander-selected-user {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}


.commander-selected-avatar {
    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #232327;

    border: 1px solid #34343a;
    border-radius: 50%;

    color: #b8b8be;

    font-size: 10px;
    font-weight: 700;
}


.commander-selected-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.commander-selected-info {
    min-width: 0;
}


.commander-selected-info strong {
    display: block;

    overflow: hidden;

    color: #e5e5e7;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.commander-selected-info span {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #73737b;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================
   DROPDOWN
===================================== */

.commander-dropdown {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;
    right: 0;

    padding: 7px;

    background: #151517;

    border: 1px solid #303035;
    border-radius: 10px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s;

    z-index: 1000;
}


.commander-select.open .commander-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =====================================
   WYSZUKIWARKA
===================================== */

.commander-search {
    position: relative;

    margin-bottom: 6px;
}


.commander-search-icon {
    position: absolute;

    top: 50%;
    left: 11px;

    transform: translateY(-50%);

    color: #606067;

    font-size: 13px;

    pointer-events: none;
}


.commander-search input {
    width: 100%;
    height: 38px;

    padding:
        0
        12px
        0
        32px;

    background: #0d0d0f;

    border: 1px solid #29292e;
    border-radius: 7px;

    outline: none;

    color: #e6e6e8;

    font-family: inherit;
    font-size: 10px;
}


.commander-search input:focus {
    border-color: #713036;
}


/* =====================================
   LISTA OSÓB
===================================== */

.commander-list {
    max-height: 280px;

    overflow-y: auto;

    padding-top: 3px;

    border-top: 1px solid #29292e;
}


.commander-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 8px;

    background: transparent;

    border: 0;
    border-radius: 7px;

    color: inherit;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;
}


.commander-option:hover {
    background: #202023;
}


/* AVATAR */

.commander-avatar {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #27272b;

    border: 1px solid #35353b;
    border-radius: 50%;

    color: #aaaab1;

    font-size: 10px;
    font-weight: 700;
}


.commander-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* INFORMACJE */

.commander-info {
    min-width: 0;

    flex: 1;
}


.commander-info strong {
    display: block;

    overflow: hidden;

    color: #dddddf;

    font-size: 11px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.commander-meta {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 3px;

    color: #707077;

    font-size: 9px;
}


.commander-rank {
    color: #8b8b92;
}


.commander-dot {
    color: #49494f;
}


/* WYBRANA OSOBA */

.commander-option.selected {
    background: rgba(126, 41, 46, 0.14);
}

.commander-option.selected strong {
    color: #d9676d;
}


/* BRAK WYNIKÓW */

.commander-no-results {
    padding: 20px 10px;

    color: #66666e;

    font-size: 10px;

    text-align: center;
}


/* SCROLLBAR */

.commander-list::-webkit-scrollbar {
    width: 5px;
}

.commander-list::-webkit-scrollbar-track {
    background: transparent;
}

.commander-list::-webkit-scrollbar-thumb {
    background: #35353a;

    border-radius: 10px;
}


/* =====================================
   JASNY MOTYW
===================================== */

body.light-theme .commander-trigger {
    background: #fafafa;

    border-color: #dcdce1;

    color: #19191d;
}


body.light-theme .commander-trigger:hover {
    background: #f5f5f7;
}


body.light-theme .commander-dropdown {
    background: #ffffff;

    border-color: #dcdce1;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.13);
}


body.light-theme .commander-search input {
    background: #f7f7f8;

    border-color: #dedee3;

    color: #19191d;
}


body.light-theme .commander-list {
    border-color: #e4e4e7;
}


body.light-theme .commander-option:hover {
    background: #f3f3f5;
}


body.light-theme .commander-info strong,
body.light-theme .commander-selected-info strong {
    color: #252529;
}


body.light-theme .commander-avatar,
body.light-theme .commander-selected-avatar {
    background: #eeeeef;

    border-color: #d9d9de;
}


body.light-theme .commander-option.selected {
    background: #fff0f1;
}
/* =====================================================
   OSTATNIE WYJAZDY
===================================================== */

.recent-trip {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    background: #111114;
    border: 1px solid #29292f;
    border-radius: 10px;

    margin-bottom: 8px;
}

.recent-trip:last-child {
    margin-bottom: 0;
}

.recent-trip-id {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(180, 35, 45, 0.14);
    border: 1px solid rgba(180, 35, 45, 0.35);

    color: #e5484d;
    font-weight: 700;
    font-size: 14px;
}

.recent-trip-info {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-trip-info strong {
    color: #f2f2f4;
    font-size: 13px;
}

.recent-trip-info span {
    color: #7f808a;
    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-trip-date {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.recent-trip-date strong {
    color: #d7d7dc;
    font-size: 12px;
}

.recent-trip-date span {
    color: #686972;
    font-size: 10px;
}


/* LIGHT MODE */

body.light-theme .recent-trip {
    background: #ffffff;
    border-color: #dddddf;
}

body.light-theme .recent-trip-info strong {
    color: #202024;
}

body.light-theme .recent-trip-info span {
    color: #77777f;
}

body.light-theme .recent-trip-date strong {
    color: #303036;
}

body.light-theme .recent-trip-date span {
    color: #888890;
}

/* =====================================================
   KARTA WYJAZDOWA - IMPORT RAPORTU SK
===================================================== */

.trip-import-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);

    animation: tripOverlayIn 0.18s ease;
}


/* WAŻNE - ukrywa modal */
.trip-import-overlay[hidden] {
    display: none !important;
}


.trip-import-modal {
    width: 100%;
    max-width: 520px;

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    background: #151515;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55);

    animation: tripModalIn 0.2s ease;
}


/* =====================================================
   NAGŁÓWEK
===================================================== */

.trip-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.trip-import-header h2 {
    margin: 5px 0 0;

    color: #ffffff;

    font-size: 21px;
    font-weight: 700;
}


.trip-import-close {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.04);

    color: #999999;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;

    transition: 0.2s ease;
}


.trip-import-close:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.14);
}


/* =====================================================
   OPIS
===================================================== */

.trip-import-description {
    margin: 0 0 22px;

    color: #888888;

    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   POLE ID
===================================================== */

.trip-import-modal .sk-field {
    margin-bottom: 18px;
}


.trip-import-modal .sk-field input {
    width: 100%;
}


/* usuwa strzałki z input number */

.trip-import-modal input[type="number"]::-webkit-inner-spin-button,
.trip-import-modal input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


.trip-import-modal input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


/* =====================================================
   KOMUNIKAT
===================================================== */

.trip-import-message {
    display: none;

    margin-top: -4px;
    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 8px;

    font-size: 12px;
    line-height: 1.4;
}


.trip-import-message.error {
    display: block;

    border: 1px solid rgba(220, 60, 60, 0.25);

    background: rgba(220, 60, 60, 0.08);

    color: #e87c7c;
}


.trip-import-message.success {
    display: block;

    border: 1px solid rgba(70, 180, 100, 0.25);

    background: rgba(70, 180, 100, 0.08);

    color: #7ed996;
}


/* =====================================================
   PRZYCISKI
===================================================== */

.trip-import-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    margin-top: 24px;
}


.trip-import-cancel {
    min-height: 42px;

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.04);

    color: #b0b0b0;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}


.trip-import-cancel:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.14);
}


/* =====================================================
   ANIMACJE
===================================================== */

@keyframes tripOverlayIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes tripModalIn {

    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =====================================================
   JASNY MOTYW
===================================================== */

body.light-theme .trip-import-overlay {
    background: rgba(20, 20, 20, 0.45);
}


body.light-theme .trip-import-modal {
    background: #ffffff;

    border-color: rgba(0, 0, 0, 0.08);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);
}


body.light-theme .trip-import-header h2 {
    color: #171717;
}


body.light-theme .trip-import-description {
    color: #707070;
}


body.light-theme .trip-import-close {
    color: #666666;

    background: #f4f4f4;

    border-color: #e5e5e5;
}


body.light-theme .trip-import-close:hover {
    color: #111111;

    background: #eeeeee;
}


body.light-theme .trip-import-cancel {
    color: #555555;

    background: #f5f5f5;

    border-color: #e4e4e4;
}


body.light-theme .trip-import-cancel:hover {
    color: #111111;

    background: #eeeeee;
}




/* =====================================================
   DWA PRZYCISKI NA DOLE
===================================================== */

.trip-submit-buttons {
    display: flex;
    align-items: center;

    gap: 10px;
}


.trip-import-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.035);

    color: #aaa;

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.trip-import-button span {
    font-size: 15px;
}


.trip-import-button:hover {
    border-color: rgba(145, 38, 50, 0.45);

    background: rgba(145, 38, 50, 0.08);

    color: #fff;
}


/* =====================================================
   LIGHT THEME
===================================================== */

body.light-theme .trip-members-search input {
    border-color: #e2e2e2;

    background: #fafafa;

    color: #1d1d1d;
}


body.light-theme .trip-members-search input::placeholder {
    color: #999;
}


body.light-theme .trip-members-search input:focus {
    border-color: rgba(145, 38, 50, 0.55);

    background: #fff;
}


body.light-theme .trip-member-card {
    border-color: #e7e7e7;

    background: #fafafa;
}


body.light-theme .trip-member-card:hover {
    border-color: #dadada;

    background: #f6f6f6;
}


body.light-theme .trip-member-info strong {
    color: #222;
}


body.light-theme .trip-member-info span {
    color: #888;
}


body.light-theme .trip-member-rank {
    border-color: #e5e5e5;

    background: #f2f2f2;

    color: #666;
}


body.light-theme .trip-member-check {
    border-color: #d8d8d8;

    background: #fff;
}


body.light-theme .trip-member-card.selected {
    border-color: rgba(145, 38, 50, 0.45);

    background:
        linear-gradient(
            90deg,
            rgba(145, 38, 50, 0.09),
            rgba(145, 38, 50, 0.025)
        );
}


body.light-theme .trip-members-empty {
    border-color: #ddd;

    color: #888;
}


body.light-theme .trip-units-description {
    color: #777;
}


body.light-theme .trip-import-button {
    border-color: #dfdfdf;

    background: #f7f7f7;

    color: #666;
}


body.light-theme .trip-import-button:hover {
    border-color: rgba(145, 38, 50, 0.35);

    background: rgba(145, 38, 50, 0.06);

    color: #222;
}


/* =====================================================
   RESPONSYWNOŚĆ
===================================================== */

@media (max-width: 900px) {

    .trip-members-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .trip-member-rank {
        display: none;
    }


    .trip-submit-buttons {
        width: 100%;

        flex-direction: column;
    }


    .trip-import-button,
    .trip-submit-buttons .sk-submit-button {
        width: 100%;
    }

}



/* =====================================================
   OSOBY OBECNE
===================================================== */

.trip-members-select .commander-trigger {
    min-height: 68px;
    height: auto;

    padding: 10px 14px;
}

/* pozwala wyświetlić wszystkie nicki */
.trip-members-select .commander-selected {
    width: 100%;
    min-width: 0;
}

.trip-members-select .commander-selected-info {
    width: 100%;
    min-width: 0;
}

.trip-members-select .commander-selected-info strong {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;

    line-height: 18px;
}

/* dropdown może być większy */
.trip-members-dropdown {
    max-height: 420px;
}

.trip-members-dropdown .commander-list {
    max-height: 330px;
    overflow-y: auto;
}

/* =====================================================
   FIX - POLE DOWÓDCY
===================================================== */

.sk-main-fields .commander-field {
    min-width: 0;
}

.sk-main-fields .commander-select {
    width: 100%;
}

.sk-main-fields .commander-trigger {
    width: 100%;
    height: 42px;
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 0 14px;
}

.sk-main-fields .commander-selected {
    display: flex;
    align-items: center;

    min-width: 0;
    height: 100%;
}

.sk-main-fields .commander-simple-name {
    overflow: hidden;

    color: #fff;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sk-main-fields .commander-arrow {
    margin-left: auto;
}

body.light-theme .sk-main-fields .commander-simple-name {
    color: #222;
}

/* =====================================================
   KARTA WYJAZDOWA - JEDNOSTKI NA MIEJSCU
===================================================== */

.trip-units-panel {
    padding: 24px;
}


/* opis pod głównym tytułem */

.trip-units-panel .trip-units-description {
    display: block;

    margin-top: 7px;

    color: #777;

    font-size: 11px;
    line-height: 1.5;
}


/* =====================================================
   POJEDYNCZA JEDNOSTKA
===================================================== */

.trip-unit-section {
    padding: 20px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.trip-unit-section:first-of-type {
    margin-top: 20px;
}


.trip-unit-section:last-child {
    padding-bottom: 0;
}


/* =====================================================
   NAGŁÓWEK JEDNOSTKI
===================================================== */

.trip-unit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.trip-unit-section-header h3 {
    margin: 3px 0 0;

    color: #f1f1f1;

    font-size: 14px;
    font-weight: 650;
}


.trip-unit-label {
    color: #9a2b38;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


/* =====================================================
   POJAZDY W JEDNYM WIERSZU / SIATCE
===================================================== */

.trip-units-panel .vehicle-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(120px, 1fr));

    gap: 10px;
}


/* SP i JRG2 mają mniej pojazdów,
   ale zachowujemy ten sam układ */

.trip-units-panel .vehicle-card {
    min-width: 0;
}


/* =====================================================
   LIGHT THEME
===================================================== */

body.light-theme .trip-unit-section {
    border-top-color: rgba(0, 0, 0, 0.08);
}


body.light-theme .trip-unit-section-header h3 {
    color: #222;
}


body.light-theme .trip-units-panel
.trip-units-description {
    color: #777;
}


/* =====================================================
   RESPONSYWNOŚĆ
===================================================== */

@media (max-width: 1400px) {

    .trip-units-panel .vehicle-grid {
        grid-template-columns:
            repeat(4, minmax(120px, 1fr));
    }

}


@media (max-width: 1000px) {

    .trip-units-panel .vehicle-grid {
        grid-template-columns:
            repeat(2, minmax(120px, 1fr));
    }

}


@media (max-width: 600px) {

    .trip-units-panel .vehicle-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   KARTA WYJAZDOWA - POWIADOMIENIA
===================================================== */

.toast-container {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    width: min(420px, calc(100vw - 32px));

    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    width: 100%;
    padding: 12px 14px;

    border: 1px solid #303036;
    border-radius: 10px;

    background: #151518;
    color: #e9e9eb;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.42);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;

    opacity: 0;
    transform: translateY(12px);

    transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    border-color: rgba(75, 150, 94, 0.32);
    background: linear-gradient(135deg, #151a16, #141516);
}

.toast-error {
    border-color: rgba(190, 62, 69, 0.38);
    background: linear-gradient(135deg, #1d1416, #151416);
}

body.light-theme .toast {
    border-color: #dcdce1;
    background: #ffffff;
    color: #19191d;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

body.light-theme .toast-success {
    border-color: #cfe3d4;
    background: #f7fbf8;
}

body.light-theme .toast-error {
    border-color: #ebc9cc;
    background: #fff7f7;
}

/* =====================================================
   KARTA WYJAZDOWA - DROBNE UJEDNOLICENIA
===================================================== */

.trip-members-panel,
.trip-units-panel {
    min-width: 0;
}

.trip-units-panel .sk-panel-header {
    margin-bottom: 0;
}

.trip-unit-section:first-of-type {
    margin-top: 18px;
}

.trip-unit-section-header .unit-counter,
.trip-units-panel > .sk-panel-header .unit-counter {
    flex-shrink: 0;
}

.trip-submit-buttons .sk-submit-button,
.trip-import-button {
    min-height: 42px;
}

@media (max-width: 650px) {
    .trip-unit-section-header,
    .trip-units-panel > .sk-panel-header {
        align-items: flex-start;
    }

    .trip-unit-section-header {
        gap: 12px;
    }

    .toast-container {
        bottom: 16px;
    }
}

/* =====================================================
   EDYTOWANIE KART
===================================================== */

.edit-cards-content {
    padding-bottom: 50px;
}


/* =====================================================
   PANEL WYSZUKIWANIA
===================================================== */

.edit-search-panel {
    position: relative;
    overflow: visible;
}

.edit-search-fields {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(280px, 1.3fr)
        auto;

    align-items: end;
    gap: 14px;
}


/* =====================================================
   PRZYCISK EDYTUJ KARTĘ
===================================================== */

.edit-search-button-field {
    display: flex;
    align-items: flex-end;
}

.edit-card-button {
    height: 42px;

    padding: 0 22px;

    border: 1px solid #76282e;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #681f24,
            #421619
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.edit-card-button:hover {
    background:
        linear-gradient(
            135deg,
            #7b252b,
            #50191d
        );

    border-color: #96343b;

    transform: translateY(-1px);
}

.edit-card-button:active {
    transform: translateY(0);
}


/* =====================================================
   KOMUNIKAT WYSZUKIWANIA
===================================================== */

.edit-search-message {
    display: none;

    margin-top: 15px;
    padding: 10px 12px;

    border-radius: 8px;

    font-size: 11px;
    line-height: 1.5;
}

.edit-search-message.show {
    display: block;
}

.edit-search-message.error {
    background: rgba(158, 36, 41, 0.10);

    border: 1px solid rgba(158, 36, 41, 0.30);

    color: #d86469;
}

.edit-search-message.success {
    background: rgba(72, 132, 88, 0.10);

    border: 1px solid rgba(72, 132, 88, 0.25);

    color: #77bd89;
}


/* =====================================================
   MIEJSCE NA EDYTOWANĄ KARTĘ
===================================================== */

.edit-card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;

    margin-top: 16px;
}


/* =====================================================
   LIGHT THEME
===================================================== */

body.light-theme .edit-card-button {
    background:
        linear-gradient(
            135deg,
            #9d3036,
            #7f262c
        );

    border-color: #a63a40;

    color: #ffffff;
}

body.light-theme .edit-card-button:hover {
    background:
        linear-gradient(
            135deg,
            #ad383e,
            #8c292f
        );

    border-color: #b8494f;
}

body.light-theme .edit-search-message.error {
    background: #fff1f2;

    border-color: #e8c7ca;

    color: #9c3036;
}

body.light-theme .edit-search-message.success {
    background: #f0f8f2;

    border-color: #cce2d2;

    color: #467c55;
}


/* =====================================================
   RESPONSYWNOŚĆ
===================================================== */

@media (max-width: 900px) {

    .edit-search-fields {
        grid-template-columns: 1fr 1fr;
    }

    .edit-search-button-field {
        grid-column: 1 / -1;
    }

    .edit-card-button {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .edit-search-fields {
        grid-template-columns: 1fr;
    }

    .edit-search-button-field {
        grid-column: auto;
    }
}
/* =====================================================
   EDYTOWANIE KART - PODGLĄD KARTY / RAPORTU SK
===================================================== */

.edit-loaded-card {
    width: 100%;
    padding: 24px;
}


/* =====================================================
   SEKCJE PODGLĄDU
===================================================== */

.edit-card-section {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.edit-card-section:first-of-type {
    margin-top: 18px;
}

.edit-card-section-label {
    display: block;

    margin-bottom: 12px;

    color: #8f3036;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


/* =====================================================
   INFORMACJE O ZGŁOSZENIU
===================================================== */

.edit-card-info-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.edit-card-info {
    min-width: 0;

    padding: 14px;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 9px;
}

.edit-card-info span {
    display: block;

    margin-bottom: 6px;

    color: #696970;

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.edit-card-info strong {
    display: block;

    overflow: hidden;

    color: #e7e7e9;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =====================================================
   BADGE RODZAJU ZGŁOSZENIA
===================================================== */

.edit-card-type-badge {
    flex-shrink: 0;

    padding: 7px 10px;

    background: rgba(137, 38, 44, 0.12);

    border: 1px solid rgba(157, 48, 54, 0.28);
    border-radius: 7px;

    color: #d75b62;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =====================================================
   OPIS
===================================================== */

.edit-description-value {
    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #b9b9be;

    font-size: 11px;
    line-height: 1.7;

    text-align: left;

    white-space: pre-wrap;
    word-break: break-word;
}


/* =====================================================
   STOPKA INFORMACYJNA
===================================================== */

.edit-card-footer {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.edit-card-footer > div {
    min-width: 0;
}

.edit-card-footer span {
    display: block;

    margin-bottom: 4px;

    color: #5f5f66;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.edit-card-footer strong {
    display: block;

    overflow: hidden;

    color: #bdbdc2;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =====================================================
   PRZYCISKI PODGLĄDU
===================================================== */

.edit-card-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;
}

.edit-cancel-button {
    min-height: 42px;

    padding: 0 18px;

    background: #151518;

    border: 1px solid #303036;
    border-radius: 8px;

    color: #98989f;

    font-family: inherit;
    font-size: 10px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.edit-cancel-button:hover {
    background: #1b1b1f;

    border-color: #414148;

    color: #e0e0e3;
}


/* =====================================================
   EDYCJA - PRZYCISKI NA DOLE
===================================================== */

.edit-trip-form .trip-submit-buttons {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* =====================================================
   DROPDOWN - ELEMENT UŻYTKOWNIKA
===================================================== */

.commander-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 10px;

    background: transparent;

    border: 0;
    border-radius: 7px;

    color: inherit;

    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;
}

.commander-item:hover {
    background: #19191d;
}

.commander-item.selected {
    background: rgba(137, 38, 44, 0.14);
}

.commander-item-avatar {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #232327;

    border: 1px solid #35353b;
    border-radius: 50%;

    color: #aaaab1;

    font-size: 10px;
    font-weight: 700;
}

.commander-item-info {
    min-width: 0;

    flex: 1;
}

.commander-item-info strong {
    display: block;

    overflow: hidden;

    color: #dedee1;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.commander-item-info span {
    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: #6e6e76;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.commander-item-check {
    width: 20px;

    flex-shrink: 0;

    color: #b44349;

    font-size: 12px;
    font-weight: 700;

    text-align: center;
}/* =====================================================
   EDYTOWANIE KART - CZĘŚĆ 2
   FORMULARZ, JEDNOSTKI, LIGHT MODE, RESPONSYWNOŚĆ
===================================================== */


/* =====================================================
   FORMULARZ EDYCJI
===================================================== */

.edit-trip-form {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.edit-trip-form .sk-panel,
.edit-trip-form .sk-unit-panel {
    width: 100%;
}


/* =====================================================
   POLA FORMULARZA
===================================================== */

.edit-trip-form .sk-field input,
.edit-trip-form .sk-field select,
.edit-trip-form .sk-field textarea {
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.edit-trip-form .sk-field input:focus,
.edit-trip-form .sk-field select:focus,
.edit-trip-form .sk-field textarea:focus {
    border-color: #76282e;

    box-shadow:
        0 0 0 3px rgba(137, 38, 44, 0.08);
}


/* =====================================================
   TEXTAREA
===================================================== */

.edit-trip-form .sk-field textarea {
    min-height: 130px;

    resize: vertical;

    line-height: 1.6;
}


/* =====================================================
   JEDNOSTKI W EDYCJI
===================================================== */

.edit-trip-form .vehicle-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.edit-trip-form .vehicle-card {
    min-width: 0;

    cursor: pointer;

    user-select: none;
}

.edit-trip-form .vehicle-card.selected {
    background:
        linear-gradient(
            135deg,
            rgba(137, 38, 44, 0.18),
            rgba(137, 38, 44, 0.07)
        );

    border-color: #7a292f;

    box-shadow:
        inset 0 0 0 1px
        rgba(180, 60, 67, 0.08);
}

.edit-trip-form .vehicle-card.selected strong {
    color: #e56a70;
}


/* =====================================================
   LICZNIK JEDNOSTEK
===================================================== */

.edit-trip-form .unit-counter {
    flex-shrink: 0;

    white-space: nowrap;
}


/* =====================================================
   OSOBY OBECNE - EDYCJA
===================================================== */

.edit-trip-form .trip-members-select {
    width: 100%;
}

.edit-trip-form
.trip-members-select
.commander-trigger {
    min-height: 68px;

    height: auto;

    padding: 10px 14px;
}

.edit-trip-form
.trip-members-select
.commander-selected {
    width: 100%;

    min-width: 0;
}

.edit-trip-form
.trip-members-select
.commander-selected-info {
    width: 100%;

    min-width: 0;
}

.edit-trip-form
.trip-members-select
.commander-selected-info strong {
    overflow: visible;

    white-space: normal;

    text-overflow: unset;

    line-height: 18px;
}


/* =====================================================
   DROPDOWN OSÓB
===================================================== */

.edit-trip-form .trip-members-dropdown {
    max-height: 420px;
}

.edit-trip-form
.trip-members-dropdown
.commander-list {
    max-height: 330px;

    overflow-y: auto;
}


/* =====================================================
   DOWÓDCA - EDYCJA
===================================================== */

.edit-trip-form
.sk-main-fields
.commander-field {
    min-width: 0;
}

.edit-trip-form
.sk-main-fields
.commander-select {
    width: 100%;
}

.edit-trip-form
.sk-main-fields
.commander-trigger {
    width: 100%;

    height: 42px;
    min-height: 42px;

    padding: 0 14px;
}

.edit-trip-form
.sk-main-fields
.commander-selected {
    display: flex;

    align-items: center;

    min-width: 0;

    height: 100%;
}

.edit-trip-form
.sk-main-fields
.commander-simple-name {
    overflow: hidden;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =====================================================
   PRZYCISKI ZAPIS / ANULUJ
===================================================== */

.edit-trip-form .trip-submit-buttons {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    width: 100%;
}

.edit-trip-form
.trip-submit-buttons
.sk-submit-button {
    min-width: 145px;
}

.edit-trip-form
.trip-submit-buttons
.edit-cancel-button {
    min-width: 100px;
}


/* =====================================================
   LIGHT MODE - PODGLĄD
===================================================== */

body.light-theme .edit-card-section {
    border-top-color:
        rgba(0, 0, 0, 0.08);
}

body.light-theme .edit-card-info {
    background: #fafafa;

    border-color: #dedee3;
}

body.light-theme
.edit-card-info span {
    color: #77777f;
}

body.light-theme
.edit-card-info strong {
    color: #252529;
}

body.light-theme
.edit-description-value {
    background: #fafafa;

    border-color: #dedee3;

    color: #55555d;
}

body.light-theme
.edit-card-footer {
    border-top-color:
        rgba(0, 0, 0, 0.08);
}

body.light-theme
.edit-card-footer strong {
    color: #44444a;
}

body.light-theme
.edit-card-type-badge {
    background: #fff1f2;

    border-color: #e5bfc2;

    color: #9b3036;
}


/* =====================================================
   LIGHT MODE - PRZYCISK ANULUJ
===================================================== */

body.light-theme
.edit-cancel-button {
    background: #f5f5f7;

    border-color: #dcdce1;

    color: #66666e;
}

body.light-theme
.edit-cancel-button:hover {
    background: #ebebee;

    border-color: #ccccd2;

    color: #19191d;
}


/* =====================================================
   LIGHT MODE - DROPDOWN
===================================================== */

body.light-theme
.commander-item:hover {
    background: #f3f3f5;
}

body.light-theme
.commander-item.selected {
    background: #fff0f1;
}

body.light-theme
.commander-item-avatar {
    background: #eeeeef;

    border-color: #d9d9de;

    color: #66666e;
}

body.light-theme
.commander-item-info strong {
    color: #252529;
}

body.light-theme
.commander-item-info span {
    color: #77777f;
}


/* =====================================================
   LIGHT MODE - JEDNOSTKI
===================================================== */

body.light-theme
.edit-trip-form
.vehicle-card.selected {
    background: #fff1f2;

    border-color: #d9a4a8;
}

body.light-theme
.edit-trip-form
.vehicle-card.selected strong {
    color: #86282d;
}


/* =====================================================
   LIGHT MODE - DOWÓDCA
===================================================== */

body.light-theme
.edit-trip-form
.sk-main-fields
.commander-simple-name {
    color: #222222;
}


/* =====================================================
   RESPONSYWNOŚĆ
===================================================== */

@media (max-width: 1200px) {

    .edit-card-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .edit-trip-form .vehicle-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .edit-card-footer {
        grid-template-columns:
            1fr 1fr;
    }

    .edit-trip-form .vehicle-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .edit-loaded-card {
        padding: 18px;
    }

    .edit-card-info-grid {
        grid-template-columns: 1fr;
    }

    .edit-card-footer {
        grid-template-columns: 1fr;
    }

    .edit-card-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .edit-card-actions button {
        width: 100%;
    }

    .edit-trip-form .vehicle-grid {
        grid-template-columns: 1fr;
    }

    .edit-trip-form
    .trip-submit-buttons {
        flex-direction: column;
    }

    .edit-trip-form
    .trip-submit-buttons
    .sk-submit-button,
    .edit-trip-form
    .trip-submit-buttons
    .edit-cancel-button {
        width: 100%;

        min-width: 0;
    }

}
/* =========================================================
   STRONA STATYSTYKI
========================================================= */

.statistics-page {
    width: 100%;
}


/* NAGŁÓWEK */

.statistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.statistics-header h2 {
    margin: 5px 0 6px;

    color: #f1f1f3;

    font-size: 22px;
    font-weight: 700;
}

.statistics-header p {
    margin: 0;

    color: #77777f;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   KAFELKI PODSUMOWANIA
========================================================= */

.statistics-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;

    margin-bottom: 20px;
}

.statistics-summary-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 115px;

    padding: 18px 20px;

    background: #141416;

    border: 1px solid #242428;
    border-radius: 10px;

    box-sizing: border-box;

    overflow: hidden;
}

.statistics-summary-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #6f1d2c;
}

.statistics-summary-label {
    color: #77777f;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.statistics-summary-value {
    margin-top: 10px;

    color: #f4f4f5;

    font-size: 27px;
    font-weight: 700;

    line-height: 1;
}

.statistics-summary-description {
    margin-top: auto;
    padding-top: 10px;

    color: #626269;

    font-size: 9px;
}


/* =========================================================
   JASNY MOTYW
========================================================= */

body.light-theme .statistics-header h2 {
    color: #222226;
}

body.light-theme .statistics-header p {
    color: #77777d;
}

body.light-theme .statistics-summary-card {
    background: #ffffff;

    border-color: #dddddf;
}

body.light-theme .statistics-summary-value {
    color: #222226;
}


/* =========================================================
   RESPONSYWNOŚĆ
========================================================= */

@media (max-width: 1100px) {

    .statistics-summary {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 700px) {

    .statistics-summary {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   STATYSTYKI - RODZAJE ZDARZEŃ
========================================================= */

.statistics-panel {
    width: 100%;

    padding: 22px;

    background: #141416;

    border: 1px solid #242428;
    border-radius: 10px;

    box-sizing: border-box;
}

.statistics-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.statistics-panel-header h2 {
    margin: 5px 0 5px;

    color: #f1f1f3;

    font-size: 17px;
    font-weight: 700;
}

.statistics-panel-header p {
    margin: 0;

    color: #68686f;

    font-size: 10px;
}


/* ŁĄCZNA LICZBA */

.statistics-panel-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    min-width: 80px;
}

.statistics-panel-total span {
    color: #68686f;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.statistics-panel-total strong {
    margin-top: 4px;

    color: #f1f1f3;

    font-size: 24px;
    font-weight: 700;
}


/* LISTA */

.statistics-types-list {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.statistics-type-row {
    width: 100%;
}

.statistics-type-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
}

.statistics-type-name {
    color: #bdbdc2;

    font-size: 11px;
    font-weight: 600;
}

.statistics-type-numbers {
    display: flex;
    align-items: center;

    gap: 12px;
}

.statistics-type-numbers strong {
    color: #eeeeef;

    font-size: 11px;
}

.statistics-type-numbers span {
    min-width: 42px;

    color: #6f6f76;

    font-size: 9px;

    text-align: right;
}


/* PASEK */

.statistics-progress {
    width: 100%;
    height: 6px;

    background: #202023;

    border-radius: 20px;

    overflow: hidden;
}

.statistics-progress-fill {
    width: 0%;
    height: 100%;

    background: #6f1d2c;

    border-radius: 20px;

    transition: width 0.35s ease;
}


/* JASNY MOTYW */

body.light-theme .statistics-panel {
    background: #ffffff;

    border-color: #dddddf;
}

body.light-theme .statistics-panel-header h2,
body.light-theme .statistics-panel-total strong {
    color: #222226;
}

body.light-theme .statistics-type-name,
body.light-theme .statistics-type-numbers strong {
    color: #333338;
}

body.light-theme .statistics-progress {
    background: #e9e9eb;
}
/* =========================================================
   STATYSTYKI - NAJAKTYWNIEJSI STRAŻACY
========================================================= */

.statistics-firefighters-panel {
    margin-top: 20px;
}


.statistics-firefighters-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.statistics-firefighter-row {
    display: flex;
    align-items: center;

    min-height: 64px;

    padding: 10px 14px;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 9px;
}


.statistics-firefighter-position {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 12px;

    background: #18181b;

    border: 1px solid #303035;
    border-radius: 8px;

    color: #8f8f96;

    font-size: 12px;
    font-weight: 700;
}


.statistics-firefighter-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.statistics-firefighter-info strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}


.statistics-firefighter-info span {
    margin-top: 3px;

    color: #6f6f76;

    font-size: 9px;
    font-weight: 500;

    text-transform: uppercase;
}


.statistics-firefighter-trips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin-left: auto;
}


.statistics-firefighter-trips strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
}


.statistics-firefighter-trips span {
    margin-top: 2px;

    color: #6f6f76;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.5px;
}


/* TOP 3 */

.statistics-firefighter-row:nth-child(1)
.statistics-firefighter-position {
    background: rgba(120, 20, 30, 0.22);
    border-color: rgba(170, 35, 45, 0.45);
    color: #d85c66;
}


.statistics-firefighter-row:nth-child(2)
.statistics-firefighter-position,
.statistics-firefighter-row:nth-child(3)
.statistics-firefighter-position {
    color: #b5b5ba;
}


/* BRAK DANYCH */

.statistics-firefighters-empty {
    padding: 22px;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #707078;

    font-size: 10px;

    text-align: center;
}


/* JASNY MOTYW */

body.light-theme
.statistics-firefighter-row,
body.light-theme
.statistics-firefighters-empty {
    background: #ffffff;
    border-color: #dedee3;
}


body.light-theme
.statistics-firefighter-info strong,
body.light-theme
.statistics-firefighter-trips strong {
    color: #222226;
}


body.light-theme
.statistics-firefighter-position {
    background: #f3f3f5;
    border-color: #dedee3;
}
/* =========================================================
   STATYSTYKI - UKŁAD ANALIZY
========================================================= */

.statistics-analysis-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 380px)
        minmax(0, 1fr);

    gap: 14px;

    margin-top: 14px;

    align-items: stretch;
}


.statistics-analysis-grid
.statistics-panel {
    margin-top: 0;
}


/* =========================================================
   AKTYWNOŚĆ W OKRESIE
========================================================= */

.statistics-activity-panel {
    min-width: 0;
}


.statistics-activity-summary {
    display: flex;
    align-items: baseline;

    gap: 5px;

    padding: 9px 12px;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 8px;
}


.statistics-activity-summary span {
    color: #74747c;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.5px;
}


.statistics-activity-summary strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}


.statistics-activity-summary small {
    color: #74747c;

    font-size: 9px;
}


/* MIEJSCE NA WYKRES */

.statistics-chart {
    width: 100%;

    margin-top: 20px;
}


.statistics-chart-area {
    width: 100%;
    height: 220px;

    position: relative;
}


/* JASNY MOTYW */

body.light-theme
.statistics-activity-summary {
    background: #ffffff;
    border-color: #dedee3;
}


body.light-theme
.statistics-activity-summary strong {
    color: #222226;
}


/* MNIEJSZE EKRANY */

@media (max-width: 1000px) {

    .statistics-analysis-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   STATYSTYKI - WYKRES AKTYWNOŚCI
========================================================= */

.statistics-chart-columns {
    width: 100%;
    height: 220px;

    display: flex;
    align-items: stretch;
    justify-content: space-between;

    gap: 8px;
}


.statistics-chart-column {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}


/* LICZBA NAD PUNKTEM */

.statistics-chart-value {
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    background: rgba(120, 20, 30, 0.28);

    border: 1px solid rgba(170, 35, 45, 0.4);
    border-radius: 5px;

    color: #e05a66;

    font-size: 10px;
    font-weight: 700;
}


/* OBSZAR WYKRESU */

.statistics-chart-line {
    width: 100%;
    height: 155px;

    position: relative;

    margin-top: 6px;

    border-bottom: 1px solid #29292e;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 38px,
            rgba(255, 255, 255, 0.035) 39px
        );
}


/* CZERWONY SŁUPEK / WYPEŁNIENIE */

.statistics-chart-bar {
    width: 5px;

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    min-height: 2px;

    background: linear-gradient(
        to top,
        rgba(116, 20, 31, 0.25),
        #a92032
    );

    border-radius: 5px 5px 0 0;
}


/* PUNKT */

.statistics-chart-point {
    width: 9px;
    height: 9px;

    position: absolute;

    left: 50%;

    transform:
        translate(-50%, 50%);

    background: #d43b4d;

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(180, 30, 45, 0.16);
}


/* DATA */

.statistics-chart-label {
    margin-top: 9px;

    color: #777780;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}


/* HOVER */

.statistics-chart-column:hover
.statistics-chart-value {
    background: rgba(150, 25, 40, 0.38);

    border-color: rgba(200, 45, 60, 0.55);

    color: #ff6976;
}


.statistics-chart-column:hover
.statistics-chart-point {
    background: #ef4356;

    box-shadow:
        0 0 0 5px rgba(180, 30, 45, 0.16);
}


/* JASNY MOTYW */

body.light-theme
.statistics-chart-line {
    border-bottom-color: #dedee3;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 38px,
            rgba(0, 0, 0, 0.045) 39px
        );
}


body.light-theme
.statistics-chart-label {
    color: #77777d;
}


/* MNIEJSZY EKRAN */

@media (max-width: 700px) {

    .statistics-chart-columns {
        gap: 3px;
    }

    .statistics-chart-value {
        padding: 0 4px;
        font-size: 8px;
    }

    .statistics-chart-label {
        font-size: 8px;
    }

}
/* =========================================================
   STATYSTYKI - POPRAWKA SZEROKOŚCI ANALIZY
========================================================= */

.statistics-analysis-grid {
    width: 100%;

    grid-template-columns:
        380px
        minmax(0, 1fr);
}


.statistics-activity-panel {
    width: 100%;
    min-width: 0;
}


.statistics-chart {
    width: 100%;
}


.statistics-chart-area {
    width: 100%;
}
/* =========================================================
   STATYSTYKI - WYKRES LINIOWY AKTYWNOŚCI
========================================================= */

.statistics-chart {
    width: 100%;
    margin-top: 18px;
}


.statistics-chart-area {
    width: 100%;
    height: 240px;

    position: relative;

    overflow: visible;
}


/* =========================================================
   SVG
========================================================= */

.statistics-line-chart {
    display: block;

    width: 100%;
    height: 240px;

    overflow: visible;
}


/* =========================================================
   LINIE POMOCNICZE
========================================================= */

.statistics-svg-grid {
    stroke: rgba(255, 255, 255, 0.055);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   WYPEŁNIENIE POD WYKRESEM
========================================================= */

.statistics-svg-area {
    opacity: 1;

    pointer-events: none;
}


/* =========================================================
   GŁÓWNA LINIA WYKRESU
========================================================= */

.statistics-svg-line {
    fill: none;

    stroke: #b52b3d;
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 4px
            rgba(181, 43, 61, 0.18)
        );
}


/* =========================================================
   PUNKTY
========================================================= */

.statistics-svg-point {
    fill: #c83246;

    stroke: #ffffff;
    stroke-width: 2;

    vector-effect: non-scaling-stroke;

    transition:
        r 0.15s ease,
        fill 0.15s ease;
}


.statistics-svg-point-hitbox {
    fill: transparent;

    stroke: none;

    cursor: pointer;
}


/* =========================================================
   LICZBY NAD PUNKTAMI
========================================================= */

.statistics-svg-value {
    fill: #d8d8dc;

    font-size: 12px;
    font-weight: 700;

    pointer-events: none;
}


/* =========================================================
   DATY POD WYKRESEM
========================================================= */

.statistics-svg-label {
    fill: #777780;

    font-size: 11px;
    font-weight: 600;

    pointer-events: none;
}


/* =========================================================
   HOVER
========================================================= */

.statistics-svg-point-group:hover
.statistics-svg-point {
    r: 6;

    fill: #ef4055;
}


.statistics-svg-point-group:hover
.statistics-svg-value {
    fill: #ffffff;
}


/* =========================================================
   JASNY MOTYW
========================================================= */

body.light-theme
.statistics-svg-grid {
    stroke: rgba(0, 0, 0, 0.07);
}


body.light-theme
.statistics-svg-line {
    stroke: #b52b3d;
}


body.light-theme
.statistics-svg-point {
    fill: #c83246;

    stroke: #ffffff;
}


body.light-theme
.statistics-svg-value {
    fill: #3b3b40;
}


body.light-theme
.statistics-svg-label {
    fill: #77777d;
}


/* =========================================================
   RESPONSYWNOŚĆ
========================================================= */

@media (max-width: 1000px) {

    .statistics-chart-area {
        height: 210px;
    }


    .statistics-line-chart {
        height: 210px;
    }

}
/* =========================================================
   STATYSTYKI - WYBÓR OKRESU
========================================================= */

.statistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.statistics-period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.statistics-period-current {
    min-width: 210px;
    padding: 10px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #101012;

    border: 1px solid #29292e;
    border-radius: 9px;
}

.statistics-period-current span {
    margin-bottom: 4px;

    color: #6f6f77;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;
}

.statistics-period-current strong {
    color: #f1f1f3;

    font-size: 11px;
    font-weight: 700;
}

.statistics-period-button {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #151518;

    border: 1px solid #29292e;
    border-radius: 9px;

    color: #aaaab0;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.statistics-period-button:hover {
    background: #1c1c20;

    border-color: #4c252a;

    color: #e25b68;

    transform: translateY(-1px);
}

.statistics-period-button:active {
    transform: translateY(0);
}

.statistics-period-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   JASNY MOTYW
========================================================= */

body.light-theme
.statistics-period-current {
    background: #ffffff;
    border-color: #dedee3;
}

body.light-theme
.statistics-period-current span {
    color: #85858d;
}

body.light-theme
.statistics-period-current strong {
    color: #222226;
}

body.light-theme
.statistics-period-button {
    background: #ffffff;
    border-color: #dedee3;
    color: #696970;
}

body.light-theme
.statistics-period-button:hover:not(:disabled) {
    background: #f4f4f6;
    border-color: #c9a0a5;
    color: #a72b3b;
}


/* =========================================================
   RESPONSYWNOŚĆ
========================================================= */

@media (max-width: 850px) {

    .statistics-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .statistics-period-selector {
        width: 100%;
    }

    .statistics-period-current {
        flex: 1;
        min-width: 0;
    }

}
/* =========================================================
   STRONA GŁÓWNA - RANKING FRAKCJI
========================================================= */

.home-ranking-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.home-ranking-row {
    min-height: 52px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 80px;
    align-items: center;

    padding: 0 14px;

    border-bottom: 1px solid #252529;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.home-ranking-row:last-child {
    border-bottom: none;
}

.home-ranking-row:hover {
    background: rgba(255, 255, 255, 0.018);
}


/* POZYCJA */

.home-ranking-position {
    color: #73737b;

    font-size: 11px;
    font-weight: 700;
}


/* UŻYTKOWNIK */

.home-ranking-user {
    min-width: 0;

    color: #e8e8eb;

    font-size: 12px;
    font-weight: 700;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* LICZBA WYJAZDÓW */

.home-ranking-trips {
    justify-self: end;

    min-width: 34px;

    padding: 5px 9px;

    background: #17171a;

    border: 1px solid #29292e;
    border-radius: 7px;

    color: #d8d8dc;

    font-size: 11px;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   TOP 3
========================================================= */

.home-ranking-row:nth-child(1)
.home-ranking-position {
    color: #e2b85b;
}

.home-ranking-row:nth-child(2)
.home-ranking-position {
    color: #aeb0b7;
}

.home-ranking-row:nth-child(3)
.home-ranking-position {
    color: #b98262;
}


/* =========================================================
   ZALOGOWANY UŻYTKOWNIK
========================================================= */

.home-ranking-row.current-user {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(181, 43, 61, 0.10),
            rgba(181, 43, 61, 0.025)
        );
}

.home-ranking-row.current-user::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 2px;

    background: #b52b3d;

    border-radius: 0 2px 2px 0;
}

.home-ranking-row.current-user
.home-ranking-user {
    color: #ffffff;
}

.home-ranking-row.current-user
.home-ranking-trips {
    background: rgba(181, 43, 61, 0.12);

    border-color: rgba(181, 43, 61, 0.32);

    color: #e95b6e;
}


/* =========================================================
   JASNY MOTYW
========================================================= */

body.light-theme
.home-ranking-row {
    border-bottom-color: #e5e5e8;
}

body.light-theme
.home-ranking-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.light-theme
.home-ranking-user {
    color: #2d2d31;
}

body.light-theme
.home-ranking-trips {
    background: #f6f6f8;

    border-color: #dedee3;

    color: #45454b;
}

body.light-theme
.home-ranking-row.current-user {
    background:
        linear-gradient(
            90deg,
            rgba(181, 43, 61, 0.09),
            rgba(181, 43, 61, 0.015)
        );
}

body.light-theme
.home-ranking-row.current-user
.home-ranking-user {
    color: #202024;
}

body.light-theme
.home-ranking-row.current-user
.home-ranking-trips {
    background: rgba(181, 43, 61, 0.08);

    border-color: rgba(181, 43, 61, 0.24);

    color: #a72b3b;
}