@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--sidebar-bg:#fff;--sidebar-hover:#f8fafc;--topbar-bg:#fff;--primary:#0f172a;--secondary:#4f46e5;--secondary-hover:#4338ca;--background:#f4f7f6;--surface:#fff;--border:#e2e8f0;--text-main:#1e293b;--text-muted:#64748b;--danger:#ef4444;--success:#10b981}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background:var(--background);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh}.app-layout{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);z-index:20;flex-direction:column;width:260px;display:flex;box-shadow:2px 0 8px #00000005}.sidebar-logo{color:var(--secondary);border-bottom:1px solid var(--border);letter-spacing:-.5px;align-items:center;gap:10px;padding:24px;font-size:22px;font-weight:800;display:flex}.sidebar-nav{flex:1;padding:24px 16px}.nav-item{color:var(--text-muted);cursor:pointer;border-radius:8px;align-items:center;gap:12px;margin-bottom:8px;padding:12px 16px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{background:var(--sidebar-hover);color:var(--primary)}.nav-item.active{color:var(--secondary);background:#eef2ff;font-weight:600}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border);justify-content:flex-end;align-items:center;height:72px;padding:0 32px;display:flex;box-shadow:0 2px 4px #00000005}.user-profile{cursor:pointer;align-items:center;gap:12px;display:flex}.user-profile-info{text-align:right}.user-name{color:var(--text-main);font-size:14px;font-weight:600}.user-role{color:var(--text-muted);text-transform:uppercase;font-size:12px}.avatar{background:var(--secondary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:600;display:flex;box-shadow:0 2px 8px #4f46e54d}.content-area{background:var(--background);flex:1;padding:32px;overflow-y:auto}.premium-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 6px -1px #00000008,0 2px 4px -2px #00000008}.premium-card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #00000014}.btn-primary{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover{background:var(--secondary-hover)}.btn-outline{color:var(--text-main);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.btn-outline:hover{background:#f8fafc}.btn-danger{color:var(--danger);border:1px solid var(--danger);cursor:pointer;background:0 0;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.btn-danger:hover{background:var(--danger);color:#fff}.form-group{margin-bottom:20px}.form-label{color:var(--text-main);margin-bottom:8px;font-size:14px;font-weight:500;display:block}.form-control{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text-main);border-radius:8px;padding:12px 16px;font-size:14px;transition:all .2s}.form-control:focus{border-color:var(--secondary);outline:none;box-shadow:0 0 0 3px #4f46e526}.badge{text-transform:uppercase;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600}.badge-PENDING_HR,.badge-PENDING_MANAGER{color:#b45309;background:#fef3c7}.badge-APPROVED{color:#166534;background:#dcfce7}.badge-PROCESSED{color:#3730a3;background:#e0e7ff}.badge-REJECTED,.badge-WITHDRAWN{color:#991b1b;background:#fee2e2}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0f172a80;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--surface);border-radius:16px;width:100%;max-width:650px;max-height:90vh;padding:32px;overflow-y:auto;box-shadow:0 25px 50px -12px #00000040}.timeline{border-left:2px solid var(--border);margin-top:16px;padding-left:20px}.timeline-item{margin-bottom:20px;position:relative}.timeline-item:before{content:"";background:var(--secondary);border:2px solid var(--surface);border-radius:50%;width:10px;height:10px;position:absolute;top:4px;left:-26px}.dashboard-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;display:grid}.hamburger-btn{display:none}.sidebar-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:19;background:#0f172a66;position:fixed;inset:0}@media (width<=768px){.app-layout{flex-direction:column;height:100vh;overflow:hidden}.sidebar{z-index:30;width:260px;height:100vh;transition:left .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:-260px}.sidebar.mobile-open{left:0}.main-content{height:calc(100vh - 72px);overflow:hidden}.topbar{z-index:10;justify-content:space-between;padding:0 16px;position:relative}.hamburger-btn{cursor:pointer;color:var(--text-main);background:0 0;border:none;border-radius:8px;align-items:center;padding:8px;transition:background .2s;display:flex}.hamburger-btn:hover{background:var(--sidebar-hover)}.content-area{padding:20px 16px}.dashboard-grid{grid-template-columns:1fr;gap:16px}.premium-card{padding:16px}.table-responsive{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.content-area>div>div[style*="display: flex"]{flex-direction:column;gap:16px;align-items:stretch!important}.content-area>div>div[style*="display: flex"]>button{width:100%}}