/* Expense reference workspace. Existing expense persistence remains unchanged. */
.expense-reference { --exp-ink:#192941; --exp-muted:#8090a7; --exp-line:#e2eaf3; --exp-teal:#008d91; display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:18px; width:100%; min-width:0; align-items:start; color:var(--exp-ink); }
.expense-reference *, .expense-reference *::before, .expense-reference *::after { box-sizing:border-box; }
.expense-reference.exp-ref-panel-closed { grid-template-columns:minmax(0,1fr); }
.expense-reference .expense-main { display:grid; gap:15px; min-width:0; }
.expense-reference .exp-ref-breadcrumb { display:flex; gap:11px; align-items:center; margin:3px 0 10px; color:#788aa2; font-size:11px; font-weight:700; }
.expense-reference .exp-ref-breadcrumb > span { color:#b2becf; }
.expense-reference .ops-title-row { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:14px; margin:0; text-align:left; }
.expense-reference .ops-title-row > div:first-child { min-width:0; }
.expense-reference .ops-title-row h1 { margin:0; font-size:27px; font-weight:850; line-height:1.25; letter-spacing:-.6px; }
.expense-reference .ops-title-row p { margin:6px 0 0; color:#7e8fa7; font-size:12px; font-weight:550; line-height:1.5; }
.expense-reference .ops-title-row .toolbar { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:0; }
.expense-reference .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; width:auto; height:auto; min-width:0; min-height:34px; padding:7px 12px; border:1px solid #dde6f1; border-radius:7px; background:#fff; color:#34465f; box-shadow:none; font:inherit; font-size:11px; font-weight:750; line-height:1.3; white-space:nowrap; cursor:pointer; }
.expense-reference .btn.primary { border-color:#00888e; color:#fff; background:linear-gradient(125deg,#009a9c,#00868b); }
.expense-reference .btn:hover:not(:disabled) { border-color:#8bc9cb; background:#f0fafa; }
.expense-reference .btn.primary:hover:not(:disabled) { background:#007f85; }
.expense-reference .btn svg, .expense-reference .btn .icon { flex:0 0 14px; width:14px; height:14px; }
.expense-reference .btn.exp-ref-refresh { width:35px; padding:8px; font-size:0; gap:0; }
.expense-reference :is(button,input,select,textarea,summary):focus-visible { outline:2px solid #07969b; outline-offset:3px; }
.expense-reference button:disabled { opacity:.4; cursor:default; }
.expense-reference .exp-ref-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; min-width:0; }
.expense-reference .exp-ref-stat { display:flex; align-items:center; grid-column:span 2; gap:15px; min-width:0; min-height:104px; padding:17px 16px; border:1px solid var(--exp-line); border-radius:8px; background:#fff; }
.expense-reference .exp-ref-stat:nth-child(n+4) { grid-column:span 3; min-height:91px; }
.expense-reference .exp-ref-stat:first-child { background:linear-gradient(115deg,#f2fcfa,#fbfefd); }
.expense-reference .exp-ref-stat-icon { display:flex; align-items:center; justify-content:center; flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:#edf3ff; color:#4077f1; }
.expense-reference .exp-ref-stat-icon svg { width:24px; height:24px; }
.expense-reference .exp-ref-stat-green .exp-ref-stat-icon { background:#dffbea; color:#269a54; }
.expense-reference .exp-ref-stat-orange .exp-ref-stat-icon { background:#fff0e1; color:#f08222; }
.expense-reference .exp-ref-stat > div { min-width:0; }
.expense-reference .exp-ref-stat h2 { margin:0 0 7px; color:#536a88; font-size:12px; line-height:1.35; font-weight:750; }
.expense-reference .exp-ref-stat strong { display:block; color:#17283f; font-size:clamp(20px,1.55vw,27px); font-weight:850; line-height:1.15; letter-spacing:-.5px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.expense-reference .exp-ref-stat p { margin:7px 0 0; color:#8494ac; font-size:11px; line-height:1.4; }
.expense-reference .exp-ref-list { min-width:0; padding:17px 16px 14px; border:1px solid var(--exp-line); border-radius:8px; background:#fff; }
.expense-reference .exp-ref-list-head { display:flex; align-items:center; gap:14px; margin:0 0 12px; }
.expense-reference .exp-ref-list-head h2 { margin:0; font-size:17px; line-height:1.4; font-weight:800; }
.expense-reference .exp-ref-count { padding:4px 11px; border-radius:20px; background:#eef3f7; color:#6f8199; font-size:11px; font-weight:750; white-space:nowrap; }
.expense-reference .exp-ref-tabs { display:flex; gap:8px; border-bottom:1px solid #e9eef5; margin:0 0 13px; }
.expense-reference .exp-ref-tabs > button { position:relative; min-height:36px; padding:8px 13px; border:0; background:transparent; color:#8a99af; font:inherit; font-size:12px; font-weight:750; cursor:pointer; white-space:nowrap; }
.expense-reference .exp-ref-tabs > button.active { color:#008f94; }
.expense-reference .exp-ref-tabs > button.active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:3px; border-radius:3px; background:#00999b; }
.expense-reference .exp-ref-filters { margin:0 0 12px; padding:0; border:0; box-shadow:none; background:transparent; }
.expense-reference .exp-ref-filter-row { display:grid; grid-template-columns:1.15fr .95fr 1.05fr minmax(150px,1.65fr) auto; gap:8px; align-items:center; min-width:0; }
.expense-reference .exp-ref-filter-row :is(input,select) { min-width:0; width:100%; height:36px; min-height:0; padding:7px 9px; border:1px solid #dfe7f1; border-radius:6px; background-color:#fff; color:#4c617d; font:inherit; font-size:11px; font-weight:650; }
.expense-reference .exp-ref-filter-row label { margin:0; min-width:0; }
.expense-reference .exp-ref-period { position:relative; }
.expense-reference .exp-ref-period > .icon { position:absolute; left:10px; top:11px; width:14px; height:14px; color:#6b7f9e; pointer-events:none; }
.expense-reference .exp-ref-period select { padding-left:30px; }
.expense-reference .exp-ref-search { display:flex; align-items:center; gap:7px; height:36px; padding:0 9px; border:1px solid #dfe7f1; border-radius:6px; background:#fff; }
.expense-reference .exp-ref-search .icon { flex:0 0 14px; width:14px; height:14px; color:#7a8ca5; }
.expense-reference .exp-ref-search input { flex:1; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; box-shadow:none; font-weight:500; }
.expense-reference .exp-ref-search input::placeholder { color:#91a0b5; }
.expense-reference .exp-ref-filter-row .btn { min-height:36px; padding:7px 10px; }
.expense-reference .exp-ref-date-range { display:flex; gap:8px; align-items:center; margin:10px 0 0; color:#8b9ab0; }
.expense-reference .exp-ref-date-range[hidden] { display:none; }
.expense-reference .exp-ref-date-range input { width:145px; max-width:45%; min-height:34px; padding:6px 9px; border:1px solid var(--exp-line); border-radius:6px; color:#4b607b; font:inherit; font-size:11px; }
.expense-reference .exp-ref-table-wrap { width:100%; min-width:0; max-height:none; margin:0; overflow-x:auto; border:1px solid #e3ebf4; border-radius:7px; }
.expense-reference .exp-ref-table { width:100%; min-width:835px; border-collapse:collapse; table-layout:fixed; font-size:11px; }
.expense-reference .exp-ref-col-info { width:18%; }
.expense-reference .exp-ref-col-category { width:11%; }
.expense-reference .exp-ref-col-supply { width:13%; }
.expense-reference .exp-ref-col-total { width:12%; }
.expense-reference .exp-ref-col-method { width:10%; }
.expense-reference .exp-ref-col-status { width:9%; }
.expense-reference .exp-ref-col-receipt { width:5%; }
.expense-reference .exp-ref-col-actions { width:10%; }
.expense-reference .exp-ref-table th { height:35px; padding:8px; border:0; border-bottom:1px solid #e6edf5; background:#f7fafd; color:#8697ae; text-align:left; font-size:10px; font-weight:750; line-height:1.35; }
.expense-reference .exp-ref-table td { height:53px; padding:8px; border:0; border-bottom:1px solid #e9eff6; color:#35475f; font-size:11px; line-height:1.4; vertical-align:middle; overflow-wrap:anywhere; }
.expense-reference .exp-ref-table tbody tr:last-child td { border-bottom:0; }
.expense-reference .exp-ref-table tr:hover { background:#f7fcfc; }
.expense-reference .exp-ref-table strong { display:block; color:#293b54; font-size:11px; font-weight:750; line-height:1.4; }
.expense-reference .exp-ref-table small { display:block; margin-top:4px; color:#91a0b4; font-size:10px; line-height:1.4; }
.expense-reference .exp-ref-table small > span { margin:0 3px; color:#b5c1d2; }
.expense-reference .exp-ref-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.expense-reference .exp-ref-table .exp-ref-total { color:#1a2b42; font-weight:800; }
.expense-reference .exp-ref-note { color:#52647c; }
.expense-reference .exp-ref-table .badge { padding:4px 8px; border-radius:18px; font-size:10px; line-height:1.2; white-space:nowrap; }
.expense-reference .exp-ref-receipt { text-align:center; color:#9aa8bb; }
.expense-reference .exp-ref-receipt .icon { width:15px; height:15px; }
.expense-reference .exp-ref-row-actions { display:flex; gap:6px; align-items:flex-start; }
.expense-reference .exp-ref-row-actions .icon-btn, .expense-reference .exp-ref-row-menu > summary { display:flex; align-items:center; justify-content:center; flex:0 0 29px; width:29px; height:30px; min-height:0; padding:6px; border:1px solid #e0e8f1; border-radius:6px; background:#fff; color:#536781; box-shadow:none; list-style:none; cursor:pointer; }
.expense-reference .exp-ref-row-actions .icon-btn .icon { width:14px; height:14px; }
.expense-reference .exp-ref-row-menu > summary::-webkit-details-marker { display:none; }
.expense-reference .exp-ref-row-menu > summary { font-size:16px; font-weight:800; line-height:1; }
.expense-reference .exp-ref-row-menu .exp-ref-delete { margin-top:6px; padding:5px 6px; min-height:28px; color:#d34b5c; font-size:10px; }
.expense-reference .exp-ref-row-menu[open] { min-width:61px; }
.expense-reference .exp-ref-empty { min-height:180px; display:grid; align-items:center; }
.expense-reference .exp-ref-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:13px; color:#8a9bb0; font-size:12px; }
.expense-reference .exp-ref-pagination > div { display:flex; gap:7px; align-items:center; }
.expense-reference .exp-ref-pagination select { width:auto; min-width:76px; height:32px; min-height:0; padding:5px 23px 5px 9px; border:1px solid #dfe7f1; border-radius:6px; background-color:#fff; color:#526782; font-size:11px; }
.expense-reference .exp-ref-page { position:relative; display:flex; align-items:center; justify-content:center; width:29px; height:32px; min-height:0; padding:5px; border:1px solid transparent; border-radius:6px; background:transparent; color:#6d819b; font:inherit; font-size:12px; cursor:pointer; }
.expense-reference .exp-ref-page.active { color:#fff; background:linear-gradient(125deg,#009b9d,#00888d); }
.expense-reference .exp-ref-page svg { width:14px; height:14px; }
.expense-reference .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.expense-reference .expense-side.exp-ref-side { position:sticky; top:calc(var(--sb-top,54px) + 12px); display:block; width:100%; min-width:0; height:calc(100dvh - var(--sb-top,54px) - 27px); min-height:450px; }
.expense-reference .exp-ref-side .expense-form-card { display:flex; flex-direction:column; height:100%; max-height:100%; min-height:0; padding:20px 18px 0; border:1px solid #e0e9f2; border-radius:9px; background:#fff; box-shadow:0 3px 15px #33537007; }
.expense-reference .exp-ref-form-head { display:flex; align-items:flex-start; justify-content:space-between; flex:0 0 auto; gap:12px; padding:0 0 20px; }
.expense-reference .exp-ref-form-head h2 { margin:0; color:#263852; font-size:22px; font-weight:800; line-height:1.3; }
.expense-reference .exp-ref-form-head p { margin:8px 0 0; color:#8a9ab1; font-size:12px; line-height:1.4; }
.expense-reference .exp-ref-form-head .icon-btn { display:flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:27px; padding:3px; border:0; background:transparent; color:#879bb7; }
.expense-reference .exp-ref-form-head .icon-btn .icon { width:17px; height:17px; }
.expense-reference #expense-form { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; margin:0; padding:0; overflow:hidden; }
.expense-reference .expense-form-content { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px 3px 18px 0; scrollbar-width:thin; scrollbar-color:#d7e4ec transparent; overscroll-behavior:contain; }
.expense-reference .expense-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
.expense-reference .expense-form-grid .wide { grid-column:1/-1; }
.expense-reference .expense-form-grid label { display:grid; min-width:0; gap:7px; margin:0; color:#62768f; font-size:12px; font-weight:750; }
.expense-reference .expense-form-grid label > span { min-width:0; line-height:1.4; }
.expense-reference .exp-ref-required { color:#e34d60; font-weight:750; }
.expense-reference #expense-form :is(input:not([type=file]),select,textarea) { display:block; width:100%; min-width:0; max-width:100%; min-height:39px; height:39px; margin:0; padding:9px 11px; border:1px solid #dce6f0; border-radius:7px; background-color:#fff; color:#405570; font:inherit; font-size:12px; font-weight:550; line-height:1.4; box-shadow:0 1px 2px #304e7003; }
.expense-reference #expense-form :is(input,textarea)::placeholder { color:#a3afc0; font-weight:450; }
.expense-reference #expense-form textarea { height:76px; min-height:76px; resize:vertical; }
.expense-reference .expense-payment-fields { display:contents; }
.expense-reference .expense-payment-fields > label { grid-column:1/-1; }
.expense-reference .expense-card-fields { min-width:0; padding:11px; border:1px solid #dcebef; border-radius:7px; background:#f7fcfc; }
.expense-reference .expense-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
.expense-reference .exp-ref-unit { position:relative; min-width:0; }
.expense-reference #expense-form .exp-ref-unit input { padding-right:30px; }
.expense-reference .exp-ref-unit > span { position:absolute; top:50%; right:10px; transform:translateY(-50%); color:#9aabc0; font-size:11px; pointer-events:none; }
.expense-reference .expense-form-grid .exp-ref-form-total { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; padding:0 12px; border-radius:6px; background:linear-gradient(100deg,#e8f8f6,#e9f8f7); color:#00898e; }
.expense-reference #expense-form .exp-ref-form-total input { height:40px; min-height:40px; padding:7px 0; border:0; background:transparent; color:#172b44; box-shadow:none; text-align:right; font-size:19px; font-weight:850; appearance:textfield; }
.expense-reference .exp-ref-form-total input::-webkit-inner-spin-button { appearance:none; }
.expense-reference .exp-ref-receipt-field { display:grid; gap:8px; color:#62768f; font-size:12px; font-weight:750; }
.expense-reference .expense-form-grid .exp-ref-file-drop { position:relative; display:grid; place-content:center; justify-items:center; grid-template-columns:auto auto; gap:6px; min-height:83px; padding:14px; border:1px dashed #cfdae7; border-radius:7px; background:#fbfdff; color:#647a97; cursor:pointer; }
.expense-reference .exp-ref-file-drop > .icon { width:16px; height:16px; }
.expense-reference .exp-ref-file-drop strong { color:#5b708c; font-size:12px; line-height:1.4; }
.expense-reference .exp-ref-file-drop .exp-ref-file-name { grid-column:1/-1; max-width:100%; color:#a0afc3; font-size:11px; line-height:1.4; font-weight:500; overflow-wrap:anywhere; }
.expense-reference #expense-receipt-file { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; opacity:0; cursor:pointer; }
.expense-reference #expense-form > .form-actions { position:static!important; display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); flex:0 0 auto; gap:10px; margin:0; padding:13px 0 17px; border-top:1px solid #edf2f7; background:#fff; }
.expense-reference #expense-form > .form-actions .btn { width:100%; min-height:43px; padding:10px; font-size:12px; }
.expense-reference .expense-field-error { grid-column:1/-1; color:#dc4158; font-size:11px; }
@media(min-width:1401px) { .expense-reference { grid-template-columns:minmax(0,1fr) 365px; } }
@media(max-width:1280px) {
  .expense-reference { grid-template-columns:minmax(0,1fr) 320px; gap:13px; }
  .expense-reference .ops-title-row { flex-wrap:wrap; gap:10px; }
  .expense-reference .exp-ref-stat { gap:10px; padding:14px 11px; }
  .expense-reference .exp-ref-stat-icon { flex-basis:35px; width:35px; height:35px; }
  .expense-reference .exp-ref-stat strong { font-size:21px; }
  .expense-reference .exp-ref-filter-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .expense-reference .exp-ref-search { grid-column:span 2; }
}
@media(max-width:1000px) and (min-width:801px) {
  .expense-reference { grid-template-columns:minmax(0,1fr); }
  .expense-reference .expense-side.exp-ref-side { position:relative; top:auto; width:100%; height:680px; min-height:0; }
}
@media(max-width:800px) {
  .expense-reference { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px; }
  .expense-reference .ops-title-row { flex-wrap:wrap; }
  .expense-reference .ops-title-row .toolbar { width:100%; justify-content:flex-start; }
  .expense-reference .ops-title-row h1 { font-size:23px; }
  .expense-reference .ops-title-row p { font-size:11px; }
  .expense-reference .exp-ref-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .expense-reference .exp-ref-stat, .expense-reference .exp-ref-stat:nth-child(n+4) { grid-column:span 1; min-height:90px; padding:13px; gap:10px; }
  .expense-reference .exp-ref-stat:first-child { grid-column:1/-1; }
  .expense-reference .exp-ref-stat-icon { width:36px; height:36px; flex-basis:36px; }
  .expense-reference .exp-ref-stat h2 { font-size:11px; }
  .expense-reference .exp-ref-stat strong { font-size:22px; }
  .expense-reference .exp-ref-stat p { font-size:10px; }
  .expense-reference .exp-ref-list { padding:13px 11px; }
  .expense-reference .exp-ref-tabs { gap:4px; }
  .expense-reference .exp-ref-tabs > button { flex:1; padding:9px 3px; font-size:11px; }
  .expense-reference .exp-ref-filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .expense-reference .exp-ref-filter-row > .exp-ref-search { grid-column:1/-1; }
  .expense-reference .exp-ref-filter-row > .btn { width:100%; }
  .expense-reference .exp-ref-pagination { flex-wrap:wrap; gap:10px; font-size:11px; }
  .expense-reference .exp-ref-pagination > div { flex-wrap:wrap; gap:5px; }
  .expense-reference .expense-side.exp-ref-side { position:fixed!important; inset:0!important; z-index:160; width:100%!important; max-width:none; height:100dvh!important; min-height:0!important; padding:env(safe-area-inset-top,0px) 0 0; background:#fff; }
  .expense-reference .exp-ref-side .expense-form-card { border:0; border-radius:0; padding:18px 16px 0; }
  .expense-reference .expense-form-content { padding-bottom:20px; }
  .expense-reference .exp-ref-form-head { padding-bottom:17px; }
  .expense-reference .exp-ref-form-head h2 { font-size:21px; }
  .expense-reference #expense-form :is(input:not([type=file]),select,textarea) { font-size:16px; min-height:43px; height:43px; }
  .expense-reference #expense-form textarea { height:80px; }
  .expense-reference #expense-form > .form-actions { padding-bottom:calc(13px + env(safe-area-inset-bottom,0px)); }
  body.mw-mobile #app #main .expense-reference .expense-side.exp-ref-side { display:block!important; }
  body.mw-mobile #app #main .expense-reference .expense-form-card { display:flex!important; flex-direction:column!important; background:#fff!important; padding:18px 16px 0!important; border:0!important; }
  body.mw-mobile #app #main .expense-reference .expense-form-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body.mw-mobile #app #main .expense-reference .expense-form-grid > label { display:grid!important; grid-template-columns:minmax(0,1fr)!important; }
  body.mw-mobile #app #main .expense-reference #expense-form > .form-actions { position:static!important; display:grid!important; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important; margin:0!important; padding:13px 0 calc(13px + env(safe-area-inset-bottom,0px))!important; }
  body.mw-mobile #app #main .expense-reference #expense-form .exp-ref-form-total { grid-template-columns:auto minmax(0,1fr)!important; }
  body.mw-mobile #app #main .expense-reference .exp-ref-search input { border:0!important; min-height:0!important; height:100%!important; padding:0!important; background:transparent!important; box-shadow:none!important; font-size:16px!important; }
}