:root{--blue:#2563eb;--navy:#0f172a;--line:#dbe3ee;--bg:#f3f7fb;--text:#172033}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.site-header{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:18px}
.topnav{display:flex;flex-wrap:wrap;gap:12px}
.topnav a{text-decoration:none;color:#334155;font-weight:600}
.container{max-width:1280px;margin:0 auto;padding:24px}
.narrow{max-width:620px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px;box-shadow:0 4px 15px rgba(15,23,42,.04)}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:12px}
input,select,textarea{width:100%;margin-top:6px;padding:11px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto;margin:0}
.btn{display:inline-block;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer;font-weight:700}
.btn-primary{background:var(--blue);color:white}
.btn-success{background:#15803d;color:#fff}
.btn-danger{background:#b91c1c;color:#fff}
.btn-small{padding:7px 10px;background:#e0e7ff;color:#1e3a8a}
.big{font-size:18px;padding:16px 28px}
.alert{padding:12px 14px;border-radius:8px;margin:12px 0}
.alert-success{background:#dcfce7;color:#166534}
.alert-danger{background:#fee2e2;color:#991b1b}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.stat strong{display:block;font-size:28px}
.stat span{color:#64748b}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;color:#64748b}
.table-wrap{overflow:auto}
.badge{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
.badge.ok{background:#dcfce7;color:#166534}
.badge.bad{background:#fee2e2;color:#991b1b}
.inline{display:inline}
.code{font-size:20px;letter-spacing:2px}
.footer{text-align:center;color:#64748b;padding:20px}
.attendance-shell{min-height:70vh;display:flex;align-items:center;justify-content:center}
.attendance-card{width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.terminal-info{padding:12px;background:#eff6ff;border-radius:10px;margin-bottom:14px}
.live-clock{font-size:24px;font-weight:700;margin:14px 0}
.punch-actions{display:flex;justify-content:center;gap:14px;margin-top:18px}
.muted{color:#64748b}
.actions{display:flex;align-items:end}
@media(max-width:800px){
.grid.two,.grid.three,.stats{grid-template-columns:1fr}
.site-header{align-items:flex-start;flex-direction:column}
.topnav{gap:8px}
.container{padding:14px}
.punch-actions{flex-direction:column}
}

/* Attendance clarity and reporting update 1.1.0 */
.punch-result{margin:18px 0;padding:22px 18px;border:3px solid;border-radius:14px;text-align:center;box-shadow:0 8px 20px rgba(15,23,42,.12)}
.punch-result.accepted{background:#dcfce7;border-color:#15803d;color:#14532d}
.punch-result.rejected{background:#fee2e2;border-color:#b91c1c;color:#7f1d1d}
.punch-result-title{font-size:30px;line-height:1.15;font-weight:900;letter-spacing:.5px}
.punch-result-employee{font-size:18px;font-weight:800;margin-top:8px}
.punch-result-detail{font-size:20px;line-height:1.35;font-weight:800;margin-top:12px}
.last-action-panel{margin:16px auto 8px;padding:14px;background:#fff;border:2px solid currentColor;border-radius:12px;font-size:20px;font-weight:800}
.last-action-panel strong{display:block;font-size:28px;line-height:1.2;margin:4px 0}
.last-action-panel span{display:block;font-size:15px;font-weight:700}
.punch-result-note{font-size:15px;font-weight:800;margin-top:10px}
.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;align-items:end}
.filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.report-summary{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0}
.report-summary strong{font-size:18px}
.status-open{font-weight:800;color:#b45309}
.status-closed{font-weight:800;color:#166534}
.export-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.btn-secondary{background:#475569;color:#fff}
.btn-outline{background:#fff;border:1px solid #94a3b8;color:#334155}
@media(max-width:1000px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.filter-grid{grid-template-columns:1fr}.punch-result-title{font-size:24px}.last-action-panel strong{font-size:23px}}


/* Check-in/check-out colour distinction and persistent last action 1.2.2 */
.punch-result.accepted-check-in{
    background:#dcfce7;
    border-color:#15803d;
    color:#14532d;
}
.punch-result.accepted-check-out{
    background:#dbeafe;
    border-color:#1d4ed8;
    color:#1e3a8a;
}
.persistent-last-action{
    margin:18px 0;
    padding:18px;
    border:3px solid;
    border-radius:14px;
    text-align:center;
    box-shadow:0 8px 20px rgba(15,23,42,.10);
}
.persistent-last-action.last-check-in{
    background:#dcfce7;
    border-color:#15803d;
    color:#14532d;
}
.persistent-last-action.last-check-out{
    background:#dbeafe;
    border-color:#1d4ed8;
    color:#1e3a8a;
}
.persistent-last-action-label{
    font-size:16px;
    font-weight:900;
    letter-spacing:.5px;
}
.persistent-last-action-employee{
    margin-top:8px;
    font-size:18px;
    font-weight:800;
}
.persistent-last-action-value{
    margin-top:8px;
    font-size:28px;
    line-height:1.15;
    font-weight:900;
}
.persistent-last-action-date{
    margin-top:5px;
    font-size:15px;
    font-weight:700;
}
.persistent-last-action-note{
    margin-top:10px;
    font-size:15px;
    font-weight:800;
}
@media(max-width:600px){
    .persistent-last-action-value{font-size:23px}
}


/* Admin grouped navigation for Attendance and Sales - Phase III 1.0.6 */
.topnav {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.nav-dropdown {
    position:relative;
}
.nav-dropdown summary {
    list-style:none;
    cursor:pointer;
    font-weight:700;
    color:#0f172a;
    user-select:none;
}
.nav-dropdown summary::-webkit-details-marker {
    display:none;
}
.nav-dropdown summary::after {
    content:" ▾";
    font-size:11px;
}
.nav-dropdown[open] summary::after {
    content:" ▴";
}
.nav-dropdown-menu {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    z-index:1000;
    min-width:210px;
    padding:8px;
    border:1px solid #dbe3ef;
    border-radius:10px;
    background:#ffffff;
    box-shadow:0 14px 30px rgba(15,23,42,.14);
}
.nav-dropdown-menu a {
    display:block;
    padding:10px 12px;
    border-radius:7px;
    white-space:nowrap;
}
.nav-dropdown-menu a:hover {
    background:#f1f5f9;
}
@media(max-width:800px) {
    .site-header {
        align-items:flex-start;
        gap:12px;
    }
    .topnav {
        gap:10px;
    }
    .nav-dropdown-menu {
        right:auto;
        left:0;
    }
}


/* Phase III 1.0.9 navigation refinements */
html {
    scroll-behavior: smooth;
}
.dashboard-anchor {
    scroll-margin-top: 95px;
}
.nav-dropdown-menu a:first-child {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
    font-weight: 800;
}


/* Phase III Sales Calendar & Scheduling 1.1.0 */
.sales-calendar {
    margin-top:16px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}
.calendar-weekdays,
.calendar-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
}
.calendar-weekdays > div {
    padding:10px;
    text-align:center;
    font-weight:800;
    background:#f8fafc;
    border-bottom:1px solid #dbe3ef;
}
.calendar-day {
    min-height:140px;
    padding:8px;
    border-right:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
}
.calendar-day:nth-child(7n) {
    border-right:0;
}
.calendar-empty {
    background:#f8fafc;
}
.calendar-today {
    box-shadow:inset 0 0 0 2px #2563eb;
}
.calendar-date-number {
    margin-bottom:6px;
    font-weight:900;
}
.calendar-event {
    margin:5px 0;
    padding:7px;
    border-left:4px solid;
    border-radius:6px;
    font-size:11px;
    line-height:1.35;
}
.calendar-event strong,
.calendar-event span {
    display:block;
}
.schedule-scheduled {
    border-color:#2563eb;
    background:#dbeafe;
    color:#1e3a8a;
}
.schedule-progress {
    border-color:#f59e0b;
    background:#fef3c7;
    color:#92400e;
}
.schedule-completed {
    border-color:#16a34a;
    background:#dcfce7;
    color:#14532d;
}
.schedule-cancelled {
    border-color:#64748b;
    background:#e2e8f0;
    color:#334155;
}
.schedule-missed {
    border-color:#dc2626;
    background:#fee2e2;
    color:#991b1b;
}
.calendar-event-time {
    font-weight:900;
}
.calendar-start-link {
    display:inline-block;
    margin-top:5px;
    font-weight:900;
}
.schedule-toolbar {
    display:flex;
    gap:8px;
    align-items:end;
    flex-wrap:wrap;
}
.schedule-form-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.priority-URGENT,
.priority-HIGH {
    font-weight:900;
    color:#b91c1c;
}
@media(max-width:900px) {
    .sales-calendar {
        overflow-x:auto;
    }
    .calendar-weekdays,
    .calendar-grid {
        min-width:850px;
    }
    .schedule-form-grid {
        grid-template-columns:1fr;
    }
}

/* Phase III Area Scheduler 1.1.5 */
.calendar-date-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}.calendar-area-clickable{cursor:pointer}.calendar-area-clickable:hover{background:#f8fbff}.calendar-area-add{border:0;border-radius:5px;padding:3px 6px;background:#e0f2fe;color:#075985;font-size:10px;font-weight:800;cursor:pointer}.calendar-area-event{display:block;width:100%;margin:5px 0;padding:7px;border:0;border-left:4px solid;border-radius:6px;text-align:left;font:inherit;cursor:pointer}.calendar-area-event strong,.calendar-area-event span,.calendar-area-event small{display:block}.calendar-area-event small{margin-top:2px;opacity:.85}.area-session-morning{border-color:#0284c7;background:#e0f2fe;color:#0c4a6e}.area-session-afternoon{border-color:#ea580c;background:#ffedd5;color:#7c2d12}.area-modal-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.55)}.area-modal-backdrop[hidden]{display:none}.area-modal{width:min(720px,100%);max-height:90vh;overflow:auto;padding:20px;border-radius:14px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.3)}.area-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.area-modal-head h2{margin:0}.area-modal-close{width:38px;height:38px;border:0;border-radius:50%;background:#e2e8f0;font-size:24px;cursor:pointer}.area-checkbox-fieldset{margin:14px 0;border:1px solid #cbd5e1;border-radius:10px;padding:12px}.area-checkbox-fieldset legend{padding:0 6px;font-weight:800}.area-checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.area-check{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc}.area-check input{width:auto;margin:0}.area-modal-actions{display:flex;gap:8px;flex-wrap:wrap}.area-delete-form{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.area-delete-button{background:#fee2e2;color:#991b1b}body.area-modal-open{overflow:hidden}@media(max-width:700px){.area-checkbox-grid{grid-template-columns:1fr 1fr}.area-modal{padding:15px}}