@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap";:root{--bg-main: #f6f3ee;--bg-alt: #fff9f1;--bg-fx-a: rgba(15, 118, 110, .14);--bg-fx-b: rgba(217, 119, 6, .13);--surface: rgba(255, 255, 255, .9);--surface-strong: #ffffff;--surface-soft: #faf7f1;--line: #e7dfd2;--line-soft: #f0e9dd;--line-strong: #d9cdb8;--text: #1d2b39;--text-soft: #607182;--brand: #0f766e;--brand-soft: #ddf7f3;--accent: #d97706;--accent-soft: #fff1dd;--danger: #b91c1c;--danger-soft: #ffe7e7;--success: #166534;--success-soft: #e7f8ed;--chip: #f4efe4;--chip-text: #334155;--shadow-md: 0 18px 34px rgba(26, 20, 12, .09);--shadow-sm: 0 10px 20px rgba(26, 20, 12, .05);--radius-xl: 1.4rem;--radius-lg: 1rem;--radius-md: .76rem;--radius-sm: .62rem}[data-theme=dark]{--bg-main: #07131b;--bg-alt: #0f1f2a;--bg-fx-a: rgba(20, 184, 166, .25);--bg-fx-b: rgba(251, 146, 60, .2);--surface: rgba(14, 27, 39, .78);--surface-strong: #122535;--surface-soft: #152c3f;--line: #203a4f;--line-soft: #27475f;--line-strong: #2f536c;--text: #e7f0f6;--text-soft: #98aec0;--brand: #14b8a6;--brand-soft: rgba(20, 184, 166, .16);--accent: #f59e0b;--accent-soft: rgba(245, 158, 11, .2);--danger: #fb7185;--danger-soft: rgba(251, 113, 133, .17);--success: #4ade80;--success-soft: rgba(74, 222, 128, .16);--chip: #193142;--chip-text: #d9e8f2;--shadow-md: 0 20px 36px rgba(1, 8, 13, .45);--shadow-sm: 0 12px 22px rgba(1, 8, 13, .36)}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Manrope,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 8%,var(--bg-fx-b),transparent 42%),radial-gradient(circle at 88% 12%,var(--bg-fx-a),transparent 38%),linear-gradient(180deg,var(--bg-main),var(--bg-alt));transition:background .25s ease,color .25s ease}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.38) 1px,transparent 1px);background-size:44px 44px;opacity:.13;z-index:-1}[data-theme=dark] body:before{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);opacity:.32}h1,h2,h3{margin:0;font-family:Space Grotesk,Manrope,sans-serif;letter-spacing:.01em}p{margin:0}a{color:inherit;text-decoration:none}input,select,textarea,button{font:inherit}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid rgba(20,184,166,.28);outline-offset:1px}.screen-center{min-height:100vh;display:grid;place-items:center}.loading-pulse{color:var(--text-soft);font-weight:700;animation:floatPulse 1.2s ease-in-out infinite alternate}@keyframes floatPulse{0%{opacity:.58;transform:translateY(0)}to{opacity:1;transform:translateY(-3px)}}.theme-switch{display:inline-flex;align-items:center;gap:.28rem;border:1px solid var(--line);background:var(--surface-soft);border-radius:999px;padding:.2rem}.theme-chip{border:0;background:transparent;color:var(--text-soft);border-radius:999px;padding:.33rem .64rem;font-size:.75rem;font-weight:700;cursor:pointer}.theme-chip.active{background:var(--surface-strong);color:var(--text);box-shadow:var(--shadow-sm)}.login-screen{min-height:100vh;padding:1.8rem;display:grid;place-items:center}.login-shell{width:min(980px,100%);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);display:grid;grid-template-columns:1.06fr .94fr;animation:liftIn .65s ease both}.login-visual{position:relative;padding:2.2rem;background:radial-gradient(circle at 95% 8%,var(--bg-fx-a),transparent 36%),linear-gradient(150deg,var(--surface-soft),var(--surface-strong))}.login-theme-switch{position:absolute;top:1rem;right:1rem}.login-visual h1{margin-top:.7rem;margin-bottom:.82rem;font-size:clamp(1.65rem,2.5vw,2.3rem);max-width:16ch}.login-visual .muted-copy{max-width:39ch;line-height:1.64}.login-points{margin-top:1.45rem;display:grid;gap:.58rem}.login-point{width:fit-content;padding:.55rem .78rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);font-size:.89rem}.login-panel{background:var(--surface-strong);padding:2.25rem;display:grid;align-content:center;gap:.7rem}.login-panel h2{font-size:1.6rem}@keyframes liftIn{0%{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.brand-pill{display:inline-flex;align-items:center;width:fit-content;border-radius:999px;border:1px solid rgba(20,184,166,.26);background:var(--brand-soft);color:var(--brand);padding:.3rem .76rem;margin-bottom:1rem;font-size:.82rem;font-weight:700}.muted-copy{color:var(--text-soft)}.form-grid{display:grid;gap:.95rem;margin-top:.85rem}.form-grid.compact{margin-top:.22rem}.form-grid label{display:grid;gap:.38rem;color:var(--text-soft);font-size:.9rem;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-strong);color:var(--text);padding:.7rem .82rem;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:var(--brand)}.form-grid textarea{resize:vertical}.btn{border:0;border-radius:999px;padding:.62rem 1rem;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.64;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(120deg,var(--brand),#14b8a6);color:#f8ffff;box-shadow:0 10px 18px #14b8a640}.btn.ghost{background:var(--surface-strong);color:var(--text-soft);border:1px solid var(--line-strong)}.btn.success{background:var(--success-soft);color:var(--success);border:1px solid rgba(34,197,94,.25)}.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(248,113,113,.3)}.btn.tiny{padding:.38rem .72rem;font-size:.8rem}.error-text{color:var(--danger);font-size:.87rem}.ok-text{color:var(--success);font-size:.87rem}.app-shell{display:grid;grid-template-columns:285px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--surface-strong),var(--surface-soft));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:1.35rem 1rem 1rem;display:grid;grid-template-rows:auto 1fr auto}.brand-block{margin-bottom:1rem}.brand-block h1{font-size:1.62rem;color:var(--text)}.brand-block p{margin-top:.35rem;color:var(--text-soft);font-size:.86rem;line-height:1.45}.nav-stack{display:grid;gap:.48rem}.nav-item{padding:.72rem .84rem;border-radius:var(--radius-md);color:var(--text-soft);border:1px solid transparent;font-weight:700;transition:all .18s ease}.nav-item:hover{background:var(--surface-soft);border-color:var(--line)}.nav-item.active{background:linear-gradient(120deg,var(--brand-soft),var(--surface-strong));border-color:#14b8a652;color:var(--brand);box-shadow:var(--shadow-sm)}.sidebar-foot{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:.75rem;display:grid;gap:.18rem}.sidebar-foot strong{color:var(--text);overflow:hidden;text-overflow:ellipsis}.main-content{display:flex;flex-direction:column;min-width:0}.topbar{position:sticky;top:0;z-index:10;padding:1.05rem 1.45rem;border-bottom:1px solid var(--line);background:#ffffff94;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;gap:1rem}[data-theme=dark] .topbar{background:#0c1924a8}.topbar h2{font-size:clamp(1.24rem,2vw,1.55rem);color:var(--text)}.topbar p{color:var(--text-soft);margin-top:.2rem}.topbar-actions{display:flex;align-items:center;gap:.62rem;flex-wrap:wrap}.role-chip{text-transform:capitalize;border-radius:999px;padding:.32rem .72rem;font-size:.8rem;font-weight:700;border:1px solid transparent}.role-admin{background:#e6f0ff;color:#1e3a8a;border-color:#bfdbfe}.role-manager{background:#ede9ff;color:#6d28d9;border-color:#d8b4fe}.role-employee{background:#e9fcee;color:#166534;border-color:#bbf7d0}[data-theme=dark] .role-admin{background:#1e3a8a4d;color:#93c5fd;border-color:#93c5fd66}[data-theme=dark] .role-manager{background:#6d28d94d;color:#d8b4fe;border-color:#d8b4fe59}[data-theme=dark] .role-employee{background:#16653461;color:#bbf7d0;border-color:#bbf7d059}.content-body{padding:1.35rem;padding-bottom:max(1.2rem,env(safe-area-inset-bottom))}.page-grid{display:grid;gap:1rem}.page-grid>*{animation:riseIn .4s ease both}.page-grid>*:nth-child(1){animation-delay:.04s}.page-grid>*:nth-child(2){animation-delay:.08s}.page-grid>*:nth-child(3){animation-delay:.12s}.page-grid>*:nth-child(4){animation-delay:.16s}@keyframes riseIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.stats-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}.stat-card{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.05rem;box-shadow:var(--shadow-sm);overflow:hidden;background:linear-gradient(180deg,var(--surface-strong),var(--surface-soft))}.stat-accent-dot{display:block;width:.65rem;height:.65rem;border-radius:999px;margin-bottom:.5rem;background:var(--brand)}.stat-title{font-size:.78rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.stat-card h3{margin:.45rem 0 .24rem;font-size:1.5rem;color:var(--text)}.stat-subtitle{color:var(--text-soft);font-size:.83rem}.accent-teal .stat-accent-dot{background:var(--brand)}.accent-amber .stat-accent-dot{background:var(--accent)}.accent-red .stat-accent-dot{background:var(--danger)}.accent-blue .stat-accent-dot{background:#0ea5e9}.panel-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-sm)}.panel-card h3{margin-bottom:.8rem;color:var(--text)}.full-width{grid-column:1 / -1}.info-list{display:grid;gap:.4rem}.spark-grid{min-height:180px;display:grid;grid-template-columns:repeat(12,minmax(16px,1fr));align-items:end;gap:.58rem}.spark-item{display:grid;justify-items:center;gap:.38rem}.spark-item small{color:var(--text-soft)}.spark-bar{width:100%;border-radius:.6rem;background:linear-gradient(180deg,#14b8a6,var(--brand));box-shadow:0 10px 16px #14b8a62e;transform-origin:bottom;animation:growBar .55s ease both}.spark-item:nth-child(1) .spark-bar{animation-delay:.03s}.spark-item:nth-child(2) .spark-bar{animation-delay:.06s}.spark-item:nth-child(3) .spark-bar{animation-delay:.09s}.spark-item:nth-child(4) .spark-bar{animation-delay:.12s}.spark-item:nth-child(5) .spark-bar{animation-delay:.15s}.spark-item:nth-child(6) .spark-bar{animation-delay:.18s}.spark-item:nth-child(7) .spark-bar{animation-delay:.21s}.spark-item:nth-child(8) .spark-bar{animation-delay:.24s}.spark-item:nth-child(9) .spark-bar{animation-delay:.27s}.spark-item:nth-child(10) .spark-bar{animation-delay:.3s}.spark-item:nth-child(11) .spark-bar{animation-delay:.33s}.spark-item:nth-child(12) .spark-bar{animation-delay:.36s}@keyframes growBar{0%{transform:scaleY(.24);opacity:.45}to{transform:scaleY(1);opacity:1}}.status-pills{display:flex;flex-wrap:wrap;gap:.7rem}.status-pill{border-radius:999px;padding:.42rem .72rem;font-size:.83rem;font-weight:700;border:1px solid transparent}.status-pill.pending{background:var(--accent-soft);color:#995602;border-color:#f59e0b66}.status-pill.approved{background:var(--success-soft);color:var(--success);border-color:#22c55e59}.status-pill.rejected,.status-pill.cancelled{background:var(--danger-soft);color:var(--danger);border-color:#f8717161}.badge{text-transform:capitalize;border-radius:999px;padding:.2rem .56rem;font-size:.74rem;font-weight:700;border:1px solid var(--line);background:var(--chip);color:var(--chip-text)}.badge-pending{background:var(--accent-soft);border-color:#f59e0b66;color:#995602}.badge-approved{background:var(--success-soft);border-color:#22c55e59;color:var(--success)}.badge-rejected,.badge-cancelled{background:var(--danger-soft);border-color:#f8717161;color:var(--danger)}.mini-table{display:grid;gap:.62rem}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border:1px solid var(--line);background:var(--surface-strong);border-radius:var(--radius-md);padding:.64rem}.balance-chip{background:var(--brand-soft);border:1px solid rgba(20,184,166,.28);border-radius:999px;color:var(--brand);padding:.22rem .58rem;font-size:.79rem;font-weight:700;white-space:nowrap}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-strong)}table{width:100%;border-collapse:collapse;min-width:780px}th,td{text-align:left;padding:.64rem;border-bottom:1px solid var(--line-soft);vertical-align:top}th{font-size:.8rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em;background:var(--surface-soft)}td{font-size:.86rem;color:var(--text)}td select{min-width:115px}.table-note{color:var(--text-soft);display:block;margin-top:.24rem}.action-row{display:flex;flex-wrap:wrap;gap:.35rem}.full-row{grid-column:1 / -1}.swatch{width:.72rem;height:.72rem;border-radius:999px;display:inline-block;margin-right:.45rem;border:1px solid rgba(0,0,0,.18);vertical-align:middle}@media(max-width:1100px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line);grid-template-rows:auto auto auto;gap:.8rem}.nav-stack{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.login-shell{grid-template-columns:1fr}}@media(max-width:760px){.login-screen{padding:1rem}.login-panel,.login-visual{padding:1.32rem}.login-theme-switch{position:static;margin-bottom:.5rem;width:fit-content}.topbar{flex-direction:column;align-items:flex-start}.topbar-actions{width:100%;justify-content:space-between;gap:.5rem}.content-body{padding:1rem}.stats-grid{grid-template-columns:1fr}.spark-grid{grid-template-columns:repeat(6,minmax(16px,1fr));row-gap:.8rem}.mini-row{align-items:flex-start;flex-direction:column}.balance-chip{margin-left:auto}}@media(max-width:640px){.table-wrap{border:0;background:transparent;overflow:visible}table{min-width:0;border-collapse:separate;border-spacing:0}table,tbody,tr,td{display:block;width:100%}thead{display:none}tbody{display:grid;gap:.75rem}tr{background:var(--surface-strong);border:1px solid var(--line);border-radius:var(--radius-md);padding:.25rem .7rem;box-shadow:var(--shadow-sm)}td{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;padding:.54rem 0;border-bottom:1px dashed var(--line);font-size:.84rem;word-break:break-word}td:last-child{border-bottom:0}td:before{content:attr(data-label);color:var(--text-soft);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;flex:0 0 88px;max-width:88px}td>*{margin-left:auto}td .table-note,td .action-row{margin-left:auto}td .action-row{justify-content:flex-end}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}