/* Truss web UI. MudBlazor supplies the components; this file covers the shell (navigation, login) and a
   few layout rules MudBlazor leaves to the app. Colors match Theme/TrussTheme.cs. */

:root {
    --truss-navy: #0a1931;
    --truss-blue: #0085FF;
    --truss-text: #292d32;
    --truss-muted: #4a5568;
    --truss-border: #dcdfe4;
    --truss-bg: #f3f5f7;
}

html, body {
    font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--truss-bg);
    color: var(--truss-text);
    margin: 0;
}

/* ---- Application shell ------------------------------------------------- */

.truss-appbar-logo {
    height: 28px;
    margin-left: 8px;
}

.truss-drawer {
    background: var(--truss-navy);
}

.truss-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #d5dbe6;
}

.truss-nav-logo {
    display: block;
    padding: 24px 24px 16px;
}

.truss-nav-logo img {
    width: 120px;
    display: block;
}

.truss-nav-menu {
    flex: 1;
}

.truss-nav-menu .mud-nav-link {
    color: #d5dbe6;
    padding-left: 24px;
}

.truss-nav-menu .mud-nav-link .mud-icon-root {
    color: #d5dbe6;
}

.truss-nav-menu .mud-nav-link.active {
    color: #ffffff;
    background: rgba(0, 133, 255, 0.25);
    border-right: 3px solid var(--truss-blue);
}

.truss-nav-menu .mud-nav-link.active .mud-icon-root {
    color: #ffffff;
}

/* A group's own header is also a .mud-nav-link; its pages sit one step in. */
.truss-nav-menu .truss-nav-group > .mud-nav-link {
    color: #d5dbe6;
}

.truss-nav-menu .truss-nav-group .mud-nav-link .mud-nav-link-expand-icon {
    color: #d5dbe6;
}

.truss-nav-menu .truss-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 40px;
}

.truss-template-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.truss-template-toggles .mud-toggle-group {
    flex: 1;
    min-width: 260px;
}

.truss-nav-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.truss-nav-user {
    font-size: 12px;
    color: #959aa7;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truss-nav-logout {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #d5dbe6;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 0;
}

.truss-nav-logout:hover {
    color: #ffffff;
}

.truss-page {
    padding: 24px;
    max-width: 1400px;
}

/* The app bar exists for the drawer toggle on narrow screens only. On wide screens the drawer is always
   open, so the bar and the space MudBlazor reserves for it both go. */
@media (min-width: 960px) {
    .truss-appbar {
        display: none;
    }

    .truss-main {
        padding-top: 0 !important;
    }
}

@media (max-width: 959.98px) {
    .truss-page {
        padding: 16px;
    }
}

/* ---- Login ----------------------------------------------------------- */

.truss-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.truss-login-card {
    background: #ffffff;
    border: 1px solid var(--truss-border);
    border-radius: 8px;
    padding: 40px 32px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.truss-login-logo {
    width: 140px;
    display: block;
    margin: 0 auto 24px;
}

.truss-login-title {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 8px;
    text-align: center;
}

.truss-login-hint {
    color: var(--truss-muted);
    font-size: 14px;
    text-align: center;
    margin: 0 0 24px;
}

.truss-login-error {
    background: #fdecea;
    color: #8a1c14;
    border: 1px solid #f5c2bd;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 16px;
}

.truss-login-form {
    display: flex;
    flex-direction: column;
}

.truss-login-label {
    font-size: 13px;
    color: var(--truss-muted);
    margin-bottom: 6px;
}

.truss-login-input {
    font: inherit;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--truss-border);
    border-radius: 6px;
    margin-bottom: 16px;
}

.truss-login-input:focus {
    outline: 2px solid var(--truss-blue);
    outline-offset: 0;
    border-color: var(--truss-blue);
}

.truss-login-code {
    letter-spacing: 0.3em;
    font-size: 22px;
    text-align: center;
}

.truss-login-button {
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    background: var(--truss-blue);
    border: none;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
}

.truss-login-button:hover {
    background: #0072db;
}

.truss-login-resend {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--truss-muted);
}

.truss-login-separator {
    margin: 0 6px;
}

.truss-login-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--truss-blue);
    cursor: pointer;
    text-decoration: none;
}

.truss-login-link:hover {
    text-decoration: underline;
}

/* ---- Create Build ---------------------------------------------------- */

.truss-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 14px;
    color: var(--truss-muted);
}

.truss-template-table .mud-table-row,
.truss-file-table .mud-table-row {
    height: 37px;
}

.truss-template-row {
    cursor: pointer;
}

.truss-panel {
    border: 1px solid var(--truss-border);
}

.truss-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--truss-navy);
    color: #ffffff;
    padding: 8px 8px 8px 16px;
    border-radius: 6px 6px 0 0;
}

.truss-panel-bar .truss-code {
    color: #b9c2d0;
}

.truss-panel-bar .mud-icon-button {
    color: #ffffff;
}

.truss-panel-name {
    font-weight: 500;
}

.truss-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.truss-field-label {
    font-size: 13px;
    color: var(--truss-muted);
    margin-bottom: 4px;
}

.truss-required {
    color: #c62828;
    margin-left: 2px;
}

.truss-field-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.truss-field-filename {
    font-weight: 500;
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truss-field-meta {
    font-size: 12px;
    color: var(--truss-muted);
    margin-left: 8px;
}

.truss-tenant-group {
    margin-bottom: 8px;
}

.truss-tenant-group-head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.truss-tenant-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.truss-asof {
    max-width: 200px;
}

.truss-name {
    max-width: 480px;
}

.truss-problems {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--truss-muted);
    font-size: 13px;
}

.truss-file-dialog .mud-dialog-content {
    position: relative;
    min-height: 420px;
}

/* ---- My Builds ------------------------------------------------------- */

.truss-status {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
}

.truss-status-completed { color: #2e7d32; }
.truss-status-error { color: #c62828; }
.truss-status-inprogress { color: var(--truss-blue); }

.truss-row-highlight {
    background: rgba(0, 133, 255, 0.08);
}

.truss-build-details {
    padding: 12px 16px 12px 56px !important;
    background: var(--truss-bg);
}

.truss-build-template + .truss-build-template {
    margin-top: 12px;
}

.truss-build-template-head {
    margin-bottom: 4px;
}

.truss-build-settings {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    margin: 0;
    font-size: 13px;
}

.truss-build-settings dt {
    color: var(--truss-muted);
}

.truss-build-settings dd {
    margin: 0;
}

.truss-build-files {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
}

/* ---- Market Database ------------------------------------------------- */

.truss-market-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.truss-market-search {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.truss-market-search .mud-input-control {
    flex: 1;
}

.truss-market-summary {
    white-space: nowrap;
    color: var(--truss-muted);
    font-size: 13px;
    transition: opacity 150ms ease-in 150ms;
}

.truss-market-summary.loading {
    opacity: 0.5;
}

.truss-market-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.truss-market-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid var(--truss-border);
    border-radius: 6px;
    padding: 12px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.truss-market-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.truss-facet-group {
    margin-top: 12px;
}

.truss-facet {
    display: flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
}

.truss-facet .mud-checkbox {
    margin-right: 6px;
}

.truss-facet-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truss-facet-all {
    font-weight: 500;
    border-bottom: 1px solid var(--truss-border);
    margin-bottom: 2px;
}

/* ---- Config ---------------------------------------------------------- */

.truss-market-data-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.truss-market-data-search {
    flex: 1;
}

.truss-market-data-count,
.truss-config-note {
    font-size: 13px;
    color: var(--truss-muted);
    white-space: nowrap;
    margin-left: 8px;
}

.truss-facet-count {
    color: var(--truss-muted);
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

.truss-market-results {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--truss-border);
    border-radius: 6px;
}

.truss-table-scroll {
    overflow: auto;
    max-height: calc(100vh - 280px);
}

.truss-market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.truss-market-table th {
    position: sticky;
    top: 0;
    background: #ffffff;
    text-align: left;
    font-weight: 500;
    color: var(--truss-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--truss-border);
    z-index: 1;
}

.truss-market-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: top;
}

.truss-market-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.truss-market-table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.truss-market-table .secondary {
    color: var(--truss-muted);
    font-size: 12px;
}

.truss-market-paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--truss-border);
}

.truss-market-footer-left,
.truss-market-pager {
    display: flex;
    align-items: center;
    gap: 12px;
}

.truss-market-page {
    font-size: 13px;
    color: var(--truss-muted);
}

@media (max-width: 959.98px) {
    .truss-market-layout {
        flex-direction: column;
    }

    .truss-market-sidebar {
        width: 100%;
        max-height: none;
    }

    .truss-market-search {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
}