/* =========================================================
   Worker Management System — responsive stylesheet (v6.1)
   - Mobile-first
   - Fixes horizontal scrolling on phones
   - Wraps tables in a scroll container
   ========================================================= */

* { margin:0; padding:0; box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }   /* kill horizontal page scroll on mobile */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:#f3f4f6; color:#1f2937;
    -webkit-text-size-adjust:100%;
}
img { max-width:100%; height:auto; }

/* ---------- Navbar ---------- */
.navbar {
    background:#1e293b; color:#fff;
    padding:12px 16px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:8px;
    position:sticky; top:0; z-index:50;
}
.navbar h1 { font-size:1.1rem; }
.navbar > div { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.navbar a, .navbar span { color:#cbd5e1; text-decoration:none; font-size:.9rem; }
.navbar a:hover { color:#fff; }

/* Mobile hamburger menu */
.nav-toggle { display:none; background:transparent; border:0; color:#fff; font-size:1.6rem; cursor:pointer; }

/* ---------- Container ---------- */
.container { max-width:1100px; margin:20px auto; padding:0 14px; }

/* ---------- Stats grid ---------- */
.stats {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px; margin:15px 0;
}
.stat-card { background:#fff; border-radius:10px; padding:18px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.stat-card h3 { font-size:.8rem; color:#6b7280; margin-bottom:8px; }
.stat-card .num { font-size:1.7rem; font-weight:700; color:#1e293b; word-break:break-word; }
.stat-card.green .num { color:#16a34a; }
.stat-card.red   .num { color:#dc2626; }
.stat-card.blue  .num { color:#2563eb; }

/* ---------- Tables (responsive) ---------- */
/* Wrap any <table> in <div class="table-wrap"> so it scrolls horizontally
   inside its container instead of breaking the page layout on mobile. */
.table-wrap {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    margin:10px 0;
}
table { width:100%; border-collapse:collapse; background:#fff; }
.table-wrap > table { box-shadow:none; margin:0; min-width:560px; }  /* keep columns readable */
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #e5e7eb; font-size:.9rem; vertical-align:middle; }
th { background:#f8fafc; font-weight:600; color:#374151; white-space:nowrap; }
tr:hover { background:#f9fafb; }
tr.absent { background:#fef2f2; }
tr.absent td { color:#dc2626; }

.thumb { width:50px; height:50px; object-fit:cover; border-radius:6px; cursor:pointer; background:#f3f4f6; }
.thumb-missing {
    display:inline-flex; align-items:center; justify-content:center;
    width:50px; height:50px; border-radius:6px;
    background:#f3f4f6; color:#9ca3af; font-size:.7rem; text-align:center;
}

/* ---------- Buttons ---------- */
.btn { display:inline-block; padding:9px 16px; border:none; border-radius:6px; cursor:pointer; font-size:.9rem; text-decoration:none; line-height:1.2; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-danger  { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-sm { padding:5px 10px; font-size:.78rem; }

/* ---------- Forms ---------- */
.form-box { background:#fff; max-width:500px; margin:20px auto; padding:28px 22px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-weight:600; font-size:.9rem; color:#374151; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:11px; border:1px solid #d1d5db; border-radius:6px; font-size:1rem; /* 16px to stop iOS zoom */
    background:#fff; color:#1f2937;
}
.form-group input:focus, .form-group select:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }

.alert { padding:12px 16px; border-radius:6px; margin-bottom:15px; font-size:.9rem; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.alert-error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ---------- Login ---------- */
.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1e293b,#334155); padding:20px; }
.login-box { background:#fff; padding:32px 26px; border-radius:12px; width:100%; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.15); }
.login-box h2 { text-align:center; margin-bottom:25px; color:#1e293b; }

/* ---------- Image modal ---------- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999; justify-content:center; align-items:center; padding:20px; }
.modal-overlay.active { display:flex; }
.modal-overlay img { max-width:100%; max-height:90vh; border-radius:8px; }

/* =========================================================
   MOBILE  (≤768px)
   ========================================================= */
@media (max-width: 768px) {
    .container { padding:0 12px; margin:14px auto; }
    .stats { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card { padding:14px 10px; }
    .stat-card .num { font-size:1.3rem; }
    .stat-card h3 { font-size:.72rem; }
    th, td { padding:8px 9px; font-size:.82rem; }
    .thumb, .thumb-missing { width:42px; height:42px; }
    h2 { font-size:1.2rem; } h3 { font-size:1rem; }

    /* Make ALL tables horizontally scrollable on mobile,
       even if the PHP file didn't wrap them in .table-wrap. */
    table {
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;
    }
    .table-wrap > table { display:table; white-space:normal; }

    /* Collapsible nav */
    .navbar { flex-wrap:nowrap; }
    .nav-toggle { display:inline-block; }
    .navbar > div {
        display:none;
        flex-basis:100%;
        flex-direction:column; align-items:flex-start;
        background:#0f172a; margin:10px -16px -12px; padding:10px 16px;
    }
    .navbar.open > div { display:flex; }
    .navbar a, .navbar span { padding:8px 0; width:100%; border-bottom:1px solid #1e293b; }
}

@media (max-width: 420px) {
    .stats { grid-template-columns:1fr; }
    .navbar h1 { font-size:1rem; }
    .btn { padding:10px 14px; }
    .login-box { padding:24px 18px; }
}