:root {
  --app-primary: #0b57d0;
  --app-primary-soft: #e8f0fe;
  --app-bg: #f4f7fb;
  --app-border: #e1e7ef;
  --app-text: #172033;
  --app-muted: #667085;
  --app-success: #087443;
  --app-warning: #9a6700;
  --app-danger: #b42318;
  --bs-primary: #0b57d0;
  --bs-primary-rgb: 11, 87, 208;
  --bs-body-color: #172033;
  --bs-body-bg: #f4f7fb;
  --bs-border-color: #e1e7ef;
  --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body { max-width: 100%; overflow-x: clip; }
body { background: var(--app-bg); color: var(--app-text); }
a { color: var(--app-primary); }
.min-w-0 { min-width: 0 !important; }
.app-sidebar { width: 272px; flex: 0 0 272px; z-index: 1030; }
.app-brand { padding: 1.4rem 1.25rem; }
.app-sidebar .nav-link { min-height: 48px; color: #475467; padding: .7rem .9rem; border-radius: .75rem; font-weight: 600; }
.app-sidebar .nav-link:hover { background: #f2f5f9; color: var(--app-primary); }
.app-sidebar .nav-link.active, .app-sidebar .nav-link[data-active="true"] { background: var(--app-primary-soft); color: var(--app-primary); }
.app-sidebar .nav-link i { width: 1.25rem; font-size: 1.15rem; text-align: center; }
.app-header { min-height: 68px; z-index: 1020; }
.app-customer-select { width: min(42vw, 240px); min-height: 42px; }
.app-icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 44px; }
.app-main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.app-bottom-nav { position: fixed; z-index: 1040; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .35rem .2rem calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(16, 24, 40, .08); }
.app-bottom-nav a { min-width: 0; min-height: 58px; color: #667085; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border-radius: .65rem; font-size: .68rem; font-weight: 600; }
.app-bottom-nav i { font-size: 1.2rem; line-height: 1; }
.app-bottom-nav a.active, .app-bottom-nav a[data-active="true"] { color: var(--app-primary); background: var(--app-primary-soft); }
.page-title { font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 700; margin: 0; }
.app-card { background: #fff; border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: 0 2px 8px rgba(16, 24, 40, .035); }
.summary-card { height: 100%; padding: 1rem; }
.summary-card .summary-label { color: var(--app-muted); font-size: .78rem; font-weight: 600; }
.summary-card .summary-value { display: block; margin-top: .3rem; font-size: 1.25rem; font-weight: 700; }
.next-charge-card { background: linear-gradient(135deg, #0b57d0, #174ea6); color: #fff; border: 0; }
.next-charge-card .text-secondary { color: rgba(255,255,255,.78) !important; }
.invoice-card { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.invoice-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--status-color, #8a94a6); }
.invoice-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16,24,40,.08); }
.invoice-card .card-body { padding: 1rem 1rem 1rem 1.15rem; }
.invoice-product { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; }
.invoice-meta { color: var(--app-muted); font-size: .82rem; }
.invoice-amount { font-size: 1.35rem; line-height: 1.15; font-weight: 750; }
.status-open { --status-color: #d18b00; }
.status-overdue { --status-color: #d92d20; }
.status-paid { --status-color: #079455; }
.status-canceled { --status-color: #98a2b3; }
.status-partial { --status-color: #7a5af8; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.status-badge.status-open { color: #7a4b00; background: #fff3d6; }
.status-badge.status-overdue { color: #9b1c14; background: #fee4e2; }
.status-badge.status-paid { color: #05603a; background: #dff7ea; }
.status-badge.status-canceled { color: #475467; background: #eaecf0; }
.status-badge.status-partial { color: #5925dc; background: #eee9ff; }
.filter-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-pills { display: flex; flex-wrap: nowrap; gap: .5rem; min-width: max-content; }
.filter-pills .btn { border-radius: 999px; }
.skeleton { position: relative; overflow: hidden; background: #e9edf3; min-height: 160px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.detail-hero { padding: 1.1rem; }
.detail-value { font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 750; }
.detail-list dt { color: var(--app-muted); font-size: .78rem; font-weight: 600; margin-bottom: .15rem; }
.detail-list dd { margin-bottom: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.payment-method-card { border: 1px solid var(--app-border); border-radius: .9rem; padding: 1rem; background: #fff; }
.mp-field { min-height: 44px; padding: .65rem .75rem; background: #fff; }
.mobile-payment-bar { position: fixed; z-index: 1035; left: .75rem; right: .75rem; bottom: calc(4.65rem + env(safe-area-inset-bottom)); padding: .65rem; border: 1px solid var(--app-border); border-radius: 1rem; background: rgba(255,255,255,.96); box-shadow: 0 8px 30px rgba(16,24,40,.18); backdrop-filter: blur(8px); }
.mobile-payment-bar.payment-bar-static { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; backdrop-filter: none; }
.touch-target { min-height: 44px; min-width: 44px; }
.receipt-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.receipt-field { border: 1px solid var(--app-border); background: #f8fafc; border-radius: .75rem; padding: .75rem; }
.receipt-field small { display: block; color: var(--app-muted); }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--app-muted); }
.is-app .download-apk { display: none !important; }

@media (min-width: 576px) { .receipt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .app-main { padding-bottom: 0; }
  .mobile-payment-bar { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; backdrop-filter: none; }
}
@media (max-width: 359.98px) {
  .app-company-name { max-width: 72px; }
  .app-customer-select { width: 96px; }
  .app-bottom-nav a { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.search-filter-bar {
  display: flex;
  align-items: end;
  gap: .75rem;
}

.search-filter-bar > .search-filter-input {
  flex: 1 1 auto;
  min-width: 0;
}

.search-filter-menu {
  --bs-dropdown-min-width: min(42rem, calc(100vw - 2rem));
  padding: 1rem;
}