/*
 * Labendar app.css — Tailwind utility shim
 * Replaces the Tailwind CDN with only the utilities actually used in this app.
 * Loaded after Bootstrap so these take precedence where class names overlap.
 */

/* ─── Colors: Slate ─────────────────────────────────────────── */
.bg-slate-50  { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }

/* ─── Colors: Emerald ───────────────────────────────────────── */
.bg-emerald-50  { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-emerald-900 { color: #064e3b !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-emerald-400 { border-color: #34d399 !important; }

/* ─── Colors: Teal ──────────────────────────────────────────── */
.bg-teal-50  { background-color: #f0fdfa !important; }
.text-teal-700 { color: #0f766e !important; }
.border-teal-300 { border-color: #5eead4 !important; }

/* ─── Colors: Indigo ────────────────────────────────────────── */
.bg-indigo-50  { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.text-indigo-700 { color: #4338ca !important; }
.border-indigo-300 { border-color: #a5b4fc !important; }

/* ─── Colors: Rose ──────────────────────────────────────────── */
.bg-rose-50  { background-color: #fff1f2 !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }
.text-rose-700 { color: #be123c !important; }
.text-rose-800 { color: #9f1239 !important; }
.text-rose-900 { color: #881337 !important; }
.border-rose-200 { border-color: #fecdd3 !important; }
.border-rose-300 { border-color: #fda4af !important; }

/* ─── Colors: Blue ──────────────────────────────────────────── */
.bg-blue-50  { background-color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-800 { color: #1e40af !important; }
.text-blue-900 { color: #1e3a8a !important; }
.border-blue-200 { border-color: #bfdbfe !important; }

/* ─── Colors: Amber ─────────────────────────────────────────── */
.bg-amber-50 { background-color: #fffbeb !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-900 { color: #78350f !important; }
.border-amber-200 { border-color: #fde68a !important; }

/* ─── Colors: Yellow ────────────────────────────────────────── */
.bg-yellow-100 { background-color: #fef9c3 !important; }
.bg-yellow-200 { background-color: #fef08a !important; }
.bg-yellow-300 { background-color: #fde047 !important; }

/* ─── Colors: Orange ────────────────────────────────────────── */
.bg-orange-50  { background-color: #fff7ed !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-orange-600 { background-color: #ea580c !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.text-orange-700 { color: #c2410c !important; }
.border-orange-300 { border-color: #fdba74 !important; }
.border-orange-600 { border-color: #ea580c !important; }
.border-orange-700 { border-color: #c2410c !important; }

/* ─── Colors: Green (Tailwind, distinct from brand #00C896) ─ */
.bg-green-50  { background-color: #f0fdf4 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.text-green-800 { color: #166534 !important; }
.border-green-600 { border-color: #16a34a !important; }

/* ─── Hover color utilities ─────────────────────────────────── */
.hover\:bg-slate-100:hover  { background-color: #f1f5f9 !important; }
.hover\:bg-slate-200:hover  { background-color: #e2e8f0 !important; }
.hover\:bg-orange-50:hover  { background-color: #fff7ed !important; }
.hover\:bg-orange-100:hover { background-color: #ffedd5 !important; }
.hover\:bg-orange-700:hover { background-color: #c2410c !important; }
.hover\:bg-green-100:hover  { background-color: #dcfce7 !important; }
.hover\:bg-amber-100:hover  { background-color: #fef3c7 !important; }
.hover\:text-rose-900:hover { color: #881337 !important; }

/* ─── Brand buttons ─────────────────────────────────────────── */
.btn-brand {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background: #e55a28;
  border-color: #e55a28;
  color: #fff;
}

.btn-outline-brand {
  border-color: rgba(255, 107, 53, 0.45);
  color: var(--orange-primary);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: rgba(255, 107, 53, 0.1);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
}

/* ─── Typography ────────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;      line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700 !important; }
.font-normal   { font-weight: 400 !important; }
.leading-relaxed { line-height: 1.625; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-nowrap   { white-space: nowrap; }
.break-words { overflow-wrap: break-word; word-break: break-word; }
.underline   { text-decoration: underline !important; }

/* ─── Spacing overrides (Tailwind scale differs from Bootstrap at 3+) ─ */
.px-3 { padding-left: 0.75rem !important; padding-right:  0.75rem !important; }
.py-3 { padding-top:  0.75rem !important; padding-bottom: 0.75rem !important; }
.px-4 { padding-left: 1rem    !important; padding-right:  1rem    !important; }
.py-4 { padding-top:  1rem    !important; padding-bottom: 1rem    !important; }
.p-6  { padding: 1.5rem !important; }
.px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.pl-9 { padding-left:  2.25rem !important; }
.pr-4 { padding-right: 1rem    !important; }

/* Tailwind fractional spacing not in Bootstrap */
.py-1\.5 { padding-top:    0.375rem !important; padding-bottom: 0.375rem !important; }
.px-3\.5 { padding-left:   0.875rem !important; padding-right:  0.875rem !important; }
.py-2\.5 { padding-top:    0.625rem !important; padding-bottom: 0.625rem !important; }
.mt-0\.5 { margin-top:     0.125rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }

/* Large spacing values not in Bootstrap */
.pb-24 { padding-bottom: 6rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }

/* ─── Layout ────────────────────────────────────────────────── */

/* Display — these are the most critical: Bootstrap uses d-* names, Tailwind uses these */
.flex         { display: flex         !important; }
.hidden       { display: none         !important; }
.block        { display: block        !important; }
.inline-block { display: inline-block !important; }
.inline       { display: inline       !important; }

/* Flex alignment — Bootstrap uses justify-content-* and align-items-*, Tailwind uses these */
.items-center    { align-items: center          !important; }
.items-end       { align-items: flex-end        !important; }
.items-start     { align-items: flex-start      !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center      !important; }
.justify-end     { justify-content: flex-end    !important; }
.justify-start   { justify-content: flex-start  !important; }

.fixed    { position: fixed !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.sticky   { position: sticky !important; }
.inset-0  { inset: 0 !important; }

.min-h-screen { min-height: 100vh !important; }
.min-w-0      { min-width: 0 !important; }
.min-w-full   { min-width: 100% !important; }
.max-w-sm  { max-width: 24rem !important; }
.max-w-7xl { max-width: 80rem !important; }
.max-h-60       { max-height: 15rem !important; }
.max-h-\[52vh\] { max-height: 52vh !important; }
.max-h-\[90vh\] { max-height: 90vh !important; }

/* Width */
.w-full { width: 100%    !important; }
.w-4    { width: 1rem    !important; }
.w-5    { width: 1.25rem !important; }
.w-6    { width: 1.5rem  !important; }
.w-8    { width: 2rem    !important; }
.w-10   { width: 2.5rem  !important; }
.w-12   { width: 3rem    !important; }
.w-16   { width: 4rem    !important; }
.w-20   { width: 5rem    !important; }
.w-24   { width: 6rem    !important; }
.w-32   { width: 8rem    !important; }

/* Height */
.h-full { height: 100%   !important; }
.h-4    { height: 1rem    !important; }
.h-5    { height: 1.25rem !important; }
.h-6    { height: 1.5rem  !important; }
.h-8    { height: 2rem    !important; }
.h-10   { height: 2.5rem  !important; }
.h-12   { height: 3rem    !important; }

.flex-1        { flex: 1 1 0% !important; }
.flex-col      { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }
.flex-row      { flex-direction: row !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.shrink-0      { flex-shrink: 0 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.inline-flex   { display: inline-flex !important; }

.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px !important; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

.overflow-hidden { overflow: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-auto   { overflow: auto !important; }

.top-0    { top: 0    !important; }
.top-1\/2 { top: 50% !important; }
.left-3   { left: 0.75rem !important; }
.-translate-y-1\/2 { transform: translateY(-50%) !important; }
.z-10   { z-index: 10  !important; }
.z-20   { z-index: 20  !important; }
.z-50   { z-index: 50  !important; }
.z-\[9999\] { z-index: 9999 !important; }

/* ─── Table utilities ───────────────────────────────────────── */
.table-fixed      { table-layout: fixed !important; }
.border-separate  { border-collapse: separate !important; }
.border-spacing-0 { border-spacing: 0 !important; }
.align-middle     { vertical-align: middle !important; }

/* ─── Other utilities ───────────────────────────────────────── */
.animate-spin {
  animation: tw-spin 1s linear infinite;
}
@keyframes tw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.border-0   { border-width: 0   !important; }
.border-2   { border-width: 2px !important; }
.border-4   { border-width: 4px !important; }
.border-l-4 { border-left-width: 4px !important; }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t   { border-top-width: 1px;    border-top-style: solid; }
.border-l   { border-left-width: 1px;   border-left-style: solid; }
.rounded      { border-radius: 0.25rem  !important; }
.rounded-md   { border-radius: 0.375rem !important; }
.rounded-full { border-radius: 9999px   !important; }
.rounded-xl   { border-radius: 0.75rem  !important; }
.rounded-2xl  { border-radius: 1rem     !important; }
.rounded-lg   { border-radius: 0.5rem   !important; }
.shadow-xl    { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important; }

.cursor-pointer     { cursor: pointer !important; }
.select-none        { user-select: none !important; }
.pointer-events-none { pointer-events: none !important; }
.opacity-0          { opacity: 0   !important; }
.opacity-50         { opacity: 0.5 !important; }
.opacity-70         { opacity: 0.7 !important; }

.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; }
.transition { transition: all 0.15s ease-in-out !important; }

.focus\:outline-none:focus          { outline: none !important; }
.focus\:border-orange-400:focus     { border-color: #fb923c !important; }
.focus\:ring-2:focus                { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(0,0,0,0.1)) !important; }
.focus\:ring-orange-100:focus       { --tw-ring-color: rgba(255,237,213,0.8); }

/* ─── Responsive variants ───────────────────────────────────── */
@media (min-width: 576px) {
  .sm\:w-auto   { width: auto !important; }
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:justify-end  { justify-content: flex-end !important; }
  .sm\:gap-5    { gap: 1.25rem !important; }
  .sm\:p-5      { padding: 1.25rem !important; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .lg\:mt-0       { margin-top: 0 !important; }
  .lg\:gap-8      { gap: 2rem !important; }
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}