/* Linguagem visual Metrópole aplicada às áreas compartilhadas do produto. */
body[data-theme] {
    --bg: #0a0c09;
    --bg-soft: #0f110c;
    --surface: #11140f;
    --surface-strong: #1b2017;
    --surface-muted: #151912;
    --border: rgba(255, 255, 255, .085);
    --border-strong: rgba(187, 222, 26, .32);
    --text: #edf0e8;
    --muted: #a9aaa9;
    --snow: #fff;
    --accent: #bbde1a;
    --accent-soft: rgba(187, 222, 26, .1);
    --shadow: 0 24px 70px rgba(0, 0, 0, .4);
    background: #0a0c09;
    color: var(--text);
    font-family: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
}

body[data-theme]:not(.discord-activity-context) .main {
    background:
        radial-gradient(ellipse 70% 42% at 70% 0, rgba(187, 222, 26, .075), transparent 75%),
        linear-gradient(180deg, rgba(10, 12, 9, .93), rgba(10, 12, 9, .97)),
        url("../../config/img/operacionalmtp.png") center / cover no-repeat;
}

body[data-theme] .sidebar {
    border-right: 1px solid rgba(187, 222, 26, .12);
    background: linear-gradient(180deg, rgba(13, 16, 11, .98), rgba(9, 11, 8, .98));
    backdrop-filter: blur(18px);
}

body[data-theme] .sidebar .brand {
    border-bottom-color: rgba(255, 255, 255, .08);
}

body[data-theme] .sidebar .brand-logo {
    filter: drop-shadow(0 0 12px rgba(187, 222, 26, .13));
}

body[data-theme] .sidebar .nav-label {
    color: #919b74;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

body[data-theme] .sidebar .nav-link {
    border-radius: 9px;
    color: #a8aea3;
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 650;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body[data-theme] .sidebar .nav-link:hover,
body[data-theme] .sidebar .nav-accordion[open] > summary:hover {
    border-color: rgba(187, 222, 26, .18);
    background: rgba(187, 222, 26, .055);
    color: #f5f7f0;
}

body[data-theme] .sidebar .nav-link.active,
body[data-theme] .sidebar .nav-accordion:has(.nav-link.active) > summary {
    border-color: rgba(187, 222, 26, .32);
    background: linear-gradient(90deg, rgba(187, 222, 26, .13), rgba(187, 222, 26, .045));
    color: #d3f542;
    box-shadow: inset 3px 0 0 #bbde1a, 0 0 16px rgba(187, 222, 26, .035);
}

body[data-theme] .sidebar .nav-link.active::before {
    display: none;
}

body[data-theme] .sidebar .submenu-nav {
    border-left-color: rgba(187, 222, 26, .18);
    background: rgba(187, 222, 26, .018);
}

body[data-theme] .sidebar-foot,
body[data-theme] .server-context {
    border-color: rgba(187, 222, 26, .22);
    background: linear-gradient(135deg, rgba(187, 222, 26, .085), rgba(15, 18, 12, .8));
}

body[data-theme] .server-context label {
    color: #a9b18f;
}

body[data-theme] .topbar {
    border: 1px solid rgba(187, 222, 26, .18);
    border-radius: 14px;
    background: rgba(13, 16, 11, .92);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(18px);
}

body[data-theme] .page-head {
    position: relative;
    overflow: hidden;
    border-color: rgba(187, 222, 26, .16);
    background:
        radial-gradient(70% 130% at 100% 0, rgba(187, 222, 26, .075), transparent 72%),
        linear-gradient(90deg, rgba(18, 22, 15, .97), rgba(12, 15, 10, .88));
    box-shadow: inset 3px 0 0 rgba(187, 222, 26, .78), 0 16px 36px rgba(0, 0, 0, .13);
}

body[data-theme] .page-head .eyebrow,
body[data-theme] .view > .eyebrow {
    color: #bbde1a;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
}

body[data-theme] .page-head h1 {
    margin-block: 7px 0;
    color: #fff;
    font-family: "Archivo", "Inter", sans-serif;
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .99;
    text-transform: uppercase;
}

body[data-theme] .panel-title,
body[data-theme] .metric-tile strong,
body[data-theme] .kpi strong,
body[data-theme] .mini-stat strong {
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 900;
    letter-spacing: -.035em;
}

body[data-theme] .panel,
body[data-theme] .metric-tile,
body[data-theme] .mini-stat,
body[data-theme] .kpi,
body[data-theme] .mission {
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .15), inset 0 1px rgba(255, 255, 255, .025);
}

body[data-theme] .metric-tile,
body[data-theme] .mini-stat,
body[data-theme] .kpi {
    background:
        radial-gradient(90% 85% at 95% 0, rgba(187, 222, 26, .095), transparent 74%),
        linear-gradient(180deg, #141810, #0f120d);
}

body[data-theme] .metric-tile::before,
body[data-theme] .mini-stat::before,
body[data-theme] .kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    width: 46px;
    height: 2px;
    background: #bbde1a;
    box-shadow: 0 0 13px rgba(187, 222, 26, .4);
    pointer-events: none;
}

body[data-theme] .metric-tile,
body[data-theme] .mini-stat {
    position: relative;
}

body[data-theme] .metric-tile span,
body[data-theme] .mini-stat span,
body[data-theme] .kpi span {
    color: #a9aaa9;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .1em;
}

body[data-theme] .metric-tile strong,
body[data-theme] .mini-stat strong,
body[data-theme] .kpi strong {
    color: #f8faf4;
}

body[data-theme] .icon-btn,
body[data-theme] .action-btn {
    border-color: rgba(255, 255, 255, .13);
    border-radius: 9px;
    background: #171b14;
    color: #e7ece1;
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 800;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body[data-theme] .icon-btn:hover,
body[data-theme] .action-btn:hover {
    border-color: rgba(187, 222, 26, .5);
    background: rgba(187, 222, 26, .09);
    color: #d3f542;
}

body[data-theme] .action-btn.primary,
body[data-theme] .btn-primary {
    border-color: #bbde1a;
    background: #bbde1a;
    color: #101210;
    font-weight: 900;
}

body[data-theme] .action-btn.primary:hover,
body[data-theme] .btn-primary:hover {
    border-color: #d3f542;
    background: #d3f542;
    color: #101210;
    box-shadow: 0 0 22px rgba(187, 222, 26, .25);
    transform: translateY(-1px);
}

body[data-theme] :is(.search-field, .form-control, .form-select, .server-context-select, .dt-container .dt-search input, .dt-container .dt-length select) {
    border-color: rgba(255, 255, 255, .13);
    border-radius: 9px;
    background-color: #11150f;
    color: #edf0e8;
}

body[data-theme] :is(.search-field, .form-control, .form-select, .server-context-select):focus {
    border-color: rgba(187, 222, 26, .65);
    background-color: #151a11;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(187, 222, 26, .12);
    outline: none;
}

body[data-theme] :is(.search-field, .form-control)::placeholder {
    color: #838c7a;
    opacity: 1;
}

body[data-theme] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #edf0e8;
    --bs-table-border-color: rgba(255, 255, 255, .09);
    --bs-table-striped-bg: rgba(187, 222, 26, .018);
    --bs-table-hover-bg: rgba(187, 222, 26, .055);
}

body[data-theme] .table thead th,
body[data-theme] table.dataTable thead th {
    border-bottom-color: rgba(187, 222, 26, .32);
    color: #b4bea5;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body[data-theme] .badge-soft {
    border-color: rgba(187, 222, 26, .18);
    border-radius: 999px;
    background: rgba(187, 222, 26, .065);
    color: #d6e0c7;
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 700;
}

body[data-theme] .modal-content,
body[data-theme] .offcanvas,
body[data-theme] .dropdown-menu,
body[data-theme] .global-results {
    border: 1px solid rgba(187, 222, 26, .22);
    border-radius: 16px;
    background:
        radial-gradient(75% 55% at 95% 0, rgba(187, 222, 26, .08), transparent 70%),
        #10130e;
    color: #edf0e8;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .52), 0 0 24px rgba(187, 222, 26, .04);
}

body[data-theme] .modal-header,
body[data-theme] .modal-footer {
    border-color: rgba(255, 255, 255, .085);
    background: transparent;
}

body[data-theme] .modal-title {
    color: #fff;
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 900;
    letter-spacing: -.04em;
}

body[data-theme] :is(.nav-link, .action-btn, .icon-btn, .btn, .form-control, .form-select, .search-field, .server-context-select):focus-visible {
    outline: 2px solid #bbde1a;
    outline-offset: 2px;
}

/* A escolha do servidor é a continuação direta do login. */
body.server-selection-page {
    font-family: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
}

.server-selection-page .server-selection-box {
    border: 1px solid rgba(187, 222, 26, .65);
    background:
        radial-gradient(70% 60% at 85% 0, rgba(187, 222, 26, .1), transparent 65%),
        linear-gradient(180deg, rgba(18, 21, 16, .97), rgba(13, 15, 11, .98));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .52), 0 0 25px rgba(187, 222, 26, .13);
}

.server-selection-page .server-selection-card-button {
    border-color: rgba(187, 222, 26, .35);
    background: radial-gradient(circle at 50% 30%, rgba(187, 222, 26, .16), transparent 57%), #12160f;
}

.server-selection-page .server-selection-card-button:hover,
.server-selection-page .server-selection-card-button:focus-visible {
    border-color: #bbde1a;
    background: radial-gradient(circle at 50% 30%, rgba(187, 222, 26, .24), transparent 57%), #151a11;
    box-shadow: 0 0 22px rgba(187, 222, 26, .18);
}

/* A lore conserva seu conteúdo e sua atmosfera próprios. */
html.timeline-public-root {
    overflow-x: clip;
    background: #0a0c09;
}

body.timeline-public-page {
    --bg: #0a0c09;
    --bg-soft: #0f110c;
    --surface: #11140f;
    --surface-strong: #1b2017;
    --surface-muted: #151912;
    --border: rgba(255, 255, 255, .085);
    --border-strong: rgba(187, 222, 26, .32);
    --text: #edf0e8;
    --muted: #a9aaa9;
    --snow: #fff;
    --accent: #bbde1a;
    font-family: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
}

.timeline-public-page .timeline-public-header,
.timeline-public-page .timeline-public-header.is-scrolled {
    border-bottom-color: rgba(187, 222, 26, .16);
    background: rgba(10, 12, 9, .9);
}

.timeline-public-page .timeline-public-header nav a,
.timeline-public-page .timeline-public-header nav button {
    color: #a9aaa9;
    font-family: "Archivo", "Inter", sans-serif;
    font-weight: 800;
}

.timeline-public-page .timeline-public-header nav a:hover,
.timeline-public-page .timeline-public-header nav button:hover {
    color: #d3f542;
}

.timeline-public-page .timeline-public-footer {
    border-top-color: rgba(187, 222, 26, .16);
    background: #0a0c09;
}

@media (max-width: 720px) {
    body[data-theme] .page-head {
        padding: 16px;
    }

    body[data-theme] .page-head h1 {
        font-size: clamp(20px, 5.8vw, 28px) !important;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-theme] .icon-btn,
    body[data-theme] .action-btn,
    body[data-theme] .sidebar .nav-link {
        transition: none;
    }

    body[data-theme] .action-btn.primary:hover,
    body[data-theme] .btn-primary:hover {
        transform: none;
    }
}