/* PeopleOps HR V13 — complete visual redesign.
   Presentation only: no routes, permissions, business rules, database logic or form behavior changed. */
:root{
  --v13-bg:#f4f5fb;
  --v13-surface:rgba(255,255,255,.86);
  --v13-surface-solid:#ffffff;
  --v13-ink:#17192f;
  --v13-muted:#747991;
  --v13-line:#e7e8f0;
  --v13-primary:#6c4df6;
  --v13-primary-2:#836bff;
  --v13-cyan:#18b7c9;
  --v13-coral:#ff6b6b;
  --v13-green:#22a66f;
  --v13-amber:#d99118;
  --v13-violet-soft:#f0edff;
  --v13-cyan-soft:#eafafa;
  --v13-shadow:0 18px 55px rgba(35,31,78,.10);
  --v13-shadow-sm:0 8px 28px rgba(35,31,78,.07);
  --v13-radius:24px;
  --v13-radius-sm:16px;
}
*{box-sizing:border-box}
html{background:var(--v13-bg);scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 15% 0%,rgba(108,77,246,.08),transparent 28rem),
  radial-gradient(circle at 90% 20%,rgba(24,183,201,.07),transparent 24rem),
  var(--v13-bg);color:var(--v13-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(37,40,78,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(37,40,78,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 65%)}
a{color:var(--v13-primary);text-decoration:none}
a:hover{text-decoration:none}
button,.btn,a,.form-control,select,textarea{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}

/* shell */
.app-shell{grid-template-columns:268px minmax(0,1fr)!important;min-height:100vh}
.sidebar{width:268px!important;padding:20px 14px 28px!important;background:
  radial-gradient(circle at 18% 5%,rgba(131,107,255,.38),transparent 13rem),
  linear-gradient(180deg,#17172c 0%,#121528 48%,#0e1522 100%)!important;border:0!important;box-shadow:16px 0 55px rgba(18,21,40,.10);overflow:auto}
.sidebar:after{content:"";position:absolute;right:0;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent)}
.brand{height:62px!important;padding:0 10px 18px!important;gap:12px!important;font-weight:850!important;letter-spacing:-.35px!important;color:#fff!important}
.brand-mark{width:40px!important;height:40px!important;border-radius:14px!important;background:linear-gradient(145deg,#9c8bff,#6b4cf6 65%,#4b34cc)!important;box-shadow:0 12px 30px rgba(108,77,246,.35),inset 0 1px 0 rgba(255,255,255,.35)!important;position:relative;overflow:hidden}
.brand-mark:after{content:"";position:absolute;width:22px;height:22px;border:5px solid rgba(255,255,255,.16);border-radius:50%;right:-8px;top:-8px}
.primary-nav{display:grid!important;gap:4px!important}
.nav-label,.nav-section-label{padding:22px 12px 8px!important;color:#7f849f!important;font-size:9px!important;font-weight:900!important;letter-spacing:1.7px!important;text-transform:uppercase}
.nav-link{min-height:48px!important;padding:11px 12px!important;border-radius:15px!important;color:#b9bed1!important;font-size:13px!important;font-weight:720!important;gap:12px!important;border:1px solid transparent;position:relative;overflow:hidden}
.nav-link .icon{width:20px!important;height:20px!important}
.nav-link:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:translateX(3px)}
.nav-link.active{background:linear-gradient(135deg,rgba(137,114,255,.24),rgba(56,194,205,.10))!important;color:#fff!important;border-color:rgba(159,139,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.10)!important}
.nav-link.active:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 6px 6px 0;background:linear-gradient(#9b88ff,#47d9e3);box-shadow:0 0 16px rgba(131,107,255,.75)}
.main{background:transparent!important;min-width:0}
.topbar{height:74px!important;padding:0 30px!important;background:rgba(249,250,255,.76)!important;backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid rgba(220,222,235,.75)!important;position:sticky!important;top:0;z-index:55}
.topbar-title{font-size:13px!important;font-weight:760!important;color:#5e637c!important}
.user-menu{gap:10px!important}
.avatar{width:40px!important;height:40px!important;border-radius:14px!important;background:linear-gradient(145deg,#f0edff,#e9f8fb)!important;color:#5840db!important;border:1px solid #ded9ff!important;box-shadow:0 6px 18px rgba(83,64,201,.08)}
.notification-trigger{width:42px!important;height:42px!important;border-radius:14px!important;background:#fff!important;border:1px solid var(--v13-line)!important;box-shadow:0 6px 16px rgba(37,39,77,.05)}
.notification-trigger:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,39,77,.10)}
.notification-panel{border:1px solid var(--v13-line)!important;border-radius:22px!important;box-shadow:0 30px 90px rgba(28,30,68,.22)!important;overflow:hidden}
.content{padding:30px 34px 70px!important;max-width:1640px!important}

/* generic page UI */
.page-head{margin-bottom:24px!important;gap:16px}.page-title{font-size:29px!important;line-height:1.1!important;font-weight:850!important;letter-spacing:-.9px!important;color:#17192f!important}.page-subtitle{color:var(--v13-muted)!important;font-size:13px!important}.eyebrow{color:#7770b5!important;font-size:10px!important;font-weight:900!important;letter-spacing:1.5px!important;text-transform:uppercase}
.card,.surface-panel{background:var(--v13-surface)!important;backdrop-filter:blur(14px);border:1px solid rgba(223,224,235,.9)!important;border-radius:var(--v13-radius)!important;box-shadow:var(--v13-shadow-sm)!important;overflow:hidden}
.card-head,.surface-panel-head{background:rgba(255,255,255,.55)!important;border-bottom:1px solid #ececf3!important}.card-body{padding:22px!important}.card-title{font-weight:800!important;letter-spacing:-.25px}
.btn{border-radius:14px!important;min-height:44px!important;padding:10px 16px!important;font-weight:780!important;border-width:1px!important}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#7759fb,#5f42e6)!important;border-color:#6748ed!important;box-shadow:0 10px 24px rgba(108,77,246,.20)!important}.btn-primary:hover{box-shadow:0 14px 34px rgba(108,77,246,.28)!important}.btn-secondary{background:rgba(255,255,255,.9)!important;border-color:#dde0ea!important;color:#34384f!important}.btn-success{background:linear-gradient(135deg,#24aa75,#168b61)!important}.btn-danger{background:#fff0f1!important;border-color:#ffd0d2!important;color:#c9464c!important}.btn-sm{min-height:36px!important;padding:7px 11px!important;border-radius:11px!important}
.form-label{font-size:11px!important;color:#62677f!important;font-weight:800!important;letter-spacing:.15px}.form-control{min-height:46px!important;border:1px solid #dfe1eb!important;border-radius:14px!important;background:rgba(255,255,255,.92)!important;padding:11px 13px!important;color:#20243a!important}.form-control:focus{border-color:#9b8af9!important;box-shadow:0 0 0 4px rgba(108,77,246,.10)!important;background:#fff!important}.form-help{color:#8a8ea3!important}.alert{border-radius:16px!important;padding:13px 15px!important;border-width:1px!important;box-shadow:none!important}
.table-wrap{border-radius:18px!important;border:1px solid #ececf2!important;background:#fff;overflow:auto}.table{font-size:13px!important}.table th{background:#f8f8fc!important;color:#777c94!important;font-size:9px!important;letter-spacing:1px!important;text-transform:uppercase;padding:12px 14px!important}.table td{padding:14px!important;border-color:#f0f0f5!important}.table tbody tr:hover{background:#faf9ff!important}
.badge{border-radius:999px!important;padding:6px 10px!important;font-size:9px!important;font-weight:850!important;letter-spacing:.45px!important;text-transform:uppercase}

/* EMPLOYEE DASHBOARD - completely new visual language */
.role-employee .employee-dashboard{display:grid!important;gap:18px!important;max-width:1380px;margin:0 auto}
.role-employee .workday-welcome{position:relative;display:flex!important;justify-content:space-between;align-items:flex-end!important;gap:20px;padding:8px 4px 2px!important;animation:v13-rise .55s both}
.role-employee .workday-welcome:before{content:"";position:absolute;left:-12px;top:-12px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,rgba(108,77,246,.13),transparent 68%);filter:blur(2px);z-index:-1}
.role-employee .workday-welcome h1{font-size:34px!important;line-height:1.06!important;font-weight:900!important;letter-spacing:-1.4px!important;margin:2px 0 6px!important;color:#17192f!important}
.role-employee .workday-welcome p{color:#6f748b!important}.role-employee .workday-welcome-status{background:#fff!important;border:1px solid #e4e5ed!important;border-radius:18px!important;padding:11px 14px!important;box-shadow:var(--v13-shadow-sm)!important}
.role-employee .workday-hero{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)!important;gap:18px!important;animation:v13-rise .6s .05s both}
.role-employee .workday-hero-main{position:relative!important;overflow:hidden!important;padding:28px!important;border:0!important;border-radius:30px!important;background:
  radial-gradient(circle at 88% 8%,rgba(117,213,225,.28),transparent 30%),
  radial-gradient(circle at 10% 95%,rgba(154,130,255,.35),transparent 31%),
  linear-gradient(145deg,#19172f 0%,#25214d 58%,#1d3b50 100%)!important;color:#fff!important;box-shadow:0 28px 70px rgba(28,26,72,.24)!important;min-height:275px}
.role-employee .workday-hero-main:before,.role-employee .workday-hero-main:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.13);pointer-events:none;animation:v13-orbit 13s linear infinite}
.role-employee .workday-hero-main:before{width:220px;height:220px;right:-60px;top:-100px}.role-employee .workday-hero-main:after{width:120px;height:120px;right:65px;top:-55px;animation-direction:reverse;animation-duration:9s}
.role-employee .workday-hero-main .eyebrow{color:#bdb3ff!important}.role-employee .workday-hero-main h2{color:#fff!important;font-size:34px!important;font-weight:900!important;letter-spacing:-1px!important}.role-employee .workday-hero-main p,.role-employee .workday-hero-main span,.role-employee .workday-hero-main small{color:#cbc9e4!important}
.role-employee .workday-progress{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important;padding:16px!important;backdrop-filter:blur(8px)}
.role-employee .workday-progress-track{height:8px!important;background:rgba(255,255,255,.10)!important;border-radius:999px!important;overflow:hidden}.role-employee .workday-progress-bar{background:linear-gradient(90deg,#55e0df,#9a83ff)!important;box-shadow:0 0 18px rgba(85,224,223,.35)}
.role-employee .workday-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:14px!important}.role-employee .workday-metrics>div{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:17px!important;padding:13px!important}.role-employee .workday-metrics strong{display:block;color:#fff!important;font-size:19px!important;margin-top:4px}
.role-employee .workday-action-panel{position:relative!important;overflow:hidden!important;padding:25px!important;border-radius:30px!important;border:1px solid #dfe1eb!important;background:linear-gradient(145deg,#ffffff,#f6f4ff)!important;color:#181a2e!important;box-shadow:var(--v13-shadow)!important;min-height:275px}.role-employee .workday-action-panel:before{content:"";position:absolute;inset:auto -50px -70px auto;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(108,77,246,.14),transparent 70%)}.role-employee .workday-action-panel .eyebrow{color:#705be1!important}.role-employee .workday-action-panel h2,.role-employee .workday-action-panel h3{color:#17192f!important;font-size:27px!important;font-weight:900!important;letter-spacing:-.6px!important}.role-employee .workday-action-panel p,.role-employee .workday-action-panel span,.role-employee .workday-action-panel small{color:#747991!important}.role-employee .workday-action-panel .btn,.role-employee .workday-action-panel a.btn{background:linear-gradient(135deg,#7759fb,#5b3edc)!important;color:#fff!important;border:0!important;min-height:50px!important;border-radius:15px!important;box-shadow:0 14px 28px rgba(108,77,246,.22)!important;position:relative;z-index:1}
.role-employee .workday-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;animation:v13-rise .6s .11s both}.role-employee .workday-kpis article{position:relative;overflow:hidden;background:rgba(255,255,255,.82)!important;border:1px solid #e5e6ef!important;border-radius:20px!important;padding:17px 18px!important;box-shadow:0 9px 30px rgba(37,36,75,.05)!important}.role-employee .workday-kpis article:after{content:"";position:absolute;right:-16px;top:-19px;width:58px;height:58px;border-radius:50%;background:var(--v13-violet-soft)}.role-employee .workday-kpis span{font-size:9px!important;font-weight:900!important;letter-spacing:1.1px!important;text-transform:uppercase;color:#8a8da1!important}.role-employee .workday-kpis strong{display:block;font-size:19px!important;margin:6px 0 2px;color:#202238!important}.role-employee .workday-kpis small{color:#8a8ea3!important}
.attendance-alerts{display:grid;gap:10px}.attendance-alert{border-radius:18px!important;padding:14px 16px!important;box-shadow:none!important}.attendance-alert.is-danger{background:#fff2f3!important;border:1px solid #ffd8db!important}.attendance-alert.is-warning{background:#fff8e8!important;border:1px solid #ffedbe!important}
.role-employee .employee-dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;gap:18px!important;animation:v13-rise .65s .15s both}.role-employee .surface-panel{border-radius:24px!important}.surface-panel-head{padding:18px 20px!important;display:flex;justify-content:space-between;align-items:center}.surface-panel-head h2{font-size:17px!important;font-weight:860!important;letter-spacing:-.35px!important}.workday-timeline-panel{grid-column:1}.attendance-health-panel{grid-column:2}.weekly-panel,.upcoming-panel,.rules-panel{grid-column:1/-1}
.workday-timeline{padding:5px 20px 16px!important}.workday-timeline li{position:relative;padding:15px 0 15px 40px!important;border-bottom:1px dashed #e8e7f1!important}.workday-timeline li:last-child{border-bottom:0}.timeline-marker{left:5px!important;width:18px!important;height:18px!important;border:5px solid #edeaff!important;background:#fff!important;box-shadow:0 0 0 1px #c9c1ff!important}.workday-timeline li.is-complete .timeline-marker{background:#6c4df6!important;border-color:#ded8ff!important}.workday-timeline li.is-current .timeline-marker{background:#22b7c7!important;border-color:#d5f7f8!important;box-shadow:0 0 0 1px #5bd2da,0 0 18px rgba(34,183,199,.25)!important}.workday-timeline time{font-weight:820!important;color:#5d6177!important}.health-summary{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:18px!important}.health-summary>div{padding:16px!important;border:1px solid #e9e9f2!important;border-radius:18px!important;background:linear-gradient(145deg,#fff,#faf9ff)!important}.health-summary strong{font-size:25px!important;color:#201f3a!important}.weekly-snapshot{gap:8px!important;padding:16px!important}.weekly-day{min-height:92px!important;border-radius:17px!important;border:1px solid #e9e9f1!important;background:#fff!important;box-shadow:none!important}.weekly-day.is-today{border-color:#a99afd!important;box-shadow:0 0 0 3px rgba(108,77,246,.07)!important}.weekly-day i{background:#d9dbe5!important}.weekly-day.status-present i{background:#1aae77!important}.weekly-day.status-half_day i{background:#d99718!important}.weekly-day.status-absent i{background:#e85f65!important}.upcoming-list>a{border-bottom:1px dashed #e8e8ef!important;padding:14px 18px!important}.upcoming-list>a:hover{background:#faf9ff!important}.rules-list>div{padding:16px 18px!important;border-bottom:1px dashed #e8e8ef!important}.rule-dot{background:linear-gradient(#826cff,#54d3dc)!important}

/* calendar / attendance */
.calendar-card{border-radius:26px!important;background:rgba(255,255,255,.82)!important;border:1px solid #e4e5ed!important;box-shadow:var(--v13-shadow-sm)!important}.attendance-calendar{border-radius:22px!important;overflow:hidden!important;border:1px solid #e9e9f0!important}.calendar-weekdays{background:#f6f5fb!important}.calendar-weekdays div{padding:13px 9px!important;color:#777c94!important;font-size:9px!important;font-weight:900!important;letter-spacing:1px!important}.calendar-day{min-height:116px!important;padding:11px!important;background:#fff!important;border-color:#efeff4!important;transition:.18s ease}.calendar-day:hover{transform:translateY(-2px);z-index:2;box-shadow:0 12px 28px rgba(56,51,105,.11)!important}.calendar-day.status-holiday{background:#eefaf7!important}.calendar-day.status-week_off{background:#f5f3ff!important}.calendar-day.status-paid_leave,.calendar-day.status-leave{background:#f8f0ff!important}.calendar-day.status-half_day{background:#fff8df!important}.calendar-day.status-present{background:#f1fbf7!important}.calendar-number{font-weight:850!important}.attendance-day-modal{backdrop-filter:blur(8px)}.attendance-day-modal-card{border-radius:28px!important;border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 36px 100px rgba(31,29,68,.30)!important;animation:v13-pop .22s both}.attendance-day-detail-grid>div{border-radius:16px!important;background:#fafaff!important;border:1px solid #e9e9f1!important}

/* leave */
.leave-calendar-card{border-radius:24px!important;border:1px solid #e7e7ef!important;background:#fff!important}.leave-calendar-day{border-radius:14px!important;min-height:48px!important;border:1px solid #ececf3!important;background:#fff!important;font-weight:760!important}.leave-calendar-day:not(:disabled):hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(75,64,157,.10)!important;border-color:#b9adff!important}.leave-calendar-day.is-selected{background:linear-gradient(135deg,#7659f9,#6246e6)!important;color:#fff!important;border-color:#6549e8!important;box-shadow:0 8px 20px rgba(108,77,246,.23)!important}.leave-calendar-day:disabled{background:#f6f6f9!important;color:#b3b4c0!important;cursor:not-allowed!important}.leave-impact-after.is-negative{background:#fff0f1!important;border:1px solid #ffcfd4!important;color:#b9343b!important}.leave-balance-grid>div{border-radius:18px!important}

/* salary */
.salary-day-stats{gap:12px!important}.salary-day-stats>div{background:linear-gradient(145deg,#fff,#faf9ff)!important;border:1px solid #e7e7ef!important;border-radius:19px!important;padding:17px!important}.salary-day-stats span{color:#85899e!important;font-size:9px!important;letter-spacing:1px!important;font-weight:900!important;text-transform:uppercase}.salary-day-stats strong{font-size:24px!important;color:#20223a!important}.salary-slip-list article,.salary-slip-current{border-radius:18px!important;border:1px solid #e7e7ef!important;background:#fff!important}

/* profile */
.profile-grid-v6{gap:18px!important}.profile-grid-v6>.card{border-radius:24px!important}.profile-photo-preview{border-radius:20px!important;overflow:hidden;background:linear-gradient(145deg,#eeeaff,#eafafa)!important}.key-value dt{color:#8a8da1!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.8px}.key-value dd{font-weight:760!important;color:#2a2d43!important}

/* super admin */
.role-admin .content{max-width:1780px!important}.role-admin .card,.role-admin .attendance-day,.role-admin .control-employee-card{border-radius:22px!important}.role-admin .quick-links{gap:12px!important}.role-admin .quick-links a{background:linear-gradient(145deg,#fff,#faf9ff)!important;border:1px solid #e6e6ef!important;border-radius:17px!important;box-shadow:0 7px 22px rgba(37,36,75,.045)!important}.role-admin .quick-links a:hover{transform:translateY(-3px);border-color:#c4baff!important;box-shadow:0 13px 28px rgba(73,61,161,.10)!important}.role-admin .attendance-day-head{background:linear-gradient(145deg,#fff,#faf9ff)!important;padding:16px 18px!important}.role-admin .control-employee-card{background:#fff!important;border:1px solid #e8e8ef!important;box-shadow:var(--v13-shadow-sm)!important}

/* camera */
.camera-shell{max-width:720px!important}.camera-stage{border-radius:28px!important;box-shadow:0 28px 70px rgba(26,27,53,.24)!important;border:3px solid rgba(255,255,255,.75)!important;overflow:hidden}.network-status{border-radius:18px!important}.camera-controls .btn{min-height:50px!important}

/* auth */
.auth-page{display:grid!important;grid-template-columns:minmax(420px,44%) 1fr!important;min-height:100vh;background:#f8f8fc!important}.auth-panel{padding:48px!important;background:linear-gradient(145deg,#fff,#f8f7ff)!important}.auth-card{max-width:430px!important}.auth-card .brand{color:#24243c!important;height:auto!important}.auth-card .brand-mark{color:#fff!important}.auth-title{font-size:38px!important;font-weight:900!important;letter-spacing:-1.2px!important}.auth-subtitle{color:#7a7e92!important}.login-form .form-control{min-height:52px!important}.login-form .btn{min-height:52px!important;border-radius:15px!important}.auth-visual{position:relative!important;overflow:hidden!important;background:
  radial-gradient(circle at 20% 20%,rgba(113,221,228,.22),transparent 20rem),
  radial-gradient(circle at 75% 78%,rgba(144,118,255,.34),transparent 28rem),
  linear-gradient(145deg,#16152a,#24204d 55%,#19394b)!important}.auth-visual:before,.auth-visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;animation:v13-orbit 15s linear infinite}.auth-visual:before{width:520px;height:520px;right:-190px;top:-110px}.auth-visual:after{width:300px;height:300px;right:130px;top:100px;animation-direction:reverse;animation-duration:11s}.auth-copy{position:relative;z-index:2;max-width:620px}.auth-copy h1{font-size:52px!important;line-height:1.02!important;letter-spacing:-2px!important}.auth-copy p{color:#c9c7df!important}.metric-row{display:flex;gap:14px;flex-wrap:wrap}.metric{border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.06)!important;border-radius:17px!important;padding:14px!important;backdrop-filter:blur(8px)}

/* motion */
@keyframes v13-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes v13-pop{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes v13-orbit{to{transform:rotate(360deg)}}
@keyframes v13-pulse{0%,100%{box-shadow:0 0 0 0 rgba(108,77,246,.16)}50%{box-shadow:0 0 0 8px rgba(108,77,246,0)}}
.content>.card,.content>.page-head,.content>.grid{animation:v13-rise .5s both}.content>.card:nth-child(3),.content>.grid:nth-child(3){animation-delay:.06s}.content>.card:nth-child(4),.content>.grid:nth-child(4){animation-delay:.11s}

/* MOBILE — new app-like experience */
.mobile-bottom-nav{display:none}.sidebar-backdrop{display:none}.mobile-only{display:none}.topbar-mobile-brand{display:none}
@media(max-width:1100px){.app-shell{grid-template-columns:232px minmax(0,1fr)!important}.sidebar{width:232px!important}.content{padding:24px!important}.role-employee .workday-hero{grid-template-columns:1fr 300px!important}.role-employee .workday-kpis{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:800px){
  html,body{font-size:14px;background:#f5f5fb}.app-shell{display:block!important}.main{min-height:100dvh!important}.content{padding:20px 14px 104px!important;max-width:none!important}
  .topbar{height:66px!important;padding:0 14px!important;background:rgba(248,248,253,.84)!important;backdrop-filter:blur(22px) saturate(150%)!important}.topbar-title{display:none!important}.topbar-leading{display:flex!important;align-items:center!important;gap:10px!important}.topbar-mobile-brand{display:block!important;font-size:17px!important;font-weight:900!important;letter-spacing:-.5px!important;color:#26253e!important}.mobile-menu{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border:1px solid #e0e0e9!important;border-radius:14px!important;background:#fff!important;color:#2c2d43!important;font-size:0!important;box-shadow:0 6px 18px rgba(35,34,68,.06)!important}.mobile-menu:before{content:'☰';font-size:20px}.user-role,.topbar-signout{display:none!important}.avatar{width:38px!important;height:38px!important;border-radius:13px!important}.notification-trigger{width:38px!important;height:38px!important;border-radius:13px!important}
  .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(86vw,320px)!important;transform:translateX(-105%);transition:transform .25s cubic-bezier(.2,.75,.2,1)!important;z-index:100!important;padding:17px 14px 30px!important;box-shadow:28px 0 80px rgba(18,19,43,.28)!important}.sidebar.open{transform:none}.sidebar-backdrop{display:block!important;position:fixed;inset:0;background:rgba(16,17,33,.52);backdrop-filter:blur(3px);border:0;opacity:0;visibility:hidden;transition:.2s;z-index:90}.menu-open .sidebar-backdrop{opacity:1;visibility:visible}.menu-open{overflow:hidden}.mobile-only{display:block!important}.sidebar-account{margin-top:24px;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.09)}.sidebar-person{display:flex;gap:11px;align-items:center}.sidebar-person span{display:block;color:#9298ad;font-size:11px}.sidebar-signout{width:100%;margin-top:12px;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.11)!important;color:#fff!important}
  .page-head{flex-direction:column!important;align-items:flex-start!important;gap:13px!important;margin-bottom:18px!important}.page-title{font-size:27px!important}.actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.actions .btn{width:100%}
  .grid-2,.grid-3,.grid-4,.form-row,.profile-grid-v6,.policy-grid{grid-template-columns:1fr!important}.filter-bar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}.filter-bar .form-group{min-width:0!important}.table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}.table{min-width:720px!important}
  .role-employee .employee-dashboard{gap:14px!important}.role-employee .workday-welcome{align-items:flex-start!important;padding:2px 2px 0!important}.role-employee .workday-welcome h1{font-size:29px!important;letter-spacing:-1px!important}.role-employee .workday-welcome-status{display:none!important}.role-employee .workday-hero{grid-template-columns:1fr!important;gap:13px!important}.role-employee .workday-hero-main{min-height:255px!important;border-radius:26px!important;padding:22px 18px!important}.role-employee .workday-hero-main h2{font-size:30px!important}.role-employee .workday-action-panel{min-height:0!important;border-radius:24px!important;padding:20px 18px!important}.role-employee .workday-action-panel h2,.role-employee .workday-action-panel h3{font-size:24px!important}.role-employee .workday-kpis{grid-template-columns:1fr 1fr!important;gap:9px!important}.role-employee .workday-kpis article{border-radius:18px!important;padding:14px!important}.role-employee .employee-dashboard-grid{grid-template-columns:1fr!important;gap:13px!important}.role-employee .employee-dashboard-grid>*{grid-column:1!important}.role-employee .surface-panel{border-radius:21px!important}.surface-panel-head{padding:16px!important}.health-summary{grid-template-columns:1fr 1fr!important;padding:14px!important}.weekly-snapshot{overflow-x:auto!important;display:flex!important;padding:14px!important;scroll-snap-type:x proximity}.weekly-day{min-width:92px!important;scroll-snap-align:start}.workday-timeline{padding:4px 15px 14px!important}
  .mobile-bottom-nav{display:grid!important;position:fixed!important;z-index:75!important;left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:70px!important;padding:7px!important;border:1px solid rgba(222,222,235,.92)!important;border-radius:24px!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(24px) saturate(155%)!important;box-shadow:0 18px 50px rgba(31,31,67,.20)!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}.admin-mobile-bottom{grid-template-columns:repeat(4,minmax(0,1fr))!important}.mobile-bottom-link{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;border-radius:17px!important;color:#85899d!important;min-width:0!important;position:relative}.mobile-bottom-link .icon{width:20px!important;height:20px!important}.mobile-bottom-link small{font-size:8.5px!important;font-weight:800!important}.mobile-bottom-link.active{background:linear-gradient(145deg,#efecff,#eefafa)!important;color:#6046de!important;box-shadow:inset 0 0 0 1px rgba(108,77,246,.07)!important}.mobile-bottom-link.active:before{content:"";position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:#6c4df6;box-shadow:0 0 10px rgba(108,77,246,.55)}
  .calendar-card{overflow-x:auto!important}.attendance-calendar{min-width:680px!important}.calendar-day{min-height:98px!important}.notification-panel{top:60px!important;left:12px!important;right:12px!important;width:auto!important;max-height:72vh!important}.camera-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}.camera-controls .btn{width:100%!important;min-width:0!important}.attendance-camera-page .content{padding-bottom:25px!important}
}
@media(max-width:520px){
  .content{padding-left:11px!important;padding-right:11px!important}.topbar{padding:0 11px!important}.page-title{font-size:24px!important}.actions{grid-template-columns:1fr!important}.filter-bar{grid-template-columns:1fr!important}.card,.surface-panel{border-radius:20px!important}.card-body{padding:15px!important}.role-employee .workday-welcome h1{font-size:27px!important}.role-employee .workday-hero-main{padding:20px 16px!important;min-height:246px!important}.role-employee .workday-hero-main h2{font-size:28px!important}.role-employee .workday-metrics>div{padding:11px 8px!important}.role-employee .workday-metrics strong{font-size:16px!important}.role-employee .workday-kpis{grid-template-columns:1fr 1fr!important}.role-employee .workday-kpis article:last-child:nth-child(odd){grid-column:1/-1}.health-summary{grid-template-columns:1fr!important}.salary-day-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}.attendance-day-modal{padding:9px!important}.attendance-day-modal-card{padding:18px 14px!important;border-radius:24px!important}.attendance-day-detail-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.auth-page{display:block!important;min-height:100dvh!important}.auth-panel{min-height:100dvh!important;padding:28px 19px!important}.auth-visual{display:none!important}.auth-card{max-width:none!important}.auth-title{font-size:34px!important}.mobile-bottom-nav{left:7px!important;right:7px!important;bottom:calc(7px + env(safe-area-inset-bottom))!important;height:67px!important;border-radius:22px!important}
}
@media(max-width:800px) and (max-height:620px){.mobile-bottom-nav{height:60px!important}.content{padding-bottom:88px!important}.sidebar{overflow-y:auto!important}}

/* accessibility */
:focus-visible{outline:3px solid rgba(108,77,246,.24)!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}