/* Victoria Office Manager command-centre styles. Kept separate from the legacy
   application theme so the feature can be rolled back without a global redesign. */

.victoria-office-header,
.victoria-office-page {
    --victoria-navy: #102a43;
    --victoria-blue: #0875cc;
    --victoria-blue-soft: #e8f4ff;
    --victoria-cyan: #0aa8c7;
    --victoria-green: #087f5b;
    --victoria-green-soft: #e6f7f1;
    --victoria-amber: #a85d00;
    --victoria-amber-soft: #fff4db;
    --victoria-red: #b42318;
    --victoria-red-soft: #fff0ee;
    --victoria-border: #d8e2ec;
    --victoria-muted: #52677b;
}

.victoria-office-header {
    background: linear-gradient(145deg, #f8fcff 0%, #eef8ff 56%, #f7fbfd 100%);
    border: 1px solid #cfe4f5;
    border-radius: 1.25rem;
    box-shadow: 0 14px 32px rgba(16, 42, 67, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.victoria-office-heading,
.victoria-ask-heading,
.victoria-page-heading,
.victoria-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.victoria-office-heading h1,
.victoria-page-heading h2 {
    background: none;
    color: var(--victoria-navy);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.15;
    margin: 0;
    -webkit-text-fill-color: currentColor;
}

.victoria-eyebrow {
    color: var(--victoria-blue);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    margin: 0 0 .3rem;
    text-transform: uppercase;
}

.victoria-section-description {
    color: var(--victoria-muted);
    margin: .45rem 0 0;
    max-width: 68rem;
}

.victoria-environment-badge {
    align-items: center;
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: 999px;
    color: var(--victoria-navy);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 750;
    gap: .45rem;
    padding: .45rem .75rem;
}

.victoria-environment-badge span {
    background: var(--victoria-green);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--victoria-green-soft);
    height: .48rem;
    width: .48rem;
}

.victoria-environment-badge.test {
    background: var(--victoria-amber-soft);
    border-color: #e9c779;
    color: #704100;
}

.victoria-environment-badge.test span {
    background: #c27700;
    box-shadow: 0 0 0 3px #ffe7ac;
}

.victoria-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.victoria-status-pill {
    align-items: center;
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: 999px;
    color: #344b60;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    gap: .4rem;
    padding: .35rem .65rem;
}

.victoria-status-pill.healthy {
    background: var(--victoria-green-soft);
    border-color: #a8ddca;
    color: #056047;
}

.victoria-status-pill.warning {
    background: var(--victoria-amber-soft);
    border-color: #ebcb83;
    color: #7a4600;
}

.victoria-status-pill.danger {
    background: var(--victoria-red-soft);
    border-color: #f3b5ae;
    color: var(--victoria-red);
}

.victoria-stop-banner {
    align-items: center;
    background: var(--victoria-red-soft);
    border: 1px solid #edaaa3;
    border-radius: .8rem;
    color: #762018;
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
}

.victoria-stop-banner > i {
    font-size: 1.25rem;
}

.victoria-control-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.victoria-control-card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--victoria-border);
    border-radius: .9rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    padding: .9rem;
}

.victoria-control-card.emergency-control {
    border-color: #e7b5b0;
}

.victoria-control-heading {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
}

.victoria-control-heading h2,
.victoria-ask-card h2 {
    color: var(--victoria-navy);
    font-size: .94rem;
    line-height: 1.25;
    margin: 0;
}

.victoria-control-heading p,
.victoria-ask-card p {
    color: var(--victoria-muted);
    font-size: .77rem;
    line-height: 1.4;
    margin: .2rem 0 0;
}

.victoria-control-icon {
    align-items: center;
    background: var(--victoria-blue-soft);
    border-radius: .65rem;
    color: var(--victoria-blue);
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.victoria-switch {
    align-items: center;
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: #435a70;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 750;
    gap: .55rem;
    min-height: 2.25rem;
    padding: .2rem 0;
    text-align: left;
}

.victoria-switch:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.victoria-switch-track {
    background: #9aabba;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 2.55rem;
    height: 1.42rem;
    padding: .18rem;
    transition: background-color .18s ease;
    width: 2.55rem;
}

.victoria-switch-track span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .3);
    display: block;
    height: 1.06rem;
    transform: translateX(0);
    transition: transform .18s ease;
    width: 1.06rem;
}

.victoria-switch.is-on {
    color: #075e46;
}

.victoria-switch.is-on .victoria-switch-track {
    background: var(--victoria-green);
}

.victoria-switch.is-on .victoria-switch-track span {
    transform: translateX(1.13rem);
}

.victoria-control-note,
.victoria-control-error {
    color: var(--victoria-muted);
    font-size: .72rem;
    line-height: 1.4;
}

.victoria-control-error {
    color: var(--victoria-red);
}

.victoria-inline-loading,
.victoria-panel-loading {
    align-items: center;
    color: var(--victoria-muted);
    display: flex;
    font-size: .82rem;
    gap: .5rem;
}

.victoria-panel-loading {
    margin-top: 1rem;
    min-height: 5rem;
    justify-content: center;
}

.victoria-ask-card {
    background: #fff;
    border: 1px solid #b9d9f1;
    border-radius: .95rem;
    margin-top: .8rem;
    padding: 1rem;
}

.victoria-ask-heading {
    margin-bottom: .75rem;
}

.victoria-command-row {
    align-items: stretch;
    display: flex;
    gap: .65rem;
}

.victoria-command-row textarea {
    min-height: 3.25rem;
    resize: vertical;
}

.victoria-command-row .btn {
    flex: 0 0 auto;
}

.victoria-command-result {
    background: var(--victoria-blue-soft);
    border-radius: .55rem;
    color: #164d75 !important;
    font-weight: 650;
    margin-top: .65rem !important;
    padding: .55rem .7rem;
}

.victoria-office-nav {
    background: #fff;
    border: 1px solid var(--victoria-border, #d8e2ec);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(16, 42, 67, .06);
    margin-bottom: 1.25rem;
    padding: .55rem;
}

.victoria-nav-toggle {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: .65rem;
    color: #183b56;
    display: none;
    font-weight: 750;
    gap: .55rem;
    min-height: 2.75rem;
    padding: .65rem .75rem;
    width: 100%;
}

.victoria-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.victoria-nav-link {
    align-items: center;
    background: #f5f8fa;
    border: 1px solid transparent;
    border-radius: .65rem;
    color: #334e68;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .42rem;
    min-height: 2.35rem;
    padding: .48rem .68rem;
}

.victoria-nav-link:hover {
    background: var(--victoria-blue-soft, #e8f4ff);
    color: #075d9e;
}

.victoria-nav-link.active {
    background: #123b5d;
    border-color: #123b5d;
    color: #fff;
}

.victoria-nav-link.secondary {
    background: #fff;
    border-color: #e4ebf1;
    font-weight: 600;
}

.victoria-nav-link.secondary.active {
    background: #123b5d;
    border-color: #123b5d;
}

.victoria-nav-count {
    align-items: center;
    background: #d92d20;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .68rem;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 .28rem;
}

.victoria-nav-break {
    border-left: 1px solid #d8e2ec;
    margin: .2rem;
}

.victoria-office-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.victoria-metric-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.victoria-metric-card {
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: .9rem;
    color: inherit;
    display: block;
    padding: 1rem;
}

a.victoria-metric-card:hover {
    border-color: #90c6ed;
    box-shadow: 0 7px 20px rgba(16, 42, 67, .08);
    transform: translateY(-1px);
}

.victoria-metric-label {
    color: var(--victoria-muted);
    display: block;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.3;
}

.victoria-metric-value {
    color: var(--victoria-navy);
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: .3rem;
}

.victoria-content-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr);
}

.victoria-section-card {
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: 1rem;
    box-shadow: 0 3px 12px rgba(16, 42, 67, .045);
    min-width: 0;
    padding: 1rem;
}

.victoria-section-heading {
    align-items: center;
    margin-bottom: .8rem;
}

.victoria-section-heading h2,
.victoria-section-heading h3 {
    color: var(--victoria-navy);
    font-size: 1rem;
    margin: 0;
}

.victoria-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.victoria-list-row {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e4ebf1;
    border-radius: .72rem;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .75rem;
}

.victoria-list-row-main {
    min-width: 0;
}

.victoria-list-row-main strong {
    color: var(--victoria-navy);
    display: block;
    overflow-wrap: anywhere;
}

.victoria-list-meta {
    color: var(--victoria-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    gap: .35rem .7rem;
    margin-top: .25rem;
}

.victoria-status-tag,
.victoria-risk-tag {
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
    padding: .3rem .5rem;
    text-transform: uppercase;
}

.victoria-status-tag {
    background: #e6eef5;
    color: #344e63;
}

.victoria-status-tag.success,
.victoria-risk-tag.low {
    background: var(--victoria-green-soft);
    color: #056047;
}

.victoria-status-tag.warning,
.victoria-risk-tag.medium {
    background: var(--victoria-amber-soft);
    color: #794600;
}

.victoria-status-tag.danger,
.victoria-risk-tag.high,
.victoria-risk-tag.critical {
    background: var(--victoria-red-soft);
    color: var(--victoria-red);
}

.victoria-empty-state {
    align-items: center;
    color: var(--victoria-muted);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    justify-content: center;
    min-height: 9rem;
    padding: 1rem;
    text-align: center;
}

.victoria-empty-state i {
    color: #83a5bf;
    font-size: 1.8rem;
}

.victoria-filter-bar {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.victoria-filter-bar .form-select,
.victoria-filter-bar .form-control {
    max-width: 18rem;
}

.victoria-approval-card {
    background: #fffaf0;
    border: 1px solid #e9cb8b;
    border-left: .3rem solid #c27700;
    border-radius: .75rem;
    padding: .85rem;
}

.victoria-approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .7rem;
}

.victoria-detail-list {
    display: grid;
    font-size: .76rem;
    gap: .35rem .75rem;
    grid-template-columns: max-content 1fr;
}

.victoria-detail-list dt {
    color: var(--victoria-muted);
    font-weight: 650;
}

.victoria-detail-list dd {
    color: var(--victoria-navy);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.victoria-json-details summary {
    color: #315c7d;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
}

.victoria-json-details pre {
    background: #f0f4f7;
    border-radius: .5rem;
    color: #243b53;
    font-size: .7rem;
    margin: .5rem 0 0;
    max-height: 14rem;
    overflow: auto;
    padding: .65rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.victoria-callout {
    align-items: flex-start;
    background: var(--victoria-blue-soft);
    border: 1px solid #b7d8ee;
    border-radius: .8rem;
    color: #234f70;
    display: flex;
    gap: .7rem;
    padding: .85rem;
}

.victoria-callout.warning {
    background: var(--victoria-amber-soft);
    border-color: #e8c67b;
    color: #714100;
}

.victoria-connector-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.victoria-connector-card {
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: .85rem;
    padding: .9rem;
}

.victoria-connector-card h2,
.victoria-connector-card h3 {
    color: var(--victoria-navy);
    font-size: .95rem;
    margin: 0;
}

.victoria-feature-state {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--victoria-border);
    border-radius: .9rem;
    display: flex;
    gap: .9rem;
    padding: 1rem;
}

.victoria-feature-state > i {
    align-items: center;
    background: var(--victoria-blue-soft);
    border-radius: .7rem;
    color: var(--victoria-blue);
    display: inline-flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.victoria-feature-state h2 {
    color: var(--victoria-navy);
    font-size: 1rem;
    margin: 0 0 .25rem;
}

.victoria-feature-state p {
    color: var(--victoria-muted);
    margin: 0;
}

.victoria-office-header button:focus-visible,
.victoria-office-nav a:focus-visible,
.victoria-office-nav button:focus-visible,
.victoria-office-page a:focus-visible,
.victoria-office-page button:focus-visible,
.victoria-office-page summary:focus-visible {
    outline: 3px solid rgba(8, 117, 204, .4);
    outline-offset: 2px;
}

@media (max-width: 1250px) {
    .victoria-control-grid,
    .victoria-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .victoria-connector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .victoria-nav-toggle {
        display: flex;
    }

    .victoria-nav-links {
        display: none;
        flex-direction: column;
        padding-top: .45rem;
    }

    .victoria-nav-links.is-open {
        display: flex;
    }

    .victoria-nav-link {
        justify-content: flex-start;
        width: 100%;
    }

    .victoria-nav-break {
        border-left: 0;
        border-top: 1px solid #d8e2ec;
        margin: .2rem 0;
    }

    .victoria-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .victoria-office-header {
        border-radius: .9rem;
        margin-left: -.2rem;
        margin-right: -.2rem;
        padding: .85rem;
    }

    .victoria-office-heading,
    .victoria-ask-heading,
    .victoria-page-heading,
    .victoria-section-heading {
        align-items: stretch;
        flex-direction: column;
        gap: .55rem;
    }

    .victoria-environment-badge {
        align-self: flex-start;
    }

    .victoria-control-grid,
    .victoria-metric-grid,
    .victoria-connector-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .victoria-command-row {
        flex-direction: column;
    }

    .victoria-command-row .btn,
    .victoria-ask-heading .btn {
        width: 100%;
    }

    .victoria-list-row {
        flex-direction: column;
    }

    .victoria-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .victoria-filter-bar .form-select,
    .victoria-filter-bar .form-control {
        max-width: none;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .victoria-switch-track,
    .victoria-switch-track span,
    a.victoria-metric-card {
        transition: none;
    }
}