/*
 * tasix-utils.css
 * Tailwind-compatible utility classes for tasix.html
 * Replaces the Tailwind CDN with only the classes actually used.
 */

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --tasix-300: #66ffd1;
  --tasix-400: #00e6b8;
  --tasix-500: #00cca3;
  --tasix-950: #08090c;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --red-400: #f87171;
  --red-500: #ef4444;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --indigo-300: #a5b4fc;
  --indigo-500: #6366f1;
  --yellow-400: #facc15;
}

/* ============================================================
   1. Layout
   ============================================================ */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block{ display: inline-block; }
.block       { display: block; }
.hidden      { display: none; }

.flex-1      { flex: 1 1 0%; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.shrink-0    { flex-shrink: 0; }

.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.items-end   { align-items: flex-end; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-2\.5{ gap: 0.625rem; }
.gap-3   { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.relative  { position: relative; }
.absolute  { position: absolute; }
.inset-0   { inset: 0; }

.min-w-0        { min-width: 0; }
.overflow-hidden{ overflow: hidden; }
.overflow-y-auto{ overflow-y: auto; }
.overflow-x-auto{ overflow-x: auto; }

/* ============================================================
   2. Sizing
   ============================================================ */
.w-full      { width: 100%; }
.w-\[280px\] { width: 280px; }
.w-14        { width: 3.5rem; }
.w-8         { width: 2rem; }
.w-7         { width: 1.75rem; }
.w-6         { width: 1.5rem; }
.w-5         { width: 1.25rem; }
.w-4         { width: 1rem; }
.w-3\.5      { width: 0.875rem; }
.w-3         { width: 0.75rem; }
.w-2\.5      { width: 0.625rem; }
.w-2         { width: 0.5rem; }
.w-1\.5      { width: 0.375rem; }

.h-full              { height: 100%; }
.h-\[calc\(100vh-60px\)\] { height: calc(100vh - 60px); }
.h-14        { height: 3.5rem; }
.h-8         { height: 2rem; }
.h-7         { height: 1.75rem; }
.h-6         { height: 1.5rem; }
.h-5         { height: 1.25rem; }
.h-4         { height: 1rem; }
.h-3\.5      { height: 0.875rem; }
.h-3         { height: 0.75rem; }
.h-2\.5      { height: 0.625rem; }
.h-2         { height: 0.5rem; }
.h-1\.5      { height: 0.375rem; }
.h-1         { height: 0.25rem; }

.max-w-3xl       { max-width: 48rem; }
.max-w-md        { max-width: 28rem; }
.max-w-2xl       { max-width: 42rem; }
.max-w-4xl       { max-width: 56rem; }
.max-w-5xl       { max-width: 64rem; }
.max-w-6xl       { max-width: 72rem; }
.max-h-\[60px\]  { max-height: 60px; }
.min-w-\[120px\] { min-width: 120px; }
.max-w-\[200px\] { max-width: 200px; }

/* ============================================================
   3. Spacing
   ============================================================ */
.p-2   { padding: 0.5rem; }
.p-2\.5{ padding: 0.625rem; }
.p-3   { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }

.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }

.m-auto  { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-2    { margin-left: 0.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }

.mt-0\.5{ margin-top: 0.125rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-1\.5{ margin-top: 0.375rem; }
.mt-2   { margin-top: 0.5rem; }

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

/* ============================================================
   4. Typography
   ============================================================ */
.text-\[9px\]  { font-size: 9px; line-height: 1; }
.text-\[10px\] { font-size: 10px; line-height: 1; }
.text-\[11px\] { font-size: 11px; line-height: 1.25; }
.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-xl       { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl      { font-size: 1.5rem; line-height: 2rem; }
.text-3xl      { font-size: 1.875rem; line-height: 2.25rem; }

.font-mono      { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.uppercase       { text-transform: uppercase; }
.leading-relaxed { line-height: 1.625; }
.text-center     { text-align: center; }
.text-left       { text-align: left; }
.text-transparent{ color: transparent; }
.antialiased     { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   5. Colors — white with opacity
   ============================================================ */
.text-white      { color: #fff; }
.text-white\/80  { color: rgba(255,255,255,0.8); }
.text-white\/70  { color: rgba(255,255,255,0.7); }
.text-white\/60  { color: rgba(255,255,255,0.6); }
.text-white\/50  { color: rgba(255,255,255,0.5); }
.text-white\/40  { color: rgba(255,255,255,0.4); }
.text-white\/30  { color: rgba(255,255,255,0.3); }
.text-white\/25  { color: rgba(255,255,255,0.25); }
.text-white\/20  { color: rgba(255,255,255,0.2); }
.text-white\/15  { color: rgba(255,255,255,0.15); }
.text-white\/10  { color: rgba(255,255,255,0.1); }
.text-white\/5   { color: rgba(255,255,255,0.05); }

.bg-white\/\[0\.01\] { background-color: rgba(255,255,255,0.01); }
.bg-white\/\[0\.02\] { background-color: rgba(255,255,255,0.02); }
.bg-white\/\[0\.03\] { background-color: rgba(255,255,255,0.03); }
.bg-white\/\[0\.04\] { background-color: rgba(255,255,255,0.04); }
.bg-white\/\[0\.05\] { background-color: rgba(255,255,255,0.05); }
.bg-white\/\[0\.06\] { background-color: rgba(255,255,255,0.06); }
.bg-white\/\[0\.07\] { background-color: rgba(255,255,255,0.07); }
.bg-white\/\[0\.08\] { background-color: rgba(255,255,255,0.08); }
.bg-white\/5         { background-color: rgba(255,255,255,0.05); }
.bg-white\/10        { background-color: rgba(255,255,255,0.1); }

.border-white\/\[0\.04\] { border-color: rgba(255,255,255,0.04); }
.border-white\/\[0\.05\] { border-color: rgba(255,255,255,0.05); }
.border-white\/\[0\.06\] { border-color: rgba(255,255,255,0.06); }
.border-white\/\[0\.07\] { border-color: rgba(255,255,255,0.07); }
.border-white\/\[0\.08\] { border-color: rgba(255,255,255,0.08); }
.border-white\/\[0\.10\] { border-color: rgba(255,255,255,0.10); }
.border-white\/\[0\.12\] { border-color: rgba(255,255,255,0.12); }
.border-white\/5         { border-color: rgba(255,255,255,0.05); }
.border-white\/10        { border-color: rgba(255,255,255,0.1); }

/* ============================================================
   6. Tailwind-specific named colors
   ============================================================ */

/* --- Text colors --- */
.text-emerald-400     { color: var(--emerald-400); }
.text-emerald-400\/70 { color: rgba(52,211,153,0.7); }
.text-emerald-300     { color: var(--emerald-300); }
.text-red-400         { color: var(--red-400); }
.text-red-400\/70     { color: rgba(248,113,113,0.7); }
.text-amber-400       { color: var(--amber-400); }
.text-blue-400        { color: var(--blue-400); }
.text-indigo-300      { color: var(--indigo-300); }
.text-tasix-400       { color: var(--tasix-400); }
.text-tasix-300       { color: var(--tasix-300); }
.text-tasix-950       { color: var(--tasix-950); }

/* --- Background colors --- */
.bg-emerald-400          { background-color: var(--emerald-400); }
.bg-emerald-500          { background-color: var(--emerald-500); }
.bg-emerald-500\/\[0\.06\] { background-color: rgba(16,185,129,0.06); }
.bg-emerald-500\/10      { background-color: rgba(16,185,129,0.1); }
.bg-emerald-500\/20      { background-color: rgba(16,185,129,0.2); }
.bg-red-400              { background-color: var(--red-400); }
.bg-red-400\/60          { background-color: rgba(248,113,113,0.6); }
.bg-red-500              { background-color: var(--red-500); }
.bg-red-500\/20          { background-color: rgba(239,68,68,0.2); }
.bg-red-500\/\[0\.02\]   { background-color: rgba(239,68,68,0.02); }
.bg-red-500\/\[0\.06\]   { background-color: rgba(239,68,68,0.06); }
.bg-amber-500            { background-color: var(--amber-500); }
.bg-amber-500\/20        { background-color: rgba(245,158,11,0.2); }
.bg-amber-500\/\[0\.06\] { background-color: rgba(245,158,11,0.06); }
.bg-blue-500\/10         { background-color: rgba(59,130,246,0.1); }
.bg-blue-500\/20         { background-color: rgba(59,130,246,0.2); }
.bg-indigo-500\/10       { background-color: rgba(99,102,241,0.1); }
.bg-tasix-400            { background-color: var(--tasix-400); }
.bg-tasix-400\/10        { background-color: rgba(0,230,184,0.1); }
.bg-tasix-400\/15        { background-color: rgba(0,230,184,0.15); }
.bg-tasix-500            { background-color: var(--tasix-500); }
.bg-tasix-500\/5         { background-color: rgba(0,204,163,0.05); }
.bg-tasix-500\/10        { background-color: rgba(0,204,163,0.1); }

/* --- Border colors --- */
.border-emerald-500\/15  { border-color: rgba(16,185,129,0.15); }
.border-emerald-500\/20  { border-color: rgba(16,185,129,0.2); }
.border-red-500\/20      { border-color: rgba(239,68,68,0.2); }
.border-amber-500\/20    { border-color: rgba(245,158,11,0.2); }
.border-blue-500\/20     { border-color: rgba(59,130,246,0.2); }
.border-indigo-500\/15   { border-color: rgba(99,102,241,0.15); }
.border-tasix-500\/10    { border-color: rgba(0,204,163,0.1); }
.border-l-tasix-400      { border-left-color: var(--tasix-400); }

/* ============================================================
   7. Borders & Radius
   ============================================================ */
.border   { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }

.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-tr-sm{ border-top-right-radius: 0.125rem; }

/* ============================================================
   8. Effects & Transitions
   ============================================================ */
.shadow    { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-emerald-400\/50 { box-shadow: 0 1px 3px 0 rgba(52,211,153,0.5), 0 1px 2px -1px rgba(52,211,153,0.5); }
.shadow-red-400\/50     { box-shadow: 0 1px 3px 0 rgba(248,113,113,0.5), 0 1px 2px -1px rgba(248,113,113,0.5); }
.shadow-tasix-400\/20   { box-shadow: 0 1px 3px 0 rgba(0,230,184,0.2), 0 1px 2px -1px rgba(0,230,184,0.2); }

.opacity-0 { opacity: 0; }

.transition-all    { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300      { transition-duration: 300ms; }
.duration-200      { transition-duration: 200ms; }
.ease-in-out       { transition-timing-function: cubic-bezier(0.4,0,0.6,1); }

.pointer-events-none { pointer-events: none; }
.select-none         { user-select: none; }
.cursor-pointer      { cursor: pointer; }

.backdrop-blur-sm { backdrop-filter: blur(4px); }
.blur-\[6px\]     { filter: blur(6px); }

/* ============================================================
   9. Hover States
   ============================================================ */
.hover\:bg-white\/5:hover         { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/\[0\.05\]:hover { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(255,255,255,0.06); }
.hover\:bg-white\/\[0\.08\]:hover { background-color: rgba(255,255,255,0.08); }
.hover\:bg-white\/10:hover        { background-color: rgba(255,255,255,0.1); }

.hover\:text-white\/60:hover  { color: rgba(255,255,255,0.6); }
.hover\:text-white\/70:hover  { color: rgba(255,255,255,0.7); }
.hover\:text-white\/80:hover  { color: rgba(255,255,255,0.8); }
.hover\:text-red-400:hover    { color: var(--red-400); }
.hover\:text-tasix-300:hover  { color: var(--tasix-300); }

.hover\:bg-tasix-500:hover            { background-color: var(--tasix-500); }

.hover\:border-white\/\[0\.1\]:hover  { border-color: rgba(255,255,255,0.1); }
.hover\:border-white\/\[0\.12\]:hover { border-color: rgba(255,255,255,0.12); }

.hover\:shadow-tasix-400\/40:hover { box-shadow: 0 1px 3px 0 rgba(0,230,184,0.4), 0 1px 2px -1px rgba(0,230,184,0.4); }

/* --- Focus States --- */
.focus\:outline-none:focus           { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-tasix-400\/50:focus   { border-color: rgba(0,230,184,0.5); }

/* ============================================================
   10. Group Hover
   ============================================================ */
.group:hover .group-hover\:text-tasix-300      { color: var(--tasix-300); }
.group:hover .group-hover\:text-white\/80      { color: rgba(255,255,255,0.8); }
.group:hover .group-hover\:text-tasix-300\/50  { color: rgba(102,255,209,0.5); }

/* ============================================================
   11. Responsive Breakpoints
   ============================================================ */
@media (min-width: 640px) {
  .sm\:text-3xl    { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:p-6         { padding: 1.5rem; }
  .sm\:p-8         { padding: 2rem; }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:items-center{ align-items: center; }
  .sm\:table-cell  { display: table-cell; }
}

@media (min-width: 768px) {
  .md\:table-cell { display: table-cell; }
  .md\:flex-row   { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:flex       { display: flex; }
  .lg\:table-cell { display: table-cell; }
}

/* ============================================================
   12. Gradients
   ============================================================ */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }

.from-tasix-400      { --tw-gradient-from: var(--tasix-400); --tw-gradient-to: rgba(0,230,184,0); }
.to-emerald-300      { --tw-gradient-to: var(--emerald-300); }
.from-tasix-400\/15  { --tw-gradient-from: rgba(0,230,184,0.15); --tw-gradient-to: rgba(0,230,184,0); }
.to-emerald-500\/10  { --tw-gradient-to: rgba(16,185,129,0.1); }

.from-emerald-500    { --tw-gradient-from: var(--emerald-500); --tw-gradient-to: rgba(16,185,129,0); }
.to-emerald-400      { --tw-gradient-to: var(--emerald-400); }
.from-amber-500      { --tw-gradient-from: var(--amber-500); --tw-gradient-to: rgba(245,158,11,0); }
.to-yellow-400       { --tw-gradient-to: var(--yellow-400); }
.from-red-500        { --tw-gradient-from: var(--red-500); --tw-gradient-to: rgba(239,68,68,0); }
.to-red-400          { --tw-gradient-to: var(--red-400); }

/* ============================================================
   13. Special / Accessibility
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

@keyframes pulse {
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }