/* shared.css — included by all pages */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f5f0;--surface:#fff;--border:#e5e5e0;--text:#1a1a1a;--muted:#666;
  --green:#0F6E56;--green-bg:#E1F5EE;
  --amber:#854F0B;--amber-bg:#FAEEDA;
  --red:#A32D2D;  --red-bg:#FCEBEB;
  --blue:#185FA5; --blue-bg:#E6F1FB;
  --purple:#3C3489;--purple-bg:#EEEDFE;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}

/* Layout */
.shell{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);
         display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:10}
.main{margin-left:220px;flex:1;min-height:100vh;display:flex;flex-direction:column}
.topnav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.5rem;
        height:54px;display:flex;align-items:center;justify-content:space-between;
        position:sticky;top:0;z-index:5}
.content{padding:1.5rem;flex:1}

/* Sidebar */
.sb-logo{padding:1.1rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.sb-logo .icon{width:34px;height:34px;background:#1a1a1a;border-radius:9px;color:#fff;
               display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sb-logo .title{font-size:14px;font-weight:600}
.sb-logo .sub{font-size:11px;color:var(--muted)}
.sb-nav{padding:.6rem 0;flex:1}
.sb-item{display:flex;align-items:center;gap:9px;padding:.55rem 1rem;font-size:13px;
         cursor:pointer;color:var(--muted);border-radius:8px;margin:1px 8px;
         border:none;background:none;width:calc(100% - 16px);text-align:left;font-family:inherit}
.sb-item:hover,.sb-item.active{background:#f0f0eb;color:var(--text)}
.sb-item.active{font-weight:500}
.sb-foot{padding:.9rem;border-top:1px solid var(--border)}
.sb-user strong{display:block;font-size:13px;margin-bottom:2px}
.sb-user span{font-size:11px;color:var(--muted)}

/* Topnav */
.page-title{font-size:15px;font-weight:500}
.nav-right{display:flex;align-items:center;gap:10px}
.date-pill{font-size:12px;color:var(--muted);background:var(--bg);padding:4px 10px;border-radius:20px}

/* Buttons */
.btn{padding:7px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;
     background:var(--surface);cursor:pointer;color:var(--text);font-weight:500;
     font-family:inherit;transition:background .12s}
.btn:hover{background:var(--bg)}
.btn.primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.btn.primary:hover{background:#333}
.btn.success{background:var(--green);color:#fff;border-color:var(--green)}
.btn.success:hover{background:#0a5040}
.btn.danger{color:var(--red);border-color:#fca5a5}
.btn.danger:hover{background:var(--red-bg)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:1.5rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat .lbl{font-size:11px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:24px;font-weight:600}
.stat .val.g{color:var(--green)}.stat .val.a{color:var(--amber)}.stat .val.r{color:var(--red)}
.stat .bar{height:5px;background:var(--bg);border-radius:3px;margin-top:8px;overflow:hidden}
.stat .bar-f{height:100%;border-radius:3px;background:var(--green)}

/* Table */
.table-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.5rem}
.table-box.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
   padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;background:var(--bg);white-space:nowrap}
td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafaf8}
.mono{font-family:ui-monospace,monospace;font-size:12px}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.badge.present{background:var(--green-bg);color:var(--green)}
.badge.wfh{background:var(--purple-bg);color:var(--purple)}
.badge.late{background:var(--amber-bg);color:var(--amber)}
.badge.absent{background:var(--red-bg);color:var(--red)}
.badge.leave{background:var(--blue-bg);color:var(--blue)}
.badge.pending{background:var(--amber-bg);color:var(--amber)}
.badge.approved{background:var(--green-bg);color:var(--green)}
.badge.rejected{background:var(--red-bg);color:var(--red)}

/* Avatar */
.avatar{width:30px;height:30px;border-radius:50%;background:var(--purple-bg);color:var(--purple);
        display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
        flex-shrink:0;vertical-align:middle;margin-right:7px}

/* Section header */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.sec-head h2{font-size:15px;font-weight:500}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Forms */
input,select,textarea{font-size:13px;padding:7px 10px;border:1px solid var(--border);
    border-radius:8px;background:var(--surface);color:var(--text);outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:#999;box-shadow:0 0 0 2px rgba(0,0,0,.06)}
textarea{resize:vertical;min-height:70px}
label.fl{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:4px}

/* Modal */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;
         align-items:center;justify-content:center;padding:1rem}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;
       padding:1.5rem;width:500px;max-width:100%;max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:500;margin-bottom:1.2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-row{display:flex;flex-direction:column;gap:4px}
.form-row input,.form-row select,.form-row textarea{width:100%}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:1.2rem;
            padding-top:1rem;border-top:1px solid var(--border)}

/* Session boxes */
.sessions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.session-box{border:1px solid var(--border);border-radius:10px;padding:12px}
.session-box .sh{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;
                 letter-spacing:.04em;margin-bottom:10px}
.session-box .times{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Tabs */
.tabs{display:flex;gap:2px;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}
.tab{padding:9px 16px;font-size:13px;cursor:pointer;border:none;background:none;color:var(--muted);
     border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;font-family:inherit}
.tab.active{color:var(--text);border-bottom-color:var(--text)}

/* Toast */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#1a1a1a;color:#fff;
       padding:10px 16px;border-radius:8px;font-size:13px;z-index:999;
       opacity:0;transform:translateY(6px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* Check-in card (employee portal) */
.checkin-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem}
.checkin-card .label{font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.checkin-card .time-big{font-size:36px;font-weight:700;font-family:ui-monospace,monospace;letter-spacing:.02em}
.checkin-card .status-row{display:flex;align-items:center;gap:8px;margin:10px 0}
.locked-icon{font-size:11px;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:20px}

@media(max-width:680px){
  .sidebar{width:200px}
  .main{margin-left:200px}
  .form-grid{grid-template-columns:1fr}
  .sessions{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
  .sidebar{position:relative;width:100%;height:auto;flex-direction:row}
  .main{margin-left:0}
}