/* ========================================
   MODTABLE - WSPÓLNY WYGLĄD
   ======================================== */

.modtable {
    box-sizing: border-box;

    width: 70%;
    max-width: 850px;
    min-height: 76px;

    margin: 28px auto;
    padding: 18px 30px;

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

    border-radius: 8px;
}


/* ========================================
   TEKST
   ======================================== */

.modtable-title {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
}


/* ========================================
   WSPÓLNA IKONA W KÓŁKU
   Domyślnie: ✓
   ======================================== */

.modtable-title::before {
    content: "✓";

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

    width: 38px;
    height: 38px;
    min-width: 38px;

    margin-right: 18px;

    border-radius: 50%;

    font-size: 24px;
    font-weight: 800;
    line-height: 38px;
}


/* ========================================
   ZAAKCEPTOWANO - ZIELONY
   ======================================== */

.modtable-success {
    background: linear-gradient(
        180deg,
        #42d66b 0%,
        #31c75a 100%
    );

    border: 1px solid #4be273;

    box-shadow:
        0 3px 0 rgba(15, 110, 45, 0.65),
        0 8px 20px rgba(0, 0, 0, 0.20);

    color: #103d20;
}

.modtable-success .modtable-title {
    color: #103d20;
}

.modtable-success .modtable-title::before {
    content: "✓";

    background: rgba(10, 75, 30, 0.75);
    color: #4bea76;
}


/* ========================================
   ODRZUCONO - CZERWONY
   ======================================== */

.modtable-rejected {
    background: linear-gradient(
        180deg,
        #ff4545 0%,
        #e52f2f 100%
    );

    border: 1px solid #ff5555;

    box-shadow:
        0 3px 0 rgba(125, 15, 15, 0.70),
        0 8px 20px rgba(0, 0, 0, 0.20);

    color: #4d0d0d;
}

.modtable-rejected .modtable-title {
    color: #4d0d0d;
}

/* Zamiast ✓ pokazujemy ✕ */
.modtable-rejected .modtable-title::before {
    content: "✕";

    background: rgba(115, 10, 10, 0.78);
    color: #ff7777;
}


/* ========================================
   TELEFONY
   ======================================== */

@media screen and (max-width: 700px) {

    .modtable {
        width: 94%;
        min-height: 65px;

        margin: 18px auto;
        padding: 14px 18px;
    }

    .modtable-title {
        font-size: 14px;
    }

    .modtable-title::before {
        width: 32px;
        height: 32px;
        min-width: 32px;

        margin-right: 12px;

        font-size: 20px;
        line-height: 32px;
    }
}

/* ========================================
   ARCHIWUM - NIEBIESKI
   ======================================== */

.modtable-archive {
    background: linear-gradient(
        180deg,
        #3b9cff 0%,
        #2684e8 100%
    );

    border: 1px solid #55aaff;

    box-shadow:
        0 3px 0 rgba(15, 75, 135, 0.70),
        0 8px 20px rgba(0, 0, 0, 0.20);

    color: #0b3155;
}

.modtable-archive .modtable-title {
    color: #0b3155;
}

/* Ikona archiwum */
.modtable-archive .modtable-title::before {
    content: "↳";

    background: rgba(8, 60, 115, 0.75);
    color: #68b7ff;

    font-size: 24px;
}

/* ========================================
   WĄTEK ZAMKNIĘTY - BORDOWY
   ======================================== */

.modtable-closed {
    background: linear-gradient(
        180deg,
        #9e2636 0%,
        #7d1928 100%
    );

    border: 1px solid #b93648;

    box-shadow:
        0 3px 0 rgba(75, 8, 18, 0.75),
        0 8px 20px rgba(0, 0, 0, 0.25);

    color: #2b080e;
}

.modtable-closed .modtable-title {
    color: #2b080e;
}


/* ========================================
   WĄTEK OTWARTY - JASNOZIELONY
   ======================================== */

.modtable-opened {
    background: linear-gradient(
        180deg,
        #86ef9d 0%,
        #68df83 100%
    );

    border: 1px solid #9af5ad;

    box-shadow:
        0 3px 0 rgba(45, 145, 70, 0.65),
        0 8px 20px rgba(0, 0, 0, 0.20);

    color: #174a25;
}

.modtable-opened .modtable-title {
    color: #174a25;
}


/* ========================================
   WSPÓLNA KŁÓDKA
   ======================================== */

.modtable-lock {
    position: relative;

    width: 38px;
    height: 38px;
    min-width: 38px;

    margin-right: 18px;

    border-radius: 50%;
}


/* ========================================
   ZAMKNIĘTA KŁÓDKA
   ======================================== */

/* ========================================
   ZAMKNIĘTA KŁÓDKA - POPRAWIONA
   ======================================== */

.modtable-closed .modtable-lock {
    position: relative;

    width: 38px;
    height: 38px;
    min-width: 38px;

    margin-right: 18px;

    border-radius: 50%;
    background: rgba(70, 8, 18, 0.72);
}

/* PAŁĄK KŁÓDKI */
.modtable-closed .modtable-lock::before {
    content: "";

    position: absolute;

    width: 12px;
    height: 11px;

    left: 50%;
    top: 7px;

    transform: translateX(-50%);

    box-sizing: border-box;

    border: 3px solid #e85a6d;
    border-bottom: 0;

    border-radius: 7px 7px 0 0;
}

/* KORPUS KŁÓDKI */
.modtable-closed .modtable-lock::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 14px;

    left: 50%;
    top: 17px;

    transform: translateX(-50%);

    background: #e85a6d;

    border-radius: 3px;
}

/* ========================================
   OTWARTA KŁÓDKA
   ======================================== */

.modtable-opened .modtable-lock {
    background: rgba(30, 120, 55, 0.70);
}

/* korpus */
.modtable-opened .modtable-lock::after {
    content: "";

    position: absolute;
    left: 11px;
    top: 18px;

    width: 16px;
    height: 13px;

    background: #b8ffc7;
    border-radius: 2px;
}

/* OTWARTY pałąk */
.modtable-opened .modtable-lock::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 7px;

    width: 10px;
    height: 13px;

    border: 3px solid #b8ffc7;
    border-bottom: 0;
    border-right: 0;

    border-radius: 8px 0 0 0;

    transform: rotate(-12deg);
    transform-origin: bottom left;
}

/* Usuń domyślny ptaszek dla zamkniętego i otwartego */
.modtable-closed .modtable-title::before,
.modtable-opened .modtable-title::before {
    content: none !important;
    display: none !important;
}