/* ══════════════════════════════════════════════════════════
   RaxBoard Core Styles — Extracted from layouts/main.php
   This file is served as a static asset for browser caching.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   Typography Scale — Design Tokens (1.25 Modular Scale)
   ══════════════════════════════════════════════════════════ */

:root {
    /* ── Font Families ── */
    --rb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rb-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Type Scale (1.25 ratio — Major Third) ── */
    --rb-text-2xs: 0.625rem;
    /* 10px — badges, micro labels */
    --rb-text-xs: 0.6875rem;
    /* 11px — meta, timestamps */
    --rb-text-sm: 0.8125rem;
    /* 13px — secondary text */
    --rb-text-base: 0.875rem;
    /* 14px — body text */
    --rb-text-md: 0.9375rem;
    /* 15px — emphasized body */
    --rb-text-lg: 1.0625rem;
    /* 17px — large body */
    --rb-text-xl: 1.25rem;
    /* 20px — section titles */
    --rb-text-2xl: 1.5rem;
    /* 24px — page titles */
    --rb-text-3xl: 1.875rem;
    /* 30px — hero titles */
    --rb-text-4xl: 2.25rem;
    /* 36px — display */

    /* ── Line Heights ── */
    --rb-leading-none: 1;
    --rb-leading-tight: 1.25;
    --rb-leading-snug: 1.375;
    --rb-leading-normal: 1.5;
    --rb-leading-relaxed: 1.625;
    --rb-leading-loose: 1.75;

    /* ── Font Weights ── */
    --rb-weight-normal: 400;
    --rb-weight-medium: 500;
    --rb-weight-semibold: 600;
    --rb-weight-bold: 700;
    --rb-weight-extrabold: 800;

    /* ── Letter Spacing ── */
    --rb-tracking-tighter: -0.03em;
    --rb-tracking-tight: -0.015em;
    --rb-tracking-normal: 0;
    --rb-tracking-wide: 0.025em;
    --rb-tracking-wider: 0.05em;
    --rb-tracking-widest: 0.1em;
}

/* ── Semantic Element Mappings ── */
h1 {
    font-size: var(--rb-text-2xl);
    font-weight: var(--rb-weight-bold);
    line-height: var(--rb-leading-tight);
    letter-spacing: var(--rb-tracking-tight);
}

h2 {
    font-size: var(--rb-text-xl);
    font-weight: var(--rb-weight-semibold);
    line-height: var(--rb-leading-tight);
}

h3 {
    font-size: var(--rb-text-lg);
    font-weight: var(--rb-weight-semibold);
    line-height: var(--rb-leading-snug);
}

h4 {
    font-size: var(--rb-text-md);
    font-weight: var(--rb-weight-semibold);
    line-height: var(--rb-leading-snug);
}

h5 {
    font-size: var(--rb-text-base);
    font-weight: var(--rb-weight-semibold);
    line-height: var(--rb-leading-normal);
}

h6 {
    font-size: var(--rb-text-sm);
    font-weight: var(--rb-weight-semibold);
    line-height: var(--rb-leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--rb-tracking-wide);
}

small,
.text-sm {
    font-size: var(--rb-text-sm);
}

.text-xs {
    font-size: var(--rb-text-xs);
}

.text-2xs {
    font-size: var(--rb-text-2xs);
}

.text-base {
    font-size: var(--rb-text-base);
}

.text-lg {
    font-size: var(--rb-text-lg);
}

.text-xl {
    font-size: var(--rb-text-xl);
}

.text-2xl {
    font-size: var(--rb-text-2xl);
}

.text-3xl {
    font-size: var(--rb-text-3xl);
}

code,
pre,
.font-mono {
    font-family: var(--rb-font-mono);
    font-size: 0.9em;
}

/* ── Responsive Scale (Mobile) ── */
@media (max-width: 640px) {
    :root {
        --rb-text-2xl: 1.375rem;
        --rb-text-3xl: 1.625rem;
        --rb-text-4xl: 1.875rem;
    }
}

/* ── View Transitions (Chrome 126+) ── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: rb-fade-out 0.15s ease-out;
}

::view-transition-new(root) {
    animation: rb-fade-in 0.15s ease-in;
}

@keyframes rb-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes rb-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Top Loading Bar ── */
#rb-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    z-index: 99999;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff));
    transition: width 0.2s ease;
    box-shadow: 0 0 8px var(--primary);
    pointer-events: none;
    display: none;
}

/* ── htmx Swap Fade (fallback) ── */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

/* ── Accessibility: Skip to Content ── */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: none;
}

/* ── Accessibility: Focus Ring ── */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    @view-transition {
        navigation: none;
    }

    .htmx-swapping {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════
   Component Bridge — connects --rb-* CSS variables to elements
   ══════════════════════════════════════════════════════════ */

/* ── Footer ── */
footer {
    color: var(--rb-footer-text-color, var(--muted-foreground));
}

footer h4 {
    color: var(--rb-footer-text-color, var(--foreground)) !important;
}

footer a:not(.no-underline-override) {
    color: var(--rb-footer-link-color, var(--muted-foreground)) !important;
}

footer a:hover {
    color: var(--rb-footer-link-color, var(--primary)) !important;
    opacity: 0.85;
}

/* ── Links ── */
a:not([class*="btn"]):not([class*="badge"]):not(.no-underline):not(nav a):not(footer a):not(header a) {
    color: var(--rb-link-color, inherit);
}

a:not([class*="btn"]):not([class*="badge"]):not(.no-underline):not(nav a):not(footer a):not(header a):hover {
    color: var(--rb-link-hover-color, var(--rb-link-color, inherit));
}

/* ── Buttons ── */
.btn-primary,
button[class*="primary"],
[class*="btn-primary"] {
    background: var(--rb-btn-primary-bg, var(--primary)) !important;
    color: var(--rb-btn-primary-text, #fff) !important;
    border-radius: var(--rb-btn-border-radius, var(--radius-sm, 6px));
    font-size: var(--rb-btn-font-size, inherit);
}

.btn-primary:hover,
button[class*="primary"]:hover,
[class*="btn-primary"]:hover {
    background: var(--rb-btn-primary-hover, var(--rb-btn-primary-bg, var(--primary))) !important;
}

.btn-secondary,
[class*="btn-secondary"] {
    background: var(--rb-btn-secondary-bg, var(--secondary)) !important;
    color: var(--rb-btn-secondary-text, inherit) !important;
}

.btn-danger,
[class*="btn-danger"] {
    background: var(--rb-btn-danger-bg, var(--destructive)) !important;
}

/* ── Color Picker ── */
input[type="color"] {
    cursor: pointer;
}

/* ── Inputs & Forms ── */
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border-radius: var(--rb-input-border-radius, var(--radius-sm, 4px));
    font-size: var(--rb-input-font-size, inherit);
}

/* ── Cards ── */
.card,
[class*="rounded-xl"][class*="border"],
.thread-card {
    border-radius: var(--rb-card-border-radius, var(--radius-lg, 8px));
}

/* ── Badges ── */
.badge,
[class*="badge"] {
    border-radius: var(--rb-badge-border-radius, 9999px);
    font-size: var(--rb-badge-font-size, 0.65rem);
}

/* ── Message / Post ── */
.message-content,
.post-body {
    padding: var(--rb-message-padding, 1.25rem);
}

/* ── Code Blocks ── */
pre,
code:not([class]) {
    border-radius: var(--rb-card-border-radius, 6px);
}

/* ── Max Page Width ── */
.max-w-screen-2xl {
    max-width: var(--container-max, var(--rb-max-page-width, 1536px));
}

/* ── Font ── */
body {
    font-family: var(--font-sans, var(--rb-font-sans, inherit));
    font-size: var(--font-size, var(--rb-font-size-normal, 1rem));
}

/* ── Sub Navigation Bar ── */
.rb-sub-bar,
[data-component="sub-bar"] {
    background: var(--rb-sub-bar-bg, color-mix(in srgb, var(--muted) 30%, transparent));
    height: var(--rb-sub-bar-height, 44px);
}

.rb-sub-bar a,
[data-component="sub-bar"] a {
    color: var(--rb-sub-bar-text-color, var(--muted-foreground));
}

.rb-sub-bar a:hover,
[data-component="sub-bar"] a:hover {
    color: var(--rb-sub-bar-text-color, var(--foreground));
}

/* ── Breadcrumb ── */
.breadcrumb,
nav.breadcrumb,
[data-component="breadcrumb"] {
    color: var(--rb-breadcrumb-color, var(--muted-foreground));
}

.breadcrumb .active,
.breadcrumb [aria-current],
.breadcrumb span:last-child {
    color: var(--rb-breadcrumb-active-color, var(--foreground));
}

/* ── Forum Node List ── */
.forum-node,
[data-component="forum-node"] {
    background: var(--rb-forum-node-bg, var(--surface));
    border-color: var(--rb-forum-node-border, var(--border));
}

.forum-node:hover,
[data-component="forum-node"]:hover {
    background: var(--rb-forum-node-hover-bg, color-mix(in srgb, var(--muted) 50%, transparent));
}

.forum-node .forum-icon,
.forum-node i.fas {
    color: var(--rb-forum-node-icon-color, var(--primary));
}

/* ── Thread List ── */
.thread-item,
[data-component="thread-item"] {
    background: var(--rb-thread-list-bg, var(--surface));
    border-color: var(--rb-thread-list-border, var(--border));
}

.thread-item:hover,
[data-component="thread-item"]:hover {
    background: var(--rb-thread-list-hover-bg, var(--muted));
}

.thread-item .thread-title,
.thread-item h4 a {
    color: var(--rb-thread-list-title-color, var(--foreground));
}

/* ── Profile Page ── */
.profile-banner,
[data-component="profile-banner"] {
    height: var(--rb-profile-banner-height, 200px);
    background: var(--rb-profile-banner-gradient, linear-gradient(135deg, var(--primary), var(--accent)));
}

.profile-avatar,
[data-component="profile-avatar"] {
    width: var(--rb-profile-avatar-size, 120px);
    height: var(--rb-profile-avatar-size, 120px);
    border-color: var(--rb-profile-avatar-border, var(--surface));
}

/* ── Auth Forms ── */
.auth-form,
[data-component="auth-form"] {
    background: var(--rb-auth-form-bg, var(--surface));
    border-color: var(--rb-auth-form-border, var(--border));
    max-width: var(--rb-auth-form-max-width, 420px);
}

/* ── Content Typography ── */
.content-body a,
.post-content a,
.message-body a {
    color: var(--rb-content-link-color, var(--primary));
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
    color: var(--rb-content-heading-color, var(--foreground));
}

.content-body,
.post-content,
.message-body {
    line-height: var(--rb-content-line-height, 1.7);
}

.thread-title-main,
h1.thread-title {
    font-size: var(--rb-thread-title-size, 1.5rem);
}

.section-title {
    font-size: var(--rb-section-title-size, 1.25rem);
}

/* ── Mobile Navigation ── */
.mobile-nav,
[data-component="mobile-nav"] {
    background: var(--rb-mobile-nav-bg, var(--surface));
    color: var(--rb-mobile-nav-text-color, var(--foreground));
}

/* ── Avatars ── */
.avatar,
img.avatar,
[data-component="avatar"] {
    border-radius: var(--rb-avatar-border-radius, 9999px);
}

/* ── Tooltips ── */
[data-tooltip],
.tooltip-content {
    background: var(--rb-tooltip-bg, var(--popover));
}

/* ══════════════════════════════════════════════════════════
   Flash Messages & Toast Notifications
   ══════════════════════════════════════════════════════════ */

.flash-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 500;
    animation: flashSlideIn .3s ease-out;
    cursor: pointer;
    transition: opacity .2s;
}

.flash-success {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, .25);
}

.flash-error {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, .25);
}

@keyframes flashSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flash-banner.fade-out {
    opacity: 0;
    transform: translateY(-12px);
}

/* ── HTMX Error Toast ── */
.htmx-error-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    max-width: 420px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 8px 32px rgba(220, 38, 38, .35), 0 2px 8px rgba(0, 0, 0, .2);
    transform: translateY(100px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
    cursor: pointer;
}

.htmx-error-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.htmx-error-toast i {
    margin-right: 8px;
}

/* ══════════════════════════════════════════════════════════
   Thread Heat Indicators
   ══════════════════════════════════════════════════════════ */

.thread-heat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.thread-heat--trending {
    background: rgba(239, 68, 68, 0.12);
    animation: heatPulse 1.5s ease-in-out infinite;
}

.thread-heat--hot {
    background: rgba(249, 115, 22, 0.12);
    animation: heatPulse 2s ease-in-out infinite;
}

.thread-heat--warm {
    background: rgba(234, 179, 8, 0.1);
}

@keyframes heatPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* ══════════════════════════════════════════════════════════
   Floating Reply FAB (Mobile)
   ══════════════════════════════════════════════════════════ */

.floating-reply-fab {
    display: none;
}

@media (max-width: 767px) {
    .floating-reply-fab {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        padding: 12px 20px;
        background: var(--primary);
        color: #fff;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 var(--primary);
        transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.2s ease;
        animation: fabSlideUp 0.4s ease-out;
    }

    .floating-reply-fab:active {
        transform: scale(0.95) !important;
    }

    .floating-reply-fab i {
        font-size: 0.8rem;
    }
}

@keyframes fabSlideUp {
    from {
        transform: translateY(80px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════
   Reaction Button Animation
   ══════════════════════════════════════════════════════════ */

.reaction-btn {
    position: relative;
    overflow: visible;
}

.reaction-btn.reaction-animate {
    animation: reactionPop 0.4s cubic-bezier(.17, .89, .32, 1.28);
}

@keyframes reactionPop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.25);
    }

    50% {
        transform: scale(0.92);
    }

    75% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.reaction-btn.reaction-animate::after {
    content: '👍';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    animation: reactionFloat 0.7s ease-out forwards;
    pointer-events: none;
}

@keyframes reactionFloat {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(1.3);
    }
}

/* ── Multi-Reaction Emoji Picker ────────────────────── */

.reaction-picker {
    animation: pickerSlideUp 0.15s ease-out;
}

@keyframes pickerSlideUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reaction-emoji-btn:hover {
    transform: scale(1.35) !important;
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.reaction-emoji-active {
    background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
    border-radius: 50%;
    transform: scale(1.15);
}

.reaction-btn.reaction-animate::after {
    content: '';
}

@media (max-width: 767px) {
    .reaction-picker {
        border-radius: 16px !important;
        padding: 3px 4px !important;
    }

    .reaction-emoji-btn {
        font-size: 1.1rem !important;
        padding: 3px 4px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   Touch Target Enhancement (Mobile 44x44px minimum)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Post action buttons */
    .btn-icon,
    .btn.btn-sm.btn-ghost.btn-icon,
    .btn.btn-sm.btn-ghost {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Thread header tool buttons */
    .w-8.h-8.rounded-lg {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════
   Mobile Bottom Navigation Bar
   ══════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        height: 56px;
        background: color-mix(in srgb, var(--surface) 85%, transparent);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--muted-foreground);
        font-size: 0.6rem;
        font-weight: 500;
        transition: color 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        padding: 4px 0;
    }

    .mobile-bottom-nav__item i {
        font-size: 1.1rem;
        transition: transform 0.2s ease;
    }

    .mobile-bottom-nav__item:active {
        transform: scale(0.9);
    }

    .mobile-bottom-nav__item--active {
        color: var(--primary);
    }

    .mobile-bottom-nav__item--active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        border-radius: 0 0 4px 4px;
        background: var(--primary);
    }

    .mobile-bottom-nav__item--active i {
        transform: translateY(-1px);
    }

    /* Shift content and float elements above bottom nav */
    body {
        padding-bottom: 56px;
    }

    .floating-reply-fab {
        bottom: 72px !important;
    }

    .htmx-error-toast {
        bottom: 72px !important;
    }

    /* Back-to-top button shifts up */
    [x-data*="show: false"][style*="bottom: 24px"] {
        bottom: 72px !important;
    }
}