/* ============================================================
   style.css — Attendance Management System
   Professional Blue & White Theme — Mobile Optimized
   ============================================================ */

:root {
    --primary:       #1a3a6b;
    --primary-light: #2451a3;
    --primary-dark:  #0f2347;
    --secondary:     #4a90d9;
    --accent:        #f0a500;
    --success:       #28a745;
    --danger:        #dc3545;
    --warning:       #ffc107;
    --info:          #17a2b8;
    --light:         #f8f9fc;
    --dark:          #1e2a3a;
    --gray:          #6c757d;
    --border:        #e3e6f0;
    --shadow:        0 0.125rem 0.5rem rgba(26,58,107,0.1);
    --shadow-lg:     0 0.5rem 1.5rem rgba(26,58,107,0.15);
    --sidebar-width: 240px;
    --topbar-height: 64px;
    --radius:        0.5rem;
    --radius-lg:     0.75rem;
    --font:          'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--light);
    color: var(--dark);
    font-size: 0.9rem;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

a { text-decoration: none; color: var(--primary-light); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; }

/* ── NAVBAR ──────────────────────────────────────────────────── */
.bg-primary-custom {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    height: 64px;
}
.navbar .no-caret::after { display: none; }
.avatar-sm {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.25); color: #fff;
    font-weight: 700; display: inline-flex;
    align-items: center; justify-content: center; font-size: 0.85rem;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
    position: fixed; top: var(--topbar-height); left: 0;
    width: var(--sidebar-width); height: calc(100vh - var(--topbar-height));
    background: var(--primary-dark); overflow-y: auto; overflow-x: hidden;
    transition: transform 0.3s ease; z-index: 1030;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.sidebar-header { padding: 1rem 1.25rem 0.5rem; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); }
.sidebar-nav { padding: 0.25rem 0; }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 1.25rem; color: rgba(255,255,255,0.75);
    border-left: 3px solid transparent; transition: all 0.2s;
    font-size: 0.875rem; white-space: nowrap;
}
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.4); }
.sidebar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,0.12); border-left-color: var(--accent); font-weight: 600; }
.sidebar-nav .nav-link i { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.sidebar-nav .nav-link.text-danger-soft { color: rgba(255,100,100,0.8); }
.sidebar-nav .nav-link.text-danger-soft:hover { color: #ff6b6b; }
.sidebar-divider { border-color: rgba(255,255,255,0.1); margin: 0.5rem 1.25rem; }

/*
 * SIDEBAR OVERLAY
 * ───────────────
 * top: var(--topbar-height) is CRITICAL for mobile.
 * If the overlay used inset:0 (full viewport), it would cover the
 * navbar. Even though the navbar has a higher z-index (1040 vs 1029),
 * iOS Safari and Android Chrome do NOT reliably honour z-index for
 * blocking touch events from position:fixed overlays.
 * Starting the overlay BELOW the navbar means the hamburger button
 * area is never covered, so taps always reach the button.
 */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--topbar-height); /* start BELOW the navbar — never blocks the toggle button */
    right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1029;
    pointer-events: none; /* critical: never block clicks when hidden */
}

/*
 * SIDEBAR TOGGLE BUTTON
 * ──────────────────────
 * min-width/height 44×44 px: iOS HIG and Android Material both require
 * at least 44 dp / 48 dp touch targets. The icon alone is only ~24 px;
 * without this, taps near the edge of the icon are missed entirely.
 *
 * touch-action:manipulation  → removes the 300 ms click delay on mobile
 * -webkit-tap-highlight-color: transparent → prevents the grey flash on iOS
 * cursor:pointer             → tells iOS Safari this element is interactive
 *                              (without this, Safari sometimes ignores clicks
 *                               on non-anchor, non-input elements)
 */
#sidebarToggle {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border: none !important;
    outline: none;
}

/* ── MAIN CONTENT ────────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); min-height: calc(100vh - var(--topbar-height)); transition: margin-left 0.3s ease; }
.main-footer { margin-left: var(--sidebar-width); background: #fff; border-top: 1px solid var(--border); padding: 0.75rem 0; transition: margin-left 0.3s ease; }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main-content, body.sidebar-collapsed .main-footer { margin-left: 0; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: #fff; }
.card-header { background: #fff; border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding: 0.875rem 1.25rem; font-weight: 600; }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-card { border-radius: var(--radius-lg); padding: 1.25rem; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform 0.2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-icon { font-size: 2.5rem; opacity: 0.25; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.8rem; opacity: 0.85; }
.stat-card.blue     { background: linear-gradient(135deg, #1a3a6b, #2451a3); }
.stat-card.green    { background: linear-gradient(135deg, #1a7a3a, #28a745); }
.stat-card.orange   { background: linear-gradient(135deg, #c77a00, #f0a500); }
.stat-card.red      { background: linear-gradient(135deg, #9b1c1c, #dc3545); }
.stat-card.teal     { background: linear-gradient(135deg, #0e6b6b, #17a2b8); }
.stat-card.purple   { background: linear-gradient(135deg, #4a0080, #7209b7); }

/* ── TABLES ──────────────────────────────────────────────────── */
.table { font-size: 0.875rem; }
.table th { background: var(--light); font-weight: 600; color: var(--gray); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-top: none; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(26,58,107,0.03); }

/* ── ATTENDANCE GRID ─────────────────────────────────────────── */
.attendance-sheet { overflow-x: auto; }
.attendance-sheet table { border-collapse: separate; border-spacing: 1px; background: #ddd; font-size: 0.78rem; }
.attendance-sheet th, .attendance-sheet td { background: #fff; padding: 0.35rem 0.5rem; text-align: center; white-space: nowrap; min-width: 36px; }
.attendance-sheet th { background: var(--primary); color: #fff; font-size: 0.7rem; }
.attendance-sheet .emp-name { text-align: left !important; min-width: 130px; font-weight: 500; }
.cell-P   { background: #d4edda !important; color: #155724; font-weight: 600; }
.cell-A   { background: #f8d7da !important; color: #721c24; font-weight: 600; }
.cell-HD  { background: #fff3cd !important; color: #856404; font-weight: 600; }
.cell-CL  { background: #cce5ff !important; color: #004085; font-weight: 600; }
.cell-SL  { background: #d6d8ff !important; color: #1d1fa0; font-weight: 600; }
.cell-EL  { background: #c3e6cb !important; color: #155724; font-weight: 600; }
.cell-H   { background: #e2e3e5 !important; color: #383d41; }
.cell-LWP { background: #343a40 !important; color: #fff; font-weight: 600; }
.cell-W   { background: #f1f3f5 !important; color: #adb5bd; }
.cell-SD  { background: #fde8d2 !important; color: #8a4400; font-weight: 600; }
.cell-clickable { cursor: pointer; border-radius: 3px; transition: opacity 0.15s; }
.cell-clickable:hover { opacity: 0.75; outline: 2px solid var(--primary); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { border-radius: var(--radius); font-size: 0.875rem; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; box-shadow: 0 2px 6px rgba(26,58,107,0.35); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow: 0 4px 10px rgba(26,58,107,0.4); }
.btn-sm { font-size: 0.8rem; padding: 0.3rem 0.6rem; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-control, .form-select { border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; padding: 0.5rem 0.75rem; transition: border-color 0.2s, box-shadow 0.2s; }
.form-control:focus, .form-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 0.2rem rgba(26,58,107,0.15); }
.form-label { font-weight: 500; font-size: 0.85rem; color: var(--dark); }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge { font-size: 0.75rem; padding: 0.35em 0.65em; border-radius: 0.35rem; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { border: none; border-radius: var(--radius); font-size: 0.875rem; }
.alert-success { background: #d4edda; color: #155724; }
.alert-danger  { background: #f8d7da; color: #721c24; }
.alert-warning { background: #fff3cd; color: #856404; }
.alert-info    { background: #d1ecf1; color: #0c5460; }

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-header { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE MOBILE APP LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.employee-layout {
    background: #f0f4f8;
    min-height: 100vh;
    padding-bottom: 4rem;
}

.emp-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    padding: 1.25rem 1rem 1.5rem;
    color: #fff;
    position: relative;
}
.emp-header .greeting { font-size: 0.75rem; opacity: 0.8; margin: 0; }
.emp-header .emp-name  { font-size: 1rem; font-weight: 700; margin: 0; }

.emp-card-wrapper {
    padding: 0.75rem 0.5rem;
}

.emp-status-card {
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.75rem;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    margin-bottom: 0.5rem;
}

/* Mark Attendance Button */
.mark-btn {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    box-shadow: 0 3px 15px rgba(26,58,107,0.35);
    transition: all 0.3s;
    margin: 0 auto;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    -webkit-tap-highlight-color: transparent;
}
.mark-btn:active { transform: scale(0.93); }
.mark-btn i { font-size: 1.5rem; }
.mark-btn.checked-in { background: linear-gradient(135deg, #1a7a3a, var(--success)); border-color: var(--success); }
.mark-btn.disabled-btn { background: linear-gradient(135deg, #555, #777); border-color: #777; cursor: not-allowed; }

/* Bottom nav for employee */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 1050;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.1rem;
    color: var(--gray);
    font-size: 0.55rem;
    gap: 0.05rem;
    text-decoration: none;
    transition: color 0.2s;
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
}
.bottom-nav a i { font-size: 1rem; flex-shrink: 0; margin-bottom: 1px; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--primary-light); }
.bottom-nav a.active i { color: var(--primary-light); }
.bottom-nav a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.5rem;
    font-weight: 500;
}

.emp-content {
    padding-bottom: 4.5rem;
}

/* ── GPS INDICATOR ───────────────────────────────────────────── */
.gps-indicator { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 2rem; background: #f0f4f8; }
.gps-dot { width: 8px; height: 8px; border-radius: 50%; animation: gps-pulse 1.5s ease-in-out infinite; }
.gps-dot.finding { background: var(--warning); }
.gps-dot.found   { background: var(--success); animation: none; }
.gps-dot.error   { background: var(--danger);  animation: none; }
@keyframes gps-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

/* ── SALARY SLIP ─────────────────────────────────────────────── */
@media print {
    body * { visibility: hidden; }
    #salarySlip, #salarySlip * { visibility: visible; }
    #salarySlip { position: absolute; left: 0; top: 0; width: 100%; }
    .no-print { display: none !important; }
    .sidebar, .main-footer, nav.navbar { display: none !important; }
    .main-content { margin-left: 0 !important; margin-top: 0 !important; }
}
.salary-slip-card { border: 1px solid #dee2e6; padding: 2rem; max-width: 800px; margin: 0 auto; background: #fff; }
.salary-slip-header { border-bottom: 2px solid var(--primary); padding-bottom: 1rem; margin-bottom: 1rem; }
.salary-slip-title { color: var(--primary); font-size: 1.3rem; font-weight: 700; }

/* ── UTILITIES ───────────────────────────────────────────────── */
.text-primary-custom { color: var(--primary) !important; }
.bg-primary-custom   { background: var(--primary) !important; }
.fw-600              { font-weight: 600; }
.ls-1                { letter-spacing: 0.08em; }
.cursor-pointer      { cursor: pointer; }
.border-primary      { border-color: var(--primary) !important; }

/* ── LOGIN PAGE ──────────────────────────────────────────────── */
.login-card { width: 100%; max-width: 420px; background: #fff; border-radius: 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.login-header { background: linear-gradient(135deg, #1a3a6b, #2451a3); padding: 2rem; text-align: center; color: #fff; }
.login-logo { width: 64px; height: 64px; background: rgba(255,255,255,0.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.login-body { padding: 2rem; }
.form-floating .form-control { border-radius: 0.5rem; font-size: 0.9rem; }
.btn-login { background: linear-gradient(135deg, #1a3a6b, #2451a3); border: none; border-radius: 0.5rem; padding: 0.75rem; font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 15px rgba(26,58,107,0.4); transition: all 0.3s; }
.btn-login:hover { background: linear-gradient(135deg, #0f2347, #1a3a6b); box-shadow: 0 6px 20px rgba(26,58,107,0.5); transform: translateY(-1px); }

/* ── TABS ────────────────────────────────────────────────────── */
.nav-tabs .nav-link { color: var(--gray); border: none; border-bottom: 2px solid transparent; padding: 0.75rem 1rem; font-weight: 500; transition: all 0.2s; }
.nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: rgba(26,58,107,0.2); }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; font-weight: 600; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26,58,107,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26,58,107,0.4); }
[data-confirm] { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ADMIN (768px and below)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --sidebar-width: 0px; }
    .sidebar { transform: translateX(-240px); width: 240px; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; pointer-events: auto; }
    .main-content { margin-left: 0 !important; }
    .main-footer  { margin-left: 0 !important; }

    .stat-card .stat-value { font-size: 1.3rem; }
    .stat-card .stat-icon { font-size: 1.8rem; }
    .stat-card { padding: 1rem; }

    .attendance-sheet table { font-size: 0.65rem; }
    .attendance-sheet th, .attendance-sheet td { padding: 0.2rem 0.3rem; min-width: 26px; }

    .breadcrumb { display: none; }
    .table-responsive { border-radius: var(--radius); }
    .card { margin-bottom: 0.75rem; }
    .card-body { padding: 0.75rem; }
    .card-header { padding: 0.65rem 0.75rem; }
    .d-flex.flex-wrap.gap-2 > * { min-width: 100%; }
    .d-flex.flex-wrap.gap-2 > .btn { min-width: auto; }
    .row.g-3 .col-md-3 { margin-bottom: 0.5rem; }
    .navbar { padding: 0 0.5rem !important; }
    .navbar .avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
    .modal-dialog { margin: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — EMPLOYEE MOBILE (576px and below)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    /* Page layout */
    .container-fluid.py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column; align-items: flex-start !important; gap: 0.5rem;
    }
    h4.fw-bold { font-size: 1rem; }
    .card { border-radius: 0.6rem; margin-bottom: 0.5rem; }
    .card-header { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
    .card-body { padding: 0.75rem; }

    /* Tables */
    .table { font-size: 0.75rem; }
    .table td, .table th { padding: 0.35rem 0.25rem; }

    /* Buttons & Forms */
    .btn { font-size: 0.75rem; padding: 0.35rem 0.5rem; }
    .btn-sm { font-size: 0.65rem; padding: 0.2rem 0.4rem; }
    .form-control, .form-select { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
    .badge { font-size: 0.6rem; padding: 0.25em 0.5em; }

    /* Stat cards — 2 columns */
    .row.g-2 .col-3 { flex: 0 0 50%; max-width: 50%; }
    .row.g-3 .col-6 { flex: 0 0 50%; max-width: 50%; }

    /* Employee header */
    .emp-header { padding: 1rem 0.75rem 2rem; }
    .emp-header .greeting { font-size: 0.75rem; }
    .emp-header .emp-name { font-size: 1rem; }

    /* Employee cards */
    .emp-card-wrapper { margin-top: -1.25rem; padding: 0 0.5rem; }
    .emp-status-card { padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 0.6rem; }

    /* Mark button */
    .mark-btn { width: 100px; height: 100px; font-size: 0.7rem; }
    .mark-btn i { font-size: 1.5rem; }

    /* Bottom nav — compact */
    .bottom-nav a { padding: 0.35rem 0.1rem; }
    .bottom-nav a i { font-size: 0.95rem; }
    .bottom-nav a span { font-size: 0.5rem; }
    .emp-content { padding: 0 0 3.5rem; }

    /* Attendance history table */
    .attendance-history th, .attendance-history td { padding: 0.25rem 0.2rem; font-size: 0.7rem; }

    /* GPS indicator */
    .gps-indicator { font-size: 0.7rem; padding: 0.25rem 0.5rem; }

    /* Salary slip */
    .salary-slip-card { padding: 1rem; }
    .salary-slip-title { font-size: 1rem; }

    /* Install banners */
    .install-banner { bottom: calc(50px + env(safe-area-inset-bottom)) !important; }

    /* Attendance sheet scroll */
    .attendance-sheet { -webkit-overflow-scrolling: touch; }
    .attendance-sheet::-webkit-scrollbar { height: 3px; }
}

/* ── PWA standalone mode ─────────────────────────────────────── */
@media (display-mode: standalone) {
    body { padding-top: 0 !important; }
    .emp-header { padding-top: 1rem; }
}

/* ── Touch optimization ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .form-control, .form-select { min-height: 40px; }
    .sidebar-nav .nav-link { min-height: 44px; }
    .bottom-nav a { min-height: 48px; }
    .table td, .table th { min-height: 36px; }
}