/* Expenses visual pass. Existing expense, salary and account calculations are unchanged. */
body[data-view="expenses"] #content .expensesDemoPage{padding:14px;border:1px solid #dbe4ef;border-radius:9px;background:#f8fafc;box-shadow:0 4px 16px #0f172a08}
body[data-view="expenses"] #content .expensesDemoIntro{padding:6px 10px 13px;border-bottom:1px solid #dbe4ef}
body[data-view="expenses"] #content .expensesDemoIntro h2{font-size:17px;letter-spacing:-.2px}
body[data-view="expenses"] #content .expensesDemoIntro h2 svg{width:21px;height:21px;color:#2563eb}
body[data-view="expenses"] #content .expensesDemoIntro p{margin:4px 0 11px;font-size:11px;line-height:1.45}
body[data-view="expenses"] #content .expensesDemoActions{gap:8px}
body[data-view="expenses"] #content .expensesDemoActions .btn{min-height:34px;padding:7px 11px;border-radius:5px;font-size:11px;font-weight:650}
body[data-view="expenses"] #content .expenseAddButton{background:#111a2d}
body[data-view="expenses"] #content .expenseKpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:12px 0 10px}
body[data-view="expenses"] #content .expenseKpis article{min-width:0;padding:11px 13px;border-radius:6px;box-shadow:0 2px 7px #0f172a08}
body[data-view="expenses"] #content .expenseKpis article:nth-child(4){grid-column:auto}
body[data-view="expenses"] #content .expenseKpis small{font-size:9px;letter-spacing:.035em}
body[data-view="expenses"] #content .expenseKpis strong{margin-top:5px;font-size:21px;line-height:1.1;overflow-wrap:anywhere}
body[data-view="expenses"] #content .expenseFilters{gap:7px;padding:9px 0 11px}
body[data-view="expenses"] #content .expenseFilters .search{flex:1 1 230px;max-width:360px;min-height:34px;height:34px;border-radius:5px;font-size:11px}
body[data-view="expenses"] #content .expenseFilters select{width:190px;min-height:34px;height:34px;border-radius:5px;font-size:11px}
body[data-view="expenses"] #content .expenseFilters label{gap:5px;font-size:10px}
body[data-view="expenses"] #content .expenseFilters label input{width:125px;height:32px;min-height:32px;border-radius:5px;font-size:11px}
body[data-view="expenses"] #content .expenseFilters>.btn{min-height:32px;padding:6px 10px;border-radius:5px;font-size:11px}
body[data-view="expenses"] #content .tablewrap{border:1px solid #dbe4ef;border-radius:7px;background:#fff;box-shadow:0 3px 10px #0f172a09}
body[data-view="expenses"] #content .tablewrap th{height:36px;padding:9px 10px;background:#111a2d;color:#f8fafc;font-size:10px}
body[data-view="expenses"] #content .tablewrap td{padding:9px 10px;border-bottom:1px solid #edf1f6;font-size:11px}
body[data-view="expenses"] #content .tablewrap tbody tr:nth-child(even){background:#f8fafc}
body[data-view="expenses"] #content .tablewrap tbody tr:hover td{background:#eff6ff}
body[data-view="expenses"] #content .tablewrap td .badge{border-radius:4px}
body[data-view="expenses"] #content .rowactions .btn{border-radius:5px}
body[data-view="expenses"] #modal .dialog:has(#expenseDemoForm){border-radius:10px;box-shadow:0 24px 60px #0b112050}
body[data-view="expenses"] #modal .dialog:has(#expenseDemoForm) .dialoghead{background:#111a2d}
body[data-view="expenses"] #modal #expenseDemoForm>.formbody{padding:14px;background:#f8fafc}
body[data-view="expenses"] #modal #expenseDemoForm>.formbody>.formgrid{gap:10px 12px;padding:12px;border:1px solid #dbe4ef;border-radius:6px;background:#fff}
body[data-view="expenses"] #modal #expenseDemoForm .expenseFormTop{padding:12px;border:1px solid #dbe4ef;border-radius:6px;background:#fff}
body[data-view="expenses"] #modal #expenseDemoForm .expenseCategoryChoice select{border-radius:5px}
body[data-view="expenses"] #modal #expenseDemoForm #expenseCategoryAdd{width:34px;min-width:34px;height:34px;min-height:34px;padding:6px;border-radius:5px}
body[data-view="expenses"] #modal #expenseDemoForm .expenseSalaryDetails{padding:11px;border:1px solid #c7d8ea;border-radius:6px;background:#f3f8ff}
body[data-view="expenses"] #modal #expenseDemoForm .expenseSalaryDetails>div:first-child{margin-bottom:9px}
body[data-view="expenses"] #modal #expenseDemoForm .expenseSalaryDetails span{border-radius:4px}
body[data-view="expenses"] #modal #expenseDemoForm .staffSalarySummary{border-radius:5px;box-shadow:0 2px 6px #0f172a08}
body[data-view="expenses"] #modal #expenseDemoForm input,
body[data-view="expenses"] #modal #expenseDemoForm select,
body[data-view="expenses"] #modal #expenseDemoForm textarea{border-radius:5px}
@media(max-width:760px){
  body[data-view="expenses"] #content .expensesDemoPage{padding:9px;border-radius:6px}
  body[data-view="expenses"] #content .expenseKpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px 0}
  body[data-view="expenses"] #content .expenseKpis article{padding:9px}
  body[data-view="expenses"] #content .expenseKpis strong{font-size:18px}
  body[data-view="expenses"] #content .expenseFilters .search,
  body[data-view="expenses"] #content .expenseFilters select{max-width:none;width:100%;flex-basis:100%}
  body[data-view="expenses"] #content .expenseFilters label{flex:1 1 100%;justify-content:space-between}
  body[data-view="expenses"] #content .expenseFilters label input{width:min(72%,180px)}
  body[data-view="expenses"] #modal #expenseDemoForm>.formbody{padding:8px}
}