@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../**/*.blade.php'; @source '../../app/**/*.php'; /* * Dark mode is driven by a class on rather than the OS preference * alone, because a shop can pin the interface to light or dark in settings. */ @custom-variant dark (&:where(.dark, .dark *)); @theme { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /* * Brand tokens are only fallbacks. The real values are injected as inline * custom properties on by ThemeManager, so each shop's colours * apply without rebuilding the CSS bundle. */ --color-brand: #2563eb; --color-brand-soft: #eff6ff; --color-brand-hover: #1d4ed8; } @layer base { :root { --tx-primary: #2563eb; --tx-primary-rgb: 37, 99, 235; --tx-primary-soft: #eff6ff; --tx-primary-hover: #1d4ed8; --tx-primary-ring: #93c5fd; --tx-on-primary: #ffffff; --tx-accent: #0ea5e9; --tx-accent-soft: #e0f2fe; --tx-on-accent: #ffffff; --tx-radius: 8px; --tx-row-height: 2.6rem; --tx-cell-pad: 0.55rem; --tx-font-size: 0.875rem; --tx-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } html { font-family: var(--tx-font-family); -webkit-text-size-adjust: 100%; } body { @apply bg-slate-50 text-slate-800 antialiased dark:bg-slate-950 dark:text-slate-200; font-size: var(--tx-font-size); } /* Numeric columns line up only if the digits are tabular. */ .tabular, td.num, th.num, input[type='number'] { font-variant-numeric: tabular-nums; } [x-cloak] { display: none !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { @apply rounded-full bg-slate-300 dark:bg-slate-700; } ::-webkit-scrollbar-track { @apply bg-transparent; } } @layer components { /* ---------------------------------------------------------------- brand */ .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap border px-3.5 py-2 text-sm font-medium transition select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50; border-radius: var(--tx-radius); } .btn-primary { background-color: var(--tx-primary); border-color: var(--tx-primary); color: var(--tx-on-primary); } .btn-primary:hover:not(:disabled) { background-color: var(--tx-primary-hover); border-color: var(--tx-primary-hover); } .btn-secondary { @apply border-slate-300 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800; } .btn-danger { @apply border-red-600 bg-red-600 text-white hover:bg-red-700; } .btn-ghost { @apply border-transparent bg-transparent text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800; } .btn-sm { @apply px-2.5 py-1.5 text-xs; } .btn-lg { @apply px-5 py-2.5 text-base; } /* ---------------------------------------------------------------- forms */ .field-label { @apply mb-1.5 block text-xs font-medium text-slate-600 dark:text-slate-400; } .field-input { @apply block w-full border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 disabled:bg-slate-100 disabled:text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:disabled:bg-slate-800; border-radius: var(--tx-radius); } .field-input:focus { @apply outline-none ring-2; border-color: var(--tx-primary); --tw-ring-color: var(--tx-primary-ring); } .field-error { @apply mt-1 text-xs text-red-600 dark:text-red-400; } .field-hint { @apply mt-1 text-xs text-slate-500 dark:text-slate-400; } /* --------------------------------------------------------------- panels */ .card { @apply border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900; border-radius: calc(var(--tx-radius) + 4px); } .card-header { @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-3.5 dark:border-slate-800; } .card-body { @apply p-5; } /* --------------------------------------------------------------- tables */ .table { @apply w-full text-left text-sm; } .table thead th { @apply border-b border-slate-200 bg-slate-50 px-3 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-400; } .table tbody td { @apply border-b border-slate-100 text-slate-700 dark:border-slate-800/70 dark:text-slate-300; padding: var(--tx-cell-pad) 0.75rem; } .table tbody tr:hover { @apply bg-slate-50/80 dark:bg-slate-800/40; } /* --------------------------------------------------------------- badges */ .badge { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium; } .badge-gray { @apply bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300; } .badge-blue { @apply bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300; } .badge-green { @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300; } .badge-red { @apply bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300; } .badge-amber { @apply bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300; } .badge-orange { @apply bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-300; } .badge-purple { @apply bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300; } .badge-indigo { @apply bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300; } /* ------------------------------------------------------------ nav items */ .nav-item { @apply flex items-center gap-3 px-3 py-2 text-sm font-medium transition; border-radius: var(--tx-radius); } .nav-item-idle { @apply text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800/70; } .nav-item-active { background-color: var(--tx-primary-soft); color: var(--tx-primary-hover); @apply font-semibold dark:bg-slate-800 dark:text-white; } .sidebar-dark .nav-item-idle { @apply text-slate-400 hover:bg-white/10 hover:text-white; } .sidebar-dark .nav-item-active { @apply bg-white/10 text-white; } } @layer utilities { .text-brand { color: var(--tx-primary); } .bg-brand { background-color: var(--tx-primary); } .bg-brand-soft { background-color: var(--tx-primary-soft); } .border-brand { border-color: var(--tx-primary); } .ring-brand { --tw-ring-color: var(--tx-primary-ring); } } /* * Print rules live here rather than in each receipt template so that any page * — a Livewire screen, a receipt, a report — prints predictably. */ @media print { .no-print, nav, aside, header.app-header { display: none !important; } body { background: #fff !important; font-size: 12px; } .print-full { margin: 0 !important; padding: 0 !important; width: 100% !important; } .page-break { page-break-after: always; } }