/* PHOENIX V5 — stability and performance layer */
:root {
    --stable-ease: cubic-bezier(.2,.7,.2,1);
    --stable-fast: 140ms;
    --stable-normal: 260ms;
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

/* Avoid expensive full-page repaint effects. */
.v3-ambient,
.command-vignette { display: none !important; }
.scanlines { opacity: .18 !important; pointer-events: none; }

.topbar,
.sidebar,
.hud-panel,
.public-status-card,
.auth-form-panel,
.auth-visual,
.command-palette-panel,
.platform-modal .modal-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.phoenix-page-ready > *:not(.phoenix-loader),
.production-page-enter,
.production-page-leave,
.design-command-ready {
    animation: none !important;
    filter: none !important;
}

.reveal,
[data-v3-reveal] {
    opacity: 1;
    transform: none;
    filter: none !important;
}

.js .reveal.stable-reveal-pending,
[data-v3-reveal].stable-reveal-pending {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition: opacity var(--stable-normal) var(--stable-ease), transform var(--stable-normal) var(--stable-ease);
    will-change: opacity, transform;
}

.js .reveal.stable-reveal-pending.visible,
[data-v3-reveal].stable-reveal-pending.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.hud-button,
button,
a,
input,
select,
textarea {
    transition-duration: var(--stable-fast) !important;
}

.hud-panel,
.public-card,
.choice-card,
.dashboard-access-card,
.command-stat-card,
.v3-module-card,
.personnel-card,
.report-list-card {
    transform: translateZ(0);
    transition: border-color var(--stable-fast) ease, background-color var(--stable-fast) ease, box-shadow var(--stable-fast) ease !important;
}

.hud-panel:hover,
.public-card:hover,
.choice-card:hover,
.dashboard-access-card:hover,
.command-stat-card:hover,
.v3-module-card:hover,
.personnel-card:hover,
.report-list-card:hover {
    transform: translateZ(0) !important;
}

.status-dot,
.status-orb,
.loading-panel::after,
.route-check-line,
.phoenix-loader::after,
.v3-ambient::before,
.v3-ambient::after {
    animation: none !important;
}

.public-hero {
    grid-template-columns: minmax(0,1.22fr) minmax(320px,380px) !important;
    align-items: stretch !important;
}

.public-status-card {
    position: relative;
    justify-self: end;
    align-self: center !important;
    width: 100%;
    max-width: 380px;
    min-width: 0 !important;
    min-height: 100%;
    justify-content: flex-start !important;
    gap: 14px;
    border-radius: 18px;
    overflow: hidden;
}

.public-status-list { display: grid; gap: 10px; }
.public-status-list > div {
    display: grid !important;
    grid-template-columns: minmax(108px,1fr) minmax(0,1.35fr);
    align-items: center;
    gap: 14px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(101,194,255,.08) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,rgba(10,31,49,.62),rgba(6,21,35,.82)) !important;
}
.public-status-list strong { text-align: right; line-height: 1.3; overflow-wrap: anywhere; }

/* Stable tables and workflow layouts. */
.admin-table-wrap,
.reports-layout,
.dossier-registry-layout,
.channel-admin-grid { min-width: 0; }
.admin-table { width: 100%; table-layout: auto; }
.admin-table td,.admin-table th { overflow-wrap: anywhere; }

.app-notice { overflow-wrap: anywhere; }
.loading-panel { min-height: 116px; }

@media (max-width: 1180px) {
    .public-hero { grid-template-columns: minmax(0,1fr) minmax(300px,350px) !important; }
}

@media (max-width: 900px) {
    .public-hero { grid-template-columns: 1fr !important; }
    .public-status-card { max-width: none; min-height: auto; align-self: stretch !important; }
    .public-status-list > div { grid-template-columns: 1fr; gap: 5px !important; }
    .public-status-list strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V5.1 hotfix — smoother wheel scroll and dossier layout corrections */
:root { color-scheme: dark; }
html,
body,
.site-main,
.page-frame,
.sidebar {
    scroll-behavior: auto !important;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.scanlines {
    opacity: .08 !important;
}
.site-main,
.sidebar,
.dossier-list,
.chat-messages,
.server-channel-list,
.server-members-list {
    scrollbar-gutter: stable;
}
.page-frame,
.public-section,
.hud-panel,
.dossier-preview,
.dossier-registry-list {
    transition: none !important;
}
.platform-form select,
.command-filter select,
.search-field select {
    color-scheme: dark;
}

/* PHOENIX V5.3 — final UI and performance fixes */
html,
body,
.site-main,
.sidebar,
.simple-chat-channel-list,
.simple-chat-messages,
.dossier-list,
.chat-messages {
    scroll-behavior: auto !important;
}

body {
    background:
        radial-gradient(circle at 84% 0%, rgba(19,118,210,.12), transparent 30rem),
        linear-gradient(135deg, rgba(2,7,13,.96), rgba(1,4,8,.995)),
        url("../images/background-grid.jpg") center top / cover no-repeat !important;
    background-attachment: scroll !important;
}

body::before,
body::after,
.scanlines,
.command-vignette,
.command-progress,
.v3-scroll-progress,
.v3-ambient {
    display: none !important;
}

.hud-panel,
.public-card,
.choice-card,
.dashboard-access-card,
.command-stat-card,
.v3-module-card,
.personnel-card,
.report-list-card,
.dossier-stat-card,
.dossier-preview,
.reports-sidebar,
.report-editor-panel {
    transform: none !important;
    will-change: auto !important;
    contain: layout paint;
}

select,
select option,
select optgroup {
    color-scheme: dark !important;
    color: #dcefff !important;
    background-color: #061421 !important;
}

select option:checked,
select option:hover,
select option:focus {
    color: #06111d !important;
    background: #76c7ff linear-gradient(#76c7ff, #76c7ff) !important;
}

/* Roster card structure used by roster-db.js */
.roster-grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
    align-items: start;
}

.personnel-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 18px 22px;
    min-height: 245px;
    align-items: start;
}

.personnel-card .personnel-status {
    grid-column: 1 / -1;
    margin: 0;
}

.personnel-card .personnel-avatar {
    grid-column: 1;
    grid-row: 2;
    width: 88px;
    height: 88px;
    margin: 0;
}

.personnel-card-body {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.personnel-card-body h3 {
    margin: 8px 0 6px;
    color: var(--white);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.personnel-card-body > p {
    min-height: 0;
    margin: 0 0 14px;
    color: var(--cyan-soft);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.personnel-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.personnel-meta span {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(76, 169, 230, .14);
    background: rgba(3, 17, 29, .62);
    color: #9fc6d8;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.personnel-card-body .hud-button {
    margin-top: 2px;
}

/* Stable native-filter layout */
.report-filter-bar select,
.command-filter select,
.platform-form select {
    appearance: auto;
    min-height: 44px;
}

/* Chat category blocks */
.simple-chat-category {
    margin: 7px 0 12px;
}

.simple-chat-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    color: #6e91a6;
    font: 9px Consolas, monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.simple-chat-category-head small {
    color: #67d9ff;
}

.simple-chat-channel.is-readonly .simple-chat-channel-symbol::after {
    content: "·";
    color: #f0c46e;
}

.simple-chat-readonly-note {
    color: #d6b46d;
}

@media (max-width: 700px) {
    .personnel-card {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        padding: 20px;
    }
    .personnel-card .personnel-avatar {
        width: 72px;
        height: 72px;
    }
    .personnel-meta {
        grid-template-columns: 1fr;
    }
}

/* Custom dark select menus — avoids bright native Windows dropdowns */
.reports-sidebar { overflow: visible !important; }
.phx-select {
    position: relative;
    width: 100%;
    min-width: 0;
}
.phx-select[hidden] { display: none !important; }
.phx-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
.phx-select-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    color: #dcefff;
    border: 1px solid rgba(66, 166, 233, .28);
    border-radius: 10px;
    background: #061421;
    text-align: left;
    cursor: pointer;
}
.phx-select-trigger::after {
    content: "⌄";
    color: #6edaff;
    font-size: 14px;
    transition: transform 120ms ease;
}
.phx-select.is-open .phx-select-trigger {
    border-color: #69d1ff;
    box-shadow: 0 0 0 2px rgba(68, 178, 239, .08);
}
.phx-select.is-open .phx-select-trigger::after { transform: rotate(180deg); }
.phx-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.phx-select-menu {
    position: absolute;
    z-index: 10050;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(94, 195, 255, .34);
    border-radius: 12px;
    background: #061421;
    box-shadow: 0 24px 60px rgba(0,0,0,.52);
}
.phx-select-menu[hidden] { display: none; }
.phx-select-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: #bed7e4;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.phx-select-option:hover,
.phx-select-option:focus-visible {
    color: #effbff;
    background: rgba(60, 164, 230, .16);
    outline: none;
}
.phx-select-option.is-selected {
    color: #04111c;
    background: #79ceff;
}

/* PHOENIX V5.4 — unified navigation tree */
.nav-tree-sidebar {
    padding-bottom: 26px;
}

.nav-tree {
    display: grid !important;
    gap: 18px !important;
}

.nav-tree-group {
    position: relative;
    min-width: 0;
}

.nav-tree-title {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 9px 7px;
    color: #527d98;
    border-bottom: 1px solid rgba(61, 158, 224, .12);
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 1.35px;
}

.nav-tree-title span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #78cef4;
    border: 1px solid rgba(83, 190, 247, .24);
    background: rgba(9, 37, 59, .72);
    font-size: 8px;
}

.nav-tree-title strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-tree-group.is-current .nav-tree-title,
.nav-tree-group[data-nav-group="command"] .nav-tree-title {
    color: #8edcf7;
}

.nav-tree-branch {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 7px 0 0 11px;
}

.nav-tree-branch::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 18px;
    left: 10px;
    width: 1px;
    background: linear-gradient(180deg, rgba(67, 170, 233, .34), rgba(67, 170, 233, .06));
}

.side-nav.nav-tree a {
    position: relative;
    min-height: 39px;
    grid-template-columns: 31px minmax(0, 1fr) 16px;
    margin-left: 8px;
    padding-inline: 10px;
    font-size: 9px;
    letter-spacing: .75px;
}

.side-nav.nav-tree a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -9px;
    width: 9px;
    height: 1px;
    background: rgba(67, 170, 233, .28);
}

.side-nav.nav-tree a span:nth-child(2) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.25;
}

.side-nav.nav-tree a.active {
    color: #c6f2ff;
    border-color: rgba(69, 186, 245, .38);
    background: linear-gradient(90deg, rgba(12, 105, 175, .34), rgba(4, 27, 45, .72));
}

.nav-tree-group[data-nav-group="command"] {
    padding: 8px 5px 6px;
    border: 1px solid rgba(86, 193, 244, .15);
    background: rgba(3, 22, 37, .45);
}

.nav-clearance-card {
    margin-top: 22px !important;
}

.nav-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: #547f97;
    font: 8px Consolas, "Courier New", monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nav-breadcrumb a {
    color: #68bde6;
    text-decoration: none;
}

.nav-breadcrumb a:hover {
    color: #bfeeff;
}

.nav-breadcrumb i {
    color: rgba(94, 185, 231, .45);
    font-style: normal;
}

.nav-breadcrumb span {
    color: #9edcf5;
}

@media (max-width: 820px) {
    .nav-tree {
        gap: 14px !important;
    }

    .nav-tree-title strong {
        font-size: 9px;
    }

    .side-nav.nav-tree a {
        min-height: 42px;
        font-size: 10px;
    }
}

/* V5.5 — current structure and Discord integration */
.phoenix-discord-button,
.phoenix-discord-mini,
.nav-external {
    border-color: rgba(111, 133, 255, .55) !important;
    background: linear-gradient(135deg, rgba(88, 101, 242, .2), rgba(31, 46, 102, .22)) !important;
    color: #dfe4ff !important;
}

.phoenix-discord-button:hover,
.phoenix-discord-mini:hover,
.nav-external:hover {
    border-color: rgba(145, 157, 255, .85) !important;
    background: linear-gradient(135deg, rgba(88, 101, 242, .32), rgba(31, 46, 102, .3)) !important;
}

.phoenix-discord-card {
    border-color: rgba(111, 133, 255, .28) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(88, 101, 242, .18), transparent 18rem),
        rgba(4, 15, 30, .88) !important;
}

.phoenix-discord-card .v3-card-link {
    display: inline-flex;
    margin-top: auto;
    color: #aeb9ff;
    text-decoration: none;
}

.rank-directory-link {
    margin-top: 14px;
}

.current-rank-directory .rank-list > div,
[data-phoenix-ranks] > div {
    min-width: 0;
}

.current-rank-directory .rank-list span,
.current-rank-directory .rank-list small,
[data-phoenix-ranks] span,
[data-phoenix-ranks] small {
    overflow-wrap: anywhere;
}

.discord-briefing-card {
    margin-top: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(88, 101, 242, .14), transparent 24rem),
        rgba(3, 15, 28, .9);
}

.discord-briefing-card h3 {
    margin: 0 0 8px;
    color: var(--white);
    letter-spacing: 1.5px;
}

.discord-briefing-card p {
    max-width: 760px;
    color: var(--text);
    line-height: 1.7;
}

.server-discord-link {
    margin-top: 14px;
}

@media (max-width: 900px) {
    .phoenix-discord-mini { display: none !important; }
}