:root {
    --crm-bg: #f4f7fb;
    --crm-surface: #ffffff;
    --crm-text: #111827;
    --crm-muted: #667085;
    --crm-border: #e6eaf0;
    --crm-primary: #1769e0;
    --crm-primary-dark: #0e55be;
    --crm-sidebar: #0b1320;
    --crm-sidebar-2: #111c2d;
    --sidebar-width: 272px;
    --topbar-height: 64px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--crm-text); background: var(--crm-bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-size: 16px; }
.min-vw-0 { min-width: 0; }

.btn-primary { --bs-btn-bg: var(--crm-primary); --bs-btn-border-color: var(--crm-primary); --bs-btn-hover-bg: var(--crm-primary-dark); --bs-btn-hover-border-color: var(--crm-primary-dark); }
.touch-target, .icon-button, .sidebar-link, .bottom-nav-item { min-height: 44px; }
.form-control, .form-select { border-color: #d8dee8; border-radius: 12px; }
.form-control:focus, .form-select:focus { border-color: #8bb8f6; box-shadow: 0 0 0 .2rem rgba(23,105,224,.12); }

.login-body { background: #f7f9fc; }
.login-brand-panel { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #07101e 0%, #0d2448 55%, #1769e0 140%); }
.login-brand-panel::before { content: ''; position: absolute; inset: -30% -10%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 48%); transform: rotate(-10deg); }
.login-card { max-width: 480px; background: #fff; padding: 28px; border: 1px solid var(--crm-border); border-radius: 24px; box-shadow: 0 18px 60px rgba(15,23,42,.08); }
.brand-kicker { letter-spacing: .14em; font-weight: 700; font-size: .78rem; opacity: .68; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--crm-primary); color: #fff; font-weight: 800; font-size: 1.2rem; flex: 0 0 auto; }
.brand-mark-sm { width: 40px; height: 40px; border-radius: 12px; }

.app-body { background: var(--crm-bg); }
.desktop-sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--crm-sidebar); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-subtitle { color: #8390a4; font-size: .78rem; }
.sidebar-nav { width: 100%; }
.sidebar-section-title { color: #6f7d91; font-size: .68rem; font-weight: 800; letter-spacing: .12em; margin: 22px 10px 8px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #b5c0cf; text-decoration: none; margin-bottom: 4px; transition: .15s ease; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-link.active { color: #fff; background: linear-gradient(90deg, rgba(23,105,224,.34), rgba(23,105,224,.13)); }
.sidebar-icon { width: 22px; text-align: center; font-size: 1.15rem; }
.disabled-link { opacity: .62; pointer-events: none; }

.app-main { width: calc(100% - var(--sidebar-width)); }
.topbar { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--crm-border); z-index: 1020; min-height: var(--topbar-height); }
.icon-button { width: 44px; border-radius: 12px; }
.menu-bars { font-size: 1.2rem; line-height: 1; }
.global-search { max-width: 680px; }
.search-box { position: relative; }
.search-box .form-control { min-height: 44px; padding-left: 42px; background: #f7f9fc; border-color: transparent; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #7a8698; z-index: 2; font-size: 1.1rem; }
.user-menu-button { border-radius: 14px; border: 0; min-height: 46px; }
.avatar-circle { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e8f1ff; color: var(--crm-primary); font-weight: 800; }
.user-name { max-width: 130px; }
.content-area { padding-bottom: 0; }
.page-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; }

.metric-card, .panel-card { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: 18px; box-shadow: 0 5px 22px rgba(17,24,39,.035); }
.metric-card { padding: 18px; }
.metric-label { color: var(--crm-muted); font-size: .85rem; font-weight: 650; }
.metric-value { font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 800; margin-top: 8px; }
.metric-foot { color: #98a2b3; font-size: .75rem; margin-top: 6px; }
.panel-card { padding: 20px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.feature-tile { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--crm-border); border-radius: 14px; height: 100%; }
.feature-check { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #eaf7ef; color: #147a40; font-weight: 900; }
.responsive-rule { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--crm-border); }
.responsive-rule:last-child { border-bottom: 0; }
.responsive-rule small { grid-column: 1 / -1; color: var(--crm-muted); }

.mobile-offcanvas { width: min(86vw, 320px); }
.mobile-offcanvas .sidebar-nav { background: #fff; }
.mobile-offcanvas .sidebar-section-title { color: #98a2b3; }
.mobile-offcanvas .sidebar-link { color: #344054; }
.mobile-offcanvas .sidebar-link:hover { color: #111827; background: #f5f7fa; }
.mobile-offcanvas .sidebar-link.active { color: var(--crm-primary); background: #edf4ff; }

.mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1019; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(255,255,255,.97); border-top: 1px solid var(--crm-border); box-shadow: 0 -8px 22px rgba(15,23,42,.05); }
.bottom-nav-item { appearance: none; border: 0; background: transparent; color: #7d8898; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; font-size: 1.15rem; }
.bottom-nav-item small { font-size: .68rem; }
.bottom-nav-item.active { color: var(--crm-primary); font-weight: 700; }
.bottom-nav-action:disabled { opacity: .45; }

.empty-state { text-align: center; padding-top: 32px; }
.empty-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: #eef4ff; color: var(--crm-primary); font-size: 1.6rem; }
.history-list { border-top: 1px solid var(--crm-border); }
.history-result { padding: 16px 20px; border-bottom: 1px solid var(--crm-border); }
.history-result:last-child { border-bottom: 0; }

.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
    .app-main { width: 100%; }
    .content-area { padding-bottom: 78px; }
    .global-search { max-width: none; }
}

@media (max-width: 767.98px) {
    .topbar .global-search { order: 4; flex-basis: 100%; max-width: 100%; }
    .topbar .d-flex { flex-wrap: wrap; }
    .search-box .form-control { background: #f3f6fa; }
    .panel-card { padding: 16px; border-radius: 16px; }
    .metric-card { padding: 14px; border-radius: 16px; }
    .login-card { padding: 22px 18px; border-radius: 20px; box-shadow: none; }
}

@media (max-width: 575.98px) {
    .container-fluid { --bs-gutter-x: 1.25rem; }
    .metric-label { min-height: 38px; }
}

/* Phase 2 - Customer module */
.crm-table thead th { background:#f8fafc; color:#667085; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--crm-border); white-space:nowrap; }
.crm-table td, .crm-table th { padding:14px 16px; }
.status-pill { display:inline-flex; align-items:center; min-height:26px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:800; }
.status-active { color:#157347; background:#eaf7ef; }
.status-muted { color:#667085; background:#f0f2f5; }
.customer-mobile-list { padding:8px; }
.customer-mobile-card { display:block; color:inherit; text-decoration:none; padding:14px; margin-bottom:8px; background:#fff; border:1px solid var(--crm-border); border-radius:14px; }
.customer-mobile-card:active { transform:scale(.995); background:#f8fafc; }
.metric-value-sm { font-size:1.05rem; line-height:1.3; min-height:42px; display:flex; align-items:center; }
.form-actions { position:sticky; bottom:0; z-index:1010; display:flex; justify-content:flex-end; gap:10px; padding:14px 0 calc(14px + env(safe-area-inset-bottom)); margin-top:12px; background:linear-gradient(to bottom,rgba(244,247,251,.2),var(--crm-bg) 35%); }
.form-actions .btn { min-height:46px; min-width:120px; }
.customer-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
.customer-tabs::-webkit-scrollbar { display:none; }
.customer-tabs a { flex:0 0 auto; text-decoration:none; color:#475467; background:#fff; border:1px solid var(--crm-border); border-radius:999px; padding:9px 14px; font-weight:700; font-size:.84rem; }
.customer-tabs a:hover { color:var(--crm-primary); border-color:#b8d2f6; }
.scroll-anchor { scroll-margin-top:92px; }
.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 22px; }
.detail-grid span { display:block; color:#98a2b3; font-size:.75rem; margin-bottom:3px; }
.detail-grid strong { font-size:.92rem; overflow-wrap:anywhere; }
.subrecord-card { height:100%; padding:16px; border:1px solid var(--crm-border); border-radius:15px; background:#fff; }
.timeline-list { position:relative; }
.timeline-item { display:flex; gap:14px; position:relative; padding:0 0 22px; }
.timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:14px; bottom:0; width:2px; background:#e8edf4; }
.timeline-dot { width:14px; height:14px; border-radius:50%; background:var(--crm-primary); box-shadow:0 0 0 4px #eaf2ff; flex:0 0 auto; margin-top:5px; z-index:1; }
.history-changes { display:grid; gap:5px; }
.history-changes > div { display:grid; grid-template-columns:minmax(100px,160px) 1fr auto 1fr; align-items:center; gap:7px; font-size:.75rem; }
.history-changes code { padding:4px 6px; background:#f5f7fa; border-radius:6px; overflow-wrap:anywhere; white-space:normal; }
@media (max-width: 991.98px) { .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 575.98px) { .detail-grid { grid-template-columns:1fr; gap:14px; } .form-actions { margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; } .form-actions .btn { flex:1; min-width:0; } .history-changes > div { grid-template-columns:1fr; gap:3px; border-bottom:1px dashed var(--crm-border); padding-bottom:7px; } .history-changes b { display:none; } }

/* Phase 3 - Product / Warehouse / Stock */
.stock-number { display:inline-flex; min-width:62px; justify-content:flex-end; font-weight:850; font-variant-numeric:tabular-nums; }
.stock-ok { color:#157347 !important; }
.stock-low { color:#b76e00 !important; }
.stock-out { color:#c62828 !important; }
.stock-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.stock-card-grid > div { background:#f8fafc; border:1px solid #edf0f4; border-radius:10px; padding:8px; min-width:0; }
.stock-card-grid span { display:block; color:#98a2b3; font-size:.68rem; }
.stock-card-grid strong { display:block; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.incoming-receive-card { border-color:#cfe9d8; background:linear-gradient(180deg,#fff,#f9fffb); }
.detail-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quick-create-sheet { height:auto; max-height:70vh; border-radius:22px 22px 0 0; }
.quick-action-card { min-height:94px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--crm-border); border-radius:16px; background:#fff; text-decoration:none; color:var(--crm-text); }
.quick-action-card span { font-size:1.45rem; color:var(--crm-primary); }
.quick-action-card:active { background:#f6f9fe; transform:scale(.99); }
@media (max-width:575.98px){ .detail-grid-2{grid-template-columns:1fr 1fr;} .crm-table td,.crm-table th{padding:11px 12px;} }

/* Phase 4 - Lead Management */
.lead-potential { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:900; letter-spacing:.03em; }
.lead-potential-hot { color:#b42318; background:#fee4e2; }
.lead-potential-high { color:#b54708; background:#fef0c7; }
.lead-potential-medium { color:#175cd3; background:#eaf2ff; }
.lead-potential-low { color:#475467; background:#f2f4f7; }
.lead-status-new { color:#344054; background:#eef2f6; }
.lead-status-contacted { color:#175cd3; background:#eaf2ff; }
.lead-status-qualifying { color:#6941c6; background:#f4ebff; }
.lead-status-qualified { color:#067647; background:#dcfae6; }
.lead-status-hold { color:#b54708; background:#fef0c7; }
.lead-status-unqualified { color:#b42318; background:#fee4e2; }
.lead-status-converted { color:#05603a; background:#d1fadf; }
.lead-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.lead-card-grid > div { min-width:0; padding:9px; border:1px solid #edf0f4; border-radius:10px; background:#f8fafc; }
.lead-card-grid span { display:block; color:#98a2b3; font-size:.67rem; }
.lead-card-grid strong { display:block; margin-top:2px; font-size:.78rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lead-next-action-card { padding:16px; border:1px solid #dbe8fb; border-radius:15px; background:linear-gradient(180deg,#fff,#f5f9ff); }
.lead-next-action-card.overdue { border-color:#f7c8c4; background:linear-gradient(180deg,#fff,#fff6f5); }
.lead-mobile-card { border-left:4px solid #dbe8fb; }
@media (max-width:575.98px){ .lead-card-grid{grid-template-columns:1fr 1fr 1fr;} }

/* Phase 5 - Opportunity + Sales Pipeline */
.opportunity-stage { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:850; white-space:nowrap; background:#f2f4f7; color:#475467; }
.opp-stage-prospect { color:#475467 !important; background:#f2f4f7 !important; }
.opp-stage-requirement { color:#175cd3 !important; background:#eaf2ff !important; }
.opp-stage-evaluation { color:#6941c6 !important; background:#f4ebff !important; }
.opp-stage-quotation { color:#0e7090 !important; background:#e0f2fe !important; }
.opp-stage-negotiation { color:#b54708 !important; background:#fef0c7 !important; }
.opp-stage-waiting-po { color:#067647 !important; background:#dcfae6 !important; }
.opp-stage-hold { color:#8a5b00 !important; background:#fff4cc !important; }
.opp-stage-won { color:#05603a !important; background:#d1fadf !important; }
.opp-stage-lost { color:#b42318 !important; background:#fee4e2 !important; }
.opportunity-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.opportunity-card-grid > div { min-width:0; padding:9px; border:1px solid #edf0f4; border-radius:10px; background:#f8fafc; }
.opportunity-card-grid span { display:block; color:#98a2b3; font-size:.67rem; }
.opportunity-card-grid strong { display:block; margin-top:2px; font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opportunity-mobile-card { border-left:4px solid #cbd5e1; }
.pipeline-scroll { overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.pipeline-board { display:flex; gap:14px; min-width:max-content; align-items:flex-start; }
.pipeline-column { width:310px; max-width:84vw; flex:0 0 310px; border:1px solid var(--crm-border); border-radius:18px; background:#f7f9fc; overflow:hidden; scroll-snap-align:start; }
.pipeline-column-head { padding:14px 14px 12px; border-bottom:1px solid var(--crm-border); background:#fff; position:sticky; top:0; z-index:1; }
.pipeline-dot { width:10px; height:10px; border-radius:50%; display:inline-block; padding:0; min-height:0; }
.pipeline-cards { padding:10px; display:grid; gap:10px; max-height:calc(100vh - 280px); overflow-y:auto; }
.pipeline-card { display:block; color:inherit; text-decoration:none; background:#fff; border:1px solid #e8edf4; border-radius:14px; padding:13px; box-shadow:0 2px 8px rgba(15,23,42,.025); }
.pipeline-card:hover { border-color:#bfd3ee; box-shadow:0 4px 14px rgba(15,23,42,.06); }
.pipeline-empty { padding:28px 14px; text-align:center; color:#98a2b3; font-size:.8rem; border:1px dashed #d9e0e9; border-radius:12px; background:rgba(255,255,255,.6); }
.pipeline-next { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:10px; background:#f5f8fc; color:#475467; font-size:.75rem; }
.pipeline-next > span { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; background:#e7eef8; color:#175cd3; font-weight:900; }
.pipeline-next.overdue { background:#fff1f0; color:#b42318; }
.pipeline-next.overdue > span { background:#fee4e2; color:#b42318; }
@media (max-width:575.98px){ .pipeline-column{width:286px;flex-basis:286px;max-width:88vw;} .pipeline-cards{max-height:none;overflow:visible;} }

/* Phase 6 - Activity / Task / Follow-up */
.priority-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .55rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.priority-urgent{background:#fee4e2;color:#b42318;border-color:#fecdca}.priority-high{background:#fff3e0;color:#b54708;border-color:#fedf89}.priority-normal{background:#eaf2ff;color:#175cd3;border-color:#c7d7fe}.priority-low{background:#f2f4f7;color:#475467;border-color:#e4e7ec}
.status-info{background:#eaf2ff;color:#175cd3}.status-warning{background:#fff3e0;color:#b54708}
.task-overdue-card{border-color:#fda29b!important;background:#fffafa!important}.followup-card{border:1px solid #e5eaf1;border-radius:14px;padding:14px;background:#fff;transition:.15s ease}.followup-card:hover{border-color:#b8cce8;box-shadow:0 4px 14px rgba(15,23,42,.06)}
@media(max-width:767.98px){.followup-card{padding:13px}.priority-pill{font-size:.66rem}.panel-card .panel-header{gap:.75rem;align-items:flex-start;flex-wrap:wrap}}

/* Phase 7 - Quotation Management */
.quotation-status{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:850;white-space:nowrap;background:#f2f4f7;color:#475467}
.quote-status-draft{background:#f2f4f7!important;color:#475467!important}.quote-status-pending{background:#fff3e0!important;color:#b54708!important}.quote-status-approved{background:#eaf2ff!important;color:#175cd3!important}.quote-status-sent{background:#eef4ff!important;color:#3538cd!important}.quote-status-accepted{background:#dcfae6!important;color:#067647!important}.quote-status-rejected{background:#fee4e2!important;color:#b42318!important}.quote-status-expired{background:#fef0c7!important;color:#854a0e!important}.quote-status-cancelled{background:#eaecf0!important;color:#475467!important}
.price-policy{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:850;border:1px solid transparent;white-space:nowrap}.price-policy-ok{background:#dcfae6;color:#067647;border-color:#abefc6}.price-policy-warning{background:#fef0c7;color:#b54708;border-color:#fedf89}
.quotation-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quotation-card-grid>div{min-width:0;padding:9px;border:1px solid #edf0f4;border-radius:10px;background:#f8fafc}.quotation-card-grid span{display:block;color:#98a2b3;font-size:.67rem}.quotation-card-grid strong{display:block;margin-top:2px;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quotation-mobile-card{border-left:4px solid #b8d2f6}
.stock-info-box{height:100%;padding:12px;border:1px solid var(--crm-border);border-radius:14px;background:#f8fafc}.stock-info-box span{display:block;color:#98a2b3;font-size:.72rem}.stock-info-box strong{display:block;margin-top:5px;font-size:1rem}
.quote-item-card{padding:14px;border:1px solid var(--crm-border);border-radius:15px;background:#fff}.quote-total-box{max-width:430px;border:1px solid var(--crm-border);border-radius:15px;padding:14px;background:#f9fbfd}.quote-total-box>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0}.quote-total-box .grand{border-top:2px solid #d0d5dd;margin-top:5px;padding-top:11px;font-size:1.05rem}
.approval-card{padding:14px;border:1px solid var(--crm-border);border-radius:14px;background:#fff}
@media(max-width:575.98px){.quotation-card-grid{grid-template-columns:1fr 1fr 1fr}.quote-total-box{max-width:none}.stock-info-box{padding:9px}.stock-info-box strong{font-size:.85rem}}


/* Phase 8 - Customer PO / Sales Order */
.sales-doc-status{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .65rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.sales-doc-draft{background:#eef2f7;color:#475569}.sales-doc-confirmed{background:#dcfce7;color:#166534}.sales-doc-partial{background:#fef3c7;color:#92400e}.sales-doc-shortage{background:#fee2e2;color:#991b1b}.sales-doc-cancelled{background:#f1f5f9;color:#64748b;text-decoration:line-through}
@media(max-width:991.98px){.sales-doc-status{font-size:.7rem}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){.detail-grid{grid-template-columns:1fr}}

/* Phase 9 - Delivery Order / Automatic Stock Issue */
.sales-doc-delivering{background:#eaf2ff;color:#175cd3}.sales-doc-delivered{background:#dcfae6;color:#067647}
.delivery-progress{height:8px;border-radius:999px;background:#eef2f6;overflow:hidden}.delivery-progress>span{display:block;height:100%;background:#12b76a}
@media(max-width:575.98px){.sales-doc-delivering,.sales-doc-delivered{font-size:.68rem}}

/* Phase 10 - Invoice / Payment / Receipt */
.finance-issued{background:#eaf2ff;color:#175cd3}.finance-partial{background:#fef3c7;color:#92400e}.finance-paid{background:#dcfae6;color:#067647}.finance-overdue{background:#fee4e2;color:#b42318}.finance-void{background:#f2f4f7;color:#667085;text-decoration:line-through}
.finance-alert{border-left:4px solid #f04438}.finance-receipt{border-left:4px solid #12b76a}
@media(max-width:575.98px){.finance-issued,.finance-partial,.finance-paid,.finance-overdue,.finance-void{font-size:.68rem}}