/* PunchIn System — Global Styles */

body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* Cards */
.card { transition: box-shadow .2s; }

/* Sidebar nav */
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav-link { padding: .5rem .75rem; transition: background .15s; font-size: .9rem; }
.nav-link:hover, .active-nav { background: rgba(255,255,255,.15) !important; border-radius: .5rem; }

/* Punch steps */
.steps { display: flex; flex-direction: column; gap: .75rem; }
.step  { display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem;
         border-radius: .75rem; background: #f8f9fa; border: 1px solid #e9ecef; transition: all .3s; }
.step-ok      { background: #d1e7dd; border-color: #a3cfbb; }
.step-fail    { background: #f8d7da; border-color: #f1aeb5; }
.step-pending { background: #fff3cd; border-color: #ffda6a; }
.step-icon    { font-size: 1.3rem; color: #0d6efd; width: 2rem; text-align: center; }
.step-text    { flex: 1; }
.step-status  { font-size: 1.1rem; }

/* Avatar */
.avatar-circle { width: 36px; height: 36px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Icon box */
.icon-box { width: 52px; height: 52px; display: flex; align-items: center;
            justify-content: center; flex-shrink: 0; }

/* Table */
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }

/* Half Day status badge (custom orange — not a default Bootstrap contextual color) */
.bg-halfday { background-color: #fd7e14 !important; color: #fff !important; }

/* Early Leave status badge (custom purple — distinct from Late/HalfDay/Absent colors) */
.bg-earlyleave { background-color: #6f42c1 !important; color: #fff !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 10px; }