:root{font-family:Manrope,sans-serif;color:#f5f7fb;background:radial-gradient(circle at top left,rgba(70,117,255,.24),transparent 28%),radial-gradient(circle at bottom right,rgba(0,214,170,.18),transparent 24%),#0a1020;line-height:1.5;font-weight:500;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(41,121,214,.16),transparent 24%),radial-gradient(circle at bottom right,rgba(6,182,212,.12),transparent 26%),linear-gradient(135deg,#020617,#0f172a,#020617);color:#f5f7fb}button,input,select,textarea{font:inherit}button{border:0;border-radius:16px;background:linear-gradient(135deg,#38c3ff,#13c5dd);color:#08111f;cursor:pointer;font-weight:800;padding:.85rem 1.2rem;letter-spacing:.01em;box-shadow:0 14px 28px #0a142438;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,background .18s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 36px #0a142447}button:disabled{cursor:wait;opacity:.7;transform:none;box-shadow:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid rgba(56,195,255,.7);outline-offset:2px}input,select,textarea{width:100%;margin-top:.45rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#080e1cd6;color:#f5f7fb;padding:.9rem 1rem;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}#root{min-height:100vh}.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{display:flex;flex-direction:column;justify-content:flex-start;gap:2rem;padding:2rem 1.5rem;background:#070c18e6;border-right:1px solid rgba(255,255,255,.08)}.sidebar__brand{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;min-width:0}.sidebar__logo-frame{width:72px;min-width:72px;height:60px;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}.sidebar__logo{display:block;width:92px;height:92px;object-fit:contain;transform:translate(-5px) translateY(-1px)}.sidebar__brand h1{font-size:1.15rem;font-weight:700;line-height:1;white-space:nowrap;margin-left:-.15rem}.sidebar h1,.header h2,.panel h3,.hero-card h3,.login-card h1{margin:0}.sidebar__eyebrow,.panel__eyebrow,.header__eyebrow{margin:0 0 .5rem;color:#8fb8ff;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}.sidebar__nav{display:grid;gap:.75rem;margin-top:0}.sidebar__link{display:flex;align-items:center;justify-content:space-between;color:#c9d5ee;text-decoration:none;padding:.95rem 1rem;border-radius:18px;background:transparent;transition:background .18s ease,color .18s ease,transform .18s ease}.sidebar__link:hover{background:#38c3ff14;color:#fff;transform:translate(2px)}.sidebar__link.active{background:#38c3ff29;color:#fff;box-shadow:inset 0 0 0 1px #8fb8ff14;position:relative}.sidebar__link.active:before{content:"";position:absolute;left:.35rem;top:.6rem;bottom:.6rem;width:3px;border-radius:999px;background:linear-gradient(180deg,#38c3ff,#13c5dd)}.sidebar__badge{min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#38c3ff2e;color:#fff;font-size:.76rem;font-weight:800}.main-shell{padding:2rem 2.25rem}.header,.panel__header,.approval-item,.hero-card{display:flex;justify-content:space-between;gap:1rem;align-items:center}.ghost-button{background:#ffffff14;color:#f5f7fb;box-shadow:inset 0 0 0 1px #ffffff0f}.ghost-button:hover:not(:disabled){background:#ffffff1f}.header{padding:.25rem 0 .75rem}.header h2{font-size:clamp(2rem,4vw,2.55rem);line-height:1.08;letter-spacing:-.03em}.header__subtitle{margin:.6rem 0 0;max-width:48rem;color:#9eb1cf;font-size:.98rem}.page-content{display:grid;gap:1.4rem;margin-top:1.5rem}.page-state{display:grid;place-items:center;min-height:50vh;color:#cbd5e1}.hero-card,.panel,.metric-card,.login-card{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#0c1222e6,#0a101ed6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 40px #0308122e;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.hero-card,.panel,.metric-card{border-radius:24px}.hero-card,.panel,.login-card{padding:1.5rem}.hero-card:hover,.panel:hover,.metric-card:hover{border-color:#8fb8ff1f}.hero-card__pill{min-width:220px;text-align:center;padding:1rem;border-radius:22px;background:#ffffff0f;font-weight:700}.metrics-grid,.reports-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.metrics-grid--wide{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-card{padding:1.25rem 1.3rem;min-height:150px}.metric-card span,.metric-card p,.login-copy,.panel p,td,th{color:#b6c4de}.metric-card strong{display:block;margin:.55rem 0 .45rem;font-size:clamp(1.85rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.03em;color:#fff}.metric-card span{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#8fb8ff}.metric-card p{margin:0;font-size:.94rem}.approval-list{display:grid;gap:.9rem}.approval-item{padding:1.05rem 1.2rem;border-radius:20px;background:#ffffff0a;transition:background .18s ease,transform .18s ease}.approval-item:hover{background:#ffffff0f;transform:translateY(-1px)}.status-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:999px;background:#38c3ff24;color:#a5f3fc;font-size:.78rem;font-weight:700;text-transform:capitalize;letter-spacing:.02em}.table-shell{overflow-x:auto;margin-top:1rem;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:#ffffff05;scrollbar-width:thin}.table-empty{text-align:center;color:#94a3b8;padding:2.2rem 1rem}table{width:100%;border-collapse:separate;border-spacing:0}th,td{text-align:left;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}th{position:sticky;top:0;z-index:1;background:#0a101efa;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.table-sort{display:inline-flex;align-items:center;gap:.45rem;padding:0;background:transparent;box-shadow:none;color:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit}.table-sort:hover:not(:disabled){transform:none;box-shadow:none;color:#fff}.table-sort__indicator{opacity:.35}.table-sort__indicator.is-active{opacity:1;color:#8fb8ff}tbody tr{transition:background .18s ease}tbody tr:hover{background:#ffffff09}tbody tr:last-child td{border-bottom:0}.data-table__actions{min-width:180px}.table-empty-state{display:grid;gap:.35rem;justify-items:center}.table-empty-state strong{color:#f8fafc;font-size:1rem}.table-empty-state p{margin:0}.table-meta{margin:.2rem 0 0;color:#94a3b8;font-size:.82rem}.report-callout{display:grid;gap:.8rem;margin-top:1rem}.report-callout code{display:inline-block;width:fit-content;padding:.8rem 1rem;border-radius:14px;background:#ffffff0f}.toolbar,.table-actions,.entity-form{display:flex;gap:.75rem;flex-wrap:wrap}.toolbar,.entity-form{margin:1rem 0}.toolbar .field-input,.entity-form .field-input{flex:1 1 180px}.entity-form{align-items:end;padding:1rem;border-radius:18px;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.toolbar{padding:.25rem 0 .5rem}.table-actions{align-items:center}.table-actions button,.table-actions .ghost-button,.table-actions label.ghost-button{padding:.72rem .95rem;border-radius:14px;font-size:.9rem;line-height:1}.panel__header{margin-bottom:1rem}.panel__header h3{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.02em}.panel__subtitle{margin:.55rem 0 0;max-width:44rem;color:#9eb1cf;font-size:.95rem;line-height:1.55}.panel-copy{margin:0;color:#94a3b8;font-size:.95rem}.form-success{position:fixed;top:1rem;right:1rem;z-index:40;margin:0;max-width:360px;padding:.9rem 1rem;border-radius:16px;border:1px solid rgba(34,197,94,.22);background:#0a1814eb;color:#bbf7d0;font-weight:600;box-shadow:0 16px 30px #02061747;animation:toastIn .18s ease}.form-error{position:fixed;top:1rem;right:1rem;z-index:40;margin:0;max-width:360px;padding:.9rem 1rem;border-radius:16px;border:1px solid rgba(248,113,113,.24);background:#260e12f0;color:#fecaca;font-weight:600;box-shadow:0 16px 30px #02061747;animation:toastIn .18s ease}.detail-card,.report-preview{margin-top:1rem;padding:1rem 1.05rem;border-radius:18px;background:#ffffff0a;color:#cbd5e1;border:1px solid rgba(255,255,255,.05)}.report-preview{overflow:auto;white-space:pre-wrap}.analytics-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.analytics-layout--compact{grid-template-columns:minmax(0,1fr)}.analytics-grid--summary{grid-template-columns:repeat(3,minmax(0,1fr))}.chart-card{display:grid;gap:1rem;min-height:320px;padding:1.35rem;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:#0c1222bd;transition:transform .18s ease,border-color .18s ease,background .18s ease}.chart-card:hover{transform:translateY(-1px);border-color:#8fb8ff1f;background:#0d1426cc}.chart-card--wide{grid-column:1 / -1}.chart-card__header{display:grid;gap:.35rem}.chart-card__header h4,.split-summary__column h5,.detail-card h4{margin:0}.chart-card__body{min-height:220px;display:flex;align-items:stretch}.bar-chart,.stacked-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(3.5rem,1fr);gap:.85rem;align-items:end;width:100%;min-height:220px}.bar-chart__item,.stacked-chart__item{display:grid;gap:.6rem;align-items:end}.bar-chart__value,.stacked-chart__total{text-align:center;color:#e2e8f0;font-size:.85rem;font-weight:700}.bar-chart__track,.stacked-chart__track{min-height:150px;padding:.5rem;border-radius:18px;background:#ffffff0a;display:flex;align-items:end;justify-content:center}.bar-chart__track{overflow:hidden}.bar-chart__bar{width:100%;border-radius:14px 14px 10px 10px;box-shadow:0 12px 28px #0f172a3d}.bar-chart__label,.stacked-chart__label{color:#94a3b8;font-size:.82rem;text-align:center;word-break:break-word}.stacked-chart__track{flex-direction:column-reverse;gap:.18rem;overflow:hidden}.stacked-chart__segment{width:100%;min-height:4px}.donut-chart{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:1.25rem;align-items:center;width:100%}.donut-chart__visual{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px #ffffff0f}.donut-chart__visual:after{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;background:#0a1020f5;border:1px solid rgba(255,255,255,.06)}.donut-chart__center{position:relative;z-index:1;display:grid;gap:.2rem;justify-items:center}.donut-chart__center strong{font-size:1.6rem;color:#fff}.donut-chart__center span{color:#94a3b8;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.donut-chart__legend{display:grid;gap:.7rem}.donut-chart__legend-item{display:grid;grid-template-columns:12px 1fr auto;gap:.65rem;align-items:center;color:#cbd5e1}.donut-chart__legend-dot{width:12px;height:12px;border-radius:999px}.split-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%}.split-summary__column{display:grid;gap:.75rem;padding:1rem;border-radius:18px;background:#ffffff0a}.split-summary__item{display:flex;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border-radius:14px;background:#ffffff0a;color:#cbd5e1}.split-summary__item strong{color:#fff}.login-page{display:grid;place-items:center;min-height:100vh;padding:1.5rem;position:relative;overflow:hidden}.login-page:before,.login-page:after{content:"";position:absolute;border-radius:999px;filter:blur(60px);opacity:.45;pointer-events:none}.login-page:before{width:18rem;height:18rem;background:#2979d62e;top:10%;left:8%;animation:floatGlow 12s ease-in-out infinite}.login-page:after{width:20rem;height:20rem;background:#06b6d42e;right:6%;bottom:8%;animation:floatGlow 14s ease-in-out infinite reverse}.login-shell{position:relative;z-index:1;display:grid;gap:1rem;justify-items:center;width:100%}.login-card{width:min(100%,420px);padding:32px;border-radius:16px;box-shadow:0 30px 80px #0206178c}.login-brand{display:grid;justify-items:center;margin-bottom:1.25rem}.login-brand__logo{max-height:80px;width:auto;height:auto;display:block;filter:drop-shadow(0 12px 28px rgba(6,182,212,.22))}.login-heading{text-align:center}.login-heading h1{margin:0;font-size:clamp(1.5rem,3vw,1.75rem);font-weight:600;color:#f8fafc}.login-heading p{margin:.5rem 0 0;font-size:14px;color:#94a3b8}.login-form{display:grid;gap:1rem;margin-top:1.5rem}.field-group{display:grid;gap:.5rem}.field-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.field-label{font-size:.95rem;font-weight:600;color:#e2e8f0}.field-input{width:100%;height:48px;margin-top:0;border-radius:10px;border:1px solid rgba(148,163,184,.2);background:#020617c7;color:#f8fafc;padding:0 .95rem;transition:border-color .2s ease,box-shadow .2s ease}.field-input::placeholder{color:#64748b}.field-input:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 4px #06b6d41f}.field-input--error{border-color:#f87171}.field-error{margin:0;font-size:.82rem;color:#fca5a5}.password-shell{position:relative}.password-shell .field-input{padding-right:4.75rem}.password-toggle{position:absolute;top:50%;right:.65rem;transform:translateY(-50%);width:auto;padding:.25rem .5rem;border-radius:8px;background:transparent;color:#94a3b8;font-size:.82rem;font-weight:700}.login-support-note{color:#67e8f9;font-size:.78rem;max-width:210px;text-align:right;line-height:1.35}.empty-callout{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:18px;border:1px dashed rgba(143,184,255,.18);background:#ffffff08}.empty-callout strong{display:block;margin-bottom:.25rem;font-size:1rem;color:#f8fafc}.empty-callout p{margin:0}.notification-item{border:1px solid rgba(255,255,255,.04)}.onboarding-banner{overflow:hidden}.onboarding-banner__content{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start}.onboarding-banner__list{margin:.85rem 0 0;padding-left:1.1rem;color:#d6e2f5;display:grid;gap:.35rem}.onboarding-banner__callout{margin:1rem 0 0;color:#8fb8ff;font-weight:700}.notification-item--unread{border-color:#38c3ff29;background:#38c3ff0d}.notification-item__title{display:flex;align-items:center;gap:.55rem}.notification-dot{width:.55rem;height:.55rem;border-radius:999px;background:#38c3ff;box-shadow:0 0 0 4px #38c3ff1f}.notification-item__meta{font-size:.82rem;color:#8ea2c2}.approval-item__content{display:grid;gap:.4rem}.skeleton{display:block;position:relative;overflow:hidden;border-radius:12px;background:#ffffff14}.skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.1s infinite}.skeleton--text{width:100%;height:.9rem}.skeleton--short{width:45%}.skeleton--metric{width:45%;height:2.4rem}.skeleton--chart{width:100%;min-height:220px}.skeleton--table{width:100%;height:1.2rem}.skeleton--badge{width:5rem;height:1.8rem;border-radius:999px}.status-chip--active,.status-chip--approved,.status-chip--processed,.status-chip--paid,.status-chip--read,.status-chip--present{background:#22c55e29;color:#86efac}.status-chip--pending,.status-chip--late,.status-chip--half-day{background:#f59e0b29;color:#fcd34d}.status-chip--inactive,.status-chip--deactivated,.status-chip--cancelled,.status-chip--absent{background:#94a3b829;color:#cbd5e1}.status-chip--rejected,.status-chip--locked{background:#f8717129;color:#fca5a5}.status-chip--super-admin,.status-chip--admin,.status-chip--employee{background:#38c3ff24;color:#a5f3fc}@media (max-width: 1200px){.metrics-grid,.reports-grid,.analytics-grid--summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 960px){.app-shell{grid-template-columns:1fr}.sidebar{padding:1.25rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.analytics-layout,.split-summary,.donut-chart{grid-template-columns:1fr}.panel__header,.header{align-items:flex-start;flex-direction:column}.empty-callout{flex-direction:column;align-items:flex-start}.onboarding-banner__content{flex-direction:column}}@media (max-width: 720px){.main-shell{padding:1rem}.metrics-grid,.reports-grid,.analytics-grid--summary{grid-template-columns:1fr}.bar-chart,.stacked-chart{grid-auto-columns:minmax(2.75rem,1fr);gap:.55rem}.chart-card{min-height:280px}.entity-form{padding:.85rem}.form-success,.form-error{left:1rem;right:1rem;max-width:none}}@keyframes shimmer{to{transform:translate(100%)}}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.remember-option{display:inline-flex;align-items:center;gap:.65rem;font-size:.92rem;color:#cbd5e1}.remember-option input{width:1rem;height:1rem;margin:0;accent-color:#2d8fd5}.form-error{margin:0;color:#fca5a5;font-size:.9rem}.login-submit{width:100%;height:48px;border-radius:12px;background:linear-gradient(90deg,#1f6fb2,#36a6de);color:#f8fafc;font-weight:800}.login-submit__content{display:inline-flex;align-items:center;gap:.65rem}.spinner{width:1rem;height:1rem;border:2px solid rgba(248,250,252,.35);border-top-color:#f8fafc;border-radius:999px;animation:spin .8s linear infinite}.security-note,.login-footer,.reset-placeholder p{margin:0;text-align:center;font-size:.8rem;color:#94a3b8}.login-footer{font-size:.78rem}.reset-placeholder{display:grid;gap:1rem;justify-items:center;margin-top:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floatGlow{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(12px,-14px,0) scale(1.06)}}@media (max-width: 1024px){.app-shell{grid-template-columns:1fr}.sidebar{gap:1.5rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar__logo{max-width:180px}.metrics-grid,.reports-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.main-shell,.sidebar{padding:1.25rem}.sidebar__logo{max-width:160px}.metrics-grid,.reports-grid{grid-template-columns:1fr}.header,.panel__header,.approval-item,.hero-card{flex-direction:column;align-items:flex-start}.login-card{width:min(90%,420px);padding:24px}.field-row{align-items:flex-start}}