*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;font-family:Arial,Helvetica,sans-serif;color:#222}

.sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:250px;
    background:#20242a;
    color:#fff;
    overflow-y:auto;
    z-index:1000;
    box-shadow:2px 0 8px rgba(0,0,0,.18);
}

.sidebar-brand{
    padding:18px 18px 16px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.sidebar-title{
    font-size:28px;
    font-weight:800;
    letter-spacing:1px;
}

.sidebar-subtitle{
    font-size:13px;
    color:#bfc7d5;
    margin-top:2px;
}

.sidebar-nav{
    padding:12px 10px 22px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:10px;
    color:#f4f6f8;
    text-decoration:none;
    padding:11px 12px;
    border-radius:8px;
    margin:3px 0;
    font-size:14px;
    transition:background .15s ease, transform .15s ease;
}

.sidebar-nav a span{
    width:22px;
    text-align:center;
    flex:0 0 22px;
}

.sidebar-nav a:hover{
    background:rgba(255,255,255,.11);
    transform:translateX(2px);
}

.sidebar-nav a.active{
    background:#0d6efd;
    color:#fff;
    font-weight:bold;
}

.sidebar-section{
    color:#9fa8b8;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:18px 12px 8px;
}

.logout-link{
    margin-top:18px!important;
    background:rgba(220,53,69,.16);
}

.main-content{
    margin-left:250px;
    max-width:1400px;
    padding:18px 20px;
}

.container{
    max-width:1200px;
    margin:18px auto;
    padding:0 14px;
}

.mobile-header{
    display:none;
}

.sidebar-toggle{
    display:none;
}

.sidebar-overlay{
    display:none;
}

.topbar{display:none}
.brand{font-size:20px;font-weight:bold}
.navlinks a{color:#fff;text-decoration:none;margin:6px 10px;display:inline-block}

.userbar,.langbar{background:#fff;border-radius:8px;padding:10px 14px;margin-bottom:14px;border:1px solid #ddd}
.langbar{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.langbar select{width:auto;margin:0;padding:6px}
.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:18px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.login-box{max-width:420px;margin:8vh auto;background:#fff;padding:24px;border-radius:12px;border:1px solid #ddd;box-shadow:0 1px 8px rgba(0,0,0,.12)}
h1,h2,h3{margin-top:0}
label{display:block;font-weight:bold;margin-top:12px}
input,select,textarea{width:100%;padding:11px;border:1px solid #bbb;border-radius:6px;margin-top:4px}
button,.btn{display:inline-block;background:#0d6efd;color:#fff;border:0;border-radius:6px;padding:10px 14px;margin-top:12px;text-decoration:none;cursor:pointer}
.btn-danger{background:#dc3545}
.btn-success{background:#198754}
.btn-secondary{background:#666}
.alert{padding:12px;border-radius:6px;margin-bottom:12px}
.alert-danger{background:#ffd8d8;border:1px solid #e0a0a0}
.alert-success{background:#d1e7dd;border:1px solid #badbcc}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi h2{font-size:32px;margin:0}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid #ddd;padding:8px;text-align:left;font-size:14px}
th{background:#e9ecef}
.btn-small{padding:5px 8px;margin:0 2px;font-size:12px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.report-photo{width:100%;max-height:220px;object-fit:cover;border:1px solid #ccc;border-radius:8px;background:#fff}
.signature-image{max-width:100%;height:auto;border:1px solid #333;background:#fff;border-radius:8px}

@media(max-width:900px){
    .sidebar{
        transform:translateX(-100%);
        transition:transform .2s ease;
        width:270px;
    }

    .sidebar-toggle:checked ~ .sidebar{
        transform:translateX(0);
    }

    .sidebar-overlay{
        display:none;
    }

    .sidebar-toggle:checked ~ .sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.35);
        z-index:900;
    }

    .sidebar-overlay label{
        display:block;
        width:100%;
        height:100%;
        margin:0;
    }

    .mobile-header{
        display:flex;
        align-items:center;
        gap:12px;
        position:sticky;
        top:0;
        z-index:800;
        background:#20242a;
        color:#fff;
        padding:12px 14px;
        box-shadow:0 2px 6px rgba(0,0,0,.18);
    }

    .menu-button{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        background:#0d6efd;
        color:#fff;
        border-radius:8px;
        font-size:24px;
        margin:0;
        cursor:pointer;
    }

    .mobile-title{
        font-weight:bold;
        font-size:18px;
    }

    .main-content{
        margin-left:0;
        padding:14px;
    }

    .grid,.grid2{
        grid-template-columns:1fr;
    }

    .langbar{
        justify-content:stretch;
    }

    .langbar select{
        width:100%;
    }
}

.report-page{page-break-inside:avoid}
@media print{
    .sidebar,.mobile-header,.langbar,.userbar,.no-print{display:none!important}
    .main-content{margin-left:0!important;padding:0!important}
    .card{box-shadow:none!important;border:1px solid #999!important}
    body{background:#fff!important}
    button,.btn{display:none!important}
}


/* V37 Time Summary Print */
@media print{
    .sidebar,
    .mobile-header,
    .langbar,
    .userbar,
    .no-print,
    button,
    .btn{
        display:none!important;
    }

    .main-content{
        margin-left:0!important;
        padding:0!important;
    }

    body{
        background:#fff!important;
    }

    .card{
        box-shadow:none!important;
        border:1px solid #999!important;
        page-break-inside:avoid;
    }

    table{
        font-size:11px;
    }
}


/* V42.1 Mobile Dashboard Collapsible Fix */
.mobile-dashboard-toggle{
    display:none;
}

@media (max-width: 768px){
    .mobile-dashboard-section{
        margin: 14px 0;
    }

    .mobile-dashboard-toggle{
        display:flex;
        width:100%;
        align-items:center;
        justify-content:space-between;
        padding:16px 18px;
        border:1px solid #ddd;
        border-radius:14px;
        background:#fff;
        color:#111;
        font-size:20px;
        font-weight:700;
        box-shadow:0 2px 8px rgba(0,0,0,.12);
        cursor:pointer;
    }

    .mobile-dashboard-content{
        display:none;
        margin-top:10px;
    }

    .mobile-dashboard-section.mobile-open .mobile-dashboard-content{
        display:block;
    }

    .mobile-dashboard-section.open-desktop .mobile-dashboard-content{
        display:none;
    }

    .mobile-dashboard-toggle span{
        font-size:18px;
        margin-left:10px;
    }
}

@media (min-width: 769px){
    .mobile-dashboard-content{
        display:block;
    }
}