.expense-page{background-color:var(--bg-soft-blue,#f7faff);width:100%;font-family:var(--font-sans,"Be Vietnam Pro", sans-serif);box-sizing:border-box;padding:4px 8px 32px}.expense-topbar{border-bottom:1px solid var(--blue-border,#dbe9fe);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;display:flex}.expense-topbar-title{flex-direction:column;display:flex}.expense-topbar-title h1{color:var(--text-main,#111827);letter-spacing:-.02em;align-items:center;gap:10px;margin:0;font-size:1.45rem;font-weight:800;display:flex}.expense-topbar-title p{color:var(--text-muted,#4b5563);margin:4px 0 0;font-size:.8rem;font-weight:500}.expense-topbar-actions{align-items:center;gap:12px;display:flex}.btn-primary-pill{background:var(--blue-primary,#0f766e);color:#fff;cursor:pointer;border:1px solid var(--blue-primary,#0f766e);box-sizing:border-box;border-radius:6px;align-items:center;gap:6px;height:34px;padding:0 16px;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:0 1px 2px #0f766e33}.btn-primary-pill:hover{background:var(--blue-hover,#115e59);border-color:var(--blue-hover,#115e59)}.btn-secondary-pill{color:#1e293b;cursor:pointer;box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:6px;align-items:center;gap:6px;height:34px;padding:0 14px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex;box-shadow:0 1px 2px #0000000a}.btn-secondary-pill:hover{color:#0f172a;background:#f8fafc;border-color:#94a3b8}.expense-kpi-grid{grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;display:grid}@media (width<=1024px){.expense-kpi-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.expense-kpi-grid{grid-template-columns:1fr}}.expense-kpi-card{border-radius:var(--radius-lg,24px);border:1px solid var(--border-subtle,#e5edf8);box-shadow:var(--shadow-card,0 10px 30px #0f766e0f);background:#fff;flex-direction:column;justify-content:space-between;padding:20px;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.expense-kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px #0f766e17}.expense-kpi-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.expense-kpi-title{color:var(--text-muted,#4b5563);text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;font-weight:600}.expense-kpi-icon{border-radius:var(--radius-sm,12px);justify-content:center;align-items:center;width:36px;height:36px;display:flex}.kpi-icon-blue{background:var(--blue-subtle,#ccfbf1);color:var(--blue-primary,#0f766e)}.kpi-icon-amber{color:#d97706;background:#fffbeb}.kpi-icon-green{color:#059669;background:#ecfdf5}.kpi-icon-red{color:#dc2626;background:#fef2f2}.expense-kpi-value{color:var(--text-main,#111827);letter-spacing:-.02em;font-size:1.45rem;font-weight:800;line-height:1.2}.expense-kpi-subtext{color:var(--text-faint,#9ca3af);margin-top:6px;font-size:.75rem}.expense-filter-bar{background:#fff;border:1px solid #cbd5e1;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;padding:16px 20px;display:flex;box-shadow:0 1px 3px #0000000d}.expense-filter-inputs{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.expense-search-wrapper{flex:1;min-width:240px;position:relative}.expense-search-icon{color:#94a3b8;pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.expense-search-input{background:var(--bg-soft-blue,#f7faff);width:100%;color:var(--text-main,#111827);box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:8px 16px 8px 38px;font-size:.83rem;transition:border-color .2s,background .2s}.expense-search-input:focus{border-color:var(--blue-primary,#0f766e);background:#fff}.expense-filter-select{background:var(--bg-soft-blue,#f7faff);color:var(--text-main,#111827);cursor:pointer;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:8px 14px;font-size:.83rem;transition:border-color .2s}.expense-filter-select:focus{border-color:var(--blue-primary,#0f766e);background:#fff}.expense-period-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.expense-date-input{background:var(--bg-soft-blue,#f7faff);color:var(--text-main,#111827);border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:6px 14px;font-family:inherit;font-size:.82rem;transition:all .2s}.expense-date-input:focus{border-color:var(--blue-primary,#0f766e);background:#fff}.expense-period-chip{border-radius:var(--radius-pill,9999px);background:var(--blue-light,#f0f6ff);color:var(--blue-primary,#0f766e);white-space:nowrap;border:1px solid #0f766e33;align-items:center;gap:6px;padding:5px 12px;font-size:.76rem;font-weight:600;display:inline-flex}.expense-table-container{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.expense-table{border-collapse:separate;border-spacing:0;text-align:left;width:100%;font-size:12.5px}.expense-table thead th{color:#334155;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #cbd5e1;padding:10px 12px;font-size:12px;font-weight:700}.expense-table tbody td{color:#1e293b;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:8px 12px;font-size:12.5px}.expense-table tbody tr:hover{background:#f8fafc}.expense-table-code{color:var(--blue-primary,#0f766e);font-weight:700;font-family:var(--font-mono,monospace);font-size:.82rem}.expense-table-vendor{color:var(--text-main,#111827);font-weight:600}.expense-table-amount{color:var(--text-main,#111827);font-variant-numeric:tabular-nums;text-align:right;font-weight:700}.expense-badge{white-space:nowrap;border-radius:0;align-items:center;gap:5px;padding:0;font-size:13px;font-weight:500;display:inline-flex;background:0 0!important;border:none!important}.badge-pending{color:#b45309;background:0 0;border:none}.badge-paid{color:#16a34a;background:0 0;border:none}.badge-overdue{color:#dc2626;background:0 0;border:none}.badge-cancelled{color:#64748b;background:0 0;border:none}.table-action-group{align-items:center;gap:6px;display:flex}.action-btn-pay{background-color:var(--blue-primary,#0f766e);color:#fff;border:1px solid var(--blue-primary,#0f766e);cursor:pointer;box-sizing:border-box;border-radius:6px;align-items:center;gap:4px;height:28px;padding:0 10px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.action-btn-pay:hover{background-color:var(--blue-hover,#115e59);border-color:var(--blue-hover,#115e59)}.action-icon-btn{border-radius:var(--radius-pill,9999px);border:1px solid var(--border-subtle,#e5edf8);color:#64748b;cursor:pointer;background:#fff;justify-content:center;align-items:center;width:30px;height:30px;transition:all .15s;display:inline-flex}.action-icon-btn:hover{background:var(--blue-subtle,#e8f1ff);color:var(--blue-primary,#0f766e);border-color:var(--blue-border,#dbe9fe)}.action-icon-btn.danger:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca}.expense-pagination{color:var(--text-muted,#4b5563);background:#fff;border-top:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:14px 20px;font-size:.8rem;display:flex}.expense-page-btns{align-items:center;gap:6px;display:flex}.page-btn{border-radius:var(--radius-xs,8px);cursor:pointer;background:#fff;border:1px solid #e2e8f0;padding:5px 10px;font-size:.78rem;font-weight:600;transition:all .15s}.page-btn:hover:not(:disabled){border-color:var(--blue-primary,#0f766e);color:var(--blue-primary,#0f766e)}.page-btn:disabled{opacity:.45;cursor:not-allowed}.expense-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#0f172a73;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeInBackdrop;display:flex;position:fixed;inset:0}.expense-modal-dialog{border:1px solid var(--border-subtle,#e5edf8);background:#fff;border-radius:24px;flex-direction:column;width:100%;max-width:520px;animation:.2s cubic-bezier(.16,1,.3,1) scaleInDialog;display:flex;overflow:hidden;box-shadow:0 20px 48px #0f766e26}@keyframes fadeInBackdrop{0%{opacity:0}to{opacity:1}}@keyframes scaleInDialog{0%{opacity:0;transform:scale(.96)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.expense-modal-header{background:var(--bg-soft-blue,#f7faff);border-bottom:1px solid #eef2f6;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.expense-modal-title{align-items:center;gap:10px;display:flex}.expense-modal-title h3{color:var(--text-main,#111827);margin:0;font-size:1rem;font-weight:800}.modal-close-btn{color:#94a3b8;cursor:pointer;border-radius:var(--radius-pill,9999px);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .15s;display:flex}.modal-close-btn:hover{color:#1e293b;background:#e2e8f0}.expense-modal-body{flex-direction:column;gap:16px;max-height:80vh;padding:24px;display:flex;overflow-y:auto}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:#334155;text-transform:uppercase;letter-spacing:.03em;font-size:.77rem;font-weight:700}.form-input,.form-select,.form-textarea{background:var(--bg-soft-blue,#f7faff);border:1px solid var(--blue-border,#dbe9fe);border-radius:var(--radius-sm,12px);color:var(--text-main,#111827);box-sizing:border-box;outline:none;width:100%;padding:9px 14px;font-family:inherit;font-size:.85rem;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-primary,#0f766e);background:#fff;box-shadow:0 0 0 3px #0f766e1f}.form-input.error,.form-select.error{background:snow;border-color:#ef4444}.form-error{color:#ef4444;margin-top:2px;font-size:.74rem;font-weight:500}.expense-modal-footer{background:#fff;border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.expense-attach-tabs{gap:8px;margin-bottom:8px;display:flex}.expense-attach-tab-btn{background:var(--bg-soft-blue,#f7faff);border:1px solid var(--blue-border,#dbe9fe);border-radius:var(--radius-pill,9999px);color:#64748b;cursor:pointer;padding:5px 14px;font-size:.78rem;font-weight:600;transition:all .2s}.expense-attach-tab-btn.active{background:var(--blue-light,#f0f6ff);border-color:var(--blue-primary,#0f766e);color:var(--blue-primary,#0f766e)}.expense-upload-dropzone{border:2px dashed var(--blue-border,#dbe9fe);border-radius:var(--radius-sm,12px);background:var(--bg-soft-blue,#f7faff);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:18px;transition:all .2s;display:flex}.expense-upload-dropzone:hover{border-color:var(--blue-primary,#0f766e);background:var(--blue-light,#f0f6ff)}.expense-upload-preview-box{border:1px solid var(--blue-border,#dbe9fe);border-radius:var(--radius-sm,12px);background:#fff;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.expense-upload-preview-img{object-fit:cover;border:1px solid #e2e8f0;border-radius:8px;width:52px;height:52px}.expense-upload-file-meta{flex-direction:column;flex:1;display:flex;overflow:hidden}.expense-upload-file-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.expense-upload-file-size{color:#64748b;font-size:.72rem}.expense-upload-remove-btn{border-radius:var(--radius-pill,9999px);color:#ef4444;cursor:pointer;background:#fee2e2;border:none;padding:6px 12px;font-size:.74rem;font-weight:600;transition:all .15s}.expense-upload-remove-btn:hover{background:#fecaca}.skeleton-line{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%) 0 0/200% 100%;border-radius:6px;height:16px;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}