/* ==========================================================================
   COMPATIBILITY LAYER
   Tailwind-like utility classes used across legacy pages.
   All colors pull from the new design tokens in app.css.
   ========================================================================== */

/* Layout & sizing */
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto}
.max-w-md{max-width:28rem;margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.min-h-full{min-height:100%}
.min-h-screen{min-height:100vh}
.w-full{width:100%}
.hidden{display:none !important}
.block{display:block}
.relative{position:relative}
.absolute{position:absolute}
.top-1\/2{top:50%}
.left-1\/2{left:50%}
.transform{transform:translateZ(0)}
.-translate-x-1\/2{transform:translate(-50%,-50%)}
.-translate-y-1\/2{transform:translate(-50%,-50%)}

/* Display & flex */
.inline-flex{display:inline-flex}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

/* Spacing */
.space-x-2>*+*{margin-left:.5rem}
.space-x-3>*+*{margin-left:.75rem}
.space-x-4>*+*{margin-left:1rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.gap-2{gap:.5rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}

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

/* Padding & margin */
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-6{padding-top:1.5rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}

/* Borders & radius */
.rounded-lg{border-radius:var(--radius,12px)}
.rounded-full{border-radius:var(--radius-full,999px)}
.border{border:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}
.border-t{border-top:1px solid var(--border)}
.shadow-sm{box-shadow:var(--shadow-sm)}

/* Overflow */
.overflow-y-auto{overflow-y:auto}
.overflow-x-auto{overflow-x:auto}
.max-h-64{max-height:16rem}
.max-h-40{max-height:10rem}
.max-h-32{max-height:8rem}
.max-h-36{max-height:9rem}
.h-16{height:4rem}
.h-2{height:.5rem}
.h-1\.5{height:.375rem}

/* Typography */
.text-xs{font-size:var(--fs-xs,12px)}
.text-sm{font-size:var(--fs-sm,13px)}
.text-md{font-size:var(--fs-base,14px)}
.text-lg{font-size:var(--fs-md,15px)}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}

/* Colors — mapped to design tokens */
.text-white{color:#fff}
.text-neutral-900{color:var(--text-primary)}
.text-neutral-700{color:var(--text-secondary)}
.text-neutral-600{color:var(--text-tertiary)}
.text-neutral-500{color:var(--text-muted)}
.bg-white{background:var(--surface-1)}
.bg-neutral-50{background:var(--bg-subtle)}

/* Transitions */
.transition-colors{transition:background var(--dur,200ms) var(--ease),border-color var(--dur,200ms) var(--ease),color var(--dur,200ms) var(--ease)}
.transition-all{transition:all var(--dur,200ms) var(--ease)}
.duration-300{transition-duration:.3s}

/* Responsive grids */
@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))}
}
@media (min-width: 1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:col-span-1{grid-column:span 1 / span 1}
}

button, input, select, textarea{font:inherit}

/* Screen-reader only */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ==========================================================================
   CHECKBOX (peer pattern)
   ========================================================================== */

input.peer + div{
  width:20px;height:20px;
  border-radius:var(--radius-xs,6px);
  border:1px solid var(--border-strong);
  background: var(--surface-1);
  display:grid;place-items:center;
  transition: box-shadow var(--dur-fast,140ms) var(--ease), border-color var(--dur-fast,140ms) var(--ease), background var(--dur-fast,140ms) var(--ease);
}
input.peer:checked + div{
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: var(--ring-focus);
}
input.peer:focus + div{
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
input.peer + div svg{
  opacity:0;
  width:14px; height:14px;
  position:static !important;
  transform:none !important;
  color: #fff;
}
input.peer:checked + div svg{ opacity:1; }

/* ==========================================================================
   LEGACY COLOR UTILITIES
   Preserved for pages that still use these; remapped to new tokens.
   ========================================================================== */

/* Green (success) */
.bg-green-50{background:var(--success-bg)}
.bg-green-100{background:var(--success-bg)}
.text-green-800{color:var(--success)}
.text-green-600{color:var(--success)}
.border-green-200{border-color:var(--success-border)}
.border-green-300{border-color:var(--success-border)}

/* Blue (info) */
.bg-blue-50{background:var(--info-bg)}
.bg-blue-100{background:var(--info-bg)}
.text-blue-800{color:var(--info)}
.text-blue-600{color:var(--info)}
.border-blue-200{border-color:var(--info-border)}
.border-blue-800{border-color:var(--info-border)}

/* Red (danger) */
.bg-red-50{background:var(--danger-bg)}
.bg-red-100{background:var(--danger-bg)}
.text-red-800{color:var(--danger)}
.text-red-600{color:var(--danger)}
.border-red-200{border-color:var(--danger-border)}
.border-red-800{border-color:var(--danger-border)}

/* Yellow (warning) */
.bg-yellow-50{background:var(--warning-bg)}
.bg-yellow-100{background:var(--warning-bg)}
.text-yellow-600{color:var(--warning)}
.border-yellow-200{border-color:var(--warning-border)}
.border-yellow-800{border-color:var(--warning-border)}

/* Dark variants (literal classnames from escaped tailwind) */
.dark\\:bg-green-900\\/20{background:var(--success-bg)}
.dark\\:bg-green-900\\/10{background:var(--success-bg)}
.dark\\:bg-green-900\\/30{background:var(--success-bg)}
.dark\\:text-green-200{color:var(--success)}
.dark\\:text-green-400{color:var(--success)}
.dark\\:border-green-800{border-color:var(--success-border)}
.dark\\:border-green-700{border-color:var(--success-border)}

.dark\\:bg-blue-900\\/20{background:var(--info-bg)}
.dark\\:bg-blue-900\\/30{background:var(--info-bg)}
.dark\\:text-blue-200{color:var(--info)}
.dark\\:text-blue-400{color:var(--info)}
.dark\\:border-blue-800{border-color:var(--info-border)}

.dark\\:bg-red-900\\/20{background:var(--danger-bg)}
.dark\\:bg-red-900\\/30{background:var(--danger-bg)}
.dark\\:text-red-200{color:var(--danger)}
.dark\\:text-red-400{color:var(--danger)}
.dark\\:border-red-800{border-color:var(--danger-border)}

.dark\\:bg-yellow-900\\/20{background:var(--warning-bg)}
.dark\\:bg-yellow-900\\/30{background:var(--warning-bg)}
.dark\\:text-yellow-400{color:var(--warning)}
.dark\\:border-yellow-800{border-color:var(--warning-border)}