/*
 * Tailwind-equivalent utility classes for the login layout.
 * Generated from the exact classes used in templates/layout/login.php,
 * templates/Users/login.php, and templates/Users/telegram_auth.php.
 * Replaces the cdn.tailwindcss.com play CDN script.
 */

/* ── Reset / base ─────────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; }
body { color: #fff; }

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

/* ── Flex ─────────────────────────────────────────────────────────────── */
.flex-1           { flex: 1 1 0%; }
.items-center     { align-items: center; }
.justify-center   { justify-content: center; }
.gap-1\.5         { gap: 0.375rem; }
.gap-2            { gap: 0.5rem; }
.gap-3            { gap: 0.75rem; }
.gap-4            { gap: 1rem; }
.gap-6            { gap: 1.5rem; }

/* ── Sizing ───────────────────────────────────────────────────────────── */
.h-2          { height: 0.5rem; }
.w-2          { width: 0.5rem; }
.w-full       { width: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-xs     { max-width: 20rem; }
.max-w-md     { max-width: 28rem; }

/* ── Position ─────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* ── Spacing — margin ─────────────────────────────────────────────────── */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-8    { margin-top: 2rem;    margin-bottom: 2rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-4    { margin-top: 1rem; }
.mt-12   { margin-top: 3rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mr-2    { margin-right: 0.5rem; }

/* ── Spacing — padding ────────────────────────────────────────────────── */
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.py-1  { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.py-12 { padding-top: 3rem;     padding-bottom: 3rem; }

/* ── Space between children ───────────────────────────────────────────── */
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }

/* ── Typography ───────────────────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.uppercase   { text-transform: uppercase; }
.underline   { text-decoration-line: underline; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-none    { line-height: 1; }
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }

/* ── Colours ──────────────────────────────────────────────────────────── */
.text-white      { color: #fff; }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }
.text-yellow-400 { color: #facc15; }

/* ── Borders ──────────────────────────────────────────────────────────── */
.border         { border-width: 1px; border-style: solid; }
.border-t       { border-top-width: 1px; border-top-style: solid; }
.border-gray-700  { border-color: #374151; }
.border-gray-800  { border-color: #1f2937; }
.border-yellow-700 { border-color: #a16207; }
.rounded-full  { border-radius: 9999px; }
.rounded-2xl   { border-radius: 1rem; }
.rounded-3xl   { border-radius: 1.5rem; }

/* ── Hover ────────────────────────────────────────────────────────────── */
.hover\:border-gray-600:hover { border-color: #4b5563; }
.hover\:text-gray-400:hover   { color: #9ca3af; }

/* ── Transitions ──────────────────────────────────────────────────────── */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

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