/* Ranko revamp foundation. Loaded after legacy styles for reversible migration. */
:root {
    --ranko-brand-600: #2563eb;
    --ranko-brand-700: #1d4ed8;
    --ranko-brand-800: #173b69;
    --ranko-focus: #2563eb;
    --ranko-page: #f5f8fc;
    --ranko-surface: #ffffff;
    --ranko-surface-subtle: #f8fafc;
    --ranko-border: #dbe7f5;
    --ranko-divider: #e8eef7;
    --ranko-text: #173b69;
    --ranko-text-secondary: #475569;
    --ranko-text-muted: #64748b;
    --ranko-success: #047857;
    --ranko-warning: #b45309;
    --ranko-danger: #b91c1c;
    --ranko-space-1: .25rem;
    --ranko-space-2: .5rem;
    --ranko-space-3: .75rem;
    --ranko-space-4: 1rem;
    --ranko-space-6: 1.5rem;
    --ranko-space-8: 2rem;
    --ranko-radius-control: .5rem;
    --ranko-radius-panel: .75rem;
}

:root[data-theme="dark"] {
    --ranko-page: #0f172a;
    --ranko-surface: #111827;
    --ranko-surface-subtle: #162033;
    --ranko-border: #253244;
    --ranko-divider: #253244;
    --ranko-text: #e5edf7;
    --ranko-text-secondary: #cbd5e1;
    --ranko-text-muted: #94a3b8;
}

.skip-link,
.auth-skip-link {
    background: var(--ranko-brand-800);
    border-radius: 0 0 var(--ranko-radius-control) 0;
    color: #fff;
    font-weight: 800;
    left: 0;
    padding: .7rem 1rem;
    position: fixed;
    top: 0;
    transform: translateY(-130%);
    transition: transform 120ms ease;
    z-index: 10000;
}

.skip-link:focus,
.auth-skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ranko-focus) 78%, white);
    outline-offset: 2px;
}

.sidebar {
    background: #f1f5f9;
    border-color: #dbe7f5;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.revamp-nav {
    display: grid;
    padding-bottom: 1rem;
}

.revamp-nav .sidebar-section-title {
    color: var(--ranko-text-muted);
    font-size: .66rem;
    letter-spacing: .08em;
    padding: .8rem .7rem .25rem;
}

.revamp-nav .nav {
    gap: .1rem !important;
}

.revamp-nav .nav-link {
    color: var(--ranko-text-secondary);
    font-size: .90rem;
    /* font-weight: 650; */
    gap: .65rem;
    min-height: 36px;
    padding: .38rem .7rem;
    position: relative;
}

.revamp-nav .nav-link:hover {
    background: #eff6ff;
    color: var(--ranko-brand-700);
}

.sidebar .revamp-nav .nav-link.active,
.sidebar .revamp-nav .nav-link.is-click-active {
    background: #dbeafe;
    box-shadow: inset 3px 0 0 #3b82f6, 0 4px 12px rgba(37, 99, 235, .1);
    color: var(--ranko-brand-700) !important;
    font-weight: 400;
}

.revamp-nav .nav-link.active::before {
    background: var(--ranko-brand-600);
    border-radius: 0 999px 999px 0;
    content: "";
    inset: .42rem auto .42rem -.98rem;
    position: absolute;
    width: 4px;
}

.sidebar .revamp-nav .nav-link.active i,
.sidebar .revamp-nav .nav-link.active .nav-label,
.sidebar .revamp-nav .nav-link.is-click-active i,
.sidebar .revamp-nav .nav-link.is-click-active .nav-label {
    color: var(--ranko-brand-700) !important;
}

/* Keep navigation calm and readable even when the content theme is dark. */
:root[data-theme="dark"] .sidebar:not(.report-sidebar) {
    background: #eaf0f7;
    border-color: #cbd8e6;
}

:root[data-theme="dark"] .sidebar:not(.report-sidebar) .revamp-nav .sidebar-section-title {
    color: #64748b;
}

:root[data-theme="dark"] .sidebar:not(.report-sidebar) .revamp-nav .nav-link {
    color: #475569;
}

:root[data-theme="dark"] .sidebar:not(.report-sidebar) .revamp-nav .nav-link:hover {
    background: #e0ecf8;
    color: #1d4ed8;
}

.nav-count {
    align-items: center;
    background: var(--ranko-brand-600);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .65rem;
    font-weight: 900;
    justify-content: center;
    margin-left: auto;
    min-height: 1.25rem;
    min-width: 1.25rem;
    padding: 0 .3rem;
}

#mainContent:focus {
    outline: none;
}

/* Opt-in shared components. Legacy pages are unaffected until classes are added. */
.revamp-page {
    display: grid;
    gap: var(--ranko-space-4);
}

.revamp-page-header,
.revamp-panel-head,
.revamp-toolbar,
.revamp-integration-card-head {
    align-items: center;
    display: flex;
    gap: var(--ranko-space-3);
    justify-content: space-between;
}

.revamp-page-header h2,
.revamp-panel-head h3,
.revamp-integration-card-head h3 {
    color: var(--ranko-text);
    font-weight: 900;
    margin: 0;
}

.revamp-page-header p,
.revamp-panel-head p {
    color: var(--ranko-text-muted);
    margin: .25rem 0 0;
}

.revamp-page-actions,
.revamp-integration-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ranko-space-2);
}

.revamp-subnav {
    align-items: center;
    border-bottom: 1px solid var(--ranko-divider);
    display: flex;
    gap: .25rem;
    overflow-x: auto;
}

.revamp-subnav-link {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--ranko-text-muted);
    font-size: .8rem;
    font-weight: 800;
    min-height: 42px;
    padding: .55rem .75rem;
    text-decoration: none;
    white-space: nowrap;
}

.revamp-subnav-link:hover,
.revamp-subnav-link.is-active,
.revamp-subnav-link[aria-current="page"] {
    border-bottom-color: var(--ranko-brand-600);
    color: var(--ranko-brand-700);
}

.revamp-context-bar,
.revamp-panel,
.revamp-integration-card,
.revamp-state {
    background: var(--ranko-surface);
    border: 1px solid var(--ranko-border);
    border-radius: var(--ranko-radius-panel);
}

.revamp-context-bar,
.revamp-toolbar {
    padding: var(--ranko-space-3) var(--ranko-space-4);
}

.revamp-panel,
.revamp-integration-card {
    overflow: hidden;
}

.revamp-panel-head,
.revamp-integration-card-head {
    border-bottom: 1px solid var(--ranko-divider);
    padding: var(--ranko-space-4);
}

.revamp-panel-body,
.revamp-integration-card-body {
    padding: var(--ranko-space-4);
}

.revamp-metric-grid,
.revamp-integration-grid {
    display: grid;
    gap: var(--ranko-space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.revamp-metric-card {
    background: var(--ranko-surface);
    border: 1px solid var(--ranko-border);
    border-radius: var(--ranko-radius-control);
    padding: var(--ranko-space-4);
}

.revamp-metric-card span,
.revamp-integration-card-meta {
    color: var(--ranko-text-muted);
    font-size: .7rem;
    font-weight: 800;
}

.revamp-metric-card strong {
    color: var(--ranko-text);
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    margin-top: .35rem;
}

.revamp-status {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: var(--ranko-text-secondary);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 900;
    gap: .3rem;
    padding: .25rem .55rem;
}

.revamp-status[data-tone="success"] { background: #ecfdf5; border-color: #bbf7d0; color: var(--ranko-success); }
.revamp-status[data-tone="warning"] { background: #fffbeb; border-color: #fde68a; color: var(--ranko-warning); }
.revamp-status[data-tone="danger"] { background: #fef2f2; border-color: #fecaca; color: var(--ranko-danger); }
.revamp-status[data-tone="info"] { background: #eff6ff; border-color: #bfdbfe; color: var(--ranko-brand-700); }

.revamp-readiness-list {
    display: grid;
    gap: var(--ranko-space-2);
}

.revamp-readiness-item {
    align-items: start;
    border-bottom: 1px solid var(--ranko-divider);
    display: grid;
    gap: var(--ranko-space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--ranko-space-3) 0;
}

.revamp-readiness-item:last-child { border-bottom: 0; }

.revamp-state {
    color: var(--ranko-text-muted);
    display: grid;
    gap: var(--ranko-space-2);
    justify-items: center;
    min-height: 130px;
    padding: var(--ranko-space-6);
    place-content: center;
    text-align: center;
}

.revamp-state[data-state="error"] { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.revamp-state[data-state="partial"] { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.revamp-table-shell {
    border: 1px solid var(--ranko-border);
    border-radius: var(--ranko-radius-panel);
    max-width: 100%;
    overflow: auto;
}

.revamp-data-table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}

.revamp-data-table th {
    background: var(--ranko-surface-subtle);
    color: var(--ranko-text-muted);
    font-size: .68rem;
    font-weight: 900;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

.revamp-data-table th,
.revamp-data-table td {
    border-bottom: 1px solid var(--ranko-divider);
    padding: .7rem .8rem;
    text-align: left;
}

.revamp-disclosure {
    border-top: 1px solid var(--ranko-divider);
    padding: var(--ranko-space-3) var(--ranko-space-4);
}

@media (max-width: 991.98px) {
    .revamp-nav .nav-link {
        min-height: 46px;
    }

    .revamp-metric-grid,
    .revamp-integration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .revamp-page-header,
    .revamp-panel-head,
    .revamp-toolbar,
    .revamp-integration-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .revamp-page-actions,
    .revamp-integration-card-actions {
        width: 100%;
    }

    .revamp-metric-grid,
    .revamp-integration-grid {
        grid-template-columns: 1fr;
    }
}

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