/* ============================================================
   SANABIL MEDICAL ESTABLISHMENT — Supplemental utility layer
   Hand-authored Tailwind-compatible utilities not present in
   the static tailwind.generated.css snapshot.
   ============================================================ */

/* --- Color --- */
.bg-\[\#0B2A4A\] { background-color: #0B2A4A; }
.bg-\[\#071E36\] { background-color: #071E36; }
.bg-\[\#071E36\]\/97 { background-color: rgba(7, 30, 54, 0.97); }
.bg-\[\#0EA5A0\] { background-color: #0EA5A0; }
.bg-\[\#EEF4F6\]\/60 { background-color: rgba(238, 244, 246, 0.6); }
.bg-\[\#F6F9FA\] { background-color: #F6F9FA; }
.bg-white\/8 { background-color: rgba(255, 255, 255, 0.08); }

.text-\[\#071E36\] { color: #071E36; }
.text-\[\#0B2A4A\] { color: #0B2A4A; }
.text-\[\#0EA5A0\] { color: #0EA5A0; }
.text-\[\#16324F\] { color: #16324F; }
.text-\[\#5b6b7a\] { color: #5b6b7a; }
.hover\:text-accent:hover { color: var(--accent, #0EA5A0); }

.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
.text-white\/45 { color: rgba(255, 255, 255, 0.45); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }

.border-\[\#0B2A4A\]\/10 { border-color: rgba(11, 42, 74, 0.1); }
.border-\[\#0EA5A0\]\/20 { border-color: rgba(14, 165, 160, 0.2); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }

.hover\:bg-\[\#0EA5A0\]\/80:hover { background-color: rgba(14, 165, 160, 0.8); }
.hover\:border-\[\#0EA5A0\]:hover { border-color: #0EA5A0; }
.hover\:border-accent:hover { border-color: var(--accent, #0EA5A0); }
.hover\:text-\[\#0EA5A0\]:hover { color: #0EA5A0; }
.hover\:text-white:hover { color: #ffffff; }
.hover\:scale-105:hover { transform: scale(1.05); }

.group:hover .group-hover\:text-\[\#0EA5A0\] { color: #0EA5A0; }

.selection\:bg-\[\#0EA5A0\] ::selection,
.selection\:bg-\[\#0EA5A0\] ::-moz-selection { background-color: #0EA5A0; }
.selection\:text-white ::selection,
.selection\:text-white ::-moz-selection { color: #ffffff; }

/* --- Layout --- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-5 { gap: 1.25rem; }
.gap-10 { gap: 2.5rem; }
.shrink-0 { flex-shrink: 0; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }

/* --- Spacing --- */
.mb-5 { margin-bottom: 1.25rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-14 { margin-bottom: 3.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-24 { margin-top: 6rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.leading-9 { line-height: 2.25rem; }

/* --- Typography --- */
.leading-6 { line-height: 1.5rem; }
.font-semibold { font-weight: 600; }
.font-extrabold { font-weight: 800; }
.text-base { font-size: 1rem; line-height: 1.6; }
.text-start { text-align: start; }

/* --- Layout extras --- */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.h-full { height: 100%; }
.opacity-70 { opacity: 0.7; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }

/* --- Responsive: sm (>=640px) --- */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:text-5xl { font-size: 3rem; line-height: 1.15; }
}

/* --- Responsive: md (>=768px) --- */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
    .md\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }
    .md\:text-3xl { font-size: 1.875rem; line-height: 1.35; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 1.3; }
    .md\:text-5xl { font-size: 3rem; line-height: 1.2; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1.1; }
}

/* --- Responsive: lg (>=1024px) --- */
@media (min-width: 1024px) {
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:sticky { position: sticky; }
    .lg\:top-32 { top: 8rem; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1.1; }
    .lg\:text-7xl { font-size: 4.5rem; line-height: 1.05; }
}