/* ========================================

   RESET E STILI COMUNI

   ======================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    background: #ffffff;

    min-height: 100vh;

}



/* ========================================

   PAGINA LOGIN

   ======================================== */

body.login-page {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

}



.login-container {

    width: 100%;

    max-width: 320px;

}



.logo-container {

    text-align: center;

    margin-bottom: 25px;

}



.logo-container img {

    max-width: 200px;

    height: auto;

}



.app-title {

    text-align: center;

    font-size: 24px;

    font-weight: 400;

    color: #3c434a;

    margin-bottom: 25px;

}



.login-form {

    background: #ffffff;

    padding: 24px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    border: 1px solid #c3c4c7;

}



.form-group {

    margin-bottom: 16px;

}



.form-group label {

    display: block;

    color: #3c434a;

    font-size: 14px;

    font-weight: 400;

    margin-bottom: 8px;

}



.form-group input[type="text"],

.form-group input[type="password"] {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #8c8f94;

    border-radius: 4px;

    font-size: 14px;

    background: #fff;

    transition: border-color 0.2s ease;

    line-height: 2;

}



.form-group input[type="text"]:focus,

.form-group input[type="password"]:focus {

    outline: none;

    border-color: #2271b1;

    box-shadow: 0 0 0 1px #2271b1;

}



.btn-submit {

    width: 100%;

    padding: 8px 12px;

    background: #484848;

    color: #ffffff;

    border: 1px solid #484848;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 400;

    cursor: pointer;

    transition: all 0.2s ease;

    line-height: 2.30769231;

    min-height: 32px;

    margin-top: 8px;

}



.btn-submit:hover {

    background: #3d3d3d;

    border-color: #3d3d3d;

}



.btn-submit:focus {

    outline: 2px solid transparent;

    outline-offset: 2px;

    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3d3d3d;

}



.btn-submit:active {

    background: #3d3d3d;

    border-color: #3d3d3d;

}



.back-to {

    text-align: center;

    margin-top: 16px;

}



.back-to a {

    color: #50575e;

    text-decoration: none;

    font-size: 13px;

}



.back-to a:hover {

    color: #2271b1;

}



/* Input autofill styling */

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0px 1000px #fff inset;

    -webkit-text-fill-color: #2c3338;

    transition: background-color 5000s ease-in-out 0s;

}



/* ========================================

   PAGINA DASHBOARD

   ======================================== */



/* Intestazione */

.header-container {

    display: flex;

    justify-content: space-between;

    background: #ffffff;

    padding: 16px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    align-items: center;

}



.header-left,

.header-center,

.header-right {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.header-left {

    align-items: flex-start;

}



.header-center {

    align-items: center;

}



.header-right {

    align-items: flex-end;

}



.logo {

    max-width: 80px;

    height: auto;

}



.operatore-label,

.ore-label {

    font-size: 12px;

    color: #666;

    font-weight: 400;

}



.nome-operatore,

.numero-ore {

    font-size: 16px;

    color: #484848;

    font-weight: 600;

    margin-top: 4px;

}



/* Corpo */

.main-content {

    padding: 10px;

}



.page-title {

    font-size: 24px;

    color: #3c434a;

    margin-bottom: 24px;

    font-weight: 600;

}



/* Tabella */

.table-list {

    background: #ffffff;

    border: 1px solid #c3c4c7;

    border-radius: 4px;

    overflow: hidden;

}



.table-row {

    display: flex;

    justify-content: space-between;

    padding: 12px 16px;

    border-bottom: 1px solid #f0f0f1;

}



.table-row:first-child {

    background: #2271b1;

    color: #ffffff;

    font-weight: 600;

}



.table-row:first-child .table-cell {

    color: #ffffff;

}



.table-row:last-child {

    border-bottom: none;

}



.table-row:not(:first-child):hover {

    background: #f6f7f7;

}



.table-cell {

    font-size: 14px;

    color: #3c434a;

    text-align: left;

}



.link-lavorazione {

    font-size: 14px;

    color: #666666 !important;

    text-align: left;

    text-decoration: none !important;

}



/* Larghezze specifiche per colonne */

.table-row .table-cell:nth-child(1) { flex: 1; } /* Targa */

.table-row .table-cell:nth-child(2) { flex: 1.8; } /* Modello */

.table-row .table-cell:nth-child(3) { flex: 2.5; }   /* Lavoro - PIÙ SPAZIO */

.table-row .table-cell:nth-child(4) { flex: 0.4; } /* Ore - MENO SPAZIO */



/* Larghezze specifiche per colonne */

.table-cell:nth-child(1) { flex: 1; } /* Targa */

.table-cell:nth-child(2) { flex: 1.8; } /* Modello */

.table-cell:nth-child(3) { flex: 2.5; }   /* Lavoro - PIÙ SPAZIO */

.table-cell:nth-child(4) { flex: 0.4; } /* Ore - MENO SPAZIO */



.table-cell:first-child {

    text-align: left;

}



.table-cell:last-child {

    text-align: right;

}



/* ========================================

   RESPONSIVE

   ======================================== */

@media (max-width: 768px) {

    /* Login responsive */

    .login-container {

        max-width: 100%;

    }

    

    .login-form {

        box-shadow: none;

        border: none;

    }

    

    /* Dashboard responsive */

    .header-container {

        padding: 12px;

    }

    

    .logo {

        max-width: 60px;

    }

    

    .operatore-label,

    .ore-label {

        font-size: 10px;

    }

    

    .nome-operatore,

    .numero-ore {

        font-size: 14px;

    }

    

    .table-cell {

        font-size: 12px;

    }

    

    .page-title {

        font-size: 20px;

    }

}



@media (max-width: 480px) {

    .login-form {

        padding: 20px;

    }

}



/* Sezione cards */

.card {

    background: #ffffff;

    border: 1px solid #c3c4c7;

    border-radius: 4px;

    padding: 7px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    text-align: left;

    font-size: 16px;

    color: #3c434a;

}



.card:hover {

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}



/* Sezione cards con flexbox wrap */

.cards-container {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 24px;

}



.card {

    background: #ffffff;

    border: 1px solid #c3c4c7;

    border-radius: 4px;

    padding: 7px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    text-align: left;

    font-size: 16px;

    color: #3c434a;

}



/* Pulsanti azione */

.action-buttons {

    margin-top: 10px;

}



.button-row-split {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

}



.btn-action {

    padding: 23px;

    border: none;

    border-radius: 4px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.button-row-split .btn-action {

    width: 45%;

    padding: 30px 16px;

}



.btn-full {

    width: 100%;

    margin-bottom: 16px;

}



.btn-orange {

    background: #ff9800;

    color: #ffffff;

}



.btn-orange:hover {

    background: #e68900;

}



.btn-green {

    background: #4caf50;

    color: #ffffff;

}



.btn-green:hover {

    background: #45a049;

}



.btn-red {

    background: #a10f0a;

    color: #ffffff;

}



.btn-red:hover {

    background: #951713;

}



.btn-blue {

    background: #484848;

    color: #ffffff;

}



.btn-blue:hover {

    background: #3d3d3d;

}



.btn-action:active {

    transform: scale(0.98);

}



/* Sezione cards con flexbox wrap */

.cards-container {

    display: flex;

    flex-wrap: wrap;

    gap: 3px;

    margin-top: 20px;

}



/* Card lavorazioni */

.cards-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;

}



.work-card {

    background: #ffffff;

    border: 1px solid #c3c4c7;

    border-radius: 4px;

    padding: 16px;

    width: calc(45% - 8px);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    transition: all 0.2s ease;

    display: flex;

    flex-direction: column;

}



.work-card:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transform: translateY(-2px);

}



.work-row {

    padding: 3px 0;

    border-bottom: 1px solid #f0f0f1;

    font-size: 14px;

    color: #3c434a;

}



.work-row:last-child {

    border-bottom: none;

}



.work-row strong a {

    color: #484848;

    text-decoration: none !important;

}



.work-row strong {

    color: #484848;

}

.btn-dettaglio {

    display: block;

    margin-top: 12px;

    padding: 10px;

    background: #484848;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.n-ordine strong {

    color: #a10f0a !important;

}



.btn-dettaglio:hover {

    background: #3d3d3d;

}



/* Responsive */

@media (max-width: 768px) {

    .work-card {

        width: 49%;

    }

}



@media (max-width: 375px) {

    .work-card {

        width: 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }

}

/* Responsive */

@media (max-width: 768px) {

    .full-width {

        width: 100%;

    }

}



/* Footer fisso */

footer.footer {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 30px;

    background-color: #000000;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    color: #ffffff;

    z-index: 1000;

    box-sizing: border-box;

}