@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap";:root{--primary: #2563EB;--primary-light: #EFF6FF;--primary-mid: #DBEAFE;--success: #059669;--success-light: #ECFDF5;--success-mid: #D1FAE5;--warning: #D97706;--warning-light: #FFFBEB;--danger: #DC2626;--danger-light: #FEF2F2;--purple: #7C3AED;--purple-light: #F5F3FF;--purple-mid: #EDE9FE;--neutral-50: #F8FAFC;--neutral-100: #F1F5F9;--neutral-200: #E2E8F0;--neutral-300: #CBD5E1;--neutral-400: #94A3B8;--neutral-500: #64748B;--neutral-600: #475569;--neutral-700: #334155;--neutral-800: #1E293B;--neutral-900: #0F172A;--white: #FFFFFF;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);--shadow-lg: 0 8px 24px rgba(15, 23, 42, .1), 0 4px 8px rgba(15, 23, 42, .05);--font-display: "Plus Jakarta Sans", sans-serif;--font-body: "DM Sans", sans-serif;--transition: .2s ease}*{box-sizing:border-box;margin:0;padding:0}.expenses-page{font-family:var(--font-body);background:linear-gradient(160deg,#EFF6FF 0%,#F8FAFC 40%,#F5F3FF 100%);min-height:100vh;padding:2rem;max-width:1300px;margin:0 auto}.page-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--neutral-200)}.page-header h1{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--neutral-900);letter-spacing:-.03em;line-height:1.2}.subtitle{color:var(--neutral-500);font-size:.95rem;margin-top:.4rem;font-weight:400}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}.stat-card{background:var(--white);padding:1.4rem 1.5rem;border-radius:var(--radius-lg);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:1rem;transition:box-shadow var(--transition),transform var(--transition)}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stats-grid .stat-card:nth-child(1){background:linear-gradient(135deg,#EFF6FF,#F0F9FF);border-color:#bfdbfe}.stats-grid .stat-card:nth-child(2){background:linear-gradient(135deg,#ECFDF5,#F0FDF9);border-color:#a7f3d0}.stats-grid .stat-card:nth-child(3){background:linear-gradient(135deg,#F5F3FF,#EEF2FF);border-color:#ddd6fe}.stat-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;font-family:var(--font-display);flex-shrink:0}.stats-grid .stat-card:nth-child(1) .stat-icon{background:var(--primary-mid);color:var(--primary)}.stats-grid .stat-card:nth-child(2) .stat-icon{background:var(--success-mid);color:var(--success)}.stats-grid .stat-card:nth-child(3) .stat-icon{background:var(--purple-mid);color:var(--purple)}.stat-details h3{font-size:.82rem;color:var(--neutral-500);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}.stat-value{font-family:var(--font-display);font-size:1.65rem;font-weight:800;color:var(--neutral-900);letter-spacing:-.02em;line-height:1}.stats-grid .stat-card:nth-child(1) .stat-value{color:var(--primary)}.stats-grid .stat-card:nth-child(2) .stat-value{color:var(--success)}.stats-grid .stat-card:nth-child(3) .stat-value{color:var(--purple)}.filters-section{background:var(--white);padding:1.4rem 1.5rem;border-radius:var(--radius-lg);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);margin-bottom:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}.filter-group{flex:1;min-width:190px}.filter-group label{display:block;margin-bottom:.4rem;font-weight:600;color:var(--neutral-700);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}.filter-group select,.filter-group input{width:100%;padding:.7rem .9rem;border:1.5px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:.92rem;font-family:var(--font-body);color:var(--neutral-800);background:var(--neutral-50);transition:border-color var(--transition),box-shadow var(--transition);min-height:44px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.filter-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:2.2rem}.filter-group select:focus,.filter-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f;background:var(--white)}.btn-reset{padding:.7rem 1.4rem;background:var(--neutral-800);color:var(--white);border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.88rem;font-family:var(--font-body);transition:background var(--transition),transform var(--transition);min-height:44px;white-space:nowrap;letter-spacing:.02em}.btn-reset:hover{background:var(--neutral-700);transform:translateY(-1px)}.btn-reset:active{transform:translateY(0)}.loading-container{text-align:center;padding:4rem 2rem;color:var(--neutral-500)}.spinner{width:40px;height:40px;border:3px solid var(--neutral-200);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:4rem 2rem;background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}.empty-state i{font-size:3.5rem;color:var(--neutral-300);margin-bottom:1.2rem;display:block}.empty-state h3{font-family:var(--font-display);font-size:1.2rem;color:var(--neutral-700);font-weight:700;margin-bottom:.5rem}.empty-state p{color:var(--neutral-400);font-size:.92rem}.vehicle-groups-section{display:flex;flex-direction:column;gap:1rem}.vehicle-groups-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.5rem}.vehicle-groups-header h2{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--neutral-900);letter-spacing:-.02em}.vehicle-groups-header p{color:var(--neutral-500);font-size:.88rem;margin-top:.3rem;line-height:1.5}.vehicle-expense-group{background:var(--white);border-radius:var(--radius-lg);border:1.5px solid var(--neutral-200);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition)}.vehicle-expense-group:hover{box-shadow:var(--shadow-md)}.vehicle-expense-group.expanded{border-color:#bfdbfe;box-shadow:0 0 0 3px #2563eb0f,var(--shadow-md)}.vehicle-expense-toggle{width:100%;border:none;background:var(--white);padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;text-align:left;transition:background var(--transition)}.vehicle-expense-toggle:hover{background:var(--neutral-50)}.vehicle-expense-main{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}.vehicle-badge{display:inline-flex;align-items:center;gap:6px;padding:.4rem .85rem;background:var(--purple-light);color:var(--purple);border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--purple-mid);flex-shrink:0}.vehicle-badge-large{min-width:120px;justify-content:center}.vehicle-expense-meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}.vehicle-expense-meta strong{font-family:var(--font-display);font-weight:700;color:var(--neutral-900);font-size:1rem}.vehicle-expense-meta span{color:var(--neutral-500);font-size:.85rem}.vehicle-expense-summary{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0}.vehicle-expense-summary strong{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--success);letter-spacing:-.02em}.vehicle-expense-summary span{font-size:.78rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:.08em;background:var(--primary-light);padding:.2rem .6rem;border-radius:20px;border:1px solid var(--primary-mid)}.vehicle-expense-types{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 1.4rem 1rem;border-bottom:1px solid var(--neutral-100)}.vehicle-expense-type-pill{display:inline-flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .9rem;border-radius:var(--radius-sm);background:var(--neutral-50);border:1px solid var(--neutral-200);min-width:175px;flex:1 1 175px;transition:border-color var(--transition),background var(--transition)}.vehicle-expense-type-pill:hover{background:var(--primary-light);border-color:var(--primary-mid)}.vehicle-expense-type-pill span{color:var(--neutral-700);font-size:.87rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.vehicle-expense-type-pill span i{color:var(--primary);font-size:.8rem}.vehicle-expense-type-pill strong{color:var(--neutral-900);font-size:.9rem;font-weight:700;font-family:var(--font-display)}.vehicle-expense-list{padding:1rem 1.4rem 1.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.85rem}.vehicle-expense-item{border:1.5px solid var(--neutral-200);border-radius:var(--radius-md);padding:1.1rem;background:var(--white);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);position:relative;overflow:hidden}.vehicle-expense-item:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--primary);border-radius:2px 0 0 2px}.vehicle-expense-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary-mid)}.vehicle-expense-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.category-badge{display:inline-flex;align-items:center;gap:6px;padding:.35rem .75rem;background:var(--primary-light);color:var(--primary);border-radius:20px;font-size:.8rem;font-weight:600;text-transform:capitalize;border:1px solid var(--primary-mid)}.vehicle-expense-date{margin:.35rem 0 0;color:var(--neutral-400);font-size:.78rem;display:flex;align-items:center;gap:4px}.amount{font-family:var(--font-display);font-weight:800;color:var(--success);font-size:1.1rem;letter-spacing:-.02em;white-space:nowrap}.trip-info{display:flex;flex-direction:column;gap:3px}.trip-info-inline{background:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);padding:.5rem .75rem;margin-bottom:.5rem}.trip-number{font-weight:700;color:var(--neutral-800);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}.trip-route{font-size:.8rem;color:var(--neutral-600);font-weight:500}.expense-card-desc,.vehicle-expense-description{color:var(--neutral-500);font-size:.83rem;padding:.45rem .7rem;background:var(--neutral-50);border-radius:var(--radius-sm);border-left:3px solid var(--neutral-300);margin-bottom:.5rem;line-height:1.5}.vehicle-expense-footer{margin-top:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding-top:.65rem;border-top:1px solid var(--neutral-100)}.payment-badge{display:inline-flex;align-items:center;padding:.3rem .65rem;background:var(--success-light);color:var(--success);border-radius:20px;font-size:.78rem;font-weight:600;text-transform:capitalize;border:1px solid var(--success-mid)}.status-badge{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:20px;font-size:.78rem;font-weight:600;text-transform:capitalize}.status-badge.approved{background:var(--success-light);color:var(--success);border:1px solid var(--success-mid)}.status-badge.pending{background:var(--warning-light);color:var(--warning);border:1px solid #FDE68A}.status-badge.rejected{background:var(--danger-light);color:var(--danger);border:1px solid #FECACA}.na-text{color:var(--neutral-400);font-style:italic;font-size:.82rem}@media (max-width: 1024px){.expenses-page{padding:1.5rem}.stats-grid{grid-template-columns:repeat(3,1fr);gap:1rem}.stat-value{font-size:1.4rem}.filter-group{min-width:160px}.vehicle-expense-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media (max-width: 768px){.expenses-page{padding:1rem;background:var(--neutral-100);border-radius:0}.page-header{margin-bottom:1.25rem;padding-bottom:1rem}.page-header h1{font-size:1.5rem}.subtitle{font-size:.88rem}.stats-grid{grid-template-columns:1fr;gap:.75rem;margin-bottom:1.25rem}.stat-card{padding:1rem 1.1rem;border-radius:var(--radius-md)}.stat-icon{width:44px;height:44px;font-size:.95rem;border-radius:var(--radius-sm)}.stat-value{font-size:1.4rem}.filters-section{padding:1rem;flex-direction:column;gap:.75rem;border-radius:var(--radius-md);margin-bottom:1.25rem}.filter-group{min-width:100%;flex:unset}.filter-group label{font-size:.78rem}.btn-reset{width:100%;text-align:center;padding:.8rem}.vehicle-groups-header{flex-direction:column}.vehicle-expense-group{border-radius:var(--radius-md)}.vehicle-expense-toggle{padding:1rem;flex-direction:column;align-items:stretch;gap:.75rem}.vehicle-expense-main{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem}.vehicle-badge-large{min-width:unset}.vehicle-expense-summary{flex-direction:row;align-items:center;justify-content:space-between;padding-top:.5rem;border-top:1px dashed var(--neutral-200)}.vehicle-expense-summary strong{font-size:1.1rem}.vehicle-expense-types{padding:0 1rem 1rem;gap:.5rem}.vehicle-expense-type-pill{flex:1 1 100%;min-width:0;padding:.6rem .85rem}.vehicle-expense-list{grid-template-columns:1fr;padding:.75rem 1rem 1rem;gap:.75rem}.vehicle-expense-item{padding:1rem}.vehicle-expense-item:before{width:100%;height:3px;bottom:unset;top:0;left:0;border-radius:0}}@media (max-width: 480px){.expenses-page{padding:.75rem}.stat-value{font-size:1.25rem}.vehicle-expense-meta strong{font-size:.92rem}.amount{font-size:1rem}}.vehicle-expense-group.expanded .vehicle-expense-toggle{background:var(--primary-light);border-bottom:1px solid var(--primary-mid)}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.desktop-only{display:block}.mobile-only{display:none}@media (max-width: 768px){.desktop-only{display:none}.mobile-only{display:flex}}