/* ─── styles.css ──────────────────────────────────────────────────────────────
 * Hand-rolled replacement for Tailwind's Play CDN. Covers exactly the utility
 * classes used by this app (see grep output for the source-of-truth list).
 *
 * Sections:
 *   1. Reset / preflight (essentials only — minimal Tailwind-style normalize)
 *   2. App-specific (sidebar-drawer, no-scrollbar, body)
 *   3. Color tokens (CSS variables for the Tailwind palette we use)
 *   4. Base utilities (always-on)
 *   5. State variants (hover:, focus:, disabled:)
 *   6. Responsive variants (sm:, md:, lg:)
 *
 * Class names with special characters need escaping in selectors:
 *   .h-1\.5         => h-1.5
 *   .bg-white\/90   => bg-white/90
 *   .text-\[10px\]  => text-[10px]
 *   .md\:flex-row   => md:flex-row
 * ──────────────────────────────────────────────────────────────────────────── */


/* ─── 1. Reset / preflight ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e5e5; /* neutral-200, matches Tailwind's default */
}
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
button:disabled { cursor: default; }
[type='checkbox'], [type='radio'] { box-sizing: border-box; padding: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; max-width: 100%; }
:root {
  -moz-tab-size: 4;
  tab-size: 4;
}


/* ─── 2. App-specific ────────────────────────────────────────────────────── */
body { overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.sidebar-drawer { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@media (max-width: 768px) {
  .sidebar-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    width: 180px;
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
  }
  .sidebar-drawer.open { transform: translateX(0); }
}


/* ─── 3. Color tokens ────────────────────────────────────────────────────── */
:root {
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-600: #dc2626;

  --green-400:  #4ade80;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --purple-400: #c084fc;
  --cyan-400:   #22d3ee;
}


/* ─── 4. Base utilities ──────────────────────────────────────────────────── */

/* Display */
.flex          { display: flex; }
.grid          { display: grid; }
.block         { display: block; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Flex */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-stretch { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2  { grid-column: span 2 / span 2; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-4    { top: 1rem; }
.top-6    { top: 1.5rem; }
.top-auto { top: auto; }
.bottom-6 { bottom: 1.5rem; }
.left-6   { left: 1.5rem; }
.left-1\/2 { left: 50%; }
.right-6  { right: 1.5rem; }
.right-\[72px\] { right: 72px; }

/* Z-index */
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-\[60\]  { z-index: 60; }
.z-\[100\] { z-index: 100; }

/* Sizing — width */
.w-2          { width: 0.5rem; }
.w-2\.5       { width: 0.625rem; }
.w-full       { width: 100%; }
.w-screen     { width: 100vw; }
.max-w-sm     { max-width: 24rem; }
.max-w-\[90vw\] { max-width: 90vw; }

/* Sizing — height */
.h-1\.5       { height: 0.375rem; }
.h-2          { height: 0.5rem; }
.h-2\.5       { height: 0.625rem; }
.h-full       { height: 100%; }
.h-screen     { height: 100vh; }

/* Padding */
.p-1   { padding: 0.25rem; }
.p-1\.5{ padding: 0.375rem; }
.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; }
.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; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem;    padding-right: 1rem; }
.px-6   { padding-left: 1.5rem;  padding-right: 1.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pt-0   { padding-top: 0; }
.pt-1\.5{ padding-top: 0.375rem; }
.pt-4   { padding-top: 1rem; }

/* Margin */
.m-0    { margin: 0; }
.mt-0\.5{ margin-top: 0.125rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-1\.5{ margin-top: 0.375rem; }
.mt-auto{ margin-top: auto; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-1\.5{ margin-bottom: 0.375rem; }
.ml-2   { margin-left: 0.5rem; }
.mr-1   { margin-right: 0.25rem; }
.mr-1\.5{ margin-right: 0.375rem; }
.mr-2   { margin-right: 0.5rem; }

/* Gap */
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }

/* space-x / space-y — Tailwind uses owl selector */
.space-x-2  > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.space-y-1  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-4  > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

/* Typography — sizes */
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.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; }

/* Typography — weight / family / spacing */
.font-sans   { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.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-black    { font-weight: 900; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wider   { letter-spacing:  0.05em;  }
.tracking-widest  { letter-spacing:  0.1em;   }
.leading-\[1\.7\] { line-height: 1.7; }
.uppercase        { text-transform: uppercase; }
.whitespace-nowrap{ white-space: nowrap; }

/* Text colors */
.text-white         { color: #fff; }
.text-neutral-400   { color: var(--neutral-400); }
.text-neutral-500   { color: var(--neutral-500); }
.text-neutral-600   { color: var(--neutral-600); }
.text-neutral-700   { color: var(--neutral-700); }
.text-neutral-800   { color: var(--neutral-800); }
.text-neutral-900   { color: var(--neutral-900); }
.text-blue-600      { color: var(--blue-600); }
.text-emerald-600   { color: var(--emerald-600); }
.text-emerald-700   { color: var(--emerald-700); }
.text-red-600       { color: var(--red-600); }
.text-cyan-400      { color: var(--cyan-400); }
.text-orange-300    { color: var(--orange-300); }

/* Background colors */
.bg-white           { background-color: #fff; }
.bg-white\/90       { background-color: rgba(255,255,255,0.9); }
.bg-white\/95       { background-color: rgba(255,255,255,0.95); }
.bg-black\/50       { background-color: rgba(0,0,0,0.5); }
.bg-neutral-50      { background-color: var(--neutral-50); }
.bg-neutral-100     { background-color: var(--neutral-100); }
.bg-neutral-200     { background-color: var(--neutral-200); }
.bg-neutral-900     { background-color: var(--neutral-900); }
.bg-neutral-900\/85 { background-color: rgba(23,23,23,0.85); }
.bg-blue-50         { background-color: var(--blue-50); }
.bg-blue-600        { background-color: var(--blue-600); }
.bg-emerald-50      { background-color: var(--emerald-50); }
.bg-red-50          { background-color: var(--red-50); }
.bg-red-400         { background-color: var(--red-400); }
.bg-green-400       { background-color: var(--green-400); }
.bg-orange-400      { background-color: var(--orange-400); }
.bg-purple-400      { background-color: var(--purple-400); }

/* Borders — width / sides */
.border    { border-width: 1px; }
.border-t  { border-top-width: 1px; }
.border-b  { border-bottom-width: 1px; }
.border-l-2{ border-left-width: 2px; }

/* Borders — color */
.border-transparent    { border-color: transparent; }
.border-neutral-100    { border-color: var(--neutral-100); }
.border-neutral-200    { border-color: var(--neutral-200); }
.border-neutral-300    { border-color: var(--neutral-300); }
.border-neutral-700    { border-color: var(--neutral-700); }
.border-blue-100       { border-color: var(--blue-100); }
.border-blue-200       { border-color: var(--blue-200); }
.border-emerald-100    { border-color: var(--emerald-100); }
.border-red-100        { border-color: var(--red-100); }

/* Radius */
.rounded      { border-radius: 0.25rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-sm    { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md    { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg    { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-2xl   { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }

/* Backdrop */
.backdrop-blur    { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Transitions */
.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; }

/* Transform */
.-translate-x-1\/2 { transform: translateX(-50%); }

/* Cursor / interaction */
.cursor-pointer       { cursor: pointer; }
.cursor-default       { cursor: default; }
.cursor-crosshair     { cursor: crosshair; }
.pointer-events-none  { pointer-events: none; }
.select-none          { user-select: none; -webkit-user-select: none; }
.touch-none           { touch-action: none; }
.appearance-none      { appearance: none; -webkit-appearance: none; -moz-appearance: none; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Form */
.accent-blue-600 { accent-color: var(--blue-600); }


/* ─── 5. State variants ──────────────────────────────────────────────────── */

.hover\:bg-neutral-50:hover    { background-color: var(--neutral-50); }
.hover\:bg-neutral-100:hover   { background-color: var(--neutral-100); }
.hover\:bg-blue-50:hover       { background-color: var(--blue-50); }
.hover\:bg-blue-700:hover      { background-color: var(--blue-700); }
.hover\:bg-emerald-50:hover    { background-color: var(--emerald-50); }
.hover\:bg-red-50:hover        { background-color: var(--red-50); }

.hover\:text-neutral-600:hover { color: var(--neutral-600); }
.hover\:text-neutral-700:hover { color: var(--neutral-700); }

.hover\:border-neutral-200:hover { border-color: var(--neutral-200); }

.focus\:ring-blue-500:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
}

.disabled\:bg-blue-300:disabled { background-color: var(--blue-300); }


/* ─── 6. Responsive variants ─────────────────────────────────────────────── */

/* sm: ≥ 640px */
@media (min-width: 640px) {
  .sm\:inline { display: inline; }
  .sm\:mr-2   { margin-right: 0.5rem; }
  .sm\:px-4   { padding-left: 1rem;   padding-right: 1rem; }
  .sm\:px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-2   { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
}

/* md: ≥ 768px */
@media (min-width: 768px) {
  .md\:block   { display: block; }
  .md\:inline  { display: inline; }
  .md\:hidden  { display: none; }

  .md\:flex-col { flex-direction: column; }
  .md\:flex-row { flex-direction: row; }

  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }

  .md\:w-64    { width: 16rem; }

  .md\:p-0     { padding: 0; }
  .md\:p-6     { padding: 1.5rem; }
  .md\:py-2    { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .md\:px-0    { padding-left: 0; padding-right: 0; }
  .md\:px-2    { padding-left: 0.5rem;  padding-right: 0.5rem; }

  .md\:gap-2   { gap: 0.5rem; }
  .md\:gap-8   { gap: 2rem; }

  .md\:text-xs { font-size: 0.75rem;  line-height: 1rem; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl { font-size: 1.25rem;  line-height: 1.75rem; }

  .md\:border-transparent { border-color: transparent; }
  .md\:border-t-0         { border-top-width: 0; }
  .md\:border-r           { border-right-width: 1px; }
}

/* lg: ≥ 1024px */
@media (min-width: 1024px) {
  .lg\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
}