/* * Styling for the report pages (Sales Stats, Remittance Report, Arrival Watch). * * These views were written in Tailwind utility classes -- grid, p-4, text-3xl, * bg-white -- but this panel has no compiled Tailwind theme and no * tailwind.config.js, so none of those classes exist in the stylesheet Filament * ships. Every one of them was inert, which is why the pages rendered as a * column of unstyled text with the numbers stacked under their labels. * * Plain CSS with its own class names, registered through FilamentAsset, avoids * introducing a build step for three pages. Dark mode keys off the `dark` class * Filament puts on , which is how the rest of the panel does it. */ .jc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .jc-stat { padding: 1rem 1.15rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); outline: 1px solid rgb(17 24 39 / 0.05); outline-offset: -1px; } .jc-stat__label { margin: 0; font-size: 0.8125rem; font-weight: 500; color: #6b7280; } .jc-stat__value { margin: 0.35rem 0 0; font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #111827; font-variant-numeric: tabular-nums; } .jc-stat__hint { margin: 0.4rem 0 0; font-size: 0.75rem; color: #6b7280; } .jc-stat__action { margin: 0.35rem 0 0; font-size: 0.75rem; font-weight: 600; color: #374151; } .jc-stat--danger .jc-stat__value { color: #b91c1c; } .jc-stat--warning .jc-stat__value { color: #b45309; } .jc-stat--success .jc-stat__value { color: #047857; } .jc-stat--info .jc-stat__value { color: #0e7490; } /* filter bar ----------------------------------------------------------- */ .jc-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; align-items: end; padding: 1rem 1.15rem; margin-bottom: 1.25rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); outline: 1px solid rgb(17 24 39 / 0.05); outline-offset: -1px; } .jc-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .jc-field > label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7280; } .jc-field > select, .jc-field > input { width: 100%; padding: 0.45rem 0.6rem; font-size: 0.875rem; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: 0.5rem; } .jc-field > select:focus, .jc-field > input:focus { outline: 2px solid #0f7c8a; outline-offset: -1px; border-color: #0f7c8a; } .jc-note { margin: 0; font-size: 0.75rem; color: #6b7280; } /* report tables -------------------------------------------------------- */ .jc-section { margin-bottom: 1.5rem; } .jc-section__title { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; } .jc-table-wrap { overflow-x: auto; background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); outline: 1px solid rgb(17 24 39 / 0.05); outline-offset: -1px; } .jc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .jc-table th { padding: 0.7rem 0.9rem; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: #374151; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; } .jc-table td { padding: 0.7rem 0.9rem; color: #111827; border-bottom: 1px solid #f3f4f6; } .jc-table tbody tr:last-child td { border-bottom: 0; } .jc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .jc-table__empty { padding: 1.25rem; font-size: 0.875rem; color: #6b7280; } /* dark -- Filament puts .dark on ---------------------------------- */ .dark .jc-stat, .dark .jc-filters, .dark .jc-table-wrap { background: #111827; outline-color: rgb(255 255 255 / 0.1); } .dark .jc-stat__label, .dark .jc-stat__hint, .dark .jc-note, .dark .jc-section__title, .dark .jc-field > label, .dark .jc-table__empty { color: #9ca3af; } .dark .jc-stat__value, .dark .jc-table td { color: #f9fafb; } .dark .jc-stat__action { color: #d1d5db; } .dark .jc-stat--danger .jc-stat__value { color: #f87171; } .dark .jc-stat--warning .jc-stat__value { color: #fbbf24; } .dark .jc-stat--success .jc-stat__value { color: #34d399; } .dark .jc-stat--info .jc-stat__value { color: #22d3ee; } .dark .jc-field > select, .dark .jc-field > input { background: #1f2937; border-color: #374151; color: #f9fafb; } .dark .jc-table th { background: #1f2937; color: #e5e7eb; border-bottom-color: #374151; } .dark .jc-table td { border-bottom-color: #1f2937; }