/* Core Platform: white-first, turquoise-second */

/* ==========================================================================
   1) Design tokens
   ========================================================================== */
:root {
    --va-brand-600: #1c8c9c;
    --va-brand-500: #1fa3b3;
    --va-brand-400: #2bb3c0;
    --va-white: #ffffff;
    --va-bg: #f4fbfc;
    --va-border: #d8e8ec;
    --va-navy: var(--va-brand-600);
    --va-navy-2: var(--va-brand-500);
    --va-text: #0f172a;
    --va-text-2: #334155;
    --va-link: var(--va-brand-600);
    --va-nav-icon: var(--va-navy);
    --va-focus: rgba(31, 163, 179, 0.24);
    --va-accent-rgb: 31, 163, 179;
    --va-appbar-border: rgba(255, 255, 255, 0.20);
    --va-appbar-height: 80px;
    --va-logo-panel-bg: var(--va-brand-600);
    --va-logo-panel-surface: #ffffff;
    --va-logo-panel-border: transparent;
    --va-logo-panel-split: 39%;
}

:root[data-theme='dark'] {
    --va-white: #111827;
    --va-bg: #0b1220;
    --va-border: #2d3a4f;
    --va-navy: #1e293b;
    --va-navy-2: #334155;
    --va-text: #e2e8f0;
    --va-text-2: #94a3b8;
    --va-link: #93c5fd;
    --va-nav-icon: var(--va-link);
    --va-focus: rgba(110, 168, 254, 0.25);
    --va-accent-rgb: 110, 168, 254;
    --va-appbar-border: rgba(148, 163, 184, 0.25);
    --va-button-outlined-border: rgba(110, 168, 254, 0.58);
    --va-button-outlined-border-hover: rgba(110, 168, 254, 0.76);
    --va-button-outlined-bg: rgba(110, 168, 254, 0.10);
    --va-button-outlined-bg-hover: rgba(110, 168, 254, 0.18);
    --va-button-outlined-text: #93c5fd;
    --va-button-outlined-text-hover: #dbeafe;
}

/* ==========================================================================
   2) Base
   ========================================================================== */
html, body {
    height: 100%;
    background: var(--va-bg);
}

body {
    margin: 0;
    color: var(--va-text);
}

.busy-action-spinner {
    display: inline-block;
    border-radius: 999px;
    border-style: solid;
    border-color: currentColor;
    border-right-color: transparent;
    animation: busy-action-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

.busy-action-spinner--inline {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.busy-action-spinner--sm {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 2px;
}

.busy-action-spinner--lg {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 3px;
}

@keyframes busy-action-spin {
    to {
        transform: rotate(360deg);
    }
}

.va-root {
    min-height: 100vh;
    background: var(--va-bg);
}

/* ==========================================================================
   3) App bar
   ========================================================================== */
.va-appbar {
    background: var(--va-navy) !important;
    border-bottom: 1px solid var(--va-appbar-border);
}

    .va-appbar.mud-appbar {
        height: var(--va-appbar-height) !important;
    }

    .va-appbar .mud-toolbar {
        min-height: var(--va-appbar-height) !important;
        height: var(--va-appbar-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

.va-title {
    color: #ffffff !important;
    letter-spacing: 0.2px;
}

.va-subtitle {
    color: rgba(255,255,255,0.80) !important;
    margin-top: -2px;
}

.va-appbar-icon .mud-icon-root {
    color: rgba(255,255,255,0.92) !important;
}

.va-lang-select {
    min-width: 72px;
}

.va-lang-select .mud-input-slot {
    color: #ffffff !important;
}

.va-lang-select .mud-input-outlined-border {
    border-color: transparent !important;
}

/* Brand row and logo (used in drawer header and optionally appbar) */
.va-brand {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.va-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 220px !important;
    display: block !important;
    object-fit: contain !important;
}

/* ==========================================================================
   4) Drawer + nav
   ========================================================================== */
.va-drawer {
    background: var(--va-white) !important;
    border-right: 1px solid var(--va-border);
    overflow-x: hidden;
}

    .va-drawer .mud-drawer-content {
        background: var(--va-white) !important;
    }

/* Drawer header: match appbar height exactly */
.va-drawer-header {
    height: var(--va-appbar-height) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: var(--va-white) !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.va-logo-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0;
    border: 0;
}

.va-logo-panel .va-logo {
    display: block;
    width: auto !important;
    max-width: 168px !important;
    height: 42px !important;
}

.va-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.va-nav-divider {
    border-color: var(--va-border) !important;
    margin: 6px 0;
}

.va-navlink {
    border-radius: 8px !important;
    padding: 6px 8px !important;
    border: 1px solid transparent;
    background: var(--va-white);
    color: var(--va-text) !important;
    min-height: 32px;
}

.va-nav .mud-nav-link .mud-icon-root,
.va-nav .va-navlink .mud-icon-root,
.va-nav-ico {
    margin-right: 8px;
    color: var(--va-nav-icon) !important;
}

.va-navlink:hover {
    background: rgba(var(--va-accent-rgb), 0.10);
    border-color: transparent;
}

.va-nav .mud-nav-link.active,
.va-nav .mud-nav-link-active {
    background: rgba(var(--va-accent-rgb), 0.18) !important;
    border-color: transparent !important;
}

.va-navlink-btn {
    justify-content: flex-start !important;
    text-transform: none !important;
    font-weight: 400 !important;
    padding: 6px 8px !important;
    min-height: 32px;
    width: 100%;
}

.va-nav .mud-nav-link,
.va-nav .va-nav-action {
    overflow: hidden;
}

.va-nav .va-nav-action.mud-button-root,
.va-nav .va-nav-action.mud-button-root.mud-button-text,
.va-nav .va-nav-action.mud-button-root.mud-button-text.mud-button-text-default {
    color: var(--va-text) !important;
    opacity: 1 !important;
    border: 1px solid transparent !important;
}

.va-nav .va-nav-action .mud-button-label {
    justify-content: flex-start;
    width: 100%;
}

.va-nav .va-nav-action:hover {
    background: rgba(var(--va-accent-rgb), 0.10) !important;
    border-color: transparent !important;
}

.va-nav .va-nav-action .mud-icon-root,
.va-nav .va-nav-action .va-nav-ico {
    color: var(--va-nav-icon) !important;
}

.va-nav .va-navlink-disabled.mud-disabled,
.va-nav .va-navlink-disabled.mud-disabled:hover {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: transparent !important;
}

.va-nav .va-navlink-disabled.mud-disabled .mud-icon-root,
.va-nav .va-navlink-disabled.mud-disabled .va-nav-ico {
    color: var(--va-text-2) !important;
}

.va-nav-tree-row {
    width: 100%;
}

.va-nav-vendor-logo {
    max-width: 124px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.va-nav-vendor-logo--light {
    display: block;
}

.va-nav-vendor-logo--dark {
    display: none;
}

:root[data-theme='dark'] .va-nav-vendor-logo--light {
    display: none;
}

:root[data-theme='dark'] .va-nav-vendor-logo--dark {
    display: block;
}

.va-navlink-child {
    margin-left: 16px;
    position: relative;
    padding-left: 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(var(--va-accent-rgb), 0.06), rgba(var(--va-accent-rgb), 0.02));
}

.va-navlink-child::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 999px;
    background: rgba(var(--va-accent-rgb), 0.22);
}

.va-nav-section {
    color: var(--va-text-2);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 2px 4px;
    text-transform: uppercase;
}

.va-nav-subsection {
    color: var(--va-text-2);
    margin: 6px 6px 4px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.va-nav-loading {
    color: var(--va-text-2);
}

/* ==========================================================================
   5) Main content + surfaces
   ========================================================================== */
.va-content {
    padding-top: var(--va-appbar-height) !important;
    background: var(--va-bg);
}

.va-container {
    padding: 18px 18px 28px 18px;
    background: transparent !important;
}

.va-account-root {
    background:
        radial-gradient(circle at top left, rgba(var(--va-accent-rgb), 0.18), transparent 32%),
        linear-gradient(180deg, rgba(var(--va-accent-rgb), 0.08) 0, transparent 240px),
        var(--va-bg);
}

.va-account-appbar {
    backdrop-filter: blur(16px);
}

.va-account-brand {
    min-width: 0;
    flex: 0 1 auto;
}

.va-account-logo {
    height: 42px !important;
    max-width: 160px !important;
}

.va-account-brand-copy {
    min-width: 0;
}

.va-account-kicker {
    color: rgba(255,255,255,0.72) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.va-account-toolbar {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.va-account-navlink {
    color: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.06) !important;
    text-transform: none !important;
    min-height: 38px !important;
    padding-inline: 0.95rem !important;
}

.va-account-navlink:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.va-account-navlink-active {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.30) !important;
}

.va-account-navlabel {
    white-space: nowrap;
}

.va-account-lang-select {
    min-width: 78px;
}

.va-account-content {
    background: transparent;
}

.va-account-container {
    min-height: calc(100vh - var(--va-appbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(24px, 6vh, 56px);
}

.va-account-page {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.va-account-page--narrow {
    width: min(100%, 720px);
}

.va-account-page--login {
    width: min(100%, 780px);
}

.va-account-page--status {
    width: min(100%, 860px);
}

.va-account-grid {
    row-gap: 24px;
}

.va-account-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10) !important;
}

.va-account-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--va-brand-600), var(--va-brand-400));
}

.va-account-login-stack {
    width: 100%;
}

.va-account-login-header {
    margin-bottom: 0.25rem;
}

.va-account-login-card {
    width: 100%;
}

.va-account-login-dev-panel {
    width: 100%;
}

.va-account-side-panel {
    background:
        linear-gradient(180deg, rgba(var(--va-accent-rgb), 0.08), rgba(var(--va-accent-rgb), 0.03)),
        var(--va-white) !important;
}

.va-account-dev-actions {
    margin-top: 0.25rem;
}

.va-account-dev-actions .mud-stack-root {
    width: 100%;
}

.va-account-dev-actions .mud-button-root {
    justify-content: flex-start !important;
    text-transform: none !important;
}

.va-account-actions-row {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.va-account-actions-row--start {
    justify-content: flex-start;
}

.va-account-status-card {
    margin: 0 auto;
}

.va-account-status-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 152, 0, 0.12);
    color: #c77700;
}

.va-account-status-icon .mud-icon-root {
    font-size: 1.75rem;
}

.va-account-support-panel {
    border: 1px solid rgba(var(--va-accent-rgb), 0.20) !important;
    background: rgba(var(--va-accent-rgb), 0.08) !important;
    border-radius: 12px !important;
}

.mud-paper,
.mud-card,
.mud-table-container {
    background: var(--va-white) !important;
    border: 1px solid var(--va-border) !important;
    border-radius: 10px !important;
}

.va-drawer-header.mud-paper,
.va-logo-panel {
    border-color: transparent !important;
}

.va-logo-panel {
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   6) Typography and colours
   ========================================================================== */
.va-container .mud-typography,
.va-container .mud-typography-body1,
.va-container .mud-typography-body2,
.va-container .mud-typography-subtitle1,
.va-container .mud-typography-subtitle2,
.va-container .mud-typography-h5,
.va-container .mud-typography-h6 {
    color: var(--va-text) !important;
}

/* Make 'Secondary' text readable */
.mud-text-secondary,
.mud-typography.mud-text-secondary {
    color: var(--va-text-2) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   7) Buttons
   ========================================================================== */
.mud-button-filled {
    border-radius: 10px !important;
}

    .mud-button-filled.mud-button-filled-primary {
        background: var(--va-navy) !important;
        color: #ffffff !important;
    }

.mud-button-outlined {
    border-radius: 10px !important;
    border-color: var(--va-navy) !important;
    color: var(--va-navy) !important;
}

:root[data-theme='dark'] .mud-button-root.mud-button-outlined:not(.mud-disabled),
:root[data-theme='dark'] .mud-button-root.mud-button-outlined.mud-button-outlined-primary:not(.mud-disabled),
:root[data-theme='dark'] .mud-button-root.mud-button-outlined.mud-button-outlined-secondary:not(.mud-disabled) {
    border-color: var(--va-button-outlined-border) !important;
    background: var(--va-button-outlined-bg) !important;
    color: var(--va-button-outlined-text) !important;
}

:root[data-theme='dark'] .mud-button-root.mud-button-outlined:not(.mud-disabled):hover,
:root[data-theme='dark'] .mud-button-root.mud-button-outlined.mud-button-outlined-primary:not(.mud-disabled):hover,
:root[data-theme='dark'] .mud-button-root.mud-button-outlined.mud-button-outlined-secondary:not(.mud-disabled):hover {
    border-color: var(--va-button-outlined-border-hover) !important;
    background: var(--va-button-outlined-bg-hover) !important;
    color: var(--va-button-outlined-text-hover) !important;
}

/* Text buttons (eg View) */
.mud-button-text,
.mud-button-text.mud-button-text-default {
    border-radius: 10px !important;
    color: var(--va-navy) !important;
    opacity: 1 !important;
}

.mud-button-text:hover {
    background: rgba(var(--va-accent-rgb), 0.14) !important;
}

:root[data-theme='dark'] .mud-button-root.mud-button-text:not(.mud-disabled),
:root[data-theme='dark'] .mud-button-root.mud-button-text.mud-button-text-default:not(.mud-disabled) {
    color: var(--va-link) !important;
}

:root[data-theme='dark'] .mud-button-root.mud-button-text:not(.mud-disabled):hover,
:root[data-theme='dark'] .mud-button-root.mud-button-text.mud-button-text-default:not(.mud-disabled):hover {
    color: var(--va-button-outlined-text-hover) !important;
    background: var(--va-button-outlined-bg-hover) !important;
}

/* ==========================================================================
   8) Inputs
   ========================================================================== */
.mud-input-control,
.mud-select,
.mud-textfield {
    border-radius: 10px !important;
}

/* Labels/helper text */
.mud-input-label,
.mud-input-label-text,
.mud-select-label,
.mud-input-helper-text {
    color: var(--va-text-2) !important;
    opacity: 1 !important;
}

/* Outline border a bit stronger */
.mud-input-outlined-border {
    border-color: rgba(var(--va-accent-rgb), 0.30) !important;
}

/* ==========================================================================
   9) Tables
   ========================================================================== */
.mud-table-cell {
    border-bottom: 1px solid var(--va-border) !important;
    color: var(--va-text) !important;
    opacity: 1 !important;
}

.mud-table-head .mud-table-cell {
    color: var(--va-text) !important;
    font-weight: 600;
}

/* Force readable value text in grid/details cells where Mud defaults can become too faint */
.va-container .mud-paper .mud-table-body .mud-table-cell,
.va-container .mud-paper .mud-table-body .mud-table-cell .mud-typography,
.va-container .mud-paper .mud-table-body .mud-table-cell span,
.va-container .mud-paper .mud-table-body .mud-table-cell div {
    color: var(--va-text) !important;
    opacity: 1 !important;
}

.mud-table-row:hover {
    background-color: rgba(var(--va-accent-rgb), 0.14) !important;
}

/* ==========================================================================
   10) Chips (tags, DC group, tiers)
   ========================================================================== */
.mud-chip-outlined.mud-chip-color-secondary {
    color: var(--va-navy) !important;
    border-color: rgba(var(--va-accent-rgb), 0.45) !important;
    background-color: rgba(var(--va-accent-rgb), 0.14) !important;
}

.mud-chip-outlined.mud-chip-color-default {
    color: var(--va-text) !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    background-color: rgba(15, 23, 42, 0.04) !important;
}

.va-overlay-high.mud-overlay,
.va-overlay-high {
    z-index: 1600 !important;
}

.va-account-appbar .mud-button-root.va-account-navlink,
.va-account-appbar .mud-button-root.va-account-navlink.mud-button-text,
.va-account-appbar .mud-button-root.va-account-navlink.mud-button-text-default {
    color: rgba(255,255,255,0.92) !important;
}

.va-account-appbar .mud-button-root.va-account-navlink:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.va-account-appbar .mud-button-root.va-account-navlink.va-account-navlink-active {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.30) !important;
}

.va-account-appbar .va-account-navlink .mud-icon-root {
    color: rgba(255,255,255,0.92) !important;
}

@media (max-width: 959.95px) {
    .va-account-brand-copy {
        display: none;
    }

    .va-account-toolbar {
        gap: 0.35rem;
    }

    .va-account-navlabel {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .va-account-navlink {
        min-width: 40px !important;
        padding-inline: 0.7rem !important;
    }

    .va-account-lang-select {
        min-width: 64px;
    }

    .va-account-container {
        align-items: flex-start;
    }
}

@media (max-width: 599.95px) {
    .va-account-container {
        padding-inline: 12px;
    }

    .va-account-actions-row {
        justify-content: stretch;
    }

    .va-account-actions-row .mud-button-root {
        width: 100%;
    }

    .va-account-dev-actions .mud-button-root {
        width: 100%;
    }
}