/* kit-extras.css — utilities that are ABSENT from the purged theme.css build
   (theme.css is a compiled Tailwind v4 build containing ONLY classes used by the
   template's 10 free demo pages). These few additions are required by the component
   patterns documented in DESIGN_KIT.md (modal, drawer, tabs, stat grid).
   Loaded unlayered AFTER theme.css, so these rules win over @layer rules. */

/* --- plain utilities missing from the build --- */
.z-50 { z-index: 50; }
.inset-0 { inset: 0; }
.overflow-y-auto { overflow-y: auto; }
.min-h-screen { min-height: 100vh; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.max-w-md { max-width: 28rem; }
.mt-16 { margin-top: 4rem; }
.p-3 { padding: calc(var(--spacing) * 3); }
.translate-x-full { translate: 100% 0; } /* right-side drawer (build only has -translate-x-full) */
.items-start { align-items: flex-start; }
.space-y-4 > * + * { margin-top: calc(var(--spacing) * 4); }
.bg-info { background-color: var(--color-info); }

/* --- responsive variants missing from the build --- */
@media (min-width: 40rem) {
  .sm\:col-span-6 { grid-column: span 6 / span 6; }
  .sm\:w-full { width: 100%; }
  .sm\:max-w-lg { max-width: 32rem; }
  .sm\:mx-auto { margin-inline: auto; }
}
@media (min-width: 64rem) {
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* --- Preline overlay (modal) open-state variants ---
   Preline toggles .open on the .hs-overlay element; same selector scheme
   theme.css uses for hs-overlay-open:translate-x-0 (the mobile sidebar). */
.hs-overlay-open\:opacity-100 { &.open, .open & { opacity: 1; } }
.hs-overlay-open\:pointer-events-auto { &.open, .open & { pointer-events: auto; } }

/* --- Preline tabs active-state variants (HSTabs adds .active to the selected button) --- */
.hs-tab-active\:bg-primary { &.active { background-color: var(--color-primary); } }
.hs-tab-active\:text-white { &.active { color: var(--color-white); } }
.hs-tab-active\:text-primary { &.active { color: var(--color-primary); } }
.hs-tab-active\:border-primary { &.active { border-color: var(--color-primary); } }