/* =========================
   ROD RELAX - GLOBAL VARIABLES
========================= */


:root{

    --bg:#f4f6f4;

    --card:#ffffff;


    --green-900:#1b4332;

    --green-800:#2d6a4f;

    --green-700:#40916c;

    --green-500:#74c69d;

    --green-100:#d8f3dc;


    --text:#1f2d25;

    --muted:#6c7a70;


    --danger:#c0392b;

    --warning:#e9c46a;


    --shadow:
    0 10px 25px rgba(0,0,0,.08);

}





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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    width:100%;

    min-height:100%;

}



body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

}

body:not(.login-page){

    display:flex;

    min-height:100vh;

}


/* =========================
   BUTTON SYSTEM
========================= */


.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;


    padding:9px 16px;


    border-radius:10px;


    border:none;


    cursor:pointer;


    font-weight:600;


    text-decoration:none;


    transition:.2s;


}



.btn:hover{

    transform:translateY(-2px);

    opacity:.9;

}



.btn-success{

    background:var(--green-700);

    color:white;

}



.btn-primary{

    background:#2563eb;

    color:white;

}



.btn-danger{

    background:var(--danger);

    color:white;

}



.btn-secondary{

    background:#6c757d;

    color:white;

}





/* =========================
   CARD SYSTEM
========================= */


.card{

    background:var(--card);

    padding:20px;

    border-radius:15px;

    box-shadow:var(--shadow);

}





/* =========================
   FORM GLOBAL
========================= */


input,
textarea,
select{


    width:100%;


    padding:12px;


    border-radius:10px;


    border:1px solid #ddd;


    font-size:14px;


}



input:focus,
textarea:focus,
select:focus{


    outline:none;


    border-color:var(--green-500);


}





/* =========================
   TABLE
========================= */


table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


table th{

    background:var(--green-900);

    color:white;

    padding:14px;

}



table td{

    padding:12px;

    border-bottom:1px solid #eee;

}





/* =========================
   TOAST
========================= */


.toast{


    position:fixed;


    top:20px;


    right:20px;


    padding:15px 20px;


    border-radius:12px;


    color:white;


    z-index:999999;


}



.toast-success{

    background:var(--green-700);

}



.toast-error{

    background:var(--danger);

}




/* =========================
   PANEL LAYOUT
========================= */


body.admin-layout{

    display:flex;

}





.content{

    flex:1;

    min-width:0;

    padding:30px;

}





.page-title{

    font-size:28px;

    color:var(--green-900);

    margin-bottom:25px;

    display:grid;

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

    gap:20px;

    width:100%;

}





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


.sidebar{

    width:260px;

    min-height:100vh;

    background:
    linear-gradient(
        180deg,
        var(--green-900),
        var(--green-800)
    );

    color:white;

    padding:25px;

    flex-shrink:0;

}





.logo{

    font-size:22px;

    font-weight:700;

    margin-bottom:30px;

    color:white;

}





.logo span{

    display:block;

    font-size:12px;

    opacity:.7;

    margin-top:5px;

}





.logo small{

    display:block;

    font-size:14px;

    opacity:.8;

    margin-top:10px;

}





.sidebar a{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

    text-decoration:none;

    padding:12px 14px;

    border-radius:10px;

    margin-bottom:8px;

    font-size:14px;

    transition:.25s;

}





.sidebar a:hover{

    background:
    rgba(255,255,255,.12);

    transform:translateX(4px);

}





.submenu{

    display:none;

    padding-left:15px;

}





.submenu a{

    font-size:14px;

    padding-left:25px;

}





.menu-group{

    margin-bottom:5px;

}

/* =========================
   CARDS / DASHBOARD
========================= */


.stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:30px;

}



.card{

    background:var(--card);

    padding:20px;

    border-radius:15px;

    box-shadow:var(--shadow);

    transition:.2s;

}



.card:hover{

    transform:translateY(-3px);

}



.card h3{

    font-size:34px;

    color:var(--green-800);

}



.card p{

    color:var(--muted);

    margin-top:5px;

}





/* =========================
   BUTTON SYSTEM
========================= */


.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:10px;

    border:none;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    color:white !important;

}



.btn:hover{

    transform:translateY(-2px);

    opacity:.9;

}





.btn-success{

    background:var(--green-700);

}



.btn-primary{

    background:#2563eb;

}



.btn-danger{

    background:var(--danger);

}



.btn-secondary{

    background:#6c757d;

}



.btn-warning{

    background:var(--warning);

    color:#222 !important;

}





/* =========================
   TABLES
========================= */


table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}



table th{

    background:var(--green-900);

    color:white;

    padding:14px;

    text-align:left;

}



table td{

    padding:12px;

    border-bottom:1px solid #eee;

}



table tr:hover{

    background:#f7fbf8;

}



table th a{

    color:inherit;

    text-decoration:none;

}





/* =========================
   ACTION BUTTONS
========================= */


.actions{

    display:flex;

    gap:8px;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

}



.actions a{

    display:inline-flex;

    align-items:center;

    gap:5px;

}





/* =========================
   FORMS
========================= */


input,
textarea,
select{

    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:14px;

    margin-bottom:15px;

}



input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--green-700);

    box-shadow:
    0 0 0 3px rgba(64,145,108,.15);

}



textarea{

    min-height:180px;

}



label{

    display:block;

    font-weight:600;

    margin-bottom:8px;

    color:var(--green-900);

}






/* =========================
   ALERTS
========================= */


.success{

    background:var(--green-100);

    border-left:5px solid var(--green-700);

    padding:12px;

    border-radius:8px;

    margin-bottom:15px;

}



.error{

    background:#ffe0e0;

    color:#842029;

    border-left:5px solid var(--danger);

    padding:12px;

    border-radius:8px;

    margin-bottom:15px;

}

/* =========================
   SUBMENU
========================= */


.submenu{

    display:none;

    padding-left:15px;

}



.submenu a{

    font-size:14px;

    padding-left:25px;

}





/* =========================
   DOCUMENTS
========================= */


.documents-grid{

    display:grid;

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

    gap:20px;

    width:100%;

}



.document-card{

    text-align:center;

}



.document-card:hover{

    transform:translateY(-4px);

}



.document-icon{

    font-size:45px;

    margin-bottom:15px;

}



.document-category{

    display:inline-block;

    background:var(--green-700);

    color:white;

    padding:5px 12px;

    border-radius:20px;

    font-size:13px;

}





/* =========================
   ANNOUNCEMENTS
========================= */

/* =========================
   OGŁOSZENIA - ŁAMANIE TEKSTU
========================= */


.announcement-content,
.announcement-content p,
.announcement-card,
.announcement-card p{

    overflow-wrap: break-word;

    word-wrap: break-word;

    word-break: break-word;

    white-space: normal;

}


.announcement-content{

    max-width:100%;

    overflow:hidden;

}

.announcement-content a{

    overflow-wrap:break-word;

    word-break:break-word;

}


.announcements-grid{

    display:grid;

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

    gap:20px;

    width:100%;

}



.announcement-card{

    width:100%;

}



.announcement-content{

    margin-top:20px;

    padding:15px;

    border-radius:10px;

    line-height:1.6;

    overflow-wrap:break-word;

}



.announcement-important{

    border-left:5px solid var(--danger);

}



.badge-important{

    background:var(--danger);

    color:white;

    padding:5px 10px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

}





/* =========================
   DEBTS
========================= */


.debt{

    background:#ffe5e5;

}





/* =========================
   TOAST
========================= */


.toast{

    position:fixed;

    top:20px;

    right:20px;

    max-width:350px;

    padding:15px 20px;

    border-radius:12px;

    color:white;

    font-size:16px;

    z-index:999999;

    box-shadow:
    0 8px 25px rgba(0,0,0,.3);

}



.toast-success{

    background:var(--green-700);

}



.toast-error{

    background:var(--danger);

}





/* =========================
   DARK BUTTON
========================= */


.dark-toggle{

    background:transparent;

    color:white;

    border:

    1px solid rgba(255,255,255,.5);

    padding:8px 14px;

    border-radius:8px;

    cursor:pointer;

}



.dark-toggle:hover{

    background:rgba(255,255,255,.12);

}





/* =========================
   HAMBURGER MOBILE
========================= */


.hamburger{

    display:none;

    font-size:28px;

    padding:10px;

    cursor:pointer;

}



@media(max-width:900px){


    body{

        flex-direction:column;

    }



    .hamburger{

        display:block;

    }



    .sidebar{

        display:none;

        position:absolute;

        top:0;

        left:0;

        height:100%;

        z-index:1000;

    }



    .sidebar.active{

        display:block;

    }



    .content{

        padding:15px;

    }


}

/* =========================
   DARK MODE
========================= */


body.dark{

    background:#1e1e1e;

    color:#eaeaea;

}



body.dark .card{

    background:#2a2a2a;

    color:white;

}



body.dark table{

    background:#2a2a2a;

}



body.dark table td{

    color:white;

}



body.dark table tr:hover{

    background:#333;

}



body.dark input,
body.dark textarea,
body.dark select{

    background:#2a2a2a;

    color:white;

    border-color:#555;

}



body.dark .page-title{

    color:white;

}





/* =========================
   LOGIN PAGE
========================= */


.login-page{

    min-height:100vh;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        var(--green-900),
        var(--green-800),
        var(--green-700)
    );

    position:relative;

    overflow:hidden;

}


.login-page::before{

    content:"🌿";

    position:absolute;

    right:50px;

    bottom:20px;

    font-size:220px;

    opacity:.08;

}





/* =========================
   LOGIN CARD
========================= */


.login-box{

    width:380px;

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.25);

    text-align:center;

    position:relative;

    z-index:2;

}





.login-logo{

    font-size:30px;

    font-weight:700;

    color:var(--green-900);

    margin-bottom:15px;

}



.login-logo span{

    display:block;

    font-size:14px;

    color:var(--muted);

    margin-top:5px;

}





.login-box h2{

    color:var(--green-900);

    font-size:22px;

    margin-bottom:20px;

}





/* FORMULARZ LOGIN */


.login-form{

    width:100%;

}



.login-form label{

    display:block;

    text-align:left;

    margin-bottom:6px;

    margin-top:12px;

    color:var(--green-900);

    font-size:14px;

}





.login-form input{

    width:100%;

    height:46px;

    padding:0 14px;

    border-radius:12px;

    border:1px solid #d5ddd8;

    background:#fafafa;

    font-size:15px;

}



.login-form input:focus{

    outline:none;

    border-color:var(--green-700);

    box-shadow:

    0 0 0 3px rgba(64,145,108,.15);

}





/* =========================
   LOGIN BUTTONS
========================= */


.login-submit,
.login-back{

    width:100%;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

}



.login-submit{

    margin-top:15px;

    background:var(--green-700);

    color:white;

    border:none;

    cursor:pointer;

}



.login-submit:hover{

    background:var(--green-800);

}





.login-back{

    margin-top:12px;

    background:#6c757d;

    color:white !important;

    text-decoration:none;

}



.login-back:hover{

    background:#555;

}





.login-box .error{

    margin-bottom:20px;

}





.footer{

    margin-top:25px;

    font-size:13px;

    color:var(--muted);

}

/* =========================
   POPRAWKA AKCJE W TABELACH
========================= */

table td.actions{

    vertical-align:middle;

    text-align:center;

    white-space:nowrap;

}


table td.actions a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:34px;

    padding:0 12px;

    border-radius:8px;

    color:white;

    text-decoration:none;

    border:none;

    margin:0 3px;

    font-size:13px;

}


table td.actions .btn-primary{

    background:#2563eb;

}


table td.actions .btn-danger{

    background:#c0392b;

}


table td.actions a:hover{

    opacity:.85;

    transform:translateY(-1px);

}

table tr:last-child td:first-child{

    border-bottom-left-radius:15px;

}


table tr:last-child td:last-child{

    border-bottom-right-radius:15px;

}

/* =========================
   FINAL - TABLE ACTION FIX
========================= */

table td.actions{

    padding:10px !important;

    vertical-align:middle;

    background:transparent !important;

    border-bottom:1px solid #eee;

}


table td.actions a,
table td.actions .btn{

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    height:34px;

    min-width:80px;

    padding:0 12px !important;

    margin:0 3px !important;

    border-radius:8px;

    line-height:1;

    text-decoration:none !important;

    color:white !important;

    border:none !important;

    box-shadow:none !important;

}


table td.actions a::before,
table td.actions a::after{

    display:none !important;

}


/* usuwa stare formatowanie akcji */

.actions a:first-child,
.actions a:last-child{

    background:unset;

}


/* kolory */

table td.actions .btn-primary{

    background:#2563eb !important;

}


table td.actions .btn-danger{

    background:#c0392b !important;

}


table td.actions .btn-success{

    background:#40916c !important;

}


table td.actions a:hover{

    opacity:.85;

    transform:none;

}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    max-width: 100%;
}


/* ========================================
   ROD RELAX - NAJWIĘKSZY
======================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 40px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
}

.brand-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.brand-name {
    letter-spacing: 0.5px;
    white-space: nowrap;
}


/* ========================================
   PANEL DZIAŁKOWCA - DRUGI ROZMIAR
======================================== */

.panel-name {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
}


/* ========================================
   INFORMACJE O UŻYTKOWNIKU
======================================== */

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 12px;
    font-size: 20px;
    max-width: 100%;
    width: 100%;
}


/* ========================================
   WITAJ + IMIĘ I NAZWISKO
======================================== */

.welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    width: 100%;
    font-size: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.welcome strong {
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ========================================
   ROLA
======================================== */

.user-role {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    width: fit-content;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.user-role strong {
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ========================================
   WYRÓŻNIENIE DLA RÓL INNYCH NIŻ DZIAŁKOWIEC
======================================== */

.user-role.role-highlight {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}


/* ========================================
   DŁUGIE NAZWISKA - DODATKOWE ZABEZPIECZENIE
======================================== */

@media (max-width: 900px) {

    .brand {
        font-size: 32px;
    }

    .panel-name {
        font-size: 18px;
    }

    .user-info {
        font-size: 18px;
    }

    .welcome,
    .user-role {
        font-size: 18px;
    }

}


@media (max-width: 600px) {

    .brand {
        font-size: 28px;
    }

    .brand-icon {
        font-size: 24px;
    }

    .panel-name {
        font-size: 16px;
    }

    .user-info {
        font-size: 16px;
    }

    .welcome,
    .user-role {
        font-size: 16px;
    }

}