@import "variables.css";
@import "responsive.css";
@import "fontfacae.css";
*{
    letter-spacing: 0.03em;
}
/* essentials css */
textarea{
    resize: none;
}
.center{
    text-align: center !important;
}
.left{
    text-align: left !important;
}
.right{
    text-align: right !important;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Verdana", sans-serif;
    background: var(--bgColor);
}
/*input[type="button"]{
    transform: rotate3d(0);
    transition: all var(--animateTime) ease-out;
    &:hover{
        transform: rotate3d(0, 1, 0, 360deg);  
    }
}*/
a, a:visited{
    color: var(--linkColor);
    text-decoration: none;
    transition: color var(--animateTime) ease-out;
    transition: border var(--animateTime) ease-out;
    transition: background var(--animateTime) ease-out;
}
a:hover, a:active{
    color: var(--linkHoverColor);    
}
h2{
    margin: 0.5em 0;
    font-size: var(--fsBig);
    &::first-letter{
        text-transform: uppercase;
    }
}
h3{
    margin: 0;
    font-size: var(--fsNormal);
    &::first-letter{
        text-transform: uppercase;
    }
}
hr{
    border:0;
    border-top: 1px solid var(--borderColor);
}
/* forms */
form{
    margin: 0;
    padding: 0;
}
input[type="text"], input[type="password"], input[type="date"], textarea, select{
    font-family: "Poppins", "Verdana", sans-serif;
    background: var(--borderColor);
    border-radius: 3px;
    border: 0;
    margin: 2px;
    font-size: var(--fsMinus);
    padding: 1em 1em;
    color: var(--whColor);
    box-shadow: inset -2px -2px 6px -1px var(--bgColor2);
    line-height: 1.2em;
    border: 1px solid var(--bgColor);
    box-sizing: border-box; 
    &.numbers{
        text-align: right;
    }
    transition: all var(--animateTime) ease-out;
}
input[type="button"], input[type="submit"]{
    background: var(--mainColor);
    border-radius: var(--borderRadius);
    border: 0;
    margin: 2px;
    font-weight: var(--fontNormal);
    font-size: var(--fsMinus);
    padding: 0.5em 2em;
    line-height: 1.4em;
    color: var(--bgColor2);
    cursor: pointer;
    transition: all var(--animateTime) ease-out;
    box-sizing: border-box; 
    &:hover{
        background: var(--linkHoverColor);
    }
    &::first-letter{
        text-transform: uppercase;
    }
    &[name="filter_services_group_status_realization"], &[name="filter_services_group_status_leads"], &[name="filter_services_group_status_to_pay"]{
    padding: 1em 1.5em;
    }
}
input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}
i[name="client_address_mail"]{
    position: absolute;
    top: 10px;
    right: 26px;
    display: none;
    color: #057523;
}
.login-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 

    .login-right {
        background: var(--linkHoverColor);
        display: flex; 
        align-items: center; 

        .login-logo {
            margin: 0 auto;
        }
    }

    .login-left {
        display: flex;
        align-items: center; 
        
        .login-form {
            margin: 0 auto;
            background: var(--bgColor2);
            border: 1px solid var(--borderColor2);
            padding: 1em;
            h2{
                color: var(--mainColor);
                margin: 0;
                text-align: center;
                border-bottom: 1px solid var(--borderColor);
            }
            form{
                label{
                    margin: 1em 0;
                    span{
                        display: block;
                    }
                    color: var(--textColor);
                    display: block;
                }
            }
        }
    }
}

/* main left menu */
.menu{
    color: var(--mainColor);
    font-size: var(--fsMinus);
    .list-menu{
        margin: 0;
        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            li{
                margin: 0;
                padding: 0;
                position: relative;
                a{
                    display: block;
                    letter-spacing: 1px;
                    padding: 1em;
                    background: var(--bgColor2);
                    border-left: 3px solid var(--bgColor2);
                    border-top: 1px solid var(--borderColor);
                    border-bottom: 1px solid var(--bgColor);
                    &:hover{
                        background: var(--borderColor);
                        border-left: 3px solid var(--mainColor);
                        color: var(--linkHoverColor);
                    }
                    div{
                        display: inline-block;
                        &::first-letter{
                            text-transform: uppercase;
                        }
                    }
                    &::first-letter{
                            text-transform: uppercase;
                        }
                    &.active{
                        background: var(--borderColor);
                        border-right: 3px solid var(--mainColor);
                        border-left: 3px solid var(--borderColor);
                        color: var(--linkHoverColor);
                        &:hover{
                            background: var(--borderColor);
                            border-left: 3px solid var(--borderColor);
                            color: var(--linkHoverColor);
                        }
                    }
                    &.submenu{
                        padding: 0.8em;
                        padding-left: 2em;
                        border: 0;
                        border-top: 1px solid var(--borderColor);
                        border-bottom: 1px solid var(--bgColor);
                        background: var(--bgColor);   
                        font-size: var(--fsMinus);
                        &.active{
                            background: var(--borderColor);
                            border-left: 0;
                        }
                    }
                }
                div{
                    a{
                        position: absolute;
                        top: 50%; 
                        right: 12px;
                        padding: 0 0.4em;
                        transform: translateY(-50%); 
                        color: var(--bgColor);
                        background: var(--mainColor);
                        border: 0;
                        border-radius: 1em;  
                        font-size: var(--fsNormal);
                        &:hover{
                            background: var(--linkHoverColor);
                            border: 0;
                            color: var(--bgColor);
                        }
                    }
                }
            }
        }
    }
}

/* main panel */
.view{
    overflow-y: auto;
    color: var(--mainColor);
    .row{
        display: block;
        width: 100%;
        background: var(--bgColor);
        /*border-bottom: 1px solid var(--borderColor);*/
    }
    .module{
        flex-grow: 0;
        module {
            display: block;
            background: var(--bgColor2);
            border: 1px solid var(--borderColor2);
            h3{
                padding: 0 0.1em 0.2em 0.1em;
                margin: 0 0 0.5em 0;
                border-bottom: 1px solid var(--borderColor);
                font-weight: var(--fontMedium);
                color: var(--mainColor);
            }
            pre{
                color: var(--linkHoverColor);
            }
            p{
                color: var(--linkHoverColor);
                font-size: var(--fsMinus);
            }
            a{
                color: var(--linkHoverColor);
                font-size: var(--fsMinus);
                &:hover{
                    color: var(--mainColor);
                }
                &.no-active{
                    color: var(--borderColor2);
                }
            }
            .stats{
               table{
                    margin: 0;
                    tr{
                        
                        th{
                            color: var(--textColor);
                            font-size: var(--fsMinus);
                            text-align: right;
                            padding: 0 0.5em;
                            font-weight: var(--fsNormal);
                            &::first-letter{
                                text-transform: uppercase;
                            }
                        }
                        td{
                            font-size: var(--fsMinus);
                            padding: 0 0.5em;
                            font-weight: var(--fsNormal);
                            color: var(--mainColor);    
                            &::first-letter{
                                text-transform: uppercase;
                            }
                        }
                    }
                }
            }
            .ownCalc, .clientCalc, .clientCalcArea{
                overflow-y: auto;
            }
        }
    }
}
.form_table{
    margin: 1em auto;
    color: var(--textColor);
    th{
        font-size: var(--fsMinus);
        text-align: right;
        padding: 0 0.5em;
        font-weight: var(--fsNormal);
        &::first-letter{
            text-transform: uppercase;
        }
        input[type="submit"] {     
            width: 100%;
        }
    }
    td{
        position: relative;
        font-size: var(--fsMinus);
        padding: 0 0.5em;
        font-weight: var(--fsNormal);
        input[type="text"], input[type="date"], select {
                padding: 0.5em;
                margin: 0;              
                background: var(--borderColor);
                width: calc(100% - 1em);
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsMinus);             
        }
        
        input[type="submit"] {     
            width: calc(100% - 1em);
        }
        &::first-letter{
            text-transform: uppercase;
        }
    }
    input[type="radio"]{
        transform: scale(1.2);
        margin: 1em 0.2em 1em 1em;
    }
    input[type="checkbox"]{
        transform: scale(1.2);
        margin: 1em;
    }
    select[name="job_type"]{
        width: 155px;
    }
}
.inputs_table, .modal_add_job_table, .working_hours, .working_hours_stats{
    margin: 1em auto;
    color: var(--textColor);
    th{
        font-size: var(--fsMinus);
        padding: 0.5em;
        font-weight: var(--fsNormal);
        &::first-letter{
            text-transform: uppercase;
        }
    }
    td{
        position: relative;
        font-size: var(--fsMinus);
        padding: 0;
        font-weight: var(--fsNormal);
        input[type="text"], select {
                padding: 0.5em;
                margin: 0;              
                background: var(--borderColor);
                width: calc(100%);
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsMinus);  
                &.fa{
                    font-family: var(--fa-style-family,"Font Awesome 6 Free");
                    font-size:  var(--fsNormal);  
                }
        }
        input[type="submit"] {     
            width: calc(100%);
        }
        &::first-letter{
            text-transform: uppercase;
        }
    }
    input[type="radio"]{
        transform: scale(1.2);
        margin: 1em 0.2em 1em 1em;
    }
    input[type="checkbox"]{
        transform: scale(1.2);
        margin: 1em;
    }
}
.clients_table{
    margin: 1em auto;
    color: var(--textColor);
    border-spacing: 0;
    border-collapse: collapse;
    tr{
        &:hover{
            & td{
                background: var(--borderColor2);     
                color: var(--mainColor);
                cursor: pointer;
            }
        }
    }
    tr.client_details{
        display: none;
        cursor: auto;
        &:hover{
            & td{
                background: none;   
                cursor: auto;
            }
        }
    }    
    th{
        font-size: var(--fsMinus);
        text-align: center;
        padding: 0.5em 0;
        font-weight: var(--fsNormal);
        &::first-letter{
            text-transform: uppercase;
        }
    }
    td{
        position: relative;
        font-size: var(--fsMinus);
        padding: 0.5em;
        font-weight: var(--fsNormal);
        border: 1px solid var(--borderColor);
        min-width: 10%;
            table{
                margin: 0 auto;
                color: var(--textColor);
                th{
                    font-size: var(--fsNormal);
                    padding: 0.5em 0;
                    font-weight: var(--fsNormal);
                    &::first-letter{
                        text-transform: uppercase;
                    }
                }
                td{
                    position: relative;
                    font-size: var(--fsNormal);
                    padding: 0;
                    font-weight: var(--fsNormal);
                    border: 0;
                    input[type="text"], select {
                            padding: 0.5em;
                            margin: 0;              
                            background: var(--borderColor);
                            width: calc(100%);
                            border: 0;
                            box-shadow: none;
                            border-radius: 0;
                            font-size: var(--fsMinus);               
                    }
                    input[type="submit"] {     
                        width: calc(100%);
                    }
                    &::first-letter{
                        text-transform: uppercase;
                    }
                }
                input[type="radio"]{
                    transform: scale(1.2);
                    margin: 1em 0.2em 1em 1em;
                }
                input[type="checkbox"]{
                    transform: scale(1.2);
                    margin: 0;
                }
                .stats
                {
                    font-size: var(--fsNormal);
                }
            }
        input[type="text"], select {
                padding: 0.3em;
                margin: 0;              
                background: var(--borderColor);
                width: calc(100%);
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsMinus);               
        }
        input[type="submit"] {     
            width: calc(100%);
        }
        &::first-letter{
            text-transform: uppercase;
        }
    }
    input[type="radio"]{
        transform: scale(1.2);
        margin: 1em 0.2em 1em 1em;
    }
    input[type="checkbox"]{
        transform: scale(1.2);
        margin: 1em;
    }
}
.jobs_table{
    margin: 1em auto;
    color: var(--textColor);
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    tr{
        &:hover{
            & td{
                background: var(--borderColor2); 
                cursor: pointer;
                color: var(--mainColor);
                &.job_group_symbol{
                    textarea{
                        background-color: var(--borderColor2);
                        color: var(--mainColor);
                    }
                }
                &.job_group_unpaid{
                    color: var(--colorError);
                }
                &.job_group_partpaid, &.job_group_extrapaid{
                    color: var(--colorWarning);
                }
                &.job_group_paid{
                    color: var(--colorSuccess);
                }
            }
        }
    }
    tr.job_group_details{
        display: none;
        &:hover{
            & td{
                background: none;   
                cursor: auto;
            }
        }
    }
    th{
        font-size: var(--fsMinus);
        text-align: center;
        padding: 0.5em 0;
        font-weight: var(--fsNormal);
        &::first-letter{
            text-transform: uppercase;
        }
    }
    td{
        transition: all var(--animateTime) ease-out;
        position: relative;
        font-size: var(--fsMinus);
        padding: 0.5em;
        font-weight: var(--fsNormal);
        border: 1px solid var(--borderColor);
        min-width: 10%;
        &.job_group_symbol{
            textarea{
                padding: 0;
                margin: 0;              
                background: var(--borderColor2);
                width: 1px;
                height: 1px;
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsNormal);  
                position:absolute;
                top: 0; left: 0;
            }
            .job_group_symbol_copy{
                position: absolute;
                display: block;
                transform: scale(1);
                top: 25%;
                right: 4px;
                opacity: 0.5;
                transition: all 200ms;
                z-index: 4;
            }
        }
        &.job_group_unpaid{
            color: var(--colorError);
        }
        &.job_group_partpaid, &.job_group_extrapaid{
            color: var(--colorWarning);
        }
        &.job_group_paid{
            color: var(--colorSuccess);
        }
        table{
            margin: 0 auto;
            color: var(--textColor);
            th{
                font-size: var(--fsNormal);
                padding: 0.5em 0;
                font-weight: var(--fsNormal);
                &::first-letter{
                    text-transform: uppercase;
                }
                &.jobs_sum{
                    text-decoration: underline;
                    cursor: pointer
                }
            }
            td{
                position: relative;
                font-size: var(--fsNormal);
                padding: 0;
                font-weight: var(--fsNormal);
                border: 0;
                input[type="text"], input[type="date"], select {
                    padding: 0.5em;
                    margin: 0;              
                    background: var(--borderColor);
                    width: calc(100%);
                    border: 0;
                    box-shadow: none;
                    border-radius: 0;
                    font-size: var(--fsMinus); 
                    option:checked{
                        color: var(--borderColor2);
                    }
                }
                input[type="submit"] {     
                    width: calc(100%);
                }
                &::first-letter{
                    text-transform: uppercase;
                }
            }
            input[type="radio"]{
                transform: scale(1.2);
                margin: 1em 0.2em 1em 1em;
            }
            input[type="checkbox"]{
                transform: scale(1.2);
                margin: 0;
            }    
        }
        input[type="text"], select {
                padding: 0.3em;
                margin: 0;              
                background: var(--borderColor);
                width: calc(100%);
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsMinus);               
        }
        input[type="submit"] {     
            width: calc(100%);
        }
    }
    input[type="radio"]{
        transform: scale(1.2);
        margin: 1em 0.2em 1em 1em;
    }
    input[type="checkbox"]{
        transform: scale(1.2);
        margin: 0;
    }
}
.jobs_orders_table, .jobs_payments_table, .services_table, .services_payments_table, .statsz, .client_stats_summary {
    margin: 1em auto;
    color: var(--textColor);
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    
    tr{
        /* Zebra striping - co drugi wiersz */
        &:nth-child(even) {
            background: var(--borderColor2);
            & td{
                background: var(--borderColor2);                
                    input[type="button"]{
                        background-color: var(--borderColor2);
                    }
            }
        }
        
        &:hover{
            & td{
                background: var(--borderColor);
                color: var(--mainColor);
                    input[type="checkbox"]{
                        accent-color: var(--mainColor);
                        cursor: pointer;
                    }
                    input[type="text"], input[type="date"], select, input[type="button"]{
                        background-color: var(--borderColor);
                        color: var(--mainColor);
                    }
                    option{
                        color: var(--textColor);
                        cursor: pointer;
                    }
            }
        }
    }
    th{
        font-size: var(--fsMinus);
        text-align: center;
        padding: 0.5em 0;
        font-weight: var(--fontNormal);
        &::first-letter{
            text-transform: uppercase;
        }
    }
    td{
        transition: all var(--animateTime) ease-out;
        position: relative;
        font-size: var(--fsMinus);
        padding: 0.5em;
        font-weight: var(--fontNormal);
        border: 1px solid var(--borderColor);
        min-width: 10%;
        margin: 0;
        
        /* Progress bar dla kolumny z datami/ETA */

        .time-progress {
            width: 100%;
            height: 8px;
            margin-bottom: 4px;
            border: none;
            border-radius: 4px;
            background: var(--borderColor);
        }

        .time-progress::-webkit-progress-bar {
            background: var(--borderColor);
            border-radius: 4px;
        }

        .time-progress::-webkit-progress-value {
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .time-progress::-moz-progress-bar {
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        /* Kolory dla różnych stanów - gradacja od zielonego do bordowego */
        .time-progress.early::-webkit-progress-value,
        .time-progress.early::-moz-progress-bar {
            background: #16a34a; /* zielony - 0-10% */
        }

        .time-progress.minimal::-webkit-progress-value,
        .time-progress.minimal::-moz-progress-bar {
            background: #22c55e; /* jasnozielony - 10-20% */
        }

        .time-progress.low::-webkit-progress-value,
        .time-progress.low::-moz-progress-bar {
            background: #65a30d; /* zielonkawy - 20-30% */
        }

        .time-progress.active::-webkit-progress-value,
        .time-progress.active::-moz-progress-bar {
            background: #84cc16; /* limonkowy - 30-40% */
        }

        .time-progress.moderate::-webkit-progress-value,
        .time-progress.moderate::-moz-progress-bar {
            background: #eab308; /* żółty - 40-50% */
        }

        .time-progress.medium::-webkit-progress-value,
        .time-progress.medium::-moz-progress-bar {
            background: #f59e0b; /* żółto-pomarańczowy - 50-60% */
        }

        .time-progress.warning::-webkit-progress-value,
        .time-progress.warning::-moz-progress-bar {
            background: #f97316; /* pomarańczowy - 60-70% */
        }

        .time-progress.high::-webkit-progress-value,
        .time-progress.high::-moz-progress-bar {
            background: #ea580c; /* ciemny pomarańczowy - 70-80% */
        }

        .time-progress.urgent::-webkit-progress-value,
        .time-progress.urgent::-moz-progress-bar {
            background: #dc2626; /* czerwony - 80-90% */
        }

        .time-progress.critical::-webkit-progress-value,
        .time-progress.critical::-moz-progress-bar {
            background: #b91c1c; /* ciemny czerwony - 90-100% */
        }

        .time-progress.overdue::-webkit-progress-value,
        .time-progress.overdue::-moz-progress-bar {
            background: #7f1d1d; /* bordowy krwisty - >100% */
        }

        .time-progress.completed::-webkit-progress-value,
        .time-progress.completed::-moz-progress-bar {
            background: #16a34a; /* kolor tekstu - ukończone (status 5+) */
        }

        .time-progress.same-day::-webkit-progress-value,
        .time-progress.same-day::-moz-progress-bar {
            background: var(--textColor); /* kolor tekstu - zrobione jednego dnia */
        }
                
        input[type="text"],input[type="date"], select, input[type="button"]{
                padding: 0.1em;
                margin: 0;              
                background: transparent;
                width: calc(100%);
                border: 0;
                box-shadow: none;
                border-radius: 0;
                font-size: var(--fsNormal);  
                color: var(--textColor);
                &[name="filter_services_group_status_change"]{
                    border-radius: var(--borderRadius);
                    width: inherit;
                    padding: 0.5em 1em;
                    background: var(--bgColor2);
                    color: var(--textColor);                      
                    &.active{
                        background: var(--linkHoverColor);
                        color: var(--bgColor2);
                    }
                    &:hover{
                        background: var(--mainColor);
                        color: var(--bgColor2);
                    }
                }
        }
        input[type="submit"] {    
            width: calc(100%);
        }
        label{
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        input[type="checkbox"]{
            transform: scale(1.6);
            margin: 0;
            accent-color: var(--textColor);
            cursor: pointer;
        }
        .service_symbol_copy{
            position: absolute;
            display: block;
            transform: scale(1);
            top: 25%;
            right: 4px;
            opacity: 0.5;
            transition: all 200ms;
            z-index: 4;
        }
        &.service_symbol{
            cursor:pointer;
            textarea{
                background-color: var(--borderColor2);
                color: var(--mainColor);
            }
        }
    }
}
/* Services Cards Layout */
.services-cards-container {
    margin: 1em auto;
    width: 100%;
}

.services-header {
    margin-bottom: 1em;
}

.services-summary {
    display: flex;

    gap: 2em;
    padding: 1em;
    background: var(--bgColor2);    
    
    span {
        color: var(--textColor);
        font-size: var(--fsNormal);
    }
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5em;
    padding: 0;


.service-card {
    background: var(--bgColor2);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    padding: 0;
    transition: all var(--animateTime) ease;
    overflow: hidden;    


.card-progress {
    padding: 0 0 0.5em;
    text-align: center;
    
    .time-progress {        
        height: 12px; /* Grubszy progress bar */
        border: none;
        border-radius: var(--borderRadius);
        background: var(--borderColor);
    }
    
    .time-progress::-webkit-progress-bar {
        background: var(--borderColor);
        border-radius: var(--borderRadius);
    }
    
    .time-progress::-webkit-progress-value {
        border-radius: var(--borderRadius);
        transition: all 0.3s ease;
    }
    
    .time-progress::-moz-progress-bar {
        border-radius: var(--borderRadius);
        transition: all 0.3s ease;
    }
    
    /* Kolory progress bara - te same co wcześniej */
    .time-progress.early::-webkit-progress-value,
    .time-progress.early::-moz-progress-bar {
        background: #16a34a;
    }
    
    .time-progress.minimal::-webkit-progress-value,
    .time-progress.minimal::-moz-progress-bar {
        background: #22c55e;
    }
    
    .time-progress.low::-webkit-progress-value,
    .time-progress.low::-moz-progress-bar {
        background: #65a30d;
    }
    
    .time-progress.active::-webkit-progress-value,
    .time-progress.active::-moz-progress-bar {
        background: #84cc16;
    }
    
    .time-progress.moderate::-webkit-progress-value,
    .time-progress.moderate::-moz-progress-bar {
        background: #eab308;
    }
    
    .time-progress.medium::-webkit-progress-value,
    .time-progress.medium::-moz-progress-bar {
        background: #f59e0b;
    }
    
    .time-progress.warning::-webkit-progress-value,
    .time-progress.warning::-moz-progress-bar {
        background: #f97316;
    }
    
    .time-progress.high::-webkit-progress-value,
    .time-progress.high::-moz-progress-bar {
        background: #ea580c;
    }
    
    .time-progress.urgent::-webkit-progress-value,
    .time-progress.urgent::-moz-progress-bar {
        background: #dc2626;
    }
    
    .time-progress.critical::-webkit-progress-value,
    .time-progress.critical::-moz-progress-bar {
        background: #b91c1c;
    }
    
    .time-progress.overdue::-webkit-progress-value,
    .time-progress.overdue::-moz-progress-bar {
        background: #7f1d1d;
    }
    
    .time-progress.completed::-webkit-progress-value,
    .time-progress.completed::-moz-progress-bar {
        background: #16a34a;
    }
    
    .time-progress.same-day::-webkit-progress-value,
    .time-progress.same-day::-moz-progress-bar {
        background: var(--textColor);
    }
}

.card-header {
    padding: 1em 1em 0 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    
    .card-client {
        color: var(--mainColor);
        font-size: var(--fsNormal);
        box-shadow: none;
        border: none;
    }
    
    .card-symbol {
        color: var(--textColor);
        font-size: var(--fsNormal);
        box-shadow: none;
        border: none;
        &:hover{
            cursor: pointer;
        }
    }    
    .create-task{
            color: var(--linkHoverColor);
            cursor: pointer;
            padding: 6px;
            border-radius: var(--borderRadius);
            transition: all var(--animateTime) ease;
            &.active{
                color: var(--mainColor);      
            }
            &:hover{
                color: var(--bgColor2);
                background: var(--linkHoverColor);        
            }
        }
}
.card-dates {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fsMinus);
    justify-content: space-evenly;
    
    input[type="date"] {
        background: var(--bgColor2);
        padding: 0.2em 0.5em;
        color: var(--textColor);
        font-size: var(--fsMinus);
        width: 120px;
        box-shadow: none;
            border: none;
    }   
    span {
        color: var(--textColor);
        opacity: 0.7;
    }
}

.card-name {
    padding: 0 1em;
    
    input[type="text"] {
        width: 100%;        
        padding: 0.5em;
        color: var(--textColor);
        font-size: var(--fsNormal);
        font-weight: var(--fontBold);
        transition: all var(--animateTime) ease;
        box-shadow: none;
            border: none;
            text-align: center;

    }
}

.card-finances {
    padding: 0 2em 0.5em 2em;
    
    .finance-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--borderColor);
        padding: 0.2em 0;        
        
        &:last-child {
            margin-bottom: 0;
        }
        
        label {
            color: var(--textColor);
            font-size: var(--fsMinus);        
            min-width: 70px;
            &::first-letter{
                text-transform: uppercase;
            }
        }
        
        span {
            color: var(--textColor);
            font-size: var(--fsMinus);
            
        }

        input[type="checkbox"] {
            transform: scale(1.2);
            accent-color: var(--mainColor);
            cursor: pointer;
        }
    }
    
    .finance-input {
        display: flex;
        align-items: center;
        gap: 0.5em;
        
        input[type="text"] {
            padding: 0.2em 0.5em;
            color: var(--textColor);
            font-size: var(--fsMinus);
            width: 100px;
            text-align: right;
            transition: all var(--animateTime) ease;
            box-shadow: none;
            border: none;
            
        }
    }
}

.card-status {
    display: flex;
    justify-content: space-between;
    padding: 0.5em;
    background: var(--bgColor2); /* Ten sam background co ikony */
    gap: 0.3em;
    
    .status-btn {
        flex: 1;
        padding: 0.5em 0.3em;
        border: 1px solid var(--bgColor2); /* Border już w kolorze tła */
        border-radius: var(--borderRadius);
        background: var(--bgColor2);
        color: var(--textColor);
        font-size: var(--fsMinus);
        cursor: pointer;
        transition: all var(--animateTime) ease;
        
        &:hover {
            background: var(--mainColor);
            color: var(--bgColor2);
            border-color: var(--mainColor);
        }
        
        &.active {
            background: var(--linkHoverColor);
            color: var(--bgColor2);
            border-color: var(--linkHoverColor);
            font-weight: var(--fontBold);
        }
            }
        }
    input[type="date"], input[type="text"] {
        background: var(--bgColor2);
        box-shadow: none;
        border: none;
    }        
    &:hover {   
        background: var(--borderColor2);

        input[type="date"], input[type="text"] {
            background: var(--borderColor2);
            box-shadow: none;
            border: none;
    }
    }
    }
}

/* Responsive */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    
    .services-summary {
        flex-direction: column;
        gap: 0.5em;
    }
    
    .card-header {
        flex-direction: column;
        gap: 0.5em;
        align-items: flex-start;
    }
    
    .card-dates {
        align-self: stretch;
        justify-content: space-between;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    
    .services-summary {
        flex-direction: column;
        gap: 0.5em;
    }
    
    .card-header {
        flex-direction: column;
        gap: 0.5em;
        align-items: flex-start;
    }
    
    .card-dates {
        align-self: stretch;
        justify-content: space-between;
    }
}
.logs_table{
    margin: 1em auto;
    color: var(--textColor);
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    tr{
        &:hover{
            & td{
                background: var(--borderColor2); 
                cursor: pointer;
            }
        }
    }
    th{
        font-size: var(--fsMinus);
        text-align: center;
        padding: 0.5em 0;
        font-weight: var(--fsNormal);
        &::first-letter{
            text-transform: uppercase;
        }
    }
    td{
        position: relative;
        font-size: var(--fsSmall);
        padding: 0.5em;
        font-weight: var(--fsNormal);
        border: 1px solid var(--borderColor);
        min-width: 10%;
    }
}
.autocomplete{
    display: none;
    position: absolute;
    z-index: 20;
    margin: 0;
    padding: 0;
    box-shadow: 0px 0px 10px 5px #0000003b;
    width: 90%;
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        li{
            padding: 0.5em;
            margin: 0;
            background: var(--bgColor2);
            border-bottom: 1px solid var(--borderColor);
            color: var(--textColor);
            font-size: var(--fsMinus);  
            cursor: pointer;
            &:hover, &.selected{
                background: var(--borderColor2);                
            }
            
        }
    }
}
.mask{
	position: fixed;
	background: #091425db;
	width: 100%;
	height: 100vh;
	z-index: 19;
        backdrop-filter: blur(2px);
}
.modal
{
    position: absolute;
    left: 10%;
    top: 50%;
    z-index: 20;
    padding: 0;
    color: var(--textColor);
    module {
	display: block;
	background: var(--bgColor2);
	border: 1px solid var(--borderColor2);
	padding: 0.5em;
	box-shadow: 0px 0px 10px 5px #0000003b;
        h3{
            padding: 0 0.1em 0.2em 0.1em;
            margin: 0 0 0.5em 0;
            border-bottom: 1px solid var(--borderColor);
            font-weight: var(--fontMedium);
            color: var(--mainColor);
        }
        label{
            margin: 0;
            font-size: var(--fsMinus);
            color: var(--textColor);
            display: block;
            span{
                display: block;
            }
        }
    }
}
.float_notify{
    display: none;
    notify{
        display: block;
        opacity: 0.9;
        box-shadow: 0px 0px 10px 5px #0000003b;
        margin-bottom: 3px;
        color: var(--whColor);
        border-radius: 6px;
        font-size: var(--fsMinus);
        &::first-letter{
            text-transform: uppercase;
        }
        &.success{
            background: var(--notifySuccess);
        }
        &.error{
            background: var(--notifyError);
        }
        &.warning{
            background: var(--notifyWarning);
        }
    }
}

.user_module{
    span{

            text-transform: uppercase;
        
    }
}
.payment_left{
    &:hover{
        cursor: pointer;
        text-decoration: underline;
    }
}
.redirect{
    cursor: pointer;
    &:hover{
        text-decoration: underline
    }
}