/*
 * TeckGem CRM v2 — styles for the new screens (inventory, dealer page, call buttons, roles).
 * Same values as the Tailwind utilities used in the views, so no rebuild of public/build is needed.
 * If you rebuild the CSS with `npm run build`, this file can stay; it does no harm.
 */

/* layout & position */
.col-span-2 { grid-column: span 2 / span 2; }
.mt-auto { margin-top: auto; }
.me-1 { margin-inline-end: .25rem; }
.gap-0\.5 { gap: .125rem; }
.gap-x-1 { column-gap: .25rem; }
.gap-y-3 { row-gap: .75rem; }
.top-0\.5 { top: .125rem; }
.top-1 { top: .25rem; }
.top-2 { top: .5rem; }
.bottom-1 { bottom: .25rem; }
.bottom-3 { bottom: .75rem; }
.left-0\.5 { left: .125rem; }
.left-1 { left: .25rem; }
.left-2 { left: .5rem; }
.left-1\/2 { left: 50%; }
.left-\[22px\] { left: 22px; }
.right-2 { right: .5rem; }
.inset-x-1 { left: .25rem; right: .25rem; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-20 { width: 5rem; }
.w-\[18px\] { width: 18px; }
.h-\[18px\] { height: 18px; }
.max-w-\[16rem\] { max-width: 16rem; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }

.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }

/* type */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-\[10px\] { font-size: 10px; }

/* colours */
.bg-\[\#25D366\] { background-color: #25D366; }
.text-\[\#25D366\] { color: #25D366; }
.hover\:bg-\[\#1ebe5a\]:hover { background-color: #1ebe5a; }
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-500 { background-color: #f97316; }
.text-orange-700 { color: #c2410c; }
.ring-orange-600\/20 { --tw-ring-color: rgb(234 88 12 / .2); }
.ring-slate-600\/20 { --tw-ring-color: rgb(71 85 105 / .2); }
.bg-slate-900\/70 { background-color: rgb(15 23 42 / .7); }
.bg-white\/90 { background-color: rgb(255 255 255 / .9); }
.text-white\/70 { color: rgb(255 255 255 / .7); }
.border-dashed { border-style: dashed; }
.opacity-70 { opacity: .7; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #EEF3FF), var(--tw-gradient-to, #DCE6FE)); }
.from-brand-50 { --tw-gradient-from: #EEF3FF; }
.to-brand-100 { --tw-gradient-to: #DCE6FE; }

/* hover */
.hover\:bg-amber-100:hover { background-color: #fef3c7; }
.hover\:bg-emerald-100:hover { background-color: #d1fae5; }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:border-brand-300:hover { border-color: #8AAAF9; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:text-rose-600:hover { color: #e11d48; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }
.group:hover .group-hover\:text-brand-700 { color: #233DA3; }

/* responsive (after the base rules so they win) */
@media (min-width: 640px) {
    .sm\:flex-wrap { flex-wrap: wrap; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:max-w-xs { max-width: 20rem; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:block { display: block; }
}
@media (min-width: 1024px) {
    .lg\:max-w-xs { max-width: 20rem; }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Android app: a little more room for thumbs on call / WhatsApp icons */
@media (pointer: coarse) {
    a[href^="tel:"].h-8, a[target="whatsapp"].h-8 { height: 2.5rem; width: 2.5rem; }
}