/* Shared flat visual system. Loaded after legacy and Bootstrap styles. */
:root {
    --workspace-ink: #182b35;
    --workspace-muted: #596b75;
    --workspace-border: #dce3e6;
    --workspace-accent: #126b64;
    --workspace-soft: #e9f3f1;
    --bs-primary: #126b64;
    --bs-primary-rgb: 18, 107, 100;
    --bs-link-color: #126b64;
    --bs-link-hover-color: #0b4f49;
    --bs-border-color: #dce3e6;
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-color: #182b35;
}

body {
    background: #f5f7f7;
    color: var(--workspace-ink);
    font-family: var(--bs-body-font-family);
    font-size: .9375rem;
    line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--workspace-ink);
    letter-spacing: -.025em;
}

h2,
.page-heading-title,
.page-header-title {
    font-size: 1.65rem;
}

a {
    color: var(--workspace-accent);
}

a:hover {
    color: #0b4f49;
}

.text-muted,
.form-text,
.section-description,
.page-heading-description {
    color: var(--workspace-muted) !important;
}

.sidebar {
    width: 240px;
    background: #fff;
    color: var(--workspace-ink);
    border-right: 1px solid var(--workspace-border);
    padding: 24px 16px;
    overflow-y: auto;
}

.sidebar-brand {
    gap: 10px;
    padding: 0 4px 24px;
    border-bottom: 1px solid var(--workspace-border);
}

.brand-icon,
.brand-mark {
    border-radius: 6px;
    background: var(--workspace-accent);
    color: white;
}

.brand-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    font-size: 18px;
}

.brand-title {
    font-size: 15px;
    letter-spacing: -.025em;
}

.sidebar-brand small {
    color: var(--workspace-muted);
    font-size: 10px;
}

.sidebar-nav {
    margin-top: 20px;
    gap: 4px;
}

.sidebar-nav .nav-link {
    padding: 10px 12px;
    margin: 0;
    border-radius: 5px;
    color: #4d616b;
    font-size: .875rem;
}

.sidebar-nav .nav-link:hover {
    background: #f2f5f5;
    color: var(--workspace-ink);
}

.sidebar-nav .nav-link.active {
    background: var(--workspace-soft);
    color: #105c56;
    font-weight: 650;
}

.sidebar-divider {
    background: var(--workspace-border);
    margin: 18px 0 10px;
}

.main-content {
    margin-left: 240px;
    width: calc(100% - 240px);
    min-width: 0;
}

.topbar {
    height: auto;
    min-height: 76px;
    padding: 16px 32px;
    border-color: var(--workspace-border);
    gap: 16px;
}

.topbar h5 {
    font-size: .95rem;
    letter-spacing: 0;
}

.topbar small {
    font-size: .75rem;
}

.page-content {
    padding: 30px 32px 48px;
    max-width: 1700px;
    margin: 0 auto;
}

.content-card,
.dashboard-card,
.stat-card,
.card,
.auth-card,
.feature-card,
.feature-mini-card,
.hero-visual {
    background: #fff;
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    box-shadow: none !important;
}

.content-card {
    margin-top: 0;
    padding: 24px;
}

.dashboard-card,
.stat-card {
    padding: 22px;
}

.dashboard-card .icon-box,
.stat-card-icon,
.feature-icon,
.feature-mini-icon,
.empty-state-icon {
    background: var(--workspace-soft);
    color: var(--workspace-accent);
    border-radius: 6px;
}

.dashboard-card h3,
.stat-card-value {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.card-header,
.modal-header,
.modal-footer {
    background: #fff;
    border-color: var(--workspace-border);
}

.section-header {
    gap: 12px;
    margin-bottom: 22px;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 650;
}

.btn {
    border-radius: 5px;
    font-size: .875rem;
    font-weight: 600;
    padding: .55rem .9rem;
    box-shadow: none !important;
}

.btn-sm {
    font-size: .8rem;
    padding: .3rem .6rem;
}

.btn-primary {
    --bs-btn-bg: #126b64;
    --bs-btn-border-color: #126b64;
    --bs-btn-hover-bg: #0d554f;
    --bs-btn-hover-border-color: #0d554f;
    --bs-btn-active-bg: #0b4944;
    --bs-btn-active-border-color: #0b4944;
    --bs-btn-disabled-bg: #126b64;
    --bs-btn-disabled-border-color: #126b64;
}

.btn-outline-primary {
    --bs-btn-color: #126b64;
    --bs-btn-border-color: #9ebeb9;
    --bs-btn-hover-bg: #e9f3f1;
    --bs-btn-hover-color: #105c56;
    --bs-btn-hover-border-color: #126b64;
    --bs-btn-active-bg: #126b64;
    --bs-btn-active-border-color: #126b64;
}

.btn-outline-secondary {
    --bs-btn-color: #405762;
    --bs-btn-border-color: #c7d2d7;
    --bs-btn-hover-bg: #eef2f3;
    --bs-btn-hover-color: #182b35;
    --bs-btn-hover-border-color: #9aaeb7;
}

.btn-outline-danger {
    --bs-btn-color: #a93636;
    --bs-btn-border-color: #e3bcbc;
}

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #469e96;
    outline-offset: 3px;
}

.form-control,
.form-select,
.auth-form .form-control,
.auth-form .form-select {
    min-height: 42px;
    border-radius: 5px;
    border-color: #bdcbd1;
    font-size: .9375rem;
}

.form-control:focus,
.form-select:focus,
.auth-form .form-control:focus {
    border-color: #126b64;
    box-shadow: 0 0 0 3px #126b6420;
}

.form-check-input:checked {
    background-color: #126b64;
    border-color: #126b64;
}

.form-label {
    color: #304650;
    font-size: .875rem;
    font-weight: 600;
}

.form-text {
    font-size: .8rem;
}

textarea.form-control {
    min-height: 100px;
}

.table {
    --bs-table-color: #263e49;
    --bs-table-hover-bg: #f3f7f6;
    font-size: .875rem;
}

.table> :not(caption)>*>* {
    padding: .9rem .85rem;
    border-bottom-color: var(--workspace-border);
}

.table thead th {
    background: #f5f7f7;
    color: #526872;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .045em;
    white-space: nowrap;
}

.table tbody tr:hover {
    background: #f6f9f8;
}

.table-responsive {
    border-radius: 4px;
}

.indicator-management-table {
    min-width: 1050px;
}

.indicator-management-table .indicator-name {
    min-width: 240px;
}

.indicator-management-table .indicator-result {
    min-width: 210px;
}

.indicator-management-table td:first-child {
    white-space: nowrap;
}

.table summary {
    color: #126b64;
    font-size: .8rem;
    margin-top: 6px;
}

.badge {
    border-radius: 4px;
    font-weight: 600;
    padding: .4em .6em;
    letter-spacing: .01em;
}

.badge.bg-primary {
    background: #e0efed !important;
    color: #105c56;
}

.badge.bg-success {
    background: #e8f1e8 !important;
    color: #316139;
}

.badge.bg-secondary {
    background: #eef0f4 !important;
    color: #4c5872;
}

.nav-tabs {
    gap: 4px;
    border-bottom: 1px solid #ccd7db;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nav-tabs .nav-link {
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #596b75;
    padding: 12px 16px;
    font-size: .875rem;
}

.nav-tabs .nav-link:hover {
    background: #edf3f2;
    color: #126b64;
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: #126b64;
    color: #105c56;
    font-weight: 650;
}

.nav-tabs .badge {
    margin-left: 5px;
}

.result-node {
    background: #fff;
    border-color: var(--workspace-border) !important;
    border-left: 3px solid #126b64 !important;
    border-radius: 4px !important;
}

.result-node--outcome {
    border-left-color: #739167 !important;
}

.result-node--output {
    border-left-color: #7d8ba3 !important;
}

.result-children {
    border-left: 1px solid #c5d5d4 !important;
}

.framework-heading {
    align-items: center;
}

.framework-heading> :first-child {
    margin-right: auto;
}

.alert,
.app-message {
    border-radius: 5px;
}

.modal-content,
.dropdown-menu {
    border: 1px solid var(--workspace-border);
    border-radius: 6px;
    box-shadow: 0 6px 22px #182b3514;
}

.dropdown-item:active {
    background: #126b64;
}

.progress {
    border-radius: 3px;
    height: 8px;
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

.public-navbar {
    background: #fff;
    backdrop-filter: none;
}

.hero-visual {
    background: #f5f8f7;
}

.auth-info,
.cta-panel {
    background: #174e49;
    border-radius: 0;
}

.auth-info h1,
.auth-info h2,
.auth-info h3,
.cta-panel h2 {
    color: #fff;
}

.auth-card,
.cta-panel {
    border-radius: 6px;
}

.feature-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #9dbeb8;
}

.public-section {
    padding: 64px 0;
}

.section-kicker {
    color: #126b64;
}

.skip-link {
    position: absolute;
    top: -80px;
    left: 16px;
    z-index: 1100;
    padding: 10px 16px;
    background: #fff;
    border: 2px solid #126b64;
}

.skip-link:focus {
    top: 12px;
}

@media (max-width: 991.98px) {
    .sidebar {
        width: 240px;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .page-content {
        padding: 22px 20px 36px;
    }

    .topbar {
        padding: 14px 20px;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding: 18px 12px 30px;
    }

    .topbar {
        padding: 12px;
        gap: 10px;
    }

    .topbar>div:not(.user-menu) {
        min-width: 0;
    }

    .topbar h5 {
        overflow-wrap: anywhere;
    }

    .content-card,
    .dashboard-card,
    .stat-card {
        padding: 16px;
    }

    .page-content>.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 16px;
    }

    .page-heading-actions {
        flex-direction: row;
    }

    .page-heading-actions .btn {
        width: auto;
    }

    .nav-tabs .nav-link {
        padding: 10px 12px;
    }

    .framework-heading>.btn {
        width: auto;
    }

    .result-children {
        margin-left: 4px !important;
        padding-left: 8px !important;
    }

    .public-navbar .container {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

.framework-indicator-details summary {
    color: var(--workspace-accent);
    font-size: .8rem;
    cursor: pointer;
}

.framework-indicator-details[open] summary {
    margin-bottom: 12px;
}

@media (max-width: 575.98px) {
    .framework-heading {
        flex-direction: row;
        justify-content: flex-start;
    }

    .framework-heading> :first-child {
        width: 100%;
    }
}

/* Survey actions stay together without squeezing the heading or stretching on mobile. */
.survey-heading-row {
    align-items: flex-start;
}

.survey-heading-row> :first-child {
    min-width: 0;
}

.survey-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.survey-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.1rem;
}

.survey-delete-action {
    margin: 0 0 0 4px;
    padding-left: 12px;
    border-left: 1px solid var(--workspace-border);
}

@media (max-width: 768px) {
    .survey-heading-row {
        gap: 16px;
    }

    .survey-header-actions {
        align-self: flex-end;
    }
}