@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/*
* Default "primary" brand palette, as raw R G B triplets (no commas — that's
* the format Tailwind's `rgb(var(--x) / <alpha-value>)` pattern in
* tailwind.config.js expects so opacity modifiers like bg-primary-600/50
* keep working). These are the exact same teal values the palette used to
* be hardcoded to in tailwind.config.js — this file is only the fallback,
* so a deployment where nobody has set a custom brand color in
* Admin > General Settings > Branding looks pixel-identical to before.
*
* When a brand color IS set, layouts/app.blade.php prints an inline
* <style> block in <head> with a `:root` override for these same
* variables, computed from that color (see App\Support\BrandPalette).
* Because it's inline and loads after this stylesheet, it wins the
* cascade — every `bg-primary-*`/`text-primary-*`/etc. class site-wide
* repaints instantly, with no rebuild needed for future color changes.
* (One `npm run build` IS required after this change lands, so the
* compiled utility classes reference these variables in the first place.)
*/
:root {
--color-primary-50: 240 253 250;
--color-primary-100: 204 251 241;
--color-primary-200: 153 246 228;
--color-primary-300: 94 234 212;
--color-primary-400: 45 212 191;
--color-primary-500: 20 184 166;
--color-primary-600: 13 148 136;
--color-primary-700: 15 118 110;
--color-primary-800: 17 94 89;
--color-primary-900: 19 78 74;
--color-primary-950: 4 47 46;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html { @apply scroll-smooth; }
body { @apply font-sans text-gray-800 bg-gray-50; }
a { @apply transition-colors duration-150; }
}
@layer components {
.btn { @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium text-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed; }
.btn-primary { @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500; }
.btn-secondary { @apply btn bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-primary-500; }
.btn-danger { @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; }
.btn-sm { @apply px-3 py-1.5 text-xs; }
.btn-lg { @apply px-6 py-3 text-base; }
.input { @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm; }
.label { @apply block text-sm font-medium text-gray-700 mb-1; }
.form-error { @apply mt-1 text-xs text-red-600; }
.card { @apply bg-white rounded-xl shadow-sm border border-gray-100; }
.card-body { @apply p-6; }
.badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; }
.badge-green { @apply badge bg-green-100 text-green-800; }
.badge-yellow { @apply badge bg-yellow-100 text-yellow-800; }
.badge-red { @apply badge bg-red-100 text-red-800; }
.badge-blue { @apply badge bg-blue-100 text-blue-800; }
.badge-gray { @apply badge bg-gray-100 text-gray-800; }
.badge-teal { @apply badge bg-teal-100 text-teal-800; }
/* 'group' cannot be used with @apply — add it directly in templates where needed */
.product-card { @apply card overflow-hidden hover:shadow-md transition-shadow duration-200; }
.section-title { @apply text-2xl font-bold text-gray-900 mb-1; }
.section-subtitle { @apply text-gray-500 text-sm mb-6; }
/* ── Pharmacy-specific ─────────────────────────────── */
/* Prescription Required badge */
.rx-badge {
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold;
background: #dc2626;
color: #fff;
letter-spacing: 0.05em;
}
/* OTC badge */
.otc-badge {
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800;
}
/* MRP strikethrough display */
.mrp-text { @apply text-sm text-gray-400 line-through; }
.discount-badge { @apply badge bg-orange-100 text-orange-700 font-semibold; }
/* Health condition chip (nav & homepage) */
.health-chip {
@apply flex flex-col items-center gap-1.5 px-4 py-3 rounded-xl bg-white border border-gray-100
hover:border-primary-300 hover:bg-primary-50 hover:shadow-sm transition-all duration-150
text-center cursor-pointer text-xs font-medium text-gray-600 hover:text-primary-700;
}
.health-chip .icon { @apply text-2xl leading-none; }
/* Drug info tabs */
.drug-tab { @apply px-4 py-2 text-sm font-medium border-b-2 transition-colors duration-150 whitespace-nowrap; }
.drug-tab-active { @apply border-primary-600 text-primary-700; }
.drug-tab-inactive { @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300; }
/* Pharmacist prescription note box */
.rx-notice {
@apply flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700;
}
.rx-notice svg { @apply w-5 h-5 shrink-0 mt-0.5 text-red-500; }
/* Trust strip item */
.trust-item { @apply flex items-center gap-2 text-sm text-gray-600; }
.trust-item svg { @apply w-5 h-5 text-primary-600 shrink-0; }
}
/* Flash message transitions */
.flash-enter { opacity: 0; transform: translateY(-8px); }
.flash-enter-active { transition: opacity 0.3s, transform 0.3s; }
.flash-leave-active { transition: opacity 0.3s, transform 0.3s; }
.flash-leave-to { opacity: 0; transform: translateY(-8px); }