/* Azolve Team Portal — global theme
   Brand: Azolve purple (#7C3AED family), light dashboard UI */
:root {
  --az-primary: #7C3AED;
  --az-primary-600: #6D28D9;
  --az-primary-50: #F5F3FF;
  --az-accent: #06B6D4;
  --az-success: #10B981;
  --az-warning: #F59E0B;
  --az-danger: #EF4444;
  --az-bg: #F4F5FA;
  --az-card: #FFFFFF;
  --az-text: #1E293B;
  --az-text-2: #475569;
  --az-text-3: #94A3B8;
  --az-border: #E2E8F0;
  --az-radius: 14px;
  --az-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --sidebar-w: 248px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--az-bg);
  color: var(--az-text);
  font-size: 14.5px;
  line-height: 1.55;
}
a { color: var(--az-primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
img { max-width: 100%; }

/* ---------- login screen ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 55%, #A78BFA 100%);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 20px;
  padding: 36px 34px; box-shadow: 0 24px 60px rgba(12,10,40,.35);
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-logo .mark {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 800; font-size: 22px; letter-spacing: -1px;
}
.login-logo .name { font-size: 22px; font-weight: 800; color: var(--az-text); letter-spacing: -.3px; }
.login-sub { color: var(--az-text-2); margin: 2px 0 24px; font-size: 13.5px; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: #171326; color: #CBD5E1; position: fixed;
  top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; z-index: 40;
  transition: transform .2s ease;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.sb-brand .mark {
  width: 38px; height: 38px; border-radius: 10px; font-weight: 800; font-size: 18px;
  background: linear-gradient(135deg, #7C3AED, #A78BFA); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sb-brand .t1 { color: #fff; font-weight: 700; font-size: 16px; }
.sb-brand .t2 { color: #8B85A8; font-size: 11px; letter-spacing: .4px; }
.sb-user { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin: 4px 10px 10px;
  background: rgba(255,255,255,.05); border-radius: 12px; }
.sb-user img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #7C3AED; background:#2b2540; }
.sb-av-fb { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #7C3AED; background: #2b2540; color: #A78BFA;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.sb-user .n { color: #fff; font-weight: 600; font-size: 13.5px; }
.sb-user .r { color: #8B85A8; font-size: 11.5px; text-transform: capitalize; }
.sb-nav { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.sb-cat { font-size: 10.5px; letter-spacing: 1.2px; color: #6D6787; text-transform: uppercase; padding: 14px 10px 6px; }
.sb-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: #B9B3D0; font-weight: 500; margin-bottom: 2px; border: 1px solid transparent;
}
.sb-item i { width: 20px; text-align: center; font-size: 15px; opacity: .9; }
.sb-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-item.active { background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(124,58,237,.12)); color: #fff; border-color: rgba(167,139,250,.4); }
.sb-item .badge { margin-left: auto; background: var(--az-danger); color: #fff; border-radius: 99px; font-size: 10.5px; padding: 1px 8px; font-weight: 700; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--az-border); padding: 12px 26px; display: flex; align-items: center; gap: 14px;
}
.topbar .pg { font-size: 17px; font-weight: 700; }
.topbar .sp { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--az-border); background: #fff;
}
.chip.on { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.chip.off { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.chip.time { color: var(--az-text-2); }
.content { padding: 24px 26px 60px; max-width: 1180px; width: 100%; }

/* ---------- shared components ---------- */
.card { background: var(--az-card); border: 1px solid var(--az-border); border-radius: var(--az-radius); box-shadow: var(--az-shadow); }
.card .hd { padding: 16px 20px; border-bottom: 1px solid var(--az-border); display: flex; align-items: center; gap: 10px; }
.card .hd .t { font-weight: 700; font-size: 15px; }
.card .hd .sub { color: var(--az-text-3); font-size: 12.5px; font-weight: 400; }
.card .bd { padding: 20px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .g4, .g5 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g2, .g4, .g5 { grid-template-columns: 1fr; } .sidebar { transform: translateX(-100%); } .main { margin-left: 0; } }

.stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.stat .ic { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.stat .lbl { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--az-text-3); font-weight: 700; }
.stat .val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.stat .foot { font-size: 12px; color: var(--az-text-2); }
.stat .ic.p { background: var(--az-primary-50); color: var(--az-primary); }
.stat .ic.g { background: #ECFDF5; color: var(--az-success); }
.stat .ic.w { background: #FFFBEB; color: var(--az-warning); }
.stat .ic.c { background: #ECFEFF; color: var(--az-accent); }
.stat .ic.d { background: #FEF2F2; color: var(--az-danger); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 13.5px;
  border: 1px solid transparent; transition: filter .15s;
}
.btn.primary { background: var(--az-primary); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: #fff; border-color: var(--az-border); color: var(--az-text-2); }
.btn.ghost:hover { border-color: var(--az-primary); color: var(--az-primary); }
.btn.danger { background: var(--az-danger); color: #fff; }
.btn.success { background: var(--az-success); color: #fff; }
.btn.sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--az-text-2); }
.field .hint { font-size: 11.5px; color: var(--az-text-3); }
.inp, select.inp, textarea.inp {
  width: 100%; border: 1px solid var(--az-border); border-radius: 10px; padding: 10px 13px;
  background: #fff; color: var(--az-text); outline: none;
}
.inp:focus { border-color: var(--az-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--az-text-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--az-border); background: #FAFAFD; }
.table td { padding: 12px 14px; border-bottom: 1px solid #EEF0F6; font-size: 13.5px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #FAFAFF; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.pill.ok { background: #ECFDF5; color: #047857; }
.pill.warn { background: #FFFBEB; color: #B45309; }
.pill.bad { background: #FEF2F2; color: #B91C1C; }
.pill.info { background: var(--az-primary-50); color: var(--az-primary); }
.pill.gray { background: #F1F5F9; color: #475569; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #EDE9FE; color: var(--az-primary);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.avatar.lg { width: 84px; height: 84px; font-size: 26px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .n { font-weight: 600; }
.who .d { color: var(--az-text-3); font-size: 12px; }

.toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; animation: pop .25s ease; }
.toast.ok { background: #065F46; }
.toast.err { background: #7F1D1D; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.empty { text-align: center; padding: 34px 20px; color: var(--az-text-3); }
.empty i { font-size: 30px; margin-bottom: 8px; display: block; opacity: .6; }

.progress { height: 8px; border-radius: 99px; background: #EDEBF7; overflow: hidden; }
.progress > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.progress.g > div { background: linear-gradient(90deg, #059669, #34D399); }
.progress.w > div { background: linear-gradient(90deg, #D97706, #FBBF24); }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal .dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--az-text-3); text-transform: uppercase; padding: 4px 0; }
.cal .day { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--az-border); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--az-text-2); position: relative; }
.cal .day.today { border-color: var(--az-primary); border-width: 2px; color: var(--az-primary); }
.cal .day.past { opacity: .45; }
.cal .day .dot { position: absolute; bottom: 5px; display: flex; gap: 3px; }
.cal .day .dot i { width: 6px; height: 6px; border-radius: 50%; }
.cal .day.full { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.cal .day.half { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.cal .day.holi { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.cal .day.off { background: #F8FAFC; color: #94A3B8; }

/* wall of fame */
.woF-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.woF { text-align: center; padding: 22px 14px; position: relative; }
.woF .rank { position: absolute; top: 10px; left: 12px; font-size: 20px; }
.woF img, .woF .avatar.lg { margin: 0 auto 10px; }
.woF .nm { font-weight: 700; }
.woF .rl { color: var(--az-text-3); font-size: 12px; margin-bottom: 10px; }
.woF .pts { font-size: 21px; font-weight: 800; color: var(--az-primary); }

/* typing test */
.tt-wrap { max-width: 900px; margin: 0 auto; }
.tt-para {
  font-family: 'Consolas', 'Courier New', monospace; font-size: 16.5px; line-height: 2;
  background: #FBFBFE; border: 1px solid var(--az-border); border-radius: 12px; padding: 20px 22px;
  white-space: pre-wrap; user-select: none; max-height: 280px; overflow: auto; scroll-behavior: auto;
}
.tt-para::-webkit-scrollbar { width: 8px; }
.tt-para::-webkit-scrollbar-thumb { background: #DDD6FE; border-radius: 99px; }
.tt-para .c-correct { color: #047857; background: #ECFDF5; border-radius: 3px; }
.tt-para .c-wrong { color: #B91C1C; background: #FEF2F2; border-radius: 3px; text-decoration: underline wavy #FCA5A5; }
.tt-para .c-cur { border-left: 2px solid var(--az-primary); }
.tt-inp { width: 100%; margin-top: 14px; font-family: 'Consolas', 'Courier New', monospace; font-size: 16.5px;
  padding: 14px 16px; border-radius: 12px; border: 2px solid var(--az-border); outline: none; resize: none; }
.tt-inp:focus { border-color: var(--az-primary); }
.tt-inp:disabled { background: #F1F5F9; color: #94A3B8; }
.tt-live { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.tt-live .m { background: #fff; border: 1px solid var(--az-border); border-radius: 12px; padding: 10px 18px; min-width: 92px; text-align: center; }
.tt-live .m .v { font-size: 21px; font-weight: 800; }
.tt-live .m .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--az-text-3); font-weight: 700; }

/* OFI/PIP */
.ofi-item { border-left: 4px solid var(--az-primary); padding: 14px 18px; background: #FAFAFF; border-radius: 0 12px 12px 0; margin-bottom: 12px; }
.ofi-item.pip { border-left-color: var(--az-danger); background: #FFF7F7; }
.ofi-item .h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ofi-item .msg { color: var(--az-text-2); }
.ofi-item .by { font-size: 12px; color: var(--az-text-3); margin-top: 8px; }

/* rules */
.rule-doc h3 { margin: 18px 0 8px; color: var(--az-primary-600); }
.rule-doc p { margin-bottom: 10px; color: var(--az-text-2); }
.rule-doc li { margin: 6px 0 6px 22px; color: var(--az-text-2); }

/* search */
.search { position: relative; }
.search .inp { padding-left: 36px; }
.search::before { content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute;
  left: 12px; top: 11px; color: var(--az-text-3); font-size: 13px; }

.hidden { display: none !important; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.spin { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: rot .8s linear infinite; display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }
.loading-page { text-align: center; padding: 80px 20px; color: var(--az-text-3); }

/* mobile menu toggle */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid var(--az-border); background: #fff; color: var(--az-text); font-size: 15px;
  }
  .sidebar.open { transform: none; }
  .content { padding: 18px 16px 60px; }
  .topbar { padding: 10px 14px; }
  .tb-right { display: none; }
}


/* ================================================================
   TIME MANAGEMENT (employee tracker) — v2
   ================================================================ */
.tm-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.tm-tools .inp { width:auto; }
.tm-ring { display:flex; gap:22px; align-items:center; padding:6px 4px 16px; flex-wrap:wrap; }
.tm-ring svg { flex-shrink:0; }
.tm-ring .kv { display:flex; flex-direction:column; gap:9px; min-width:230px; flex:1; }
.tm-ring .row { display:flex; justify-content:space-between; gap:14px; font-size:13px; }
.tm-ring .row span:first-child { color:var(--az-text-2); }
.tm-ring .row b { font-variant-numeric:tabular-nums; }
.tm-done { display:inline-flex; align-items:center; gap:7px; background:#ECFDF5; color:#047857; border:1px solid #A7F3D0;
  padding:5px 12px; border-radius:99px; font-weight:700; font-size:12.5px; }
.tm-pill { display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:3px 10px; font-size:11.5px; font-weight:700; }
.tm-pill.on { background:#ECFDF5; color:#047857; border:1px solid #A7F3D0; }
.tm-pill.off { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.tm-strip { display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px; }
.tm-shot { position:relative; width:172px; flex:0 0 172px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:1px solid var(--az-border); background:#F3F0FA; }
.tm-shot img { width:100%; height:96px; object-fit:cover; display:block; }
.tm-shot time { position:absolute; left:6px; bottom:6px; background:rgba(17,12,33,.78); color:#fff; font-size:10px;
  padding:2px 7px; border-radius:6px; font-weight:600; }
.tm-shot.cam { width:96px; flex:0 0 96px; }
.tm-shot.cam img { height:96px; border-radius:10px; }
.tm-approw { display:flex; align-items:center; gap:10px; font-size:12.5px; padding:4px 0; }
.tm-approw .nm { width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.tm-approw .bar { flex:1; height:8px; border-radius:99px; background:#EFEBF8; overflow:hidden; }
.tm-approw .bar i { display:block; height:100%; background:linear-gradient(90deg,#7C3AED,#00A09D); border-radius:99px; }
.tm-approw .tt { width:70px; text-align:right; font-variant-numeric:tabular-nums; color:var(--az-text-2); }
.tm-srctag { display:inline-block; padding:1px 8px; border-radius:6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.tm-srctag.manual { background:#EEF2FF; color:#4338CA; }
.tm-srctag.idle { background:#FFF7ED; color:#C2410C; }
.tm-srctag.popup { background:#FDF4FF; color:#A21CAF; }
.tm-srctag.auto { background:#F0FDF4; color:#15803D; }
.tm-evrow { display:flex; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px dashed var(--az-border); font-size:12.5px; }
.tm-evrow:last-child { border-bottom:none; }
.tm-evrow .t { font-variant-numeric:tabular-nums; color:var(--az-text-3); width:64px; flex-shrink:0; }
.tm-empty-caps { color:var(--az-text-3); font-size:12.5px; padding:10px 2px; }
.tm-b8 { font-weight:800; font-size:13px; }
.tm-b8.done { color:var(--az-success); }
.tm-b8.part { color:#B45309; }
.tm-b8.none { color:var(--az-text-3); }
.tm-lb { position:fixed; inset:0; background:rgba(10,7,20,.82); display:none; align-items:center; justify-content:center; z-index:300; flex-direction:column; gap:12px; padding:30px; }
.tm-lb.show { display:flex; }
.tm-lb img { max-width:92vw; max-height:80vh; border-radius:10px; border:2px solid #7C3AED; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.tm-lb .m { color:#EDE9F7; font-size:13px; background:rgba(23,16,42,.85); padding:6px 14px; border-radius:8px; }