/* Payments Tracker - mobile-first styles on top of Bootstrap 5 */
:root {
  /* Theme: soft, light - muted indigo with a gentle amber accent */
  --brand: #5b61b0;
  --brand-dark: #474c92;
  --brand-deep: #2f3263;
  --brand-soft: #eef0fa;
  --accent: #f3d38f;
  --accent-dark: #9a6b12;
  --accent-soft: #fdf6e3;
  --app-bg: #f8f8fb;
  --line: #ebebf2;
  --text-muted: #7a7d94;
  --bs-primary: #5b61b0;
  --bs-primary-rgb: 91, 97, 176;
  --bs-link-color: #5b61b0;
  --bs-link-color-rgb: 91, 97, 176;
  --bs-link-hover-color: #474c92;
  --bs-body-color: #33364d;
  --bs-success: #3f8f63; --bs-success-rgb: 63, 143, 99;
  --bs-danger: #c25252; --bs-danger-rgb: 194, 82, 82;
  --nav-h: 64px;
}

html { font-size: 15px; }
body { background: var(--app-bg); color: var(--bs-body-color); -webkit-tap-highlight-color: transparent; }
body.has-bottom-nav { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
@media (min-width: 992px) { body.has-bottom-nav { padding-bottom: 2rem; } }

.app-header { background: #fff; border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.app-header .navbar { padding-top: .35rem; padding-bottom: .35rem; }
.app-header .navbar-brand span { font-size: 1rem; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-main { max-width: 1100px; }
.min-w-0 { min-width: 0; }

/* Buttons & forms: large touch targets */
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.text-primary { color: var(--brand) !important; }
.form-control, .form-select { min-height: 46px; font-size: 16px; } /* 16px stops iOS zooming into inputs */
.form-control-sm, .form-select-sm, .input-group-sm .form-select { min-height: 36px; font-size: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(67, 56, 202, .2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; }
.btn-lg-touch { padding: .8rem 1rem; font-size: 1.05rem; font-weight: 600; }

/* Cards */
.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(47, 50, 99, .03); }
.stat-card { padding: .75rem .9rem; height: 100%; }
.stat-card .label { font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .value { font-size: 1.15rem; font-weight: 600; line-height: 1.2; margin-top: .15rem; }
.stat-card .sub { font-size: .78rem; color: #6c757d; }
.stat-card.hero { background: linear-gradient(135deg, #f1f2fb, #f7f1fb); color: var(--brand-deep); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px #e4e5f4; }
.stat-card.hero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(243, 211, 143, .18); }
.stat-card.hero .value { color: var(--brand-dark); }
.stat-card.hero .label, .stat-card.hero .sub { color: var(--text-muted); }
.stat-card .icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
a.stat-link { color: inherit; text-decoration: none; display: block; height: 100%; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.quick-actions a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem .25rem; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); color: #212529; text-decoration: none; font-size: .78rem; font-weight: 600; text-align: center; }
.quick-actions a i { font-size: 1.4rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.quick-actions a.primary i { background: var(--accent-soft); color: var(--accent-dark); box-shadow: inset 0 0 0 1px #f1dfb0; }

.section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 1.25rem 0 .5rem; }
.list-group-item { border-color: #eef0f3; }
.card > .list-group { border-radius: 14px; }

/* Period / filter chips */
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; border: 1px solid #d0d5dd; background: #fff; color: #344054; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; text-decoration: none; }
.chip.active { background: var(--brand-soft); border-color: #c9cced; color: var(--brand-dark); font-weight: 600; }

/* Bottom navigation (mobile) */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #e4e7ec; display: flex; box-shadow: 0 -2px 10px rgba(16, 24, 40, .05); }
.bottom-nav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #667085; text-decoration: none; font-size: .64rem; letter-spacing: -.01em; font-weight: 500; min-width: 0; }
.bottom-nav a i { font-size: 1.25rem; line-height: 1; }
.bottom-nav a.active { color: var(--brand); font-weight: 700; }
.bottom-nav a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bottom-nav .add-case { color: var(--accent-dark); font-weight: 700; }
.bottom-nav .add-circle { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--accent); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(154, 107, 18, .18); border: 3px solid #fff; }
.bottom-nav .add-circle i { font-size: 1.4rem; }

/* Sticky save bar on long forms */
.form-actions { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: var(--app-bg); padding: .75rem 0; z-index: 5; }
@media (min-width: 992px) { .form-actions { position: static; } }

.toast-stack .alert { border-radius: 12px; }
.table-report { font-size: .9rem; }
.table-report th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; color: #6c757d; }
.table-report td, .table-report th { padding: .55rem .5rem; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.age-pill { font-size: .72rem; border-radius: 999px; padding: .1rem .5rem; background: #f2f4f7; color: #344054; white-space: nowrap; }
.age-pill.old { background: #fee4e2; color: #b42318; }
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }

/* Accent touches */
.btn-accent { --bs-btn-bg: var(--accent-soft); --bs-btn-border-color: #f1dfb0; --bs-btn-color: var(--accent-dark); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--brand-deep); font-weight: 600; }
.bottom-nav a.active i { color: var(--brand); }
.bottom-nav a.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.bottom-nav a { position: relative; }
.bottom-nav a.add-case.active::before { display: none; }
.login-wrap .card { border-top: 3px solid var(--accent); }

/* Searchable select (type-to-search dropdown) */
.combo { position: relative; }
.combo-input { padding-right: 2.25rem; }
.combo-caret { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: #8a86a8; pointer-events: none; }
.combo-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid #dcd8ec; border-radius: 12px; box-shadow: 0 10px 28px rgba(30, 27, 75, .16); padding: .25rem; }
.combo.open .combo-menu { display: block; }
.combo-item { padding: .65rem .75rem; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1.3; }
.combo-item.active { background: var(--brand-soft); }
.combo-item.selected { font-weight: 600; color: var(--brand-dark); }
.combo-group { padding: .5rem .75rem .2rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color, #6c757d); }
.combo-item mark { background: var(--accent-soft); color: inherit; padding: 0 1px; border-radius: 3px; }
.combo-empty { padding: .75rem; color: #6c757d; font-size: .9rem; }
.combo .form-control-sm + .combo-caret { right: .6rem; font-size: .8rem; }

/* ---- Subtle palette overrides (softer than Bootstrap defaults) ---- */
h1, .h1, .h4, .h5 { color: var(--brand-deep); font-weight: 600; }
.text-muted { color: var(--text-muted) !important; }
.app-header .navbar-brand { color: var(--brand-deep); }
.app-header .nav-link { color: var(--text-muted); font-weight: 500; }
.app-header .nav-link.active, .app-header .nav-link:hover { color: var(--brand-dark); }
.app-header .account-btn { color: var(--text-muted); }

.btn { font-weight: 500; }
.btn-success { --bs-btn-bg: #4a9a6e; --bs-btn-border-color: #4a9a6e; --bs-btn-hover-bg: #3f8760; --bs-btn-hover-border-color: #3f8760; --bs-btn-active-bg: #3f8760; }
.btn-outline-success { --bs-btn-color: #3f8f63; --bs-btn-border-color: #bfe0cc; --bs-btn-hover-bg: #eaf6ef; --bs-btn-hover-color: #2f7a52; --bs-btn-hover-border-color: #a9d4bb; }
.btn-outline-primary { --bs-btn-border-color: #cfd2ee; --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--brand-dark); --bs-btn-hover-border-color: #c3c7ea; }
.btn-outline-secondary { --bs-btn-color: #5c6078; --bs-btn-border-color: #dcdde6; --bs-btn-hover-bg: #f1f2f6; --bs-btn-hover-color: #33364d; --bs-btn-hover-border-color: #d0d2dc; }
.btn-outline-danger { --bs-btn-color: #c25252; --bs-btn-border-color: #efcaca; --bs-btn-hover-bg: #fdf0f0; --bs-btn-hover-color: #a93f3f; --bs-btn-hover-border-color: #e6b5b5; }

/* Pastel status badges */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.text-bg-danger    { background-color: #fdeeee !important; color: #b54848 !important; }
.badge.text-bg-success   { background-color: #e9f6ef !important; color: #2f7a52 !important; }
.badge.text-bg-warning   { background-color: #fdf4dc !important; color: #8a6414 !important; }
.badge.text-bg-info      { background-color: #eaf3fb !important; color: #2e6a96 !important; }
.badge.text-bg-secondary { background-color: #eff0f4 !important; color: #5c6078 !important; }

.alert { border-width: 1px; }
.alert-success { background: #f1f9f4; border-color: #d7eee0; color: #2f6f4c; }
.alert-danger  { background: #fdf3f3; border-color: #f3d6d6; color: #9b3c3c; }
.alert-warning { background: #fdf8ea; border-color: #f4e5bb; color: #7d5a12; }
.alert-info    { background: #f1f6fc; border-color: #d9e6f5; color: #2e5d86; }

.bottom-nav { border-top-color: var(--line); box-shadow: 0 -1px 6px rgba(47, 50, 99, .04); }
.bottom-nav a { color: #8a8da3; }
.age-pill.old { background: #fdf0ee; color: #b54848; }
.form-control, .form-select { border-color: #dfe0ea; }
.table-report th { color: var(--text-muted); }
.bg-primary-subtle { background-color: var(--brand-soft) !important; }
.text-primary { color: var(--brand) !important; }
.bg-danger-subtle { background-color: #fbefef !important; }
.bg-success-subtle { background-color: #eef8f2 !important; }
.bg-warning-subtle { background-color: #fdf6e3 !important; }
.bg-secondary-subtle { background-color: #f1f2f6 !important; }
h1.h5, .h5 { font-weight: 600; }
.fw-semibold { font-weight: 550 !important; }
.fw-bold { font-weight: 600 !important; }
.form-switch { padding-left: 3.4em; }
.form-switch .form-check-input { margin-left: -3.4em; }

/* Dashboard - compact "Action required" list */
.action-item { padding: .7rem .9rem; }
.action-name { font-size: .92rem; font-weight: 600; color: var(--brand-deep); text-decoration: none; }
.action-meta { font-size: .78rem; color: var(--text-muted); margin-top: 1px; }
.action-amount { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.action-item .badge, .action-item .age-pill { font-size: .68rem; }
.call-link { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef8f2; color: #3f8f63; font-size: .78rem; text-decoration: none; }
.call-link:hover { background: #dff2e7; color: #2f7a52; }
.btn-xs { padding: .28rem .5rem; font-size: .8rem; border-radius: 8px; }
.combo-sub { font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.combo-mine { font-size: .65rem; font-weight: 600; color: #2f7a52; background: #e9f6ef; border-radius: 999px; padding: .05rem .45rem; align-self: center; white-space: nowrap; }
.combo-add { display: block; padding: .6rem .75rem; border-top: 1px solid var(--line); font-size: .85rem; text-decoration: none; }