/*
 * Supplemental Tailwind utilities used by the POS "Current sale" panel
 * (sale_pos/partials: pos_form, pos_form_totals, pos_form_actions).
 * These classes are referenced in the blade markup but were absent from the
 * pre-compiled tailwind/app.css build, so the panel rendered unstyled
 * (stacked buttons, no green Charge button, dark links, missing dividers).
 * Values follow the Tailwind default palette / spacing scale.
 */

/* Layout / grid */
.tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Spacing */
.tw-gap-1\.5 { gap: 0.375rem; }
.tw-mt-1\.5 { margin-top: 0.375rem; }
.tw-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.\!tw-pl-1 { padding-left: 0.25rem !important; }
.\!tw-pr-1 { padding-right: 0.25rem !important; }

/* Sizing */
.tw-h-16 { height: 4rem; }
.tw-size-3\.5 { width: 0.875rem; height: 0.875rem; }
.tw-size-7 { width: 1.75rem; height: 1.75rem; }

/* Typography */
.tw-font-black { font-weight: 900; }
.tw-text-\[10px\] { font-size: 10px; line-height: 1; }

/* Colors — background */
.tw-bg-emerald-700 { background-color: #047857; }
.tw-bg-red-500 { background-color: #ef4444; }

/* Colors — text */
.tw-text-emerald-600 { color: #059669; }

/* Colors — border */
.tw-border-gray-100 { border-color: #f3f4f6; }
.tw-border-red-200 { border-color: #fecaca; }

/* Hover states */
.hover\:tw-bg-emerald-800:hover { background-color: #065f46; }
.hover\:tw-bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:tw-bg-red-600:hover { background-color: #dc2626; }
.hover\:tw-text-emerald-700:hover { color: #047857; }
.hover\:tw-text-gray-600:hover { color: #4b5563; }

/* ------------------------------------------------------------------ *
 * POS header, search bar and category/brand filter pills
 * (layouts/partials/header-pos + sale_pos/partials/pos_sidebar).
 * These utilities are referenced by the redesigned markup but were
 * absent from the pre-compiled tailwind/app.css build.
 * ------------------------------------------------------------------ */

/* Brand / accent colors */
.tw-bg-\[\#0E6E50\]     { background-color: #0E6E50; }
.tw-text-\[\#0E6E50\]   { color: #0E6E50; }
.tw-border-\[\#0E6E50\] { border-color: #0E6E50; }
.tw-bg-\[\#E8F5E9\]     { background-color: #E8F5E9; }
.tw-bg-emerald-500      { background-color: #10b981; }
.tw-bg-gray-900         { background-color: #111827; }
.tw-border-emerald-100  { border-color: #d1fae5; }
.tw-text-red-600        { color: #dc2626; }

/* Typography / spacing */
.tw-text-\[11px\] { font-size: 11px; }
.tw-ml-1          { margin-left: 0.25rem; }
.tw-opacity-80    { opacity: 0.8; }
.tw-pl-10         { padding-left: 2.5rem; }
.tw-pr-10         { padding-right: 2.5rem; }
.tw-pl-3\.5       { padding-left: 0.875rem; }
.tw-pr-3\.5       { padding-right: 0.875rem; }
.tw-py-2\.5       { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.tw-w-25          { width: 100%; }
.tw-pointer-events-none { pointer-events: none; }

/* Hide scrollbar on the horizontal category filter bar */
.tw-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.tw-no-scrollbar::-webkit-scrollbar { display: none; }

/* Hover / focus states */
.hover\:tw-bg-gray-800:hover  { background-color: #1f2937; }
.hover\:tw-text-red-900:hover { color: #7f1d1d; }
.focus\:tw-border-transparent:focus { border-color: transparent; }
.focus\:tw-ring-emerald-500:focus  { box-shadow: 0 0 0 2px #10b981; }

/* Responsive display helpers */
@media (min-width: 640px)  { .sm\:tw-block { display: block; } }
@media (min-width: 1024px) { .lg\:tw-block { display: block; } }
@media (min-width: 768px)  { .md\:tw-no-padding { padding: 0 !important; } }