/* MySmartInvoice 2 – area 'expenses' styles (Ausgaben, Bank, Kasse). Tokens only, see css/lumen.css. */

/* page tabs (same sub-pages as the sidebar) */
.xtabs { display: flex; gap: 4px; margin: -6px 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.xtabs a { padding: 10px 14px; color: var(--text-3); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.xtabs a:hover { color: var(--text); text-decoration: none; }
.xtabs a.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.xtabs .xn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-50); color: var(--accent-text); font-size: 12px; }

/* capture area (photo / PDF / drag & drop) */
.xdrop { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur-fast), background var(--dur-fast); }
.xdrop.over { border-color: var(--accent); background: var(--accent-50); }
.xdrop .xd-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-50); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.xdrop .xd-ico .ico { width: 28px; height: 28px; }
.xdrop .xd-txt { flex: 1; min-width: 0; } .xdrop .xd-txt b { display: block; font-size: 17px; } .xdrop .xd-txt span { color: var(--text-3); font-size: 14px; }
.xdrop .xd-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.xdrop input[type=file] { display: none; }
.xdrop.big { flex-direction: column; text-align: center; padding: 44px 24px; }
.xdrop.big .xd-ico { width: 72px; height: 72px; border-radius: 20px; } .xdrop.big .xd-ico .ico { width: 34px; height: 34px; }
.xdrop.big .xd-btns { justify-content: center; }
@media (max-width: 700px) { .xdrop { flex-direction: column; text-align: center; padding: 22px 16px; } .xdrop .xd-btns { width: 100%; } .xdrop .xd-btns .btn { flex: 1; } }
.xmail { display: flex; gap: 8px; align-items: center; color: var(--text-3); font-size: 14px; margin-top: 10px; flex-wrap: wrap; }
.xmail code { background: var(--surface-3); padding: 2px 8px; border-radius: 6px; color: var(--text-2); }
.xup { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.xup div { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text-2); }

/* list helpers */
.xtoolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.xtoolbar .input-icon { flex: 1 1 200px; max-width: 320px; margin-left: auto; }
@media (max-width: 700px) { .xtoolbar .input-icon { max-width: none; margin-left: 0; } }
.xpos { color: var(--ok); font-variant-numeric: tabular-nums; } .xneg { color: var(--text); font-variant-numeric: tabular-nums; }
.rowx .r-side .stx { justify-content: flex-end; }
.xempty { padding: 34px 20px; text-align: center; color: var(--text-3); }
.xempty b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.xdue { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.xdue .val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* review screen */
.xreview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .xreview { grid-template-columns: minmax(0, 1fr); } }
.xprev { min-height: 360px; display: flex; align-items: flex-start; justify-content: center; }
.xprev img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.xprev iframe { width: 100%; height: 72vh; min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
@media (max-width: 700px) { .xprev iframe { height: 60vh; min-height: 380px; } }
.xprev .xnofile { padding: 50px 10px; text-align: center; color: var(--text-3); }
.xform { display: flex; flex-direction: column; gap: 16px; }
.xform .xamount input { font-size: 22px; font-weight: 700; height: 52px; font-variant-numeric: tabular-nums; }
.xform .xrow2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 520px) { .xform .xrow2 { grid-template-columns: minmax(0, 1fr); } }
.xsug { font-size: 13px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.xsug .ico { width: 14px; height: 14px; color: var(--accent-text); }
.xtaxline { font-size: 14px; color: var(--text-3); }
.xsumm { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; margin: 0; }
.xsumm dt { color: var(--text-3); } .xsumm dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.xactions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) { .xactions .btn-primary { flex: 1 1 100%; } }

/* category tiles + VAT switch */
.xcat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.xcat-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-2); line-height: 1.25; }
.xcat-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.xcat-item input { position: absolute; opacity: 0; pointer-events: none; }
.xcat-item:focus-within { box-shadow: var(--focus-ring); }
.xcat-item.on { border-color: var(--accent); background: var(--accent-50); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.xcat-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.xcat-ico .ico { width: 16px; height: 16px; }
.xcat-item.on .xcat-ico { background: var(--accent); color: #fff; }
@media (max-width: 520px) { .xcat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xrate label { border: 0; background: none; padding: 8px 14px; border-radius: calc(var(--radius) - 3px); font: 600 var(--fs-sm)/1 var(--font); color: var(--text-2); cursor: pointer; position: relative; }
.xrate label input { position: absolute; opacity: 0; pointer-events: none; }
.xrate label.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.xrate label:focus-within { box-shadow: var(--focus-ring); }

/* bank: accounts + inbox */
.xaccs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.xacc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.xacc .xa-top { display: flex; align-items: center; gap: 10px; }
.xacc .xa-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-50); color: var(--accent-text); flex: none; }
.xacc .xa-bal { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xacc .xa-meta { color: var(--text-3); font-size: 13px; }
.xbox { display: flex; flex-direction: column; }
.xitem { padding: 16px 20px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
.xitem:last-child { border-bottom: 0; }
.xitem .xi-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xitem .xi-main span { color: var(--text-3); font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xitem .xi-amt { font-weight: 700; font-size: 17px; text-align: right; white-space: nowrap; }
.xitem .xi-q { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.xitem .xi-q.sure { background: var(--ok-bg); }
.xitem .xi-q .xi-txt { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.xitem .xi-q .xi-txt b { font-weight: 600; }
.xitem .xi-q .xi-btns { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .xitem { padding: 14px 16px; } .xitem .xi-q .xi-btns { width: 100%; } .xitem .xi-q .xi-btns .btn { flex: 1; } }
.xbanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.xbanner .xb-txt { flex: 1 1 240px; } .xbanner .xb-txt b { display: block; }
.xpick { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 10px; }
.xpick button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.xpick button:last-child { border-bottom: 0; }
.xpick button:hover { background: var(--surface-3); }
.xpick button span { color: var(--text-3); font-size: 13px; }

/* cash book */
.xcash .rowx { grid-template-columns: 56px minmax(0, 1fr) auto; }
.xcash .xno { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.xcash .rowx.rev .r-main b { text-decoration: line-through; color: var(--text-3); }
.rowx .r-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rowx .r-side .btn { margin-top: 2px; }

/* hint tiles on the receipts list ("5 Belege noch nicht erfasst", "Diese Woche zu zahlen") */
.xhints { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.xhint { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.xhint:hover { background: var(--surface-2); text-decoration: none; }
.xhint .xh-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-50); color: var(--accent-text); flex: none; }
.xhint.warn .xh-ico { background: var(--warn-bg); color: var(--warn); }
.xhint.bad .xh-ico { background: var(--err-bg); color: var(--err); }
.xhint .xh-txt { min-width: 0; } .xhint .xh-txt b { display: block; font-weight: 600; }
.xhint .xh-txt span { display: block; color: var(--text-3); font-size: 14px; }

/* stat rows */
.stats.xstats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.xstats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .stats.xstats2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stats.xstats3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stats.xstats3 > :first-child { grid-column: 1 / -1; }
  .stats.xstats3 .stat .val { font-size: 19px; }
}
.xno-m { display: none; }
@media (max-width: 700px) { .xcash .rowx { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; } .xcash .xno { display: none; } .xno-m { display: inline; } }

/* SEPA selection */
.xsepa { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); max-height: 46vh; overflow-y: auto; }
.xsepa-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.xsepa-row:last-child { border-bottom: 0; }
.xsepa-row .r-main b { display: block; font-weight: 600; } .xsepa-row .r-main span { color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.xsepa-row .amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* bank pages */
.xacc .xa-name { min-width: 0; } .xacc .xa-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xacc .xa-name .xa-meta { display: block; }
.xbanner .xb-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--ok); flex: none; }
.xbanner .xb-txt .muted { font-size: 14px; }
@media (max-width: 700px) { .xbanner .btn { flex: 1 1 100%; } }
.xsub { display: flex; flex-direction: column; gap: 6px; }
.xsub-h { font-weight: 600; font-size: 15px; }
.rowx.static { cursor: default; } .rowx.static:hover { background: none; }
.rowx.xflat { padding: 10px 0; }
.xnarrow { max-width: 860px; }
.xaccrow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .xaccrow .field { flex: 1 1 260px; margin: 0; }
.xmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.xitem .xi-amt .xneg { color: var(--text); }
/* phone/tablet: the questions first, the photo/PDF below (mobile-first photo flow) */
@media (max-width: 1100px) { .xreview > :first-child { order: 2; } .xprev { min-height: 0; } }
@media (max-width: 700px) { .xprev iframe { height: 50vh; min-height: 320px; } .xprev img { max-height: 60vh; object-fit: contain; } }