/* Shared layout and accessibility fixes for Tailwind and Bootstrap pages. */
html { color-scheme: light; scroll-padding-top: 5rem; }
html.dark, html[data-bs-theme="dark"] { color-scheme: dark; }
body { overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; }
input, select, textarea { min-width: 0; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { appearance: auto; flex-shrink: 0; }
button, summary { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: 0.6; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #818cf8 !important;
    outline-offset: 3px;
}
.glass { -webkit-backdrop-filter: blur(20px); }
.dark .text-slate-500 { color: #94a3b8; }
.dark .tab-active { color: #a5b4fc; border-bottom-color: #818cf8; }
.dark .dark\:bg-dark-700 { background-color: #334155; }
.dark .dark\:hover\:bg-dark-700:hover { background-color: #334155; }
.dark .dark\:hover\:bg-dark-700\/50:hover { background-color: rgba(51, 65, 85, 0.5); }
.dark .dark\:hover\:bg-dark-600:hover { background-color: #475569; }
.skip-link {
    position: fixed; top: 0.5rem; inset-inline-start: 0.5rem;
    z-index: 100; padding: 0.6rem 1rem; border-radius: 0.5rem;
    background: #4f46e5; color: white; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.language-switcher { position: relative; flex-shrink: 0; }
.language-switcher summary { list-style: none; cursor: pointer; min-height: 36px; }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher[open] summary svg { transform: rotate(180deg); }
.language-menu { inset-inline-end: 0; min-width: 10rem; }
.language-menu a { white-space: nowrap; }

/* Authentication/status pages: reserve room for the floating theme button. */
.auth-page > .auth-layout { min-height: 100svh; padding: 4.5rem 1rem 2rem; }
.auth-page .auth-card { background: rgba(255, 255, 255, 0.88); }
.dark .auth-page .auth-card { background: rgba(15, 23, 42, 0.88); }
.auth-page > button[onclick="toggleTheme()"] {
    top: 1rem; left: 1rem; width: 2.5rem; height: 2.5rem;
}
.auth-page .animate-float { animation: none; }
.password-toggle { inset-inline-end: 0.75rem; inset-inline-start: auto; min-width: 32px; min-height: 32px; }
.phone-fields { display: flex; gap: 0.5rem; direction: ltr; }
.phone-fields select { width: 7rem; flex: 0 0 7rem; }
.phone-fields input { width: 0; flex: 1 1 0; }

/* CAPTCHA must fit a 320px viewport, including the form's padding. */
.captcha-premium-box {
    padding: 1rem; border-radius: 1rem; margin: 1rem 0;
    background: rgba(99, 102, 241, 0.05); border: 1px solid rgba(99, 102, 241, 0.2);
}
.captcha-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.captcha-title { color: #4338ca; font-size: 0.875rem; font-weight: 700; }
.captcha-refresh { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 0.5rem; background: transparent; color: #4f46e5; cursor: pointer; }
.captcha-refresh:hover { background: rgba(99, 102, 241, 0.1); }
.captcha-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.captcha-digits, .captcha-input {
    min-height: 48px; border-radius: 0.75rem; background: white;
    text-align: center; direction: ltr;
}
.captcha-digits { display: flex; align-items: center; justify-content: center; flex: 1 1 130px; border: 2px dashed #cbd5e1; }
.captcha-input { width: 100px; flex: 1 1 100px; border: 2px solid #6366f1; color: #1e293b; font-size: 1.25rem; font-weight: 800; letter-spacing: 4px; padding: 0.25rem; }
.captcha-hint { margin: 0.75rem 0 0; color: #475569; text-align: center; font-size: 0.75rem; }
.dark .captcha-premium-box { background: rgba(255, 255, 255, 0.03); border-color: #334155; }
.dark .captcha-title, .dark .captcha-refresh { color: #a5b4fc; }
.dark .captcha-digits { background: #e2e8f0; border-color: #94a3b8; }
.dark .captcha-input { background: #1e293b; color: white; }
.dark .captcha-hint { color: #cbd5e1; }

/* Sidebars scroll naturally instead of placing the account block over links. */
#sidebar { display: flex; flex-direction: column; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
#sidebar > div:first-child { flex-shrink: 0; padding: 1rem; }
#sidebar > nav { flex: 1 0 auto; }
#sidebar > div:last-child { position: static; margin-top: auto; flex-shrink: 0; }
#sidebar p { overflow-wrap: anywhere; }
#sidebar .gradient-bg { flex-shrink: 0; }
#mobileDrawer { max-width: calc(100vw - 2rem); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.panel-page main { min-width: 0; }
.panel-page main > header { padding: 0.75rem 1rem; }
.panel-page main > header > div { gap: 0.75rem; flex-wrap: wrap; }
.panel-page main > header h1 { font-size: clamp(1rem, 2vw, 1.25rem); }
.panel-page .grid > *, .panel-page .flex > div { min-width: 0; }
.panel-page main p a { text-decoration: underline; text-underline-offset: 3px; }
.dark .panel-page main p a.text-indigo-600 { color: #a5b4fc; }
.panel-page button.bg-green-600 { background-color: #15803d; }
.panel-page button.bg-green-600:hover { background-color: #166534; }
.panel-page input[name="telegram_username"] { direction: ltr; padding-left: 2.5rem; padding-right: 1rem; }
.panel-page main p, .panel-page main span { overflow-wrap: anywhere; }
.panel-page .overflow-x-auto { max-width: 100%; overscroll-behavior-inline: contain; }
.panel-page table { min-width: 640px; }
.panel-page table th { white-space: nowrap; }
[data-ui-modal] { z-index: 80; }
[data-ui-modal] > div:last-child { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
html[dir="ltr"] #sidebar { right: auto; left: 0; border-left: 0; border-right: 1px solid #e2e8f0; }
html[dir="ltr"] #sidebar.translate-x-full { --tw-translate-x: -100%; }
@media (min-width: 1024px) {
    html[dir="ltr"] .panel-page main { margin-right: 0; margin-left: 16rem; }
    html[dir="ltr"] #sidebar, html[dir="ltr"] #sidebar.translate-x-full { --tw-translate-x: 0%; }
}
.legal-content { line-height: 1.9; overflow-wrap: anywhere; }
.legal-content :is(h2, h3, h4) { margin-block: 1.5rem 0.75rem; font-weight: 700; color: #1e293b; }
.legal-content h2 { font-size: 1.5rem; }
.legal-content h3 { font-size: 1.25rem; }
.legal-content :is(p, ul, ol) { margin-block: 0.75rem; }
.legal-content ul { list-style: disc; padding-inline-start: 1.5rem; }
.legal-content ol { list-style: decimal; padding-inline-start: 1.5rem; }
.legal-content a { color: #4f46e5; text-decoration: underline; }
.dark .legal-content :is(h2, h3, h4) { color: #f1f5f9; }
.dark .legal-content a { color: #a5b4fc; }

/* Bring the remaining Bootstrap screens into the same visual family. */
.legacy-page { --bs-body-bg: #f8fafc; --bs-body-color: #1e293b; --bs-card-bg: #fff; --bs-card-text: #1e293b; font-family: 'Tajawal', sans-serif; background: var(--bs-body-bg); color: var(--bs-body-color); min-height: 100svh; display: flex; flex-direction: column; }
[data-bs-theme="dark"] .legacy-page { --bs-body-bg: #020617; --bs-body-color: #e2e8f0; --bs-card-bg: #1e293b; --bs-card-text: #e2e8f0; --bs-navbar-bg: #0f172a; --bs-border-color: #334155; }
.legacy-page .navbar { padding-block: 0.5rem; background: var(--bs-body-bg); }
.legacy-page .navbar-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: #818cf8; }
.legacy-page .card { background: var(--bs-card-bg); color: var(--bs-card-text); border: 1px solid var(--bs-border-color); border-radius: 1rem; }
.legacy-page .card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); }
.legacy-page .card-header.d-flex { flex-wrap: wrap; gap: 0.75rem; }
.legacy-page .btn-primary { background: #4f46e5; border-color: #4f46e5; }
.legacy-page .btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.legacy-page .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); vertical-align: middle; }
.legacy-page .table th, .legacy-page .table td:last-child { white-space: nowrap; }
.legacy-page .modal { white-space: normal; }
.legacy-page .footer { margin-top: auto; }
.payment-status-container { width: 100%; max-width: 600px; margin: clamp(2rem, 8vh, 5rem) auto; }
.payment-page .card-body { padding: clamp(1.25rem, 5vw, 3rem); }
.payment-page .btn { white-space: normal; }
@media (max-width: 639px) {
    .auth-page .auth-card { padding: 1.25rem; border-radius: 1.25rem; }
    .auth-page .auth-layout > div > .text-center:first-child { margin-bottom: 1.25rem; }
    .panel-page main > .p-6 { padding: 1rem; }
    .panel-page main > header .gap-4 { gap: 0.5rem; }
    .panel-page main > header .gap-3 { gap: 0.5rem; }
    .panel-page main > header a { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .panel-page main .rounded-3xl.p-8 { padding: 1.25rem; }
    .legal-page nav > div > div { gap: 0.5rem; flex-wrap: wrap; height: auto; min-height: 56px; padding-block: 0.5rem; }
    .legal-page nav .gap-3 { gap: 0.5rem; }
    .legal-page nav a:last-child { padding-inline: 0.75rem; font-size: 0.875rem; }
    .legacy-page .navbar-collapse > .d-flex { flex-wrap: wrap; gap: 0.75rem; padding-block: 0.75rem; }
    [data-ui-modal] > div:last-child { padding: 1.25rem; }
}
.panel-page input.sr-only:focus-visible + div { outline: 3px solid #818cf8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}