:root {
    --cms-vivid-navy-950: #091538;
    --cms-vivid-navy-900: #0d1b4a;
    --cms-vivid-navy-800: #12255f;
    --cms-vivid-text: #172554;
    --cms-vivid-muted: #68789c;
    --cms-vivid-blue: #2684ff;
    --cms-vivid-blue-bright: #4aa3ff;
    --cms-vivid-cyan: #16a8dd;
    --cms-vivid-violet: #6c63ff;
    --cms-vivid-purple: #a855f7;
    --cms-vivid-teal: #10bfa9;
    --cms-vivid-orange: #f59e0b;
    --cms-vivid-red: #e5484d;
    --cms-vivid-page: #f3f6ff;
    --cms-vivid-card: #ffffff;
    --cms-vivid-soft-blue: #eef5ff;
    --cms-vivid-border: #dce5f5;
    --cms-vivid-border-strong: #c4d4ee;
    --cms-vivid-button-radius: 8px;
    --cms-vivid-control-radius: 8px;
    --cms-vivid-surface-radius: 12px;
    --cms-vivid-card-radius: 12px;
    --cms-vivid-shadow: 0 8px 22px rgba(42, 72, 150, 0.08);
}

@media screen {
    html,
    body {
        background: var(--cms-vivid-page);
        color: var(--cms-vivid-text);
        font-family: "Segoe UI", Arial, sans-serif;
    }

    article.content {
        color: var(--cms-vivid-text);
    }

    article.content h1,
    article.content h2,
    article.content h3,
    article.content h4,
    article.content h5,
    article.content h6 {
        color: var(--cms-vivid-text);
    }

    article.content a:not(.cms-button):not([class*="button"]):not([class*="action"]) {
        color: #2468d8;
    }

    article.content a:not(.cms-button):not([class*="button"]):not([class*="action"]):hover {
        color: #174fb2;
    }

    /* =========================================================
       GLOBAL ACTION BUTTON SHAPE
       ========================================================= */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    .cms-button,
    a[class*="-button"],
    a[class*="-action"],
    a.share-folders-primary,
    a.share-folders-secondary,
    a.share-folders-action,
    a.overview-action-primary,
    a.overview-action-secondary,
    a.report-open-button {
        border-radius: var(--cms-vivid-button-radius) !important;
    }

    input[type="file"]::file-selector-button {
        border-radius: 6px !important;
    }

    /* Primary actions */
    .cms-button:not(.cms-button-outline),
    .btn-primary,
    button[class*="primary-button"],
    a[class*="primary-button"],
    button[class*="save-button"],
    a[class*="save-button"],
    button[class*="add-button"],
    a[class*="add-button"],
    button[class*="upload-button"],
    a[class*="upload-button"],
    button[class*="export-button"],
    a[class*="export-button"],
    button[class*="release-button"],
    button[class*="continue-button"],
    .overview-action-primary,
    .share-folders-primary {
        border-color: var(--cms-vivid-blue) !important;
        background: linear-gradient(135deg, var(--cms-vivid-blue) 0%, var(--cms-vivid-blue-bright) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 5px 14px rgba(38, 132, 255, 0.20) !important;
    }

    .cms-button:not(.cms-button-outline):hover:not(:disabled),
    .btn-primary:hover:not(:disabled),
    button[class*="primary-button"]:hover:not(:disabled),
    a[class*="primary-button"]:hover,
    button[class*="save-button"]:hover:not(:disabled),
    a[class*="save-button"]:hover,
    button[class*="add-button"]:hover:not(:disabled),
    a[class*="add-button"]:hover,
    button[class*="upload-button"]:hover:not(:disabled),
    a[class*="upload-button"]:hover,
    button[class*="export-button"]:hover:not(:disabled),
    a[class*="export-button"]:hover,
    button[class*="release-button"]:hover:not(:disabled),
    button[class*="continue-button"]:hover:not(:disabled),
    .overview-action-primary:hover,
    .share-folders-primary:hover {
        border-color: #176fe5 !important;
        background: linear-gradient(135deg, #176fe5 0%, #2f8fff 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 7px 18px rgba(38, 132, 255, 0.27) !important;
    }

    /* Secondary / navigation actions */
    .cms-button-outline,
    .btn-outline-primary,
    button[class*="secondary-button"],
    a[class*="secondary-button"],
    button[class*="back-button"],
    a[class*="back-button"],
    button[class*="clear-button"],
    a[class*="clear-button"],
    .overview-action-secondary,
    .share-folders-secondary,
    .share-folders-action,
    .share-folders-breadcrumb-button,
    .share-folders-sort-button {
        border-color: #b9c9e8 !important;
        background: #ffffff !important;
        color: #2458a6 !important;
        box-shadow: none !important;
    }

    .cms-button-outline:hover:not(:disabled),
    .btn-outline-primary:hover:not(:disabled),
    button[class*="secondary-button"]:hover:not(:disabled),
    a[class*="secondary-button"]:hover,
    button[class*="back-button"]:hover:not(:disabled),
    a[class*="back-button"]:hover,
    button[class*="clear-button"]:hover:not(:disabled),
    a[class*="clear-button"]:hover,
    .overview-action-secondary:hover,
    .share-folders-secondary:hover,
    .share-folders-action:hover,
    .share-folders-breadcrumb-button:hover,
    .share-folders-sort-button:hover {
        border-color: #73a8f5 !important;
        background: #edf5ff !important;
        color: #174fb2 !important;
    }

    /* Danger actions keep their semantic meaning, but use the vivid palette. */
    button[class*="delete-button"],
    a[class*="delete-button"],
    button[class*="danger-button"],
    a[class*="danger-button"],
    button[class*="danger-action"],
    a[class*="danger-action"],
    button[class*="reject-action"],
    a[class*="reject-action"],
    .share-folders-action-danger {
        border-color: #f0a3a6 !important;
        background: #fff6f6 !important;
        color: #b4232a !important;
        box-shadow: none !important;
    }

    button[class*="delete-button"]:hover:not(:disabled),
    a[class*="delete-button"]:hover,
    button[class*="danger-button"]:hover:not(:disabled),
    a[class*="danger-button"]:hover,
    button[class*="danger-action"]:hover:not(:disabled),
    a[class*="danger-action"]:hover,
    button[class*="reject-action"]:hover:not(:disabled),
    a[class*="reject-action"]:hover,
    .share-folders-action-danger:hover {
        border-color: var(--cms-vivid-red) !important;
        background: #ffe9ea !important;
        color: #961d23 !important;
    }

    /* Compact icon-only actions stay square, but rounded. */
    .share-folders-action-icon,
    .notification-bell-button,
    .notification-close-button,
    .cms-chat-header-button,
    .cms-sidebar-logout-button {
        border-radius: 8px !important;
    }


    /* =========================================================
       GLOBAL ROUNDED SURFACES
       Every visible rectangular CMS surface follows the same
       rounded-corner language. Controls stay compact; larger
       surfaces use a slightly softer radius.
       ========================================================= */

    /* Form controls */
    article.content input:not([type="checkbox"]):not([type="radio"]),
    article.content select,
    article.content textarea,
    article.content .form-control,
    article.content .form-select,
    article.content .input-group,
    article.content .input-group-text {
        border-radius: var(--cms-vivid-control-radius) !important;
    }

    /* Cards, panels, sections, toolbars, filter bars and bordered boxes. */
    article.content .card,
    article.content .panel,
    article.content .alert,
    article.content .list-group,
    article.content [class*="-card"],
    article.content [class*="-panel"],
    article.content [class*="-section"],
    article.content [class*="-toolbar"],
    article.content [class*="-filter-bar"],
    article.content [class*="-filter-panel"],
    article.content [class*="-summary"],
    article.content [class*="-banner"],
    article.content [class*="-box"],
    article.content [class*="-container"],
    article.content [class*="-selector"],
    article.content [class*="-notice"],
    article.content [class*="-message"],
    article.content [class*="-empty-state"],
    article.content [class*="-breadcrumb"],
    article.content [class*="-status-box"] {
        border-radius: var(--cms-vivid-surface-radius) !important;
    }

    /* Tables should also read as rounded surfaces. */
    article.content table,
    article.content [class*="table-wrapper"],
    article.content [class*="table-container"],
    article.content [class*="table-shell"] {
        border-radius: var(--cms-vivid-surface-radius) !important;
    }

    article.content [class*="table-wrapper"],
    article.content [class*="table-container"],
    article.content [class*="table-shell"] {
        overflow: hidden;
    }

    /* Dialogs / drawers / popovers */
    article.content dialog,
    article.content [role="dialog"],
    article.content [class*="modal-content"],
    article.content [class*="dialog-content"],
    article.content [class*="drawer"],
    .how-it-works-panel,
    .cms-chat-panel,
    .notification-panel {
        border-radius: var(--cms-vivid-surface-radius) !important;
    }

    /* Common layout utility rectangles outside article.content. */
    .top-row .how-it-works-button,
    .top-row .notification-bell-button,
    .cms-sidebar-user-card,
    .cms-sidebar-logout-button,
    .nav-scrollable .nav-item .nav-link,
    .nav-scrollable .nav-link {
        border-radius: var(--cms-vivid-control-radius) !important;
    }

    /* =========================================================
       FORMS / FOCUS
       ========================================================= */
    article.content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    article.content select,
    article.content textarea,
    article.content .form-control,
    article.content .form-select {
        border-color: var(--cms-vivid-border-strong);
    }

    article.content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
    article.content select:focus,
    article.content textarea:focus,
    article.content .form-control:focus,
    article.content .form-select:focus {
        outline: none;
        border-color: var(--cms-vivid-blue) !important;
        box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.14) !important;
    }

    /* =========================================================
       TABLES
       ========================================================= */
    article.content table {
        color: #344567;
    }

    article.content table thead th {
        border-color: var(--cms-vivid-border) !important;
        background: #eef4ff !important;
        color: #60739f !important;
        font-weight: 800;
    }

    article.content table tbody td {
        border-color: #e8eef8 !important;
    }

    article.content table tbody tr:hover {
        background: #f7faff !important;
    }

    /* =========================================================
       COMMON CMS SURFACES
       ========================================================= */
    article.content .overview-card,
    article.content .report-card,
    article.content .reports-filter-panel,
    article.content .project-form-section,
    article.content .share-folders-project-card,
    article.content .cms-hub-kpi-card,
    article.content .cms-hub-module-card,
    article.content [class*="-table-card"],
    article.content [class*="-progress-card"],
    article.content [class*="-message-card"],
    article.content [class*="-assignment-card"],
    article.content [class*="-source-selector-card"],
    article.content [class*="-import-card"] {
        border-color: var(--cms-vivid-border) !important;
        border-radius: var(--cms-vivid-card-radius) !important;
        background-color: var(--cms-vivid-card);
        box-shadow: var(--cms-vivid-shadow);
    }

    /* KPI cards across the application get a consistent playful accent. */
    article.content [class*="-kpi-card"]:not([class*="-top"]) {
        border-color: var(--cms-vivid-border) !important;
        border-top: 3px solid var(--cms-vivid-blue) !important;
        border-radius: var(--cms-vivid-card-radius) !important;
        background-color: #ffffff;
        box-shadow: var(--cms-vivid-shadow);
    }

    article.content [class*="-kpi-card"]:nth-child(4n + 2):not([class*="-top"]) {
        border-top-color: var(--cms-vivid-violet) !important;
    }

    article.content [class*="-kpi-card"]:nth-child(4n + 3):not([class*="-top"]) {
        border-top-color: var(--cms-vivid-purple) !important;
    }

    article.content [class*="-kpi-card"]:nth-child(4n):not([class*="-top"]) {
        border-top-color: var(--cms-vivid-teal) !important;
    }

    /* Navigation/module cards become slightly brighter without changing their layout. */
    article.content [class*="-navigation-card"]:not([class*="-header"]),
    article.content .cms-hub-module-card {
        border-color: var(--cms-vivid-border) !important;
        border-radius: var(--cms-vivid-card-radius) !important;
        box-shadow: 0 6px 18px rgba(42, 72, 150, 0.07);
    }

    article.content [class*="-navigation-card"]:not([class*="-header"]):hover,
    article.content .cms-hub-module-card:hover {
        border-color: #a9c8f8 !important;
        box-shadow: 0 10px 24px rgba(42, 72, 150, 0.12);
    }

    /* Progress elements use the vivid blue family by default. */
    article.content [class*="progress-track"] {
        background: #e7edf8 !important;
    }

    article.content [class*="progress-fill"] {
        background: linear-gradient(90deg, var(--cms-vivid-blue) 0%, var(--cms-vivid-cyan) 100%) !important;
    }

    /* =========================================================
       MODALS / DRAWERS
       ========================================================= */
    article.content [class*="modal"]:not([class*="backdrop"]),
    .how-it-works-panel {
        border-color: var(--cms-vivid-border) !important;
    }

    /* =========================================================
       ACCESSIBILITY / FOCUS
       ========================================================= */
    button:focus-visible,
    a[class*="-button"]:focus-visible,
    a[class*="-action"]:focus-visible,
    .cms-button:focus-visible,
    .btn:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.22) !important;
    }
}

/* Dashboard primary navigation action */
.dashboard-view-all,
a.dashboard-view-all {
    border-color: var(--cms-vivid-blue) !important;
    border-radius: var(--cms-vivid-button-radius) !important;
    background: linear-gradient(135deg, var(--cms-vivid-blue) 0%, var(--cms-vivid-blue-bright) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(38, 132, 255, 0.20) !important;
    text-decoration: none !important;
}

.dashboard-view-all:hover,
a.dashboard-view-all:hover {
    border-color: #176fe5 !important;
    background: linear-gradient(135deg, #176fe5 0%, #2f8fff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(38, 132, 255, 0.27) !important;
    text-decoration: none !important;
}

.dashboard-view-all:focus-visible,
a.dashboard-view-all:focus-visible {
    outline: none !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.22), 0 5px 14px rgba(38, 132, 255, 0.18) !important;
}