:root { --forest: #18543d; --forest-dark: #103e2c; --bs-primary: #18543d; }

/* Owner announcements and in-app support. Admin styling lives in admin.css. */
.admin-fallback,.support-fallback { max-width:850px; margin:0 auto; }
.admin-field { margin-bottom:18px; }
.admin-check { display:flex; align-items:flex-start; gap:10px; margin:16px 0; }
.admin-check input { flex-shrink:0; }
.admin-text,.support-text { overflow-wrap:anywhere; line-height:1.7; }
.admin-message { padding:16px; border:1px solid #e3eae5; background:#fafcfb; border-radius:5px; margin:12px 0; overflow-wrap:anywhere; }
.admin-message span { display:block; font-size:.72rem; color:#566b5d; margin-top:4px; }
.admin-message p { margin:12px 0 0; }
.platform-modal .modal-content { border:1px solid #dce5df; border-radius:7px; }
.platform-modal .admin-form { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; max-height:100%; }
.platform-modal .modal-header,.platform-modal .modal-footer { flex-shrink:0; padding:18px 24px; }
.platform-modal .modal-body { min-height:0; overflow-y:auto; padding:24px; }
.platform-modal .modal-title,.admin-fallback .modal-title,.support-fallback .modal-title { font-size:1.05rem; font-weight:650; }
.platform-modal h3,.admin-fallback h3,.support-fallback h3 { font-size:.94rem; font-weight:600; margin-top:14px; }
.platform-modal .form-label { font-size:.8rem; }
.platform-modal .form-control,.platform-modal .form-select { font-size:.86rem; }
.platform-modal .modal-footer .btn { min-height:40px; font-size:.82rem; }
.owner-announcements { margin-top:20px; }
.announcement-list { padding:0 22px 6px; }
.announcement-item { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid #edf1ee; }
.announcement-item > div { min-width:0; }
.announcement-item h3 { font-size:.88rem; margin:0 0 5px; font-weight:600; overflow-wrap:anywhere; }
.announcement-item time { color:#61766a; font-size:.7rem; }
.announcement-item p { font-size:.78rem; color:#516858; margin:8px 0 0; overflow-wrap:anywhere; }
.announcement-item .record-action-view { flex-shrink:0; }
.announcement-empty { padding:0 22px 20px; color:#63796b; font-size:.78rem; margin:0; }
.support-contact { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; padding:20px 22px; }
.support-contact > div { min-width:0; }
.support-contact h2 { font-size:.95rem; margin:0 0 8px; }
.support-contact p { font-size:.78rem; line-height:1.6; margin:0; overflow-wrap:anywhere; color:#536d5b; }
.support-contact-details { display:flex; flex-direction:column; gap:7px; font-size:.76rem; overflow-wrap:anywhere; }
.support-note { font-size:.75rem; color:#5b7162; line-height:1.6; }
.support-tabs { display:flex; gap:20px; border-bottom:1px solid #e2eae5; padding:0 22px; }
.support-tabs a { text-decoration:none; color:#5b7262; font-size:.81rem; padding:16px 0; border-bottom:2px solid transparent; }
.support-tabs a.active { font-weight:600; color:#18543d; border-bottom-color:#18543d; }
.support-filter { border-bottom:1px solid #edf1ee; }
.support-filter > div { min-width:160px; }
.support-count { font-size:.72rem; color:#607766; padding-bottom:8px; }
.support-record { display:flex; justify-content:space-between; gap:24px; padding:20px 22px; border-bottom:1px solid #edf1ee; }
.support-record > div { min-width:0; }
.support-record h2 { font-size:.88rem; font-weight:600; margin:0 0 7px; overflow-wrap:anywhere; }
.support-record p { margin:5px 0 0; font-size:.73rem; color:#5a7161; }
.support-record-action { display:flex; flex-direction:column; gap:12px; align-items:flex-end; flex-shrink:0; }
.support-ticket-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.support-history { font-size:.75rem; color:#57715e; margin:16px 0; }
@media(max-width:767px) {
    .support-contact { flex-direction:column; gap:16px; }
}
@media(max-width:575px) {
    .platform-modal .modal-content { border:0; border-radius:0; }
    .platform-modal .modal-header,.platform-modal .modal-footer { padding:16px; }
    .platform-modal .modal-body { padding:18px 16px; }
    .platform-modal .modal-footer .btn { flex:1; min-height:44px; }
    .announcement-list { padding:0 16px; }
    .announcement-item { flex-direction:column; align-items:flex-start; gap:12px; }
    .announcement-empty { padding:0 16px 18px; }
    .support-contact { padding:18px 16px; }
    .support-record { padding:18px 16px; flex-direction:column; gap:14px; }
    .support-record-action { flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
    .support-ticket-heading { flex-wrap:wrap; }
}

/* Reports reuse the dashboard shell; these rules only style the report content. */
.report-heading-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.report-print-heading { display:none; }
.report-print-view .report-print-heading { display:block; margin-bottom:20px; }
.report-print-heading h2 { font-size:1.1rem; font-weight:650; overflow-wrap:anywhere; }
.report-print-heading p { color:#59675e; font-size:.8rem; }
.report-profit-dot { background:#18543d; }
.report-tabs { gap:4px; margin-bottom:0; border-color:#dce5df; flex-wrap:wrap; }
.report-tabs .nav-link { font-size:.8rem; color:#52645a; padding:12px 16px; }
.report-tabs .nav-link.active { color:#18543d; font-weight:650; border-color:#dce5df #dce5df #fff; }
.report-panel { border-top-left-radius:0; }
.report-facts { display:flex; flex-wrap:wrap; gap:18px 30px; padding:0 22px 20px; border-bottom:1px solid #edf1ee; }
.report-facts > div { min-width:100px; max-width:100%; }
.report-facts span { display:block; color:#617268; font-size:.7rem; margin-bottom:5px; }
.report-facts strong { font-weight:600; font-size:1rem; overflow-wrap:anywhere; }
.report-table-filters { border-bottom:1px solid #edf1ee; }
.report-table-filters > div { min-width:0; }
.report-search { flex:1; max-width:330px; min-width:170px !important; }
.report-scope { padding:12px 22px; margin:0; font-size:.7rem; color:#627267; line-height:1.6; overflow-wrap:anywhere; }
.report-table { font-size:.77rem; vertical-align:middle; min-width:730px; font-variant-numeric:tabular-nums; }
.report-table th { font-size:.7rem; font-weight:600; color:#52645b; background:#fafcfb; padding:12px 16px; border-color:#e8eee9; }
.report-table tbody th { background:#fff; font-size:.77rem; max-width:230px; overflow-wrap:anywhere; }
.report-table td { padding:14px 16px; color:#45574b; border-color:#edf1ee; }
.report-table td.text-end { white-space:nowrap; }
.report-table tbody tr:hover > * { background:#f6faf7; }
.report-table .amount-negative { color:#a72e38; }
.report-pagination { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 22px; font-size:.75rem; }
.report-distribution { padding:14px 22px; border-bottom:1px solid #edf1ee; font-size:.77rem; }
.report-distribution summary { color:#18543d; cursor:pointer; }
.report-distribution table { margin-top:12px; }
.report-profit-layout { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:0 22px 22px; }
.report-profit-layout > * { min-width:0; }
.report-profit-lines { margin:0; }
.report-profit-lines > div { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid #edf1ee; }
.report-profit-lines dt { font-size:.8rem; font-weight:500; }
.report-profit-lines dt span { display:block; font-size:.68rem; color:#637368; font-weight:400; line-height:1.5; margin-top:4px; }
.report-profit-lines dd { font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; margin:0; }
.report-profit-lines .report-profit-total { border-bottom-color:#ccdcd1; }
.report-profit-total dt { font-weight:650; }
.report-profit-total:last-child { background:#f0f7f2; padding:14px 10px; border-radius:5px; }
.report-cash-note { background:#f7f9f8; border:1px solid #e4eae6; border-radius:5px; padding:14px; margin-top:18px; font-size:.76rem; }
.report-cash-note p { color:#596b60; font-size:.7rem; margin:6px 0 0; line-height:1.6; }
.report-products h3 { font-size:.9rem; font-weight:650; }
.report-products p { color:#5e7064; font-size:.7rem; line-height:1.6; }
.report-products-table { min-width:430px; }
.report-products-table th,.report-products-table td { padding:12px 9px; }
.report-detail-modal .modal-content { border:1px solid #dce5df; border-radius:8px; }
.report-detail-modal .modal-title { font-size:1.1rem; }
.report-detail-modal .modal-subtitle { margin:4px 0 0; color:#65746a; font-size:.8rem; }
.report-detail-modal .modal-body { overflow-y:auto; }
@media(max-width:1199px) { .report-profit-layout { grid-template-columns:1fr; } }
@media(max-width:575px) {
    .report-heading-actions { margin-top:14px; }
    .report-heading-actions .period-label { margin:0; }
    .report-tabs .nav-link { flex:1 0 45%; text-align:center; padding:11px 8px; }
    .report-facts { padding:0 14px 16px; gap:18px; }
    .report-facts > div { flex:1 0 40%; }
    .report-search { min-width:0 !important; max-width:none; flex:1 0 100%; }
    .report-table-filters > div { flex:1 0 100%; }
    .report-scope,.report-distribution { padding-left:14px; padding-right:14px; }
    .report-profit-layout { padding:0 14px 18px; }
    .report-profit-lines > div { flex-wrap:wrap; gap:8px; }
    .report-profit-lines dt { flex:1 0 155px; }
    .report-profit-lines dd { margin-left:auto; }
    .report-detail-modal .modal-content { border:0; border-radius:0; }
}
@media print {
    body.reports-layout { background:#fff !important; color:#000; font-size:10pt; }
    .reports-layout .business-sidebar,.reports-layout .business-topbar,.reports-layout .dashboard-footer,.reports-layout .dashboard-skip,.reports-layout .report-no-print,.reports-layout .modal-backdrop,.reports-layout .report-detail-modal { display:none !important; }
    .reports-layout .dashboard-main { margin:0 !important; padding:0 !important; max-width:none; }
    .report-print-heading { display:block !important; }
    .reports-page .dashboard-heading { margin-bottom:12px; }
    .reports-page .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
    .reports-page .summary-card { padding:10px; break-inside:avoid; }
    .reports-page .summary-amount { font-size:14pt; }
    .reports-page .dashboard-panel { box-shadow:none; border-color:#bfc9c2; break-inside:auto; }
    .reports-page .table-responsive { overflow:visible !important; }
    .reports-page .report-table { min-width:0; width:100%; table-layout:auto; font-size:8pt; }
    .reports-page .report-table th,.reports-page .report-table td { padding:7px 5px; white-space:normal; overflow-wrap:anywhere; }
    .reports-page .report-table thead { display:table-header-group; }
    .reports-page .report-table tr { break-inside:avoid; }
    .reports-page .report-profit-layout { grid-template-columns:1fr; }
    .reports-page .report-profit-lines > div { break-inside:avoid; }
    .reports-page .chart-panel { display:none; }
    .reports-page a { color:inherit; text-decoration:none; }
}
body { background: #f5f8f6; color: #21392c; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--forest); }
a:hover { color: var(--forest-dark); }
.brand { color: var(--forest); font-size: 1.65rem; font-weight: 750; letter-spacing: -.05em; text-decoration: none; }
.app-navbar { background: var(--forest-dark); }
.eyebrow { color: var(--forest); font-size: .75rem; font-weight: 700; letter-spacing: .13em; }
.card { border: 1px solid #dee8e1; border-radius: 1rem; box-shadow: 0 8px 32px rgba(20, 70, 45, .04); }
.auth-shell { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: center; min-height: 83vh; padding-top: 3rem; padding-bottom: 3rem; max-width: 1080px; }
.auth-intro h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); font-weight: 750; letter-spacing: -.05em; line-height: 1.12; }
.intro-copy { color: #567061; font-size: 1.1rem; line-height: 1.7; max-width: 26rem; margin-top: 1.5rem; }
.auth-card { padding: 2.2rem; }
.auth-card h2 { font-weight: 700; letter-spacing: -.025em; }
.registration-wrap { max-width: 740px; }
.help-card { max-width: 520px; }
.form-control, .form-select { padding: .7rem .85rem; border-color: #cbd9d0; }
.form-control:focus, .form-select:focus { border-color: #438969; box-shadow: 0 0 0 .2rem rgba(24, 84, 61, .13); }
.form-label { font-size: .9rem; font-weight: 600; }
.btn-primary { --bs-btn-bg: #18543d; --bs-btn-border-color: #18543d; --bs-btn-hover-bg: #103e2c; --bs-btn-hover-border-color: #103e2c; --bs-btn-active-bg: #103e2c; --bs-btn-active-border-color: #103e2c; --bs-btn-disabled-bg: #18543d; --bs-btn-disabled-border-color: #18543d; padding: .75rem 1rem; font-weight: 600; }
dd { overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .auth-shell { grid-template-columns: 1fr; gap: 1.5rem; min-height: auto; max-width: 520px; padding-top: 2rem; }
    .auth-intro .eyebrow { margin-top: 1.5rem !important; }
    .auth-intro h1 { font-size: 2.35rem; }
    .intro-copy { margin-top: 1rem; }
    .auth-card { padding: 1.5rem; }
}

/* Business dashboard: intentionally scoped so login and admin pages stay intact. */
.dashboard-page { --sidebar-width: 244px; --dashboard-brand: #1b6465; background: #f7f9f8; color: #25313b; font-size: .875rem; }
.dashboard-page .pp-icon { fill: currentColor; flex-shrink: 0; vertical-align: -.15em; }
.dashboard-page .min-width-0 { min-width: 0; }
.dashboard-page button:focus-visible, .dashboard-page a:focus-visible, .dashboard-page summary:focus-visible { outline: 3px solid #1b6465; outline-offset: 3px; }
.dashboard-skip { position: fixed; top: 8px; left: 260px; background: white; padding: 12px; z-index: 1100; }
.business-sidebar { width: var(--sidebar-width) !important; background: #fff !important; border-right: 1px solid #e5e9e7 !important; display: flex; flex-direction: column; }
.sidebar-brand { padding: 4px 12px 0; background: #fff; }
.sidebar-brand a { display: flex; align-items: center; justify-content: center; }
.sidebar-logo-full { width: 220px; max-width: 100%; height: auto; object-fit: contain; }
.sidebar-logo-icon { display: none; width: 64px; height: auto; object-fit: contain; }
.business-navigation { padding: 8px 14px; flex: 1; }
.sidebar-section-label { font-size: .63rem; font-weight: 650; letter-spacing: .12em; color: #84918b; padding: 0 12px; margin: 0 0 12px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 12px; margin-bottom: 3px; border-radius: 6px; text-decoration: none; color: #51615c; font-size: .84rem; line-height: 1.2; white-space: nowrap; }
.sidebar-link .pp-icon { width: 17px; height: 17px; }
.sidebar-link.active { background: #e9f3ef; color: #18543d; font-weight: 650; }
.sidebar-link.active:hover { background: #deede5; }
.sidebar-link.upcoming { color: #687770; cursor: default; }
.sidebar-upcoming { font-size: .57rem; border: 1px solid #e5e9e7; border-radius: 3px; padding: 2px 4px; margin-left: auto; color: #73817b; }
.sidebar-divider { border-top: 1px solid #edf0ee; margin: 20px 10px 14px; }
.sidebar-bottom { padding: 18px 14px; border-top: 1px solid #edf0ee; margin-top: auto; }
.sidebar-note { font-size: .7rem; color: #839088; margin: 0 12px 12px; }
.sidebar-logout { background: transparent; border: 0; width: 100%; text-align: left; }
.sidebar-logout:hover { color: #1b6465; background: #f1f5f3; }
.business-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid #e5e9e7; min-height: 68px; padding: 10px 30px; }
.icon-button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 5px; color: #697770; flex-shrink: 0; }
.icon-button:hover { background: #f0f4f1; border-color: #e5e9e7; }
.topbar-title { font-size: .83rem; font-weight: 650; }
.topbar-separator { height: 18px; width: 1px; background: #dde4df; margin: 0 8px; flex-shrink: 0; }
.topbar-business { color: #75817b; font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.profile-button { background: transparent; border: 0; display: flex; align-items: center; gap: 9px; padding: 4px; color: #38453e; }
.profile-initial { width: 31px; height: 31px; display: grid; place-items: center; background: #edf3ef; color: #1b6465; border: 1px solid #dce8e0; border-radius: 50%; font-size: .78rem; font-weight: 650; }
.profile-name { font-size: .8rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-button > .pp-icon { width: 12px; height: 12px; color: #88938d; }
.account-menu { min-width: 255px; max-width: calc(100vw - 32px); border-color: #e5e9e7; border-radius: 6px; box-shadow: 0 4px 16px #172d1910; font-size: .85rem; }
.account-menu .text-secondary { overflow-wrap: anywhere; }
.account-menu .dropdown-item { font-size: .85rem; padding: 9px 16px; }
.dashboard-main { max-width: 1640px; padding: 30px; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.dashboard-heading h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; margin: 0 0 6px; }
.dashboard-heading p { color: #748077; font-size: .82rem; margin: 0; }
.period-label { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: #5c6b62; white-space: nowrap; }
.period-label .pp-icon { width: 14px; height: 14px; }
.dashboard-panel { background: #fff; border: 1px solid #e4e9e6; border-radius: 8px; margin-bottom: 20px; }
.dashboard-filter { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 16px 20px; }
.dashboard-filter label { display: block; font-size: .71rem; font-weight: 600; color: #637269; margin-bottom: 5px; }
.dashboard-filter .form-select, .dashboard-filter .form-control { font-size: .79rem; padding: .45rem .65rem; border-color: #dce4df; border-radius: 5px; min-height: 34px; }
.period-controls { min-width: 164px; }
.date-controls { display: flex; align-items: flex-end; gap: 10px; }
.date-controls[hidden] { display: none; }
.date-range-separator { color: #8b958e; margin-bottom: 8px; }
.dashboard-page .btn-primary { --bs-btn-bg: #1b6465; --bs-btn-border-color: #1b6465; --bs-btn-hover-bg: #124c4d; --bs-btn-hover-border-color: #124c4d; border-radius: 5px; }
.dashboard-page .btn-sm { font-size: .76rem; padding: .46rem .8rem; min-height: 34px; }
.filter-note { color: #8b958e; font-size: .7rem; margin: 0 0 8px auto; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.summary-card { background: #fff; border: 1px solid #e4e9e6; border-radius: 8px; padding: 18px 20px 16px; min-width: 0; }
.summary-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.summary-label h2 { font-size: .78rem; font-weight: 550; color: #657269; margin: 0; }
.summary-label .pp-icon { color: #83968b; width: 16px; height: 16px; }
.summary-amount { font-size: clamp(1.45rem, 2.2vw, 1.95rem); font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 14px 0 6px; overflow-wrap: anywhere; }
.summary-description { font-size: .67rem; color: #7e8a82; line-height: 1.5; margin: 0; min-height: 2.7em; }
.summary-comparison { font-size: .65rem; color: #7b8880; line-height: 1.5; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #edf1ee; }
.amount-positive { color: #20845b; }
.amount-negative { color: #c94a4a; }
.overview-notes { margin: 10px 0 22px; color: #7b8880; font-size: .69rem; line-height: 1.6; }
.overview-notes p { margin: 3px 0; }
.overview-notes .cost-warning { color: #9d6a1f; }
.cost-warning .pp-icon { width: 13px; height: 13px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 16px; }
.panel-heading h2, .quick-actions h2 { font-size: .94rem; font-weight: 650; margin: 0 0 5px; }
.panel-heading p, .quick-actions p { font-size: .73rem; color: #7f8a83; margin: 0; }
.chart-legend { display: flex; gap: 18px; font-size: .71rem; color: #6b776f; }
.chart-legend > span { display: flex; gap: 7px; align-items: center; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sales-dot { background: #269967; }
.expenses-dot { background: #9caaa3; }
.financial-chart-wrap { height: 270px; margin: 4px 22px 18px; position: relative; }
.chart-data-table { padding: 0 22px 16px; font-size: .7rem; color: #758079; }
.chart-data-table summary { width: fit-content; cursor: pointer; }
.chart-data-table .table { font-size: .75rem; margin-top: 12px; }
.chart-fallback { position: absolute; inset: 40% 20px auto; text-align: center; color: #7f8a83; }
.empty-state { padding: 38px 22px; text-align: center; color: #7c8b81; }
.empty-state h3, .empty-state h2 { font-size: .9rem; font-weight: 550; margin: 0 0 8px; color: #56665b; }
.empty-state p { font-size: .78rem; margin: 0; }
.chart-empty { min-height: 244px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chart-empty > .pp-icon { width: 27px; height: 27px; margin-bottom: 15px; color: #9cab9f; }
.quick-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 22px; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.action-buttons .btn { display: inline-flex; align-items: center; gap: 6px; border-color: #dce4df; color: #78847c; opacity: 1; background: #fafcfb; font-size: .7rem; }
.action-buttons .pp-icon { width: 13px; height: 13px; }
.action-soon { font-size: .58rem; border-left: 1px solid #dfe6e1; padding-left: 6px; color: #8f9a93; }
.table-period { color: #8b958f; font-size: .7rem; white-space: nowrap; }
.transactions-table { font-size: .77rem; vertical-align: middle; min-width: 790px; }
.transactions-table th { color: #7a867e; background: #fafcfb; font-size: .67rem; font-weight: 550; padding: 11px 14px; white-space: nowrap; border-top: 1px solid #e8ede9; border-bottom: 1px solid #e8ede9; }
.transactions-table td { padding: 14px; border-color: #eef2ef; color: #526058; }
.transactions-table td:first-child, .transactions-table th:first-child { padding-left: 22px; }
.transactions-table td:last-child, .transactions-table th:last-child { padding-right: 22px; }
.transaction-reference { font-weight: 550; max-width: 180px; overflow-wrap: anywhere; }
.transaction-type { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.transaction-type .pp-icon { width: 13px; height: 13px; color: #829289; }
.transaction-description { max-width: 250px; overflow-wrap: anywhere; }
.transaction-context { display: block; font-size: .65rem; color: #8f9992; margin-top: 3px; }
.transaction-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.transaction-date { white-space: nowrap; }
.transactions-table .amount-negative { color: #c94a4a; }
.payment-badge { display: inline-block; font-size: .65rem; padding: 4px 7px; border-radius: 4px; background: #edf3ef; color: #54715f; white-space: nowrap; }
.status-partial, .status-unpaid { background: #faf3e4; color: #97732c; }
.status-refunded { background: #f4eff0; color: #906b70; }
.table-footnote { font-size: .65rem; color: #8a958e; padding: 13px 22px; border-top: 1px solid #edf1ee; }
.dashboard-footer { font-size: .67rem !important; color: #9aa59d !important; padding: 0 30px 22px; }
.mobile-brand { width: 48px; height: 48px; object-fit: contain; }
@media (min-width: 992px) {
    .business-sidebar { position: fixed; inset: 0 auto 0 0; height: 100vh; height: 100dvh; z-index: 1040; overflow-y: auto; display: flex; }
    .business-topbar, .dashboard-main, .dashboard-footer { margin-left: var(--sidebar-width); }
    .dashboard-page.sidebar-collapsed { --sidebar-width: 76px; }
    .sidebar-collapsed .sidebar-logo-full, .sidebar-collapsed .sidebar-text, .sidebar-collapsed .sidebar-upcoming, .sidebar-collapsed .sidebar-section-label, .sidebar-collapsed .sidebar-note { display: none; }
    .sidebar-collapsed .sidebar-logo-icon { display: block; }
    .sidebar-collapsed .sidebar-brand { padding: 15px 4px 20px; }
    .sidebar-collapsed .business-navigation, .sidebar-collapsed .sidebar-bottom { padding-left: 10px; padding-right: 10px; }
    .sidebar-collapsed .sidebar-link { justify-content: center; padding: 12px 0; }
}
@media (min-width: 992px) and (max-width: 1199px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .business-topbar { padding: 8px 18px; }
    .dashboard-main { padding: 24px 18px; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-title, .topbar-separator { display: none; }
    .dashboard-footer { padding-left: 18px; }
    .dashboard-skip { left: 10px; }
}
@media (max-width: 575px) {
    .business-topbar { padding: 5px 12px; min-height: 60px; gap: 4px; }
    .profile-name, .profile-button > .pp-icon { display: none; }
    .topbar-business { font-size: .72rem; max-width: 190px; }
    .dashboard-main { padding: 20px 12px; }
    .dashboard-heading { display: block; margin-bottom: 18px; }
    .dashboard-heading h1 { font-size: 1.3rem; }
    .dashboard-heading p { font-size: .75rem; }
    .period-label { margin-top: 12px; font-size: .7rem; }
    .dashboard-filter { gap: 10px; padding: 14px; }
    .period-controls { flex: 1; min-width: 130px; }
    .date-controls { order: 3; width: 100%; min-width: 0; }
    .date-controls > div { flex: 1; min-width: 0; }
    .date-controls input { width: 100%; min-width: 0; }
    .filter-note { order: 4; margin: 0; width: 100%; }
    .summary-grid { gap: 10px; }
    .summary-card { padding: 14px 12px; }
    .summary-label h2 { font-size: .7rem; }
    .summary-label .pp-icon { display: none; }
    .summary-amount { font-size: clamp(1.1rem, 5vw, 1.5rem); }
    .summary-description { font-size: .61rem; min-height: 3em; }
    .summary-comparison { font-size: .6rem; }
    .panel-heading { padding: 16px 14px; align-items: flex-start; }
    .chart-legend { gap: 7px; flex-direction: column; font-size: .65rem; }
    .financial-chart-wrap { height: 220px; margin: 0 12px 16px; }
    .chart-data-table { padding-left: 14px; padding-right: 14px; }
    .quick-actions { padding: 16px 14px; }
    .action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .action-buttons .btn { justify-content: center; padding: .45rem .3rem; font-size: .65rem; }
    .action-soon { font-size: .53rem; }
    .table-period { display: none; }
    .dashboard-footer { padding-left: 12px; padding-right: 12px; }
}

/* Sales Management uses the existing owner workspace and compact controls. */
.sidebar-link:not(.upcoming):hover { background: #f0f5f2; color: #18543d; }
.action-buttons a.btn { color: #1b6465; background: #fff; text-decoration: none; }
.sales-back { display: inline-block; font-size: .73rem; color: #708177; margin-bottom: 12px; text-decoration: none; }
.sales-filter .search-control { min-width: 220px; flex: 1; }
.sales-filter > div:not(.search-control):not(.date-controls) { min-width: 132px; }
.sales-filter .form-select { padding-right: 2rem; }
.sales-reset, .sales-text-link { font-size: .73rem; margin-bottom: 9px; }
.sales-summary { margin-bottom: 22px; }
.sales-summary .summary-description { min-height: auto; }
.sales-table { min-width: 1120px; }
.sale-actions { white-space: nowrap; }
.record-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.record-action-view, .record-action-more { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid #d7e0da; border-radius: 5px; background: #fff; color: #4d6455; line-height: 1; text-decoration: none; }
.record-action-view { font-size: .75rem; padding: 8px 12px; }
.record-action-more { width: 32px; padding: 0; font-size: 1.3rem; }
.record-action-more::after { display: none; }
.record-action-view:hover, .record-action-more:hover, .record-action-more.show { background: #f0f6f2; border-color: #a7beb0; color: #235940; }
.record-action-view:focus-visible, .record-action-more:focus-visible { outline: 2px solid #276f50; outline-offset: 2px; }
.record-actions-menu { min-width: 164px; border: 1px solid #dde6df; border-radius: 6px; padding: 5px; box-shadow: 0 5px 16px #203b2b12; }
.record-actions-menu .dropdown-item { font-size: .78rem; padding: 9px 11px; border-radius: 3px; }
.record-actions-menu .dropdown-item:focus, .record-actions-menu .dropdown-item:hover { background: #eef5f0; color: #28553c; }
.record-actions-menu .dropdown-item.text-danger:focus, .record-actions-menu .dropdown-item.text-danger:hover { background: #fff1ef; color: #aa4338 !important; }
.record-actions-menu-floating { z-index: 1035; }
.customer-summary { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 22px; }
.customer-summary .summary-description { min-height: auto; }
.customer-filter .search-control { min-width: 200px; flex: 1; }
.customer-filter .form-select { padding-right: 2rem; }
.customer-table { width: 100%; min-width: 0; }
.customer-table td { overflow-wrap: anywhere; }
.customer-name strong { font-weight: 550; }
.customer-name { max-width: 220px; }
.customer-balance-status { display: inline-block; padding: 5px 8px; border-radius: 4px; font-size: .66rem; font-weight: 550; line-height: 1.4; }
.customer-clear { background: #edf5ef; color: #52735c; }
.customer-has-utang { background: #f8f3e8; color: #8b723c; }
.customer-overdue { background: #faefec; color: #a16558; }
.customer-archive-label { display: inline-block; font-size: .66rem; color: #7c8980; margin-top: 5px; }
#customer-action-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 auto; }
#customer-action-modal .modal-header, #customer-action-modal .modal-footer { flex-shrink: 0; background: #fff; padding: 18px 24px; }
#customer-action-modal .modal-title { font-size: 1.1rem; font-weight: 650; color: #2d493a; overflow-wrap: anywhere; }
#customer-action-modal .modal-body { padding: 22px 24px; overflow-x: hidden; overflow-y: auto; }
#customer-action-modal .modal-footer .btn { min-height: 42px; font-size: .8rem; padding: .55rem 1rem; }
.customer-form .form-label { font-size: .77rem; font-weight: 550; color: #5d7063; }
.customer-form .form-control { font-size: .82rem; padding: .55rem .7rem; border-color: #dce4df; border-radius: 5px; }
.customer-form .form-text, .customer-shared-phone { font-size: .73rem; line-height: 1.6; color: #798a7e; }
.customer-form .invalid-feedback { font-size: .72rem; font-weight: 400; }
.customer-form-heading, .customer-form-body, .customer-form-footer { padding: 20px; }
.customer-fallback { max-width: 800px; }
.customer-form-footer { display: flex; gap: 10px; justify-content: flex-end; }
.customer-detail-section + .customer-detail-section { border-top: 1px solid #e6ede8; padding-top: 22px; margin-top: 22px; }
.customer-detail-section h3 { font-size: .92rem; font-weight: 600; color: #3f5b49; margin-bottom: 14px; overflow-wrap: anywhere; }
.customer-detail-section h4 { font-size: .8rem; color: #536d5c; }
.customer-detail-heading { display: flex; justify-content: space-between; gap: 14px; }
.customer-contact-details { margin: 0 0 18px; }
.customer-contact-details > div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; }
.customer-contact-details dt { font-size: .77rem; font-weight: 400; color: #839087; }
.customer-contact-details dd { max-width: 65%; font-size: .8rem; margin: 0; text-align: right; color: #4e6657; overflow-wrap: anywhere; }
.customer-detail-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-bottom: 12px; }
.customer-detail-totals span { display: block; color: #839087; font-size: .7rem; }
.customer-detail-totals strong { display: block; color: #385540; font-size: 1.15rem; font-weight: 600; margin-top: 8px; overflow-wrap: anywhere; }
.customer-detail-table { font-size: .75rem; margin-top: 16px; }
.customer-detail-table th { font-weight: 450; color: #829087; font-size: .68rem; }
.customer-detail-table td { color: #4d6656; padding: 10px 8px; overflow-wrap: anywhere; }
.customer-credit-total, .customer-confirm-name { font-size: .9rem; color: #4a6754; overflow-wrap: anywhere; }
.customer-credit-total span { font-size: .75rem; color: #809084; }
.customer-discard-prompt { font-size: .8rem; }
@media (max-width: 767px) {
    .customer-summary { grid-template-columns: 1fr; gap: 12px; }
    .customer-summary .summary-card { padding: 16px 18px; }
    .customer-summary .summary-amount { font-size: 1.45rem; margin: 12px 0 8px; }
    .customer-table, .customer-table tbody { display: block; }
    .customer-table thead, .customer-detail-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .customer-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 13px; border-top: 1px solid #e7ede9; }
    .customer-table td { padding: 0 !important; border: 0; text-align: left !important; white-space: normal; }
    .customer-table td::before, .customer-detail-table td::before { content: attr(data-label); display: block; font-size: .65rem; color: #88988d; font-weight: 400; margin-bottom: 5px; }
    .customer-table .customer-name { grid-column: 1 / -1; max-width: none; }
    .customer-table .customer-actions { text-align: right !important; }
    .customer-actions::before { display: none !important; }
}
@media (max-width: 575px) {
    .record-action-view, .record-action-more { min-height: 40px; }
    .record-action-more { width: 40px; }
    .customer-filter .search-control { flex-basis: 100%; min-width: 0; }
    .customer-filter > div:not(.search-control) { flex: 1; min-width: 120px; }
    #customer-action-modal .modal-header, #customer-action-modal .modal-footer { padding: 14px 16px; }
    #customer-action-modal .modal-body { padding: 18px 16px; }
    #customer-action-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    .customer-detail-totals { grid-template-columns: 1fr; }
    .customer-detail-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .customer-detail-totals strong { font-size: 1rem; margin-top: 0; }
    .customer-detail-table, .customer-detail-table tbody { display: block; }
    .customer-detail-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 12px 0; border-top: 1px solid #e7ede9; }
    .customer-detail-table td { text-align: left !important; padding: 0; border: 0; }
}
.sales-history .transaction-reference { max-width: 200px; }
.sales-history .transaction-reference a { text-decoration: none; }
.overdue-label { display: block; color: #b38229; font-size: .63rem; margin-top: 4px; }
.status-draft { color: #68788e; background: #eef2f7; }
.sales-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; color: #8a978e; font-size: .72rem; }
.sales-pagination > div { display: flex; gap: 8px; }
.sale-section .sale-fields { padding: 0 22px 22px; }
.sale-section .panel-heading > .btn { flex-shrink: 0; white-space: nowrap; }
.sale-section .sale-fields:first-child { padding-top: 22px; }
.sale-section .form-label { font-size: .76rem; color: #56675c; font-weight: 550; }
.sale-section .form-control, .sale-section .form-select { font-size: .82rem; padding: .55rem .7rem; border-radius: 5px; border-color: #dce4df; }
.sale-section .form-select { padding-right: 2rem; }
.sale-section .form-text { font-size: .68rem; color: #8a958e; line-height: 1.6; }
.field-optional { font-size: .65rem; color: #8a978e; font-weight: 400; }
.sale-items { padding: 0 22px 22px; }
.sale-item-row { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(80px, .6fr) minmax(100px, .8fr) minmax(105px, .8fr); gap: 16px; align-items: end; border-bottom: 1px solid #edf1ee; padding: 18px 0; }
.sale-item-row:first-child { padding-top: 0; }
.sale-item-row > div, .sale-item-row label { min-width: 0; width: 100%; margin-bottom: 0; }
.sale-line-amount { display: flex; flex-direction: column; align-self: end; align-items: flex-end; padding-bottom: 2px; }
.sale-line-amount strong { font-size: .9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
.sale-remove { border: 0; background: transparent; font-size: .66rem; color: #ad6e64; padding: 0; margin-top: 12px; }
.sale-remove:disabled { color: #a7b0aa; }
.sale-payment-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; align-items: start; }
.sale-total-list { margin-bottom: 0; }
.sale-total-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.sale-total-list dt { color: #7b887f; font-size: .77rem; font-weight: 450; }
.sale-total-list dd { color: #334c3f; font-size: .85rem; font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; margin: 0; overflow-wrap: anywhere; }
.sale-total-list .sale-grand-total { border-top: 1px solid #e5ebe6; border-bottom: 1px solid #e5ebe6; padding: 14px 0; margin: 6px 0; }
.sale-grand-total dt, .sale-grand-total dd { font-size: 1rem; color: #1b6465; font-weight: 650; }
.sale-preview-error { color: #b95b4d; font-size: .71rem; line-height: 1.6; margin: 12px 0 0; }
.sale-form-footer { display: flex; gap: 10px; justify-content: flex-end; padding-bottom: 12px; }
.sale-detail-header { display: flex; justify-content: space-between; gap: 20px; padding: 22px; }
.detail-label { font-size: .68rem; color: #839288; display: block; margin-bottom: 6px; }
.sale-detail-header h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.sale-detail-header p { color: #839288; font-size: .73rem; margin: 4px 0; overflow-wrap: anywhere; }
.sale-detail-status { text-align: right; }
.sale-notes { color: #64756a; font-size: .8rem; line-height: 1.7; overflow-wrap: anywhere; white-space: normal; }
.sale-void-panel { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sale-void-panel h2 { font-size: .85rem; font-weight: 600; margin: 0 0 6px; }
.sale-void-panel p { font-size: .72rem; margin: 0; color: #8a978e; }
.sale-void-panel button { flex-shrink: 0; }
.dashboard-page .modal-content { border-radius: 8px; border: 1px solid #e4e9e6; }
.dashboard-page .modal-body { font-size: .82rem; line-height: 1.6; }
.refund-confirm { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; }
.refund-confirm input { margin-top: 6px; flex-shrink: 0; }
.product-reference-form { max-width: 660px; }

/* Expenses share the owner workspace, with compact cards and mobile record rows. */
.expense-summary { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 22px; }
.expense-summary .summary-description { min-height: auto; }
.expense-top-category { font-size: 1.05rem; font-weight: 600; color: #3c5647; margin: 18px 0 4px; overflow-wrap: anywhere; }
.expense-category-amount { font-size: .95rem; color: #526a5c; margin: 0 0 12px; }
.expense-filter .search-control { min-width: 190px; flex: 1; }
.expense-filter > div:not(.search-control):not(.date-controls) { min-width: 135px; }
.expense-filter .form-select { padding-right: 2rem; }
.expense-table { min-width: 0; width: 100%; }
.expense-table td { overflow-wrap: anywhere; }
.expense-description { max-width: 340px; }
.expense-table .dropdown-item { font-size: .8rem; }
.expense-schedules > summary { padding: 18px 22px; color: #4c6555; font-size: .86rem; font-weight: 600; cursor: pointer; }
.expense-schedules > summary > span { display: block; color: #8a978e; font-size: .7rem; font-weight: 400; margin: 6px 0 0 16px; }
.expense-schedule-content { padding: 0 22px 20px; }
.expense-schedule-row { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #e7ede9; padding: 18px 0; }
.expense-schedule-row h3 { font-size: .85rem; font-weight: 600; color: #45604e; overflow-wrap: anywhere; }
.expense-schedule-row p { font-size: .72rem; color: #7a8c80; margin: 5px 0; overflow-wrap: anywhere; }
.expense-schedule-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#expense-action-modal .modal-content { overflow: hidden; }
#expense-action-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 auto; }
#expense-action-modal .modal-header, #expense-action-modal .modal-footer { flex-shrink: 0; background: #fff; padding: 18px 24px; }
#expense-action-modal .modal-title { font-size: 1.1rem; font-weight: 650; color: #2d493a; overflow-wrap: anywhere; }
#expense-action-modal .modal-body { padding: 22px 24px; overflow-x: hidden; overflow-y: auto; }
#expense-action-modal .modal-footer .btn { min-height: 42px; font-size: .8rem; padding: .55rem 1rem; }
.expense-form .form-label { font-size: .77rem; font-weight: 550; color: #5d7063; }
.expense-form .form-control, .expense-form .form-select { font-size: .82rem; padding: .55rem .7rem; border-color: #dce4df; border-radius: 5px; }
.expense-form .form-select { padding-right: 2rem; }
.expense-form .form-text { font-size: .7rem; line-height: 1.6; color: #819186; }
.expense-category-link { font-size: .7rem; display: inline-block; margin-top: 7px; }
.expense-form .invalid-feedback { font-size: .72rem; font-weight: 400; }
.expense-form-heading, .expense-form-body, .expense-form-footer { padding: 20px; background: #fff; max-width: 780px; }
.expense-form-footer { display: flex; gap: 10px; justify-content: flex-end; }
.expense-details { margin: 16px 0 22px; }
.expense-details > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid #edf1ee; }
.expense-details dt { font-size: .78rem; font-weight: 450; color: #7b8c80; }
.expense-details dd { font-size: .82rem; text-align: right; margin: 0; color: #46604f; overflow-wrap: anywhere; max-width: 65%; }
.expense-detail-amount h3 { font-size: 1.6rem; font-weight: 650; margin: 16px 0 8px; color: #345443; }
.expense-detail-amount p, .expense-void-description { font-size: .86rem; color: #5c7364; overflow-wrap: anywhere; }
.expense-void-amount { font-size: 1.25rem; color: #395a46; }
.expense-section-title { font-size: .85rem; font-weight: 600; margin: 20px 0 12px; }
.expense-receipt-preview { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #f5f8f6; border: 1px solid #e3eae5; margin-bottom: 12px; }
.expense-old-receipts { margin-top: 14px; font-size: .75rem; color: #75887b; }
.expense-old-receipts p { overflow-wrap: anywhere; }
.expense-edit-note { font-size: .78rem; line-height: 1.6; }
@media (max-width: 767px) {
    .expense-summary { grid-template-columns: 1fr; gap: 12px; }
    .expense-summary .summary-card { padding: 16px 18px; }
    .expense-summary .summary-amount { font-size: 1.45rem; margin: 12px 0 8px; }
    .expense-top-category { margin-top: 12px; }
    .expense-table, .expense-table tbody { display: block; }
    .expense-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .expense-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 13px; border-top: 1px solid #e7ede9; }
    .expense-table td { padding: 0 !important; border: 0; text-align: left !important; white-space: normal; }
    .expense-table td::before { content: attr(data-label); display: block; font-size: .65rem; color: #88988d; font-weight: 400; margin-bottom: 5px; }
    .expense-table .expense-description { grid-column: 1 / -1; max-width: none; }
    .expense-table .expense-actions { grid-column: 1 / -1; text-align: right !important; }
    .expense-actions::before { display: none; }
    .expense-actions .btn { min-height: 40px; }
    .expense-schedule-row { flex-direction: column; gap: 12px; }
}
@media (max-width: 575px) {
    .expense-filter .search-control { flex-basis: 100%; min-width: 0; }
    .expense-filter > div:not(.search-control):not(.date-controls) { flex: 1; min-width: 120px; }
    .expense-filter .form-select { max-width: 100%; }
    #expense-action-modal .modal-header, #expense-action-modal .modal-footer { padding: 14px 16px; }
    #expense-action-modal .modal-body { padding: 18px 16px; }
    #expense-action-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    #expense-action-modal .modal-title { font-size: 1rem; }
    #expense-action-modal .modal-header .btn-close { padding: 12px; }
    .expense-schedule-content { padding-left: 14px; padding-right: 14px; }
}

/* Product catalog: existing cards and action controls, without inventory UI. */
.product-summary { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 22px; }
.product-summary .summary-description { min-height: auto; }
.product-filter .search-control { flex: 1; min-width: 200px; }
.product-filter .form-select { padding-right: 2rem; }
.product-table { width: 100%; min-width: 0; }
.product-table td { overflow-wrap: anywhere; }
.product-name { max-width: 230px; }
.product-name strong { font-weight: 550; }
.product-status { display: inline-block; font-size: .68rem; padding: 5px 8px; border-radius: 4px; line-height: 1.4; }
.product-active { background: #edf5ef; color: #315e43; }
.product-archived { background: #f0f3f1; color: #596c60; }
.product-negative { color: #a04941 !important; }
.product-profit-preview { background: #f2f7f3; border: 1px solid #dfe9e2; border-radius: 6px; padding: 14px 16px; }
.product-profit-preview > span { display: block; font-size: .75rem; color: #587161; }
.product-profit-preview strong { display: block; color: #315c42; font-size: 1.2rem; margin: 6px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.product-profit-preview p { font-size: .72rem; line-height: 1.6; color: #63796b; margin: 0; }
.product-price-warning { font-size: .77rem; line-height: 1.6; margin: 12px 0 0; }
.product-confirm-name { font-size: .95rem; color: #3a5b46; overflow-wrap: anywhere; }
.product-fallback { max-width: 800px; }
.product-form-heading, .product-form-body, .product-form-footer { padding: 20px 24px; }
.product-form-footer { display: flex; justify-content: flex-end; gap: 10px; }
#product-action-modal .modal-content { overflow: hidden; }
#product-action-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 auto; }
#product-action-modal .modal-header, #product-action-modal .modal-footer { flex-shrink: 0; background: #fff; padding: 18px 24px; }
#product-action-modal .modal-title { font-size: 1.1rem; font-weight: 650; color: #2d493a; overflow-wrap: anywhere; }
#product-action-modal .modal-body { padding: 22px 24px; overflow-x: hidden; overflow-y: auto; }
#product-action-modal .modal-footer .btn { min-height: 42px; font-size: .8rem; padding: .55rem 1rem; }
.product-form .form-label { font-size: .77rem; font-weight: 550; color: #5d7063; }
.product-form .form-control { font-size: .82rem; padding: .55rem .7rem; border-color: #dce4df; border-radius: 5px; }
.product-form .form-text { font-size: .73rem; color: #63796b; line-height: 1.6; }
.product-modal-loading { display: flex; align-items: center; gap: 10px; color: #607467; min-height: 130px; }
@media (max-width: 1199px) {
    .product-table, .product-table tbody { display: block; }
    .product-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .product-table tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 18px 20px; border-top: 1px solid #e7ede9; }
    .product-table td { padding: 0 !important; border: 0; text-align: left !important; white-space: normal; }
    .product-table td::before { content: attr(data-label); display: block; font-size: .66rem; color: #607467; font-weight: 400; margin-bottom: 5px; }
    .product-table .product-name { grid-column: 1 / -1; max-width: none; }
    .product-table .product-actions { grid-column: 1 / -1; text-align: right !important; }
    .product-actions::before { display: none; }
}
@media (max-width: 767px) {
    .product-summary { grid-template-columns: 1fr; gap: 12px; }
    .product-summary .summary-card { padding: 16px 18px; }
    .product-summary .summary-amount { font-size: 1.45rem; margin: 12px 0 8px; }
    .product-table tr { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; }
}
@media (max-width: 575px) {
    .product-filter .search-control { min-width: 0; flex-basis: 100%; }
    .product-filter > div:not(.search-control) { flex: 1; min-width: 120px; }
    #product-action-modal .modal-header, #product-action-modal .modal-footer { padding: 14px 16px; }
    #product-action-modal .modal-body { padding: 18px 16px; }
    #product-action-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    #product-action-modal .modal-title { font-size: 1rem; }
    #product-action-modal .modal-header .btn-close { padding: 12px; }
}

/* Utang follows the same cards, action controls and modal rhythm as Customers. */
.utang-summary { margin-bottom: 20px; }
.utang-summary .summary-amount { font-size: clamp(1.35rem, 1.7vw, 1.8rem); overflow-wrap: anywhere; }
.utang-summary .summary-description { line-height: 1.55; }
.utang-filter .search-control { flex: 1 1 200px; min-width: 0; }
.utang-filter > div { min-width: 125px; max-width: 100%; }
.utang-filter select { max-width: 220px; }
.utang-filter-help { flex-basis: 100%; font-size: .72rem; color: #64776b; line-height: 1.6; margin: 0; }
.utang-table { table-layout: auto; width: 100%; min-width: 0; }
.utang-table th, .utang-table td { font-size: .76rem; }
.utang-table td { vertical-align: middle; overflow-wrap: anywhere; white-space: normal; }
.utang-table .utang-customer { max-width: 170px; }
.utang-customer a { color: #345b43; text-decoration: none; }
.utang-customer a:hover { text-decoration: underline; }
.utang-table .transaction-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.utang-balance { color: #28563c; font-weight: 650; }
.utang-status { display: inline-block; border-radius: 5px; padding: 4px 7px; font-size: .66rem; font-weight: 550; line-height: 1.4; margin: 2px 0; white-space: nowrap; }
.utang-paid { color: #23583b; background: #edf5ef; }
.utang-partial { color: #76501b; background: #fbf3e5; }
.utang-unpaid { color: #506459; background: #f0f3f1; }
.utang-overdue { color: #963e38; background: #faeeec; }
.utang-email-note { font-size: .74rem; color: #66786d; line-height: 1.6; margin: 18px 2px 0; }
.utang-detail-links { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: .76rem; }
.utang-history { table-layout: fixed; }
.utang-history td { overflow-wrap: anywhere; }
.utang-current-balance { padding: 16px 18px; background: #f1f6f2; border: 1px solid #dce8df; border-radius: 7px; margin: 8px 0 22px; }
.utang-current-balance span { display: block; color: #536e5c; font-size: .75rem; margin-bottom: 5px; }
.utang-current-balance strong { color: #26553a; font-size: 1.5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.utang-payment-summary, .utang-payment-preview { font-size: .8rem; }
.utang-payment-summary > div, .utang-payment-preview > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.utang-payment-summary dt, .utang-payment-preview dt { color: #607467; font-weight: 450; }
.utang-payment-summary dd, .utang-payment-preview dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.utang-payment-preview { border-top: 1px solid #e1e9e3; margin: 22px 0 12px; padding-top: 14px; }
.utang-payment-preview > div:last-child { font-weight: 650; }
.utang-payment-options { font-size: .8rem; margin: 12px 0 18px; color: #536e5c; }
.utang-payment-options summary { cursor: pointer; padding: 8px 0 14px; }
.utang-preview-invalid [data-preview-balance] { color: #963e38; }
.utang-fallback { max-width: 760px; margin: auto; }
.utang-form-heading, .utang-form-body, .utang-form-footer { padding: 20px 24px; }
.utang-form-footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e4ebe6; }
#utang-action-modal .modal-content { overflow: hidden; }
#utang-action-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 auto; }
#utang-action-modal .modal-header, #utang-action-modal .modal-footer { flex-shrink: 0; background: #fff; padding: 18px 24px; }
#utang-action-modal .modal-title { font-size: 1.1rem; font-weight: 650; color: #2d493a; overflow-wrap: anywhere; }
#utang-action-modal .modal-body { padding: 22px 24px; overflow-x: hidden; overflow-y: auto; }
#utang-action-modal .modal-footer .btn { font-size: .8rem; min-height: 42px; padding: .55rem 1rem; }
#utang-action-modal .form-label { font-size: .8rem; color: #445d4c; }
#utang-action-modal .form-control, #utang-action-modal .form-select { font-size: .85rem; min-height: 40px; }
#utang-action-modal .form-text { font-size: .72rem; line-height: 1.6; color: #65796c; }
.utang-modal-loading { display: flex; align-items: center; gap: 10px; color: #607467; min-height: 130px; }
@media (max-width: 1199px) {
    .utang-table, .utang-table tbody { display: block; }
    .utang-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .utang-table tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 18px 20px; border-top: 1px solid #e7ede9; }
    .utang-table td { padding: 0 !important; border: 0; text-align: left !important; white-space: normal !important; }
    .utang-table td::before { content: attr(data-label); display: block; font-size: .66rem; color: #607467; font-weight: 400; margin-bottom: 5px; }
    .utang-table .utang-customer { grid-column: 1 / -1; max-width: none; }
    .utang-table .utang-actions { grid-column: 1 / -1; text-align: right !important; }
    .utang-actions::before { display: none; }
}
@media (max-width: 767px) {
    .utang-summary { grid-template-columns: 1fr 1fr; gap: 12px; }
    .utang-summary .summary-card { padding: 16px; }
    .utang-table tr { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; }
}
@media (max-width: 575px) {
    .utang-summary { grid-template-columns: 1fr; }
    .utang-summary .summary-amount { font-size: 1.45rem; margin: 12px 0 8px; }
    .utang-filter > div { flex: 1 1 120px; min-width: 0; }
    .utang-filter .search-control { flex-basis: 100%; }
    .utang-filter .form-select { max-width: 100%; }
    #utang-action-modal .modal-header, #utang-action-modal .modal-footer { padding: 14px 16px; }
    #utang-action-modal .modal-body { padding: 18px 16px; }
    #utang-action-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    #utang-action-modal .modal-title { font-size: 1rem; }
    #utang-action-modal .modal-header .btn-close { padding: 12px; }
    .utang-history { table-layout: auto; }
}

/* A single modal hosts short sales actions. Only its body scrolls. */
#sales-action-modal .modal-content { overflow: hidden; }
#sales-action-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 auto; }
#sales-action-modal .modal-header, #sales-action-modal .modal-footer { flex-shrink: 0; background: #fff; padding: 18px 24px; }
#sales-action-modal .modal-title { font-size: 1.1rem; font-weight: 650; color: #2d493a; overflow-wrap: anywhere; }
.modal-subtitle { font-size: .73rem; color: #7b887f; margin: 5px 0 0; }
#sales-action-modal .modal-body { padding: 22px 24px; overflow-x: hidden; overflow-y: auto; }
#sales-action-modal .modal-footer .btn { font-size: .8rem; min-height: 42px; padding: .55rem 1rem; }
#sales-action-modal .dashboard-panel { border: 0; border-radius: 0; border-bottom: 1px solid #e7ede9; margin: 0 0 22px; box-shadow: none; }
#sales-action-modal .panel-heading { padding: 0 0 16px; }
.sale-section h3, .sale-modal-section h3 { font-size: .9rem; font-weight: 650; color: #3a5345; margin: 0 0 6px; }
#sales-action-modal .sale-fields, #sales-action-modal .sale-items { padding: 0 0 20px; }
#sales-action-modal .sale-cost { display: none; }
.sale-add-item { padding: 0 22px 20px; }
#sales-action-modal .sale-add-item { padding: 0 0 20px; }
.sale-more-options { padding: 0 0 22px; color: #63756a; font-size: .8rem; }
.sale-more-options summary { padding: 5px 0 15px; cursor: pointer; font-weight: 550; }
.sale-more-options .form-control, .sale-more-options .form-select { font-size: .82rem; }
.sale-more-options .form-select { padding-right: 2rem; }
.sale-modal-note { color: #79877e; font-size: .79rem; line-height: 1.6; }
.sale-modal-loading { display: flex; align-items: center; gap: 10px; color: #738379; min-height: 130px; }
.sale-modal-customer { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; }
.sale-modal-customer h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.sale-modal-customer p { color: #7b887f; font-size: .73rem; margin: 6px 0 0; }
.sale-modal-section { padding: 18px 0; border-top: 1px solid #e7ede9; }
.sale-detail-item { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f3f1; }
.sale-detail-item > div { min-width: 0; }
.sale-detail-item strong { font-size: .8rem; font-weight: 550; color: #465d4f; overflow-wrap: anywhere; }
.sale-detail-item > strong { flex-shrink: 0; max-width: 47%; text-align: right; font-variant-numeric: tabular-nums; }
.sale-detail-item p { font-size: .73rem; color: #7c8a80; margin: 4px 0 0; overflow-wrap: anywhere; }
.sale-detail-item .amount-negative { color: #b16a62; }
.sale-void-summary { font-size: .8rem; margin: 0 0 20px; }
.sale-void-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 5px 0; }
.sale-void-summary dt { color: #7d8b81; font-weight: 450; }
.sale-void-summary dd { text-align: right; margin: 0; overflow-wrap: anywhere; }
#sales-action-modal .invalid-feedback { font-size: .72rem; font-weight: 400; line-height: 1.5; }
@media (max-width: 991px) {
    #sales-action-modal .sale-item-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    #sales-action-modal .sale-product-field { grid-column: 1 / -1; }
    #sales-action-modal .sale-line-amount { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    #sales-action-modal .sale-remove { margin: 0; padding: 5px 0; }
    #sales-action-modal .sale-payment-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 575px) {
    #sales-action-modal .modal-header, #sales-action-modal .modal-footer { padding: 14px 16px; }
    #sales-action-modal .modal-body { padding: 18px 16px; }
    #sales-action-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    #sales-action-modal .modal-title { font-size: 1rem; }
    #sales-action-modal .modal-header .btn-close { padding: 12px; }
}
@media (max-width: 1199px) { .sale-payment-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
    .sale-payment-grid { grid-template-columns: 1fr; gap: 0; }
    .sale-item-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .sale-product-field { grid-column: 1 / -1; }
    .sale-line-amount { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .sale-remove { margin: 0; padding: 5px 0; }
}
@media (max-width: 575px) {
    .sales-filter > div:not(.search-control):not(.date-controls) { flex: 1; min-width: 125px; }
    .sales-filter .search-control { min-width: 0; flex-basis: 100%; }
    .sale-section .sale-fields, .sale-items { padding-left: 14px; padding-right: 14px; }
    .sale-detail-header { padding: 16px 14px; gap: 14px; }
    .sale-detail-header h2 { font-size: .9rem; }
    .sale-detail-status { min-width: 88px; }
    .sale-detail-status p { font-size: .64rem; }
    .sale-void-panel { padding: 16px 14px; align-items: flex-start; flex-direction: column; gap: 12px; }
    .sales-pagination { padding: 14px; }
    .sale-form-footer .btn { min-height: 40px; flex: 1; }
    .sales-summary .summary-amount { font-size: 1.3rem; }
}