/* Supplementary utilities & components not covered by utilities.css */

/* Important modifiers */
.\!bg-\[\#FAFAF9\] { background-color: #FAFAF9 !important; }

/* Position offsets */
.-top-7 { top: -1.75rem; }
.-bottom-10 { bottom: -2.5rem; }
.bottom-4 { bottom: 1rem; }
.bottom-6 { bottom: 1.5rem; }
.bottom-10 { bottom: 2.5rem; }
.bottom-20 { bottom: 5rem; }
.right-2 { right: 0.5rem; }
.right-6 { right: 1.5rem; }
.left-2 { left: 0.5rem; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

/* Flex */
.flex-col-reverse { flex-direction: column-reverse; }
.flex-\[0\.4\] { flex: 0.4; }
.flex-\[0\.6\] { flex: 0.6; }
.flex-\[0\.8\] { flex: 0.8; }
.shrink-0 { flex-shrink: 0; }
.items-baseline { align-items: baseline; }
.align-center { align-items: center; justify-content: center; }

/* Gap */
.gap-x-3 { column-gap: 0.75rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* Sizing */
.h-\[32px\] { height: 32px; }
.h-\[500px\] { height: 500px; }
.h-1\.5 { height: 0.375rem; }
.w-1\.5 { width: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-44 { width: 11rem; }

/* Opacity backgrounds */
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/70 { background-color: rgba(255,255,255,0.7); }
.bg-white\/90 { background-color: rgba(255,255,255,0.9); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }

/* Borders */
.border-r { border-right-width: 1px; border-style: solid; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-style: solid; }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.border-collapse { border-collapse: collapse; }
.divide-slate-100 > * + * { border-color: #f1f5f9; }

/* Backdrop */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* Accent (checkboxes) */
.accent-\[\#c5db55\] { accent-color: #c5db55; }
.accent-\[\#e3ff65\] { accent-color: #e3ff65; }
.accent-blue-400 { accent-color: #60a5fa; }

/* Animations */
.animate-ping { animation: ct-ping 1s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ct-ping { 75%,100% { transform: scale(2); opacity: 0; } }
.active\:scale-95:active { transform: scale(0.95); }

/* Gradient stops */
.from-\[\#e3ff65\] { --tw-gradient-from: #e3ff65; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#e3ff65\]\/20 { --tw-gradient-from: rgba(227,255,101,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-indigo-400 { --tw-gradient-from: #818cf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-indigo-900 { --tw-gradient-from: #312e81; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-white { --tw-gradient-from: #fff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-\[\#e3ff65\] { --tw-gradient-to: #e3ff65; }
.to-slate-900 { --tw-gradient-to: #0f172a; }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }

/* Hover extras */
.hover\:border-slate-300:hover { border-color: #cbd5e1; }
.hover\:bg-indigo-50:hover { background-color: #eef2ff; }
.hover\:brightness-110:hover { filter: brightness(1.1); }
.group:hover .group-hover\:text-rose-500 { color: #f43f5e; }

/* Focus extras */
.focus\:bg-white:focus { background-color: #fff; }
.focus\:border-emerald-400:focus { border-color: #34d399; }
.focus\:border-green-500:focus { border-color: #22c55e; }
.focus\:border-indigo-500:focus { border-color: #6366f1; }
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 2px #6366f1; }

/* Disabled */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-30:disabled { opacity: 0.3; }

/* Decoration */
.decoration-slate-300 { text-decoration-color: #cbd5e1; }

/* 2xl breakpoint */
@media (min-width: 1536px) {
    .\32xl\:max-w-7xl { max-width: 80rem; }
}

/* md:row — footer typo, treat as flex-row */
@media (min-width: 768px) {
    .md\:row { flex-direction: row; }
    .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Lime colors used in realtime dot */
.bg-lime-400 { background-color: #a3e635; }
.bg-blue-400 { background-color: #60a5fa; }

.hover\:rotate-0:hover { transform: rotate(0deg); }
.z-\[100\] { z-index: 100; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[600px\] { max-width: 600px; }
.min-h-\[340px\] { min-height: 340px; }
.rounded-\[1rem\] { border-radius: 1rem; }
.text-\[\#111827\] { color: #111827; }
.text-\[\#4B5563\] { color: #4B5563; }
.rotate-\[-2deg\] { transform: rotate(-2deg); }

.bg-rose-100 { background-color: #ffe4e6; }
.border-rose-500 { border-color: #f43f5e; }
.scale-\[1\.02\] { transform: scale(1.02); }

/* Glass & blobs (landing) */
.blob {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    filter: blur(100px);
    border-radius: 50%;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.25);
}

.glass-effect { backdrop-filter: blur(12px); }

.bg-mesh {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: fixed;
    inset: 0;
    z-index: -1;
}

.bg-mesh--auth {
    background: linear-gradient(135deg, #ff1f5a 0%, #ff89a9 100%);
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* Board blocks theme */
.blk-bg    { background: #f7fee7; }
.blk-card  { background: #ffffff; border: 1px solid #c4d2ac; border-radius: 20px; overflow: hidden; }
.blk-accent{ color: #84cc16; }
.blk-muted { color: #8c8d8a; }
.blk-pill  { background: #d9f99d; color: #3f6212; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.blk-bar-bg{ background: #ecfccb; border-radius: 99px; height: 6px; }
.blk-bar-fg{ background: linear-gradient(90deg,#A3D234,#84CC16); border-radius: 99px; height: 6px; transition: width .6s ease; }
.blk-icon  { background: #d9f99d; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blk-sep   { border-color: #ecfccb; }

/* Container */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* Dark mode token used on board wrapper */
.dark\:bg-neutral\/50 { background-color: rgba(0,0,0,0.05); }