/* ===== Tokens CSS Globais ===== */
:root {
    /* Tokens do tema Stargate (antes em home.css) */
    --bg: #0b1220;
    --card: #0f172a;
    --text: #e6f0ff;
    --muted: #9fb3c8;
    --accent: #7cc7ff;
    --accent-2: #60e0e0;
    --border: rgba(255, 255, 255, .06);
}

/* Bootstrap dark theme overrides */
:root,
[data-bs-theme=dark] {
    --bs-body-bg: #0b1220;
    --bs-body-color: #e6f0ff;
    --bs-border-color: rgba(255, 255, 255, .06);

    --bs-primary: #22d3ee;
    --bs-link-color: #7cc7ff;

    --bs-card-bg: #0f1a2b;
    --bs-card-border-color: rgba(255, 255, 255, .06);

    --bs-border-radius: 1rem;
    --bs-btn-border-radius: 999px;
}

/* =========================================================
   Layout base
   ========================================================= */
html{
    scroll-behavior: smooth;
}
body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* Links globais */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    opacity: .9;
}

html,
main.py-4 {
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
}

.sg-body {
    background: #081320;
    /* alinha com a meta theme-color e o visual da home */
}

/* Container: sempre 80% da viewport */
.container {
    width: 80vw;
    /* pedido: 80% da tela */
    max-width: none !important;
    /* ignora max-width do BS */
    margin-inline: auto;
}

/* helpers opcionais */
.container-80 {
    width: 80vw;
    max-width: none !important;
    margin-inline: auto;
}

.container-100 {
    width: 100vw;
    max-width: none !important;
    margin-inline: auto;
}

/* Gutter vertical consistente para quem usa .row.g-4 */
.container .row.g-4 {
    --bs-gutter-y: 1.5rem;
}

/* =========================================================
   Navbar / Header – Stargate 42 Neon
   ========================================================= */
.navbar {
    padding-top: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(6, 26, 43, .9);
    background:
        radial-gradient(circle at 50% -60%, rgba(25, 198, 195, .16), transparent 60%),
        linear-gradient(180deg, #071f29 0%, #050f1d 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}

@media (min-width: 992px) {
    .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* logo + texto */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.navbar-brand img {
    width: 26px;
    height: 26px;
}

/* espaço entre os itens do menu */
.navbar-nav {
    column-gap: .6rem;
}

/* links do menu – base */
.navbar .nav-link {
    padding: .3rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #dde9ff;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    background: transparent;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

/* hover – discreto, sem inner shadow */
.navbar .nav-link:hover {
    color: #ffffff;
    background: rgba(7, 35, 49, .9);
    border-color: rgba(25, 198, 195, .45);
    box-shadow: 0 0 10px rgba(25, 198, 195, .35);
}

/* ativo – borda neon + glow externo (Tron) */
.navbar .nav-link.active {
    color: #ffffff;
    background: rgba(3, 18, 32, .96);
    border-color: #19c6c3;
    box-shadow:
        0 0 0 1px rgba(25, 198, 195, .55),
        0 0 18px rgba(25, 198, 195, .8);
}

/* =========================================================
   Visual base / utilidades
   ========================================================= */
.sg-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-card-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.sg-pill {
    background: #0c1526;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .5rem .75rem;
}

.sg-glow {
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, .12),
        0 0 32px rgba(34, 211, 238, .10);
}

.site-footer {
    color: rgba(255, 255, 255, .55);
    font-size: .875rem;
}

.backdrop-blur {
    backdrop-filter: blur(6px)
}

.letter-spacing-wide {
    letter-spacing: .12em
}

/* =========================================================
   Full-bleed robusto (sem scroll horizontal)
   ========================================================= */
.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.full-bleed>* {
    border-radius: 0
}

/* =========================================================
   Bootstrap dark tune – cartas e modais (home + fórum)
   ========================================================= */
.card,
.modal-content {
    background: var(--bs-card-bg);
    border: 1px solid #0e2a4d;
    /* um pouco mais visível que o default */
}

/* Breadcrumb mais discreto em dark */
.breadcrumb {
    --bs-breadcrumb-divider-color: #8aa3c6;
    color: #8aa3c6;
}

/* Botões outline em dark com melhor contraste */
.btn-outline-light {
    border-color: #264c7a;
}

/* =========================================================
   Home: news na sidebar em 1 por linha
   ========================================================= */
.news-sidebar-single .row>* {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text);
    text-decoration: none;
    transition: .2s ease;
}

.btn:hover {
    border-color: rgba(255, 255, 255, .30);
    transform: translateY(-1px)
}

.btn-primary {
    background: linear-gradient(90deg, #ffb347, var(--accent-2));
    color: #08131c;
    font-weight: 700;
    border: none;
}

.btn-ghost {
    background: transparent
}

.btn-gradient {
    background: linear-gradient(90deg, #34e89e, #0f3443);
    color: #fff;
    border: none;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.btn-gradient:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}





/* ===== Cards genéricos ===== */
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px
}

.card-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px
}

.card-sub {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px
}

.card-muted {
    color: var(--muted);
    font-size: 13px
}



/* ===== Layout base ===== */
.wrap-home {
    width: 85vw;
    margin-inline: auto;
    padding: clamp(16px, 2vw, 24px);
}

@media (max-width: 768px) {
    .wrap-home {
        width: 94vw;
    }
}

/* =========================================================
   Utilitários globais
   ========================================================= */
.line-clamp-3 {
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Login / Form Components (Login Card)
   ========================================================= */

/* --- Card wrapper --- */
.login-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--bs-body-color, #e6f0ff);
}

.login-card .card-sub {
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--bs-body-color, #e6f0ff);
}

/* --- Form Layout --- */
.form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row span {
    font-size: 0.9rem;
    color: var(--muted, #9fb3c8);
    font-weight: 500;
}

/* --- Inputs --- */
.form-row input {
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--bs-body-color, #e6f0ff);
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-row input:focus {
    outline: none;
    border-color: var(--bs-link-color, #7cc7ff);
    box-shadow: 0 0 0 2px rgba(124, 199, 255, .18);
}

/* --- Actions --- */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 16px 0;
}

/* --- Register Panel Animation --- */
.register-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    will-change: max-height, opacity;
}

.login-card.login-expanded .register-panel {
    opacity: 1;
    pointer-events: all;
}