/* Remission notes page — matches the Nexus POS design system */ /* Scrollable page content area */ .page-content { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .page-content::-webkit-scrollbar { width: 6px; } .page-content::-webkit-scrollbar-track { background: var(--scrollbar-track); } .page-content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } /* Filters card */ .filters-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); } [data-theme="modern"] .filters-card { background: var(--color-bg-overlay); } /* Date input reuse select-filter styling */ .select-filter[type="date"] { padding: 0 var(--space-3); } /* Status badges for remission notes */ .badge--pending_payment { background: var(--color-primary-muted); color: var(--color-primary); } .badge--completed { background: rgba(34, 197, 94, 0.15); color: var(--color-success); } .badge--cancelled { background: rgba(115, 115, 115, 0.15); color: var(--color-text-muted); } /* Action buttons in table */ .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-2); height: 28px; border-radius: var(--radius-md); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); cursor: pointer; border: 1px solid transparent; transition: var(--transition-fast); white-space: nowrap; } .action-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .action-btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); } .action-btn--ghost:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text-primary); } .action-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); } .action-btn--primary:hover { background: var(--btn-primary-bg-hover); } /* Empty state */ .empty-state { padding: var(--space-10) var(--space-6); } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: var(--z-modal, 1050); padding: var(--space-4); } .modal-overlay.is-open { display: flex; } .modal { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; } [data-theme="modern"] .modal { background: var(--color-bg-overlay); } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .modal__title { font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-primary); color: var(--color-text-primary); margin: 0; } .modal__close { background: none; border: none; color: var(--color-text-muted); font-size: 1.25rem; cursor: pointer; line-height: 1; padding: var(--space-1); } .modal__close:hover { color: var(--color-text-primary); } .modal__body { padding: var(--space-5); } .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); } /* Ticket preview (monospace) */ .ticket-preview { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-primary); } .ticket-preview__center { text-align: center; } .ticket-preview__bold { font-weight: 700; } .ticket-preview__line { display: flex; justify-content: space-between; gap: var(--space-3); } .ticket-preview__divider { border-top: 1px dashed var(--color-border-strong); margin: var(--space-3) 0; } .ticket-preview__items { margin: var(--space-3) 0; } .ticket-preview__item { display: flex; justify-content: space-between; gap: var(--space-3); } .ticket-preview__footer { text-align: center; margin-top: var(--space-3); } /* Responsive */ @media (max-width: 1024px) { .page-content { padding: var(--space-4); } .toolbar { flex-direction: column; align-items: stretch; } .search-box, .select-filter { max-width: 100%; width: 100%; } .toolbar__spacer { display: none; } }