@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');html{--lumo-font-family: 'Inter',system-ui,-apple-system,sans-serif;--aura-primary: #7c3aed;--aura-sidebar-bg: rgba(255,255,255,0.45);--aura-sidebar-text: #475569;--aura-sidebar-text-muted: #94a3b8;--aura-sidebar-active-bg: #ffffff;--aura-sidebar-active-text: #1e293b;--aura-bg-image: url('login_bg.png');--aura-card-bg: rgba(255,255,255,0.65);--aura-card-shadow: 0 10px 15px -3px rgba(0,0,0,0.04),0 4px 6px -2px rgba(0,0,0,0.02);--aura-badge-bg: #f1f5f9;--aura-badge-text: #475569;--aura-trend-up-bg: #dcfce7;--aura-trend-up-text: #15803d;--aura-trend-down-bg: #fee2e2;--aura-trend-down-text: #b91c1c;--aura-header-bg: rgba(255,255,255,0.5);--aura-search-bg: #ffffff;--lumo-primary-color: #4f46e5;--lumo-base-color: #ffffff;--lumo-border-radius-m: 12px;--lumo-border-radius-l: 16px;font-size: 14px;font-family: var(--lumo-font-family)}[part="drawer"]{background-color: rgba(255,255,255,0.3) !important;color: var(--aura-sidebar-text);border-right: 1px solid rgba(255,255,255,0.2) !important;backdrop-filter: blur(40px) saturate(150%);-webkit-backdrop-filter: blur(40px) saturate(150%);overflow-x: hidden !important}[part="navbar"]{background: rgba(255,255,255,0.2) !important;border-bottom: 1px solid rgba(255,255,255,0.2) !important;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px)}vaadin-app-layout{background: var(--aura-bg-image) no-repeat center center fixed !important;background-size: cover !important}vaadin-app-layout::part(content){background: transparent !important}vaadin-side-nav{--vaadin-side-nav-item-selected-background-color: var(--aura-sidebar-active-bg);--vaadin-side-nav-item-selected-color: var(--aura-sidebar-active-text)}vaadin-side-nav-item{color: var(--aura-sidebar-text);font-weight: 500}vaadin-side-nav-item[selected]{background: #ffffff !important;color: #1e293b !important;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);border-radius: 12px;margin: 4px 12px}vaadin-side-nav-item::part(link){border-radius: 12px}vaadin-side-nav-item:hover{background: rgba(255,255,255,0.5)}.aura-dashboard{background: transparent;min-height: 100%;padding: 2rem}.aura-card{background: var(--aura-card-bg);backdrop-filter: blur(25px) saturate(160%);-webkit-backdrop-filter: blur(25px) saturate(160%);border: 1px solid var(--aura-card-border);border-radius: var(--lumo-border-radius-l);box-shadow: var(--aura-card-shadow);padding: 1.5rem;transition: transform 0.2s ease,box-shadow 0.2s ease}.aura-card:hover{transform: translateY(-2px);box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.aura-badge{background: var(--aura-badge-bg);color: var(--aura-badge-text);padding: 2px 8px;border-radius: 9999px;font-size: 0.65rem;font-weight: 700;margin-left: auto}.aura-trend-up{background: var(--aura-trend-up-bg);color: var(--aura-trend-up-text);padding: 4px 10px;border-radius: 9999px;font-size: 0.75rem;font-weight: 600;display: inline-flex;align-items: center}.aura-trend-down{background: var(--aura-trend-down-bg);color: var(--aura-trend-down-text);padding: 4px 10px;border-radius: 9999px;font-size: 0.75rem;font-weight: 600;display: inline-flex;align-items: center}.aura-tab-bar{display: flex;gap: 8px;margin-bottom: 24px}.aura-tab{padding: 8px 16px;border-radius: 12px;font-size: 0.875rem;font-weight: 500;color: var(--aura-sidebar-bg);cursor: pointer;transition: all 0.2s}.aura-tab.active{background: #ffffff;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)}.aura-search-field{background: var(--aura-search-bg);border-radius: 12px;width: 300px}.aura-profile-footer{border-top: 1px solid rgba(255,255,255,0.1);padding: 24px;margin-top: auto}.text-aura-muted{color: var(--aura-sidebar-text-muted)}.text-aura-heading{color: var(--aura-sidebar-bg);font-weight: 700;letter-spacing: -0.025em}*::-webkit-scrollbar{width: 6px;height: 6px}*::-webkit-scrollbar-track{background: transparent}*::-webkit-scrollbar-thumb{background: transparent;border-radius: 10px;transition: background 0.3s}*:hover::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.1)}[part="drawer"]::-webkit-scrollbar-thumb{background: transparent}[part="drawer"]:hover::-webkit-scrollbar-thumb{background: rgba(148,163,184,0.15)}@media (max-width: 768px){.hide-on-mobile{display: none !important}vaadin-grid-cell-content.hide-on-mobile{display: none !important}}vaadin-grid{overflow: hidden;border-radius: var(--lumo-border-radius-m)}vaadin-grid{overflow: hidden;border-radius: var(--lumo-border-radius-m)}vaadin-date-picker,vaadin-text-field,vaadin-combo-box,vaadin-select,vaadin-number-field{--lumo-font-family: 'Inter',system-ui,-apple-system,sans-serif}vaadin-date-picker{--vaadin-date-picker-overlay-width: 290px}vaadin-date-picker-overlay{--lumo-font-family: 'Inter',system-ui,-apple-system,sans-serif}vaadin-month-calendar{--lumo-size-m: 48px;--lumo-font-family: 'Inter',system-ui,-apple-system,sans-serif}.app-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,0.7);backdrop-filter: blur(4px);display: flex;align-items: center;justify-content: center;z-index: 9999}.app-overlay-box{background: white;padding: 2rem;border-radius: 16px;box-shadow: 0 10px 25px rgba(0,0,0,0.1);display: flex;flex-direction: column;align-items: center;gap: 1rem}.app-overlay-spinner{width: 40px;height: 40px;border: 3px solid #f3f3f3;border-top: 3px solid var(--aura-primary);border-radius: 50%;animation: aura-spin 1s linear infinite}.app-overlay-text{font-weight: 600;color: var(--aura-sidebar-active-text)}@keyframes aura-spin{0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}}.app-toggle{display: inline-flex !important;align-items: center;margin: 0;padding: 0;height: 1.5rem;width: 3rem;vertical-align: middle;cursor: pointer;user-select: none}.app-toggle-track{width: 3rem;height: 1.5rem;position: relative;border-radius: 9999px;background-color: rgba(100,116,139,0.377);transition: background-color 0.3s ease;margin: 0;padding: 0}.app-toggle[checked] .app-toggle-track{background-color: #ec4899}.app-toggle-bulatan{width: 6px;height: 6px;background-color: white;border-radius: 50%;position: absolute;top: 50%;left: 0.75rem;transform: translate(-50%,-50%);transition: opacity 0.3s ease;pointer-events: none;z-index: 1;opacity: 0}.app-toggle[checked] .app-toggle-bulatan{opacity: 1}.app-toggle-thumb{width: 1.6rem;height: 1.6rem;background-color: white;border-radius: 50%;position: absolute;top: 50%;left: 0;transform: translate(-0.1rem,-50%);transition: transform 0.3s ease,border-color 0.3s ease;border: 1px solid rgba(100,116,139,1);box-shadow: 0 3px 10px rgba(100,116,139,0.5);pointer-events: none;z-index: 2}.app-toggle[checked] .app-toggle-thumb{transform: translate(1.5rem,-50%);border-color: #ec4899}.app-toggle[disabled]{opacity: 0.5;cursor: not-allowed;pointer-events: none}.login-view{background: url('login_bg.png') no-repeat center center fixed;background-size: cover;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center}.login-view::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 30% 30%,rgba(79,70,229,0.1) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(16,185,129,0.1) 0%,transparent 50%);pointer-events: none}.login-card{background: rgba(255,255,255,0.7);backdrop-filter: blur(20px) saturate(180%);-webkit-backdrop-filter: blur(20px) saturate(180%);border: 1px solid rgba(255,255,255,0.5);border-radius: 24px;padding: 3rem;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);display: flex;flex-direction: column;align-items: center;max-width: 420px;width: 90%;animation: login-fade-in 0.8s cubic-bezier(0.16,1,0.3,1)}.login-title{font-family: 'Inter',sans-serif;font-weight: 800;font-size: 2.25rem;line-height: 1.2;padding: 0.1em 0;background: linear-gradient(135deg,#4f46e5 0%,#10b981 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 0.5rem;letter-spacing: -0.05em}.login-subtitle{color: #64748b;font-size: 0.875rem;margin-bottom: 2rem;text-align: center}@keyframes login-fade-in{from{opacity: 0;transform: translateY(20px)}to{opacity: 1;transform: translateY(0)}}vaadin-login-form-wrapper{background: transparent !important;padding: 0 !important;box-shadow: none !important}vaadin-login-form-wrapper [part="form"]{padding: 0 !important}vaadin-login-form-wrapper [part="form-title"]{display: none !important}vaadin-login-form-wrapper vaadin-button[theme~="primary"]{background: linear-gradient(135deg,#4f46e5 0%,#10b981 100%) !important;border-radius: 12px;height: 3rem;font-weight: 600;margin-top: 1rem;transition: all 0.3s ease}vaadin-login-form-wrapper vaadin-button[theme~="primary"]:hover{box-shadow: 0 10px 15px -3px rgba(79,70,229,0.4);transform: translateY(-2px)}