/* ============ MODAL SCROLL FIX (CSS fallback) ============
   This is a CSS-only safety net that works even before/without the
   JavaScript fix (Ledger.showModal / enforceModalFit in ledger.js) runs.
   Important: modal-content must NOT use overflow:hidden here — clipping
   the content actively prevents the browser's own natural scroll from
   ever kicking in as a fallback if anything else goes wrong. Instead we
   give modal-body a direct, generous max-height so it scrolls on its own. */
.modal.show .modal-dialog {
  max-height: calc(100vh - 24px) !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.modal.show .modal-content {
  max-height: calc(100vh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.modal.show .modal-header,
.modal.show .modal-footer { flex: 0 0 auto !important; }
.modal.show .modal-body {
  max-height: 65vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
@media (max-width: 575.98px) {
  .modal.show .modal-dialog { max-height: calc(100vh - 8px) !important; margin-top: 4px !important; margin-bottom: 4px !important; }
  .modal.show .modal-content { max-height: calc(100vh - 8px) !important; }
  .modal.show .modal-body { max-height: 70vh !important; }
}
/* item-table inputs must be free to shrink inside their flex/table cells */
.item-row-table input,
.charge-row input { min-width: 0; }


/* ============ ENTRY MODAL — PROFESSIONAL POLISH ============ */
#entryModal .modal-header {
  background: linear-gradient(135deg, var(--color-primary), #0F172A);
  color: #fff; border-bottom: none; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
#entryModal .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
#entryModal .item-row-table thead th {
  background: linear-gradient(90deg, rgba(30,58,138,.08), rgba(30,58,138,.02));
  border-bottom: 2px solid var(--color-border); padding-top: 8px; padding-bottom: 8px;
}
#entryModal #itemTableWrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px 10px 0; margin-bottom: 12px; background: var(--color-card); }
#entryModal .grand-total-box {
  background: linear-gradient(135deg, rgba(30,58,138,.10), rgba(212,175,55,.06));
  border: 1px solid rgba(30,58,138,.18) !important;
}
#entryModal #entryPartySelected { color: var(--color-success) !important; font-weight: 600; }
#entryModal .modal-footer { background: var(--color-bg); border-top: 1px solid var(--color-border); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi-card {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.kpi-card .kpi-label { font-size: .78rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-card .kpi-value { font-size: 1.65rem; font-weight: 800; margin-top: 6px; }
.kpi-card.receive .kpi-value { color: var(--color-success); }
.kpi-card.pay .kpi-value { color: var(--color-danger); }
.kpi-card i.kpi-icon { position: absolute; right: 14px; top: 14px; font-size: 1.8rem; opacity: .15; }

/* ============ QUICK ACTION CARDS (Udhar Lena Hai / Udhar Dena Hai) ============ */
.quick-action-card {
  display: flex; align-items: center; gap: 16px; height: 100%; min-height: 96px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-soft); text-decoration: none; color: var(--color-text);
  transition: box-shadow .15s, transform .15s;
}
.quick-action-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); color: var(--color-text); }
.quick-action-card.receive {
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(22,163,74,.03));
  border-color: rgba(22,163,74,.3);
}
.quick-action-card.pay {
  background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(220,38,38,.03));
  border-color: rgba(220,38,38,.3);
}
[data-bs-theme="dark"] .quick-action-card.receive { background: linear-gradient(135deg, rgba(22,163,74,.22), rgba(22,163,74,.05)); }
[data-bs-theme="dark"] .quick-action-card.pay { background: linear-gradient(135deg, rgba(220,38,38,.22), rgba(220,38,38,.05)); }
.quick-action-card .qa-icon { font-size: 2.1rem; flex-shrink: 0; }
.quick-action-card.receive .qa-icon { color: var(--color-success); }
.quick-action-card.pay .qa-icon { color: var(--color-danger); }
.quick-action-card .qa-text { flex: 1; min-width: 0; }
.quick-action-card .qa-title { font-weight: 800; font-size: 1.02rem; }
.quick-action-card .qa-title span { font-weight: 600; font-size: .82rem; color: var(--color-text-muted); }
.quick-action-card .qa-sub { font-size: .78rem; color: var(--color-text-muted); margin-top: 2px; }
.quick-action-card .qa-btn {
  flex-shrink: 0; font-weight: 700; font-size: .82rem; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.quick-action-card.receive .qa-btn { background: rgba(22,163,74,.18); color: var(--color-success); }
.quick-action-card.pay .qa-btn { background: rgba(220,38,38,.18); color: var(--color-danger); }


.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-tabs .cat-tab {
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text);
  padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .15s;
}
.cat-tabs .cat-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============ BALANCE PILL ============ */
.balance-pill { font-weight: 800; padding: 3px 10px; border-radius: 8px; font-size: .85rem; display: inline-block; }
.balance-pill.positive { color: var(--color-success); background: rgba(22,163,74,.1); }
.balance-pill.negative { color: var(--color-danger); background: rgba(220,38,38,.1); }
.balance-pill.zero { color: var(--color-text-muted); background: rgba(100,116,139,.1); }

/* ============ OVERDUE BADGES ============ */
.overdue-badge { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.overdue-badge.d7 { background: #FEF3C7; color: #92400E; }
.overdue-badge.d15 { background: #FDE68A; color: #78350F; }
.overdue-badge.d30 { background: #FED7AA; color: #9A3412; }
.overdue-badge.d60 { background: #FECACA; color: #991B1B; }
.overdue-badge.d90 { background: #DC2626; color: #fff; }

/* ============ CUSTOMER LIST CARDS ============ */
.party-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-card); margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s;
}
.party-card:hover { box-shadow: var(--shadow-hover); }
.party-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; flex-shrink: 0;
  overflow: hidden;
}
.party-avatar img { width: 100%; height: 100%; object-fit: cover; }
.party-info { flex: 1; min-width: 0; }
.party-info .p-name { font-weight: 700; }
.party-info .p-meta { font-size: .78rem; color: var(--color-text-muted); }
.party-balance { text-align: right; }
.party-balance small { display: block; font-size: .68rem; color: var(--color-text-muted); }

/* ============ CHAT-STYLE TIMELINE ============ */
.ledger-timeline { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 90px; }
.timeline-date-sep {
  align-self: center; background: var(--color-border); color: var(--color-text-muted);
  font-size: .72rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; margin: 10px 0;
}
.chat-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 14px; position: relative; box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.chat-bubble.you-gave { align-self: flex-start; background: #FEE2E2; border-bottom-left-radius: 4px; }
[data-bs-theme="dark"] .chat-bubble.you-gave { background: #3b1e22; }
.chat-bubble.you-got { align-self: flex-end; background: #DCFCE7; border-bottom-right-radius: 4px; }
[data-bs-theme="dark"] .chat-bubble.you-got { background: #16302170; }
.chat-bubble .cb-desc { font-weight: 600; font-size: .9rem; }
.chat-bubble .cb-amount { font-weight: 800; font-size: 1.05rem; }
.chat-bubble.you-gave .cb-amount { color: var(--color-danger); }
.chat-bubble.you-got .cb-amount { color: var(--color-success); }
.chat-bubble .cb-meta { font-size: .68rem; color: var(--color-text-muted); margin-top: 2px; display:flex; gap:8px; align-items:center; }
.chat-bubble .cb-running { font-size: .7rem; font-weight: 700; margin-top: 4px; }
.chat-bubble .cb-attach { font-size: .68rem; color: var(--color-secondary); margin-top: 3px; }

/* ============ FLOATING QUICK ADD BUTTON ============ */
.fab-quick-add {
  position: fixed; right: 26px; bottom: 26px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 10px 24px rgba(30,58,138,.35); border: none; z-index: 50; cursor: pointer;
  transition: transform .15s;
}
.fab-quick-add:hover { transform: scale(1.07); }

/* Sticky bottom action bar on customer profile (you gave / you got) */
.profile-action-bar {
  position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 4px;
  background: linear-gradient(to top, var(--color-bg) 70%, transparent); z-index: 10;
}
.profile-action-bar .btn { flex: 1; font-weight: 700; padding: 12px; border-radius: var(--radius-md); }

/* ============ CALCULATOR WIDGET ============ */
.mini-calc { position: fixed; width: 230px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: 10px; z-index: 3000; }
.mini-calc .calc-screen { background: var(--color-bg); border-radius: 8px; padding: 10px; text-align: right; font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; min-height: 40px; overflow-x: auto; }
.mini-calc .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini-calc button { border: 1px solid var(--color-border); background: var(--color-bg); border-radius: 8px; padding: 10px 0; font-weight: 700; cursor: pointer; }
.mini-calc button.op { background: var(--color-primary); color: #fff; }

/* ============ ITEM TABLE (entry form) ============ */
.item-row-table th { font-size: .72rem; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
.item-row-table input { text-align: right; }
.item-row-table input.item-name-input { text-align: left; }
.charge-row input { text-align: right; }

/* ============ SKELETON LOADERS ============ */
.skeleton { background: linear-gradient(90deg, var(--color-border) 25%, rgba(255,255,255,.35) 37%, var(--color-border) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 8px; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-card { height: 66px; margin-bottom: 10px; border-radius: var(--radius-md); }
.skeleton-line { height: 14px; margin-bottom: 8px; }

/* ============ DRAG HANDLE for dashboard widgets ============ */
.widget-drag-handle { cursor: grab; opacity: .4; }
.widget-drag-handle:hover { opacity: .9; }
.dashboard-widget.dragging { opacity: .5; }

/* ============ MISC ============ */
.attach-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.duplicate-warn { border: 1px solid #F59E0B !important; background: rgba(245,158,11,.08); }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-primary); display: inline-block; margin: 0 6px; }
.pin-dot.filled { background: var(--color-primary); }