/*#region Page Layout */

/* Allow the main content area to stretch the whole page. */
.mud-container.body-container {
    max-width: 100%;
    padding-left: 48px;
    padding-right: 48px;
}
/*#endregion Page Layout */

/*#region Common Elements */
.tabs-container .mud-tab {
    text-transform: none;
}

.mud-button {
    text-transform: capitalize !important;
}

.body-container .mud-input,
.mud-dialog-container .mud-input,
.search-result-checkbox .mud-typography-body1 {
    font-size: 0.8rem;
}

.highlight {
    /*color: var(--mud-palette-success);*/
    /*color: var(--mud-palette-primary);*/
    color: #d39beb;
}

.clickable-url a {
    font-size: 0.9rem;
}

.clickable-rows .clickable-url a.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

    .clickable-rows .clickable-url a.mud-primary-text:hover,
    .clickable-rows .clickable-url a.mud-primary-text:focus {
        color: #fff !important;
    }

.clickable-url a {
    color: #fff !important;
}

.scrollable-dialog {
    max-height: 600px;
    overflow-y: scroll;
}

/*
    ProgressIndicator overlay (MudBlazor v8).
    MudOverlay Absolute="true" uses position:absolute within the nearest
    positioned parent. The ProgressIndicator must be placed inside a parent
    element with position:relative so the overlay fills that parent.
    Previously MudOverlay used position:fixed and handled dim/blocking
    automatically; v8 requires explicit CSS for coverage, blocking, and dim.
*/
.progress-indicator-container {
    display: block;
}

/* Fill the positioned parent, block interaction */
.progress-indicator-container .mud-overlay-absolute {
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

/* Spinner overlay: dim background, spinner renders on top within this layer */
.progress-indicator-container .mud-overlay-absolute.overlay-progress-indicator {
    z-index: 1200;
    background-color: rgba(50, 51, 61, 0.9);
}

/* Text overlay: transparent, sits above spinner layer */
.progress-indicator-container .mud-overlay-absolute.overlay-progress-text {
    z-index: 1201;
}

.progress-indicator-container .mud-overlay-absolute .progress-text {
    transform: translateY(80px);
}

.progress-indicator-container .mud-overlay-absolute .progress-sub-text {
    transform: translateY(200px);
}

.progress-indicator-container .progress-sub-text {
    font-size: 11px;
}

.progress-indicator-container .mud-progress-circular.progress-indicator {
    height: 100px;
    width: 100px;
}

.progress-indicator-container .progress-text {
    font-weight: bold;
}

.tooltip-container .mud-tooltip-root {
    height: fit-content;
}

    .tooltip-container .mud-tooltip-root .mud-icon-root.mud-svg-icon:hover {
        fill: var(--mud-palette-tertiary);
        /*background-color: #fff !important;*/
    }

.step-popover-card-container.mud-paper {
    background-color: #046985;
    min-width: 450px;
    max-width: 450px;
}

div.step-popover-card-container p.mud-typography {
    margin-top: 10px;
}

.select-column {
    width: 20%;
}
/*#endregion Common Elements */
/*#region Data Grid with cell content as anchors */
.mud-data-grid.clickable-rows .mud-table-body .mud-table-cell:hover {
    cursor: pointer !important;
    background-color: var(--mud-palette-action-default-hover);
    color: #fff;
}

    .mud-data-grid.clickable-rows .mud-table-body .mud-table-cell:hover.clickable-url {
        /*background-color: var(--mud-palette-action-default);*/
        /*background-color: var(--mud-palette-primary-lighten);*/
        background-color: rgba(151,141,236,0.5);
        font-weight: bolder;
    }

/* Display an icon button when hovering the row. Stops it repeating per row. */
.mud-data-grid.clickable-rows .mud-table-row:hover .mud-icon-button {
    visibility: visible;
}

/* Hides the alert in the action column. */
.mud-data-grid.clickable-rows .mud-table-row:hover .action-column .mud-alert-position {
    visibility: visible;
}

/*.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: var(--mud-palette-grey-dark) !important;
}*/

/*#endregion Data Grid with cell content as anchors */

.item-selected {
    width: 5%;
    max-width: 5%;
}

/*#region Search Results */

.search-result-url a,
.mud-data-grid.search-results .mud-table-cell {
    font-size: 0.8rem;
}

.search-result-url {
    word-break: break-all;
}

.search-result-title,
.search-result-url {
    width: 20%;
    max-width: 20%;
}

.search-result-snippet {
    width: 50%;
    max-width: 50%;
}

.search-result-sourcetype,
.search-result-isrelevant {
    width: 10%;
    max-width: 10%;
}

/* Ensures all checkboxes are visible when hovering the row in search results. */
.mud-data-grid.search-results .mud-table-row:hover .search-result-checkbox.hidden {
    visibility: visible;
}

/* Hides the checkboxes that have not been checked when not hovering the row in search results. */
.mud-data-grid.search-results .mud-table-row .search-result-checkbox.hidden {
    visibility: hidden;
}

/*#endregion Search Results */
/*#region Search Domains */
.search-templates {
    width: 60%;
    max-width: 60%;
}

/*#endregion Search Domains */

/*#region Product Search */

.item-details dt,
.product-details dt {
    font-weight: bold;
}

/*#endregion Product Search */

/*#region Source Signup */

.source-signup dt,
.source-signup dd {
    display: inline-block;
}

a.signup-url {
    font-size: 0.8rem;
    color: #ccc !important;
}

/*#endregion Source Signup */

/*#region Source User Button */

/* Selected User Avatar colors. */
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success:focus,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected:focus {
    background-color: #26a307;
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected {
    background-color: #2eba0b;
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-default:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default:focus,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected:focus {
    background-color: var(--mud-palette-grey-darker);
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected {
    background-color: var(--mud-palette-grey-dark);
}


/*#endregion Source User Button */

/*#region Product Mentions */

.auto-respond-chart-container {
    min-height: 15rem;
}

.analytics-dashboard-chart-container,
.mentions-chart-container {
    min-height: 20rem;
}

.mentions-result-count-column {
    width: 25%;
}

/*#endregion Product Mentions */

/*#region Pie Chart */

.pie-chart-container {
    min-height: 30rem;
}

    .pie-chart-container .invisible {
        height: 0px;
    }

/*#endregion Pie Chart */

/*#region Dashboard */

.dashboard-overview-container {
    height: 100%
}

.about-list-container .mud-typography,
.dashboard-overview-detail .mud-typography {
    font-size: 22px;
}

.welcome-wizard-step-container .body-content ol,
.about-list-container ol,
.dashboard-overview-detail ol {
    padding-inline-start: 2em;
}

    .dashboard-overview-detail ol li {
        margin-top: 4rem !important;
    }

.analytics-dashboard-container a.mud-link,
.dashboard-overview-container a.mud-link {
    color: var(--mud-palette-text-primary) !important;
    text-decoration: underline;
}

    .analytics-dashboard-container a.mud-link.mud-link-underline-hover.mud-primary-text:hover
    .dashboard-overview-container a.mud-link.mud-link-underline-hover.mud-primary-text:hover {
        color: #fff !important;
    }

/*#endregion Dashboard */

/*#region Task Status */

.task-status-container {
    width: 15rem;
    height: 15rem;
}

    .task-status-container .task-status-count-text-container {
        font-size: 5.8em;
        line-height: 1em;
    }

    .task-status-container .task-status-count-text-container,
    .task-status-horizontal-count {
        font-family: calibri;
    }

    .task-status-container .task-status-title-container {
        min-height: 4rem;
    }

.task-status-horizontal-description {
    vertical-align: super;
    height: 100%;
}

.task-status-container-small {
    max-width: 8rem;
    max-height: 9rem;
    min-height: 9rem;
}

    .task-status-container-small .mud-typography-h5 {
        font-size: 1rem;
    }

.task-status-items-container {
    min-height: 10rem;
}

.task-status-items-text-container {
    max-height: 10rem;
    overflow-y: scroll;
}

/*#region Task Status */

/*#region Wizards Selector */
.mud-link.mud-link-disabled .mud-paper,
.large-selector-button a.mud-link.mud-link-underline-hover.mud-link-disabled:hover .large-button-text-container {
    color: var(--mud-palette-action-disabled) !important;
}

.large-selector-button {
    width: 20rem;
    height: 20rem;
    position: relative;
    top: 0;
    left: 0;
}

/* Displays a tick image bottom right in the button. */
.wizard-task-completed {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.large-button-text-container {
    min-height: 3rem;
    width: 100%;
    text-align: center;
}

.large-selector-button a.mud-link.mud-link-underline-hover:hover {
    text-decoration: none;
}

    .large-selector-button a.mud-link.mud-link-underline-hover:hover .large-button-text-container {
        color: #fff;
    }

/*#endregion Wizards Selector */

/*#region Wizard Help */

.wizard-help-container,
.wizard-step-container {
    min-height: 30rem;
}

    .privacy-policy ul,
    .welcome-wizard-step-container ul,
    .wizard-step-container ul {
        list-style: disc;
        margin: 0px 1em;
        padding: 1em;
        margin-right: 0px;
    }

.wizard-help-content-container {
    min-height: 25rem;
    max-height: 25rem;
    overflow-y: scroll;
}

.wizard-help-image {
    max-width: 100%;
}

/*#endregion Wizard Help */

/*#region Brand Reputation Wizard */

.mentions-progress-content-container {
    min-height: 17rem;
    max-height: 17rem;
    overflow-y: scroll;
}

    .mentions-progress-content-container ul {
        padding: 0px 1rem;
    }

.mud-progress-linear.horizontal.mud-progress-linear-large {
    height: 20px;
}

.mentions-progress-bar p {
    padding: 4px;
    font-size: 11px;
}

.progress-indicator-container .mud-progress-circular.mentions-progress-indicator {
    height: 70px;
    width: 70px;
}

.brand-name-column {
    width: 60%;
}

.brand-description {
    min-height: 11rem;
}

.brand-wizard .product-details dt {
    font-size: 1rem;
}

/*#endregion Brand Reputation Wizard */

/*#region Competitor Brand Reputation Wizard */

.brand-name-column {
    width: 30%;
}

.brand-search-phrase-column {
    width: 30%;
}

.brand-website-column {
    width: 40%;
}

.fixed-header {
    height: 24rem;
}

/*#endregion Competitor Brand Reputation Wizard */

/*#region Help Button/Dialog */
.mud-fab.mud-fab-extended.help-button {
    background-color: var(--mud-palette-action-disabled-background);
    text-transform: none;
    min-height: 32px;
    box-shadow: none;
}

    .mud-fab.mud-fab-extended.help-button:hover {
        background-color: var(--mud-palette-success);
        color: #fff;
    }

.help-dialog .help-carousel {
    min-height: 40rem;
}

.help-dialog .mud-carousel .help-carousel-item-container {
    height: 100%;
}

.help-dialog .mud-carousel .help-carousel-item-content {
    max-height: 30rem;
    overflow-y: scroll;
    padding-right: 0.5rem;
}

.help-tooltip-text {
    max-width: 300px;
    /* text-align: left; */
}

.help-tooltip-component {
    max-width: 300px;
    /* text-align: left; */
}

/* 
Text / help box helpers
*/
span.help-bold {
    font-weight: bold;
    font-size: larger;
    color: #b0a8f9;
}

span.help-bold-smaller {
    font-weight: bold;
    /* font-size: large; */
    color: #b0a8f9;
}

svg.help-info-icon {
    float: left;
    padding-right: 5px;
    color: lightgreen;
}

ul.help-list {
    padding: 0px
}

div.help-example {
    display: inline-block;
}

    div.help-example p.help-title {
        margin-top: 10px;
    }

    div.help-example p.help-rounded-box {
        padding: 10px;
        margin-top: 20px;
        margin-left: 20px;
        border-color: #766ae6;
        border-style: solid;
        border-width: 2px;
        border-radius: 7px;
    }

/*#endregion Help Button/Dialog */


/*#region Identity pages e.g. login/logout etc. */

#layoutContainer.mud-container-maxwidth-sm #externalLoginContainer {
    flex-grow: 0;
    max-width: 100%;
    flex-basis: 100%;
}

.social-login-container {
    min-height: 20rem;
    max-width: 600px;
}

    .social-login-container.is-welcome {
        max-width: 1280px;
    }

.socialLoginContainer #externalLoginContainer {
    padding: 12px;
    display: flex !important;
    align-content: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.social-login-container.is-welcome #externalLoginContainer {
    top: -2.28rem;
    left: 27rem;
    position: relative;
    position: relative;
    padding: 0px;
}

.social-login-button-container {
    width: 100%;
    text-align: center;
}

    .microsoft-login-container img.social-login-button-image,
    .social-login-button-container img.social-login-button-image {
        position: absolute;
        left: 7rem;
        top: 1rem;
        width: 21px;
        height: 21px;
        z-index: 10;
    }

.social-login-container.is-welcome img.social-login-button-image {
    left: 28rem;
    top: 0.5rem;
}

.microsoft-login-container img.social-login-button-image {
    top: 0.5rem;
    left: 1rem;
}

.social-login-button-inner-container {
    position: relative;
}

.mud-button.social-login-button {
    width: 20rem;
}

.social-login-container.is-welcome .mud-button.social-login-button {
    margin: 0px !important;
}

/*#region Login Welcome Wizard */

@media screen and (min-width: 1280px) {
    .account-container {
        margin-top: 64px !important;
    }

    .welcome-wizard-step-container {
        min-height: 36rem;
        height: 36rem;
    }

    .social-login-container.is-welcome #socialLoginInnerContainer {
        height: 39rem;
    }
}

.welcome-wizard-step-container .body-content {
    max-height: 30.5rem;
    overflow-y: scroll;
    padding-right: 0.5rem;
}

    .welcome-wizard-step-container .body-content ol li {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

.welcome-wizard-step-container .mud-input-label.valid-text {
    transform: translate(14px,-6px) scale(.75);
}

.mud-input-helper-text.mud-input-error.validation-summary-errors {
    font-size: var(--mud-typography-default-size);
}

.mud-input-error .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

.welcome-wizard-step-container .right-body-content h6 {
    font-size: 0.9rem;
}

.welcome-wizard-step-container .right-body-content .gradient-image:hover,
.welcome-wizard-step-container .right-body-content img:hover {
    opacity: 0.4;
}

.welcome-wizard-step-container .right-body-content .gradient-image {
    background-repeat: no-repeat;
}

.brand-news {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/BrandNews.png');
    height: 15rem;
    width: 24rem;
}

.respond-to-news {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/RespondToNews.png');
    height: 9rem;
    width: 26rem;
}

.brand-statistics {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/BrandStatistics.png');
    height: 12.7rem;
    width: 12.7rem;
}

.chat-gpt {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/ChatGPT.png');
    height: 14.7rem;
    width: 22.2rem;
}

.webpage-statistics {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/WebpageStatistics.png');
    height: 11.5rem;
    width: 12rem;
}

.google-trends {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/GoogleTrends.png');
    height: 13rem;
    width: 23rem;
}

/*#endregion Login Welcome Wizard */

/*#region Account Pages Input Styling */
/*
    Styles for standard HTML inputs on SSR Identity pages (Login, Register, etc.)
    that cannot use interactive MudBlazor components.
*/
.account-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.account-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.account-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.account-input.invalid,
.account-input:invalid:not(:placeholder-shown) {
    border-color: var(--mud-palette-error);
}

.account-input.invalid:focus,
.account-input:invalid:not(:placeholder-shown):focus {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}

/* Checkbox styling for account pages */
.account-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
}

/* Validation summary styling for account pages */
ul.mud-alert.mud-alert-text-error,
.validation-summary-errors ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem !important;
    margin: 0;
    list-style-type: disc;
}

    ul.mud-alert.mud-alert-text-error li,
    .validation-summary-errors ul li {
        margin-bottom: 0.25rem;
        margin-top: 0.25rem;
    }

/*#endregion Account Pages Input Styling */

/*#endregion Identity pages e.g. login/logout etc. */

/*#region Terms and Conditions */

.terms-and-conditions-container ul {
    padding-inline-start: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}

[data-custom-class='body'], [data-custom-class='body'] * {
    background: transparent !important;
}

[data-custom-class='title'], [data-custom-class='title'] * {
    font-size: 26px !important;
}

[data-custom-class='subtitle'], [data-custom-class='subtitle'] * {
    font-size: 14px !important;
}

[data-custom-class='heading_1'], [data-custom-class='heading_1'] * {
    font-size: 19px !important;
}

[data-custom-class='heading_2'], [data-custom-class='heading_2'] * {
    font-size: 17px !important;
}

[data-custom-class='body_text'], [data-custom-class='body_text'] * {
    font-size: 14px !important;
}

[data-custom-class='link'], [data-custom-class='link'] * {
    font-size: 14px !important;
    word-break: break-word !important;
}

/*#endregion Terms and Conditions */


/*#region Tables */

div.row-highlight table tbody tr:hover {
    background-color: #3283c3 !important;
}
/*#endregion Tables  */

/*#region Product Summary */

.product-summary .task-status-title-container {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/*#endregion Product Summary */

/*#region Analytics Dashboard */

.analytics-dashboard-container .bottom-row {
    min-height: 32rem;
}

.analytics-dashboard-container .analytics-panel-container .task-status-title-container {
    min-height: 3rem;
}

.analytics-dashboard-container .analytics-panel-container .task-status-title-text-container {
    font-size: 0.8rem;
}

.analytics-dashboard-container .panel-header {
    min-height: 4rem;
}

.google-rank {
    min-height: 17rem;
}

.general-news-container {
    max-height: 31rem;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .advertising-tabs-container .clickable-url a.mud-link,
    .general-news-container .clickable-url a.mud-link {
        text-decoration: none;
        font-weight: bold;
    }

        .advertising-tabs-container .clickable-url a.mud-link:hover,
        .advertising-tabs-container .clickable-url a.mud-link:focus
        .general-news-container .clickable-url a.mud-link:hover,
        .general-news-container .clickable-url a.mud-link:focus {
            text-decoration: underline;
        }

/*#endregion Analytics Dashboard */

/*#region Source Post */

.logo-outer-container {
    padding: 1rem;
}

.logo-inner-container {
    background-color: #fff;
}

    .logo-inner-container.stackoverflow-logo {
        padding: 1rem;
    }

    .logo-inner-container.reddit-logo {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .logo-inner-container img {
        width: 100%;
        height: 3rem;
    }

/*#endregion Source Post */

/*#region Progress Panel */

.mud-paper.skeleton-card {
    /*background-color: rgba(255,255,255,0.05);*/
}

.progress-panel-content-container {
    overflow-y: scroll;
    overflow-x: hidden;
}

    .progress-panel-content-container .mud-grid-item:last-child {
        margin-bottom: 0px !important;
    }

/*#endregion Progress Panel */

/*#region Rank Results */

.query-rank-data-grid-container .clickable-url a.mud-link.mud-primary-text {
    /*color: var(--mud-palette-primary) !important;*/
    color: var(--mud-palette-primary-lighten) !important;
}

.query-rank-data-grid-container .clickable-url a.mud-link.mud-secondary-text {
    /*color: var(--mud-palette-secondary) !important;*/
    color: var(--mud-palette-secondary-lighten) !important;
}

.query-rank-title {
    width: 40%;
}

.query-rank-query {
    width: 50%;
}

.query-rank-position {
    width: 10%;
}

/*#endregion Rank Results */

/*#region Home Link */

.mud-link.mud-typography-body1.home-link {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 200;
    font-family: 'Exo', 'sans-serif';
}

    .mud-link.mud-typography-body1.home-link:hover,
    .mud-link.mud-typography-body1.home-link:focus {
        text-decoration: none;
    }

/*#endregion Home Link */

/*#region Landing Layout */

@media (min-width: 1536px) {

    /*
        Match styling from https://actiongpt.io/ where the width is greater then MudBlazor.
    */
    .landing-layout-container .mud-container-maxwidth-lg {
        max-width: 1320px;
    }
}

/*
    Ensures the background is black where the main layout uses a grey background.
    Landing layout form labels need the same background as the label is animated
    and appears over the border
*/
.landing-layout-container .main-content .microsoft-login-container .mud-input-label,
.landing-layout-container,
.landing-layout-container .mud-appbar {
    background-color: rgb(28, 28, 28);
}

.landing-layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

    .landing-layout-container .main-content {
        flex-grow: 1;
        overflow-y: auto;
    }

        /*
            Adds padding to the bottom to allow the scrolling of the page above
            and ensure the full content of the page can be displayed.
        */
        .landing-layout-container .main-content .main-content-container {
            display: flex;
            /*
                272px accounts for the header/footer (104px each) and extra
                space from padding/margin somewhere. Ensures the height of the
                page forces the footer to the bottom of the page.
            */
            min-height: calc(100vh - 272px);
            flex-direction: column;
        }

    .landing-layout-container .footer-container,
    .landing-layout-container .footer-container .mud-appbar {
        background-color: #222222;
    }

    /*.landing-layout-container .footer-container {
            height: 104px;  
        }*/

    .landing-layout-container h1,
    .landing-layout-container h2,
    .landing-layout-container h3,
    .landing-layout-container h4 {
        color: #ffca00;
    }

    .landing-layout-container .main-content .mud-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .landing-layout-container .main-content .home-section-top {
        background: rgb(2,0,36);
        background: linear-gradient(180deg, rgb(28 28 28) 0%, rgb(4 4 69) 35%, rgb(19 35 48) 100%);
        padding-top: 0px;
        padding-bottom: 7rem;
    }

    .landing-layout-container .main-content .section-top {
        padding-top: 0px;
    }

    .landing-layout-container a {
        font-family: "Heebo", "sans-serif";
    }

    .landing-layout-container .text-center {
        text-align: center;
    }

    .landing-layout-container .mud-appbar div.mud-nav-link-text {
        display: inline-block;
        margin: 0;
    }

    .landing-layout-container .mud-appbar .footer-page-menu,
    .landing-layout-container .mud-appbar .header-page-menu {
        display: flex;
        justify-content: center !important;
        align-items: center !important;
    }

/* 
    Mobile view.
*/
@media (max-width: 600px) {

    .mud-link.mud-typography-body1.home-link {
        font-size: 1.0rem;
    }

    .landing-layout-container .mud-appbar .footer-page-menu {
        display: block;
        justify-content: unset;
        align-items: unset;
    }

    .landing-layout-container .mud-appbar .social-media {
        justify-content: center !important;
    }
}

.landing-layout-container .mud-appbar .mud-nav-item {
    display: inline-block;
}

.landing-layout-container .mud-drawer-content .mud-nav-item {
    display: block;
}

.landing-layout-container .mud-appbar .mud-nav-item,
.landing-layout-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .mud-appbar .mud-nav-item.active a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-button {
    width: auto;
    font-size: 16px;
    font-weight: 600 !important;
}

.landing-layout-container .header-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-nav-item.active a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-button {
    color: #fff;
}

.landing-layout-container .header-container .mud-appbar .mud-button {
    font-size: 14px;
    line-height: 20px;
    height: 34px;
    padding: 3px 16px;
}

.landing-layout-container .header-container .mud-appbar .mud-button-outlined:hover,
.landing-layout-container .header-container .mud-appbar .mud-button-outlined:focus-visible {
    background-color: rgb(255 255 255);
    color: rgb(4 4 4);
}

.landing-layout-container .footer-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .footer-container .mud-appbar .mud-nav-item.active a.mud-nav-link {
    color: rgb(180, 175, 182);
    font-weight: 400 !important;
}

.landing-layout-container .footer-container .mud-appbar .social-media .mud-button {
    background-color: #fff;
    color: rgb(4 4 4);
    height: 2.25rem;
    width: 2.25rem;
}

/*#endregion Landing Layout */

/*#region Home Page */

.landing-layout-container .main-content .mud-button {
    background-color: #f1bf00d9;
    color: rgb(4 4 4);
    font-weight: 600 !important;
}

.landing-layout-container .main-content .microsoft-login-container .mud-button {
    background-color: var(--mud-palette-primary);
    color: #fff;
}

    .landing-layout-container .main-content .microsoft-login-container .mud-button:hover,
    .landing-layout-container .main-content .microsoft-login-container .mud-button:focus-visible {
        background-color: var(--mud-palette-primary-darken);
    }

    .landing-layout-container .main-content .mud-button:hover,
    .landing-layout-container .main-content .mud-button:focus-visible {
        background-color: #84b1f1;
        transition: background-color 0.25s ease;
        color: #fff;
        transition: color 0.5s ease;
    }

.landing-layout-section img {
    max-width: 100%;
    height: auto;
}

.section-gradient {
    background-image: linear-gradient(to bottom,var(--tw-gradient-stops));
    --tw-gradient-from: #222222 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 34 34 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1c1c1c var(--tw-gradient-to-position);
    --tw-gradient-from-position: 0.53%;
    --tw-gradient-to-position: 83.28%;
}

.testimonial-block .mud-paper {
    background-color: rgb(34 34 34);
    border-radius: 12px;
}

.testimonial-block blockquote {
    font-size: 16px;
    min-height: 12rem;
}

.testimonial-block .quote-image,
.testimonial-block .testimonial-author {
    color: #fff;
}

.font-semibold {
    font-weight: 600 !important;
}

/*#endregion Home Page */

/*#region Breadcrumb */

/*
    MudBlazor v8: Fix breadcrumb layout after HTML structure change (ul->ol in nav).
    Wrapper ensures breadcrumbs participate in flex layout without taking full width.
*/
.bread-crumbs-wrapper {
    display: contents;
}

.bread-crumbs-wrapper nav {
    display: inline-flex;
}

ol.mud-breadcrumbs.document-bread-crumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

ol.mud-breadcrumbs.document-bread-crumbs li {
    display: flex;
    align-items: center;
}

ol.mud-breadcrumbs.document-bread-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/*
    Restrict the width if the print button is displayed.
*/
.is-print-visible .mud-breadcrumbs.document-bread-crumbs {
    max-width: 85%;
}

/*#endregion Breadcrumb */

/*#region Backlog — add-child button */

/* Dim the add-child '+' button by default, brighten on row hover */
.backlog-add-child {
    opacity: 0.2;
    transition: opacity 0.15s ease;
}

.mud-table-row:hover .backlog-add-child {
    opacity: 0.7;
}

.backlog-add-child:hover {
    opacity: 1 !important;
}

/*#endregion Backlog — add-child button */

/*#region MudBlazor v8 Workarounds */

/* Workaround for MudCheckBox Color not applied with ReadOnly (https://github.com/MudBlazor/MudBlazor/issues/9524) */
.checkbox-success .mud-icon-button {
    color: var(--mud-palette-success) !important;
}

.checkbox-error .mud-icon-button {
    color: var(--mud-palette-error) !important;
}

/*#endregion MudBlazor v8 Workarounds */

/*#region Compact Sizing — global density overrides */

/* Root font-size reduction: MudBlazor uses rem, so this scales most elements */
:root {
    font-size: 15px;
}

/* Input fields — tighter padding */
.mud-input-control {
    margin-top: 0px !important;
}

/* Buttons — smaller padding and min-width */
.mud-button-root.mud-button:not(.social-login-button):not(.help-button) {
    padding: 5px 14px;
    min-width: unset;
}

.mud-icon-button.mud-button-root {
    padding: 7px;
}

/* DataGrid / Table — tighter cells */
.mud-table-dense .mud-table-cell {
    padding: 3px 10px !important;
}

.mud-table-dense .mud-table-head .mud-table-cell {
    padding: 5px 10px !important;
    white-space: nowrap;
}

.mud-table-row {
    height: auto !important;
}

.mud-table-pagination {
    padding: 3px 10px !important;
}

/* Tabs — shorter tab headers */
.mud-tab {
    min-height: 40px !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
}

.mud-tabs-header {
    min-height: 40px !important;
}

/* CRM Business Plan — nested vertical (left) sub-tabs must fill the full
   width of their parent tab panel. These rules live here (global site.css)
   rather than in CrmBusinessPlanComponent.razor.css because this app does
   not link the Blazor scoped-CSS bundle in App.razor, so component-scoped
   .razor.css files are never loaded. */
.crm-bizplan-tabs .mud-tabs {
    width: 100%;
}

.crm-bizplan-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* For vertical tabs MudBlazor makes .mud-tabs-panels a flex row, which turns
   the active .mud-tab-panel into a flex item that shrinks to its content
   width (leaving a gap on the right). Force it to grow to fill the box. */
.crm-bizplan-tabs .mud-tabs-panels > .mud-tab-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Left-align each vertical tab's icon + label instead of centring it. */
.crm-bizplan-tabs .mud-tab {
    justify-content: flex-start;
    text-align: left;
}

/* ── CRM sales-funnel widget (My Organisation → Overview, top-right) ── */
.crm-funnel-widget {
    width: 100%;
}

.funnel-headline {
    text-align: center;
    padding: 4px 0 6px;
}

.funnel-headline .fh-number {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
}

.funnel-headline .fh-caption {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.funnel-headline .fh-track {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.funnel-headline .fh-pct {
    font-size: 1.15rem;
    font-weight: 700;
}

.funnel-headline .fh-track-label {
    font-size: 0.78rem;
    font-weight: 600;
}

.funnel-headline .fh-expected {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
}

/* On-track colour bands — colour the big number + percentage together. */
.funnel-headline.track-green .fh-number,
.funnel-headline.track-green .fh-pct,
.funnel-headline.track-green .fh-track-label { color: var(--mud-palette-success); }

.funnel-headline.track-amber .fh-number,
.funnel-headline.track-amber .fh-pct,
.funnel-headline.track-amber .fh-track-label { color: var(--mud-palette-warning); }

.funnel-headline.track-red .fh-number,
.funnel-headline.track-red .fh-pct,
.funnel-headline.track-red .fh-track-label { color: var(--mud-palette-error); }

/* Plan not configured — dim everything so it reads as "no data yet". */
.funnel-headline.track-dim { opacity: 0.55; }
.funnel-headline.track-dim .fh-number { color: var(--mud-palette-text-disabled); }
.funnel-headline.track-dim .fh-track-label { color: var(--mud-palette-text-secondary); }

/* Funnel silhouette: continuous tapering trapezoids with actual counts. */
.funnel-segments {
    display: flex;
    flex-direction: column;
}

.funnel-seg {
    position: relative;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    color: #fff;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.12s ease;
}

.funnel-seg:hover,
.funnel-seg:focus-visible {
    filter: brightness(1.12);
    text-decoration: none;
}

.funnel-seg:active { filter: brightness(0.95); }

.funnel-seg .fs-count { font-size: 1rem; font-weight: 700; }
.funnel-seg .fs-label { font-size: 0.72rem; margin-left: 6px; opacity: 0.92; }

.funnel-seg.t1 { background: var(--mud-palette-info);    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.funnel-seg.t2 { background: var(--mud-palette-primary); clip-path: polygon(12% 0, 88% 0, 77% 100%, 23% 100%); }
.funnel-seg.t3 { background: var(--mud-palette-warning); clip-path: polygon(23% 0, 77% 0, 67% 100%, 33% 100%); }
.funnel-seg.t4 { background: var(--mud-palette-success); clip-path: polygon(33% 0, 67% 0, 61% 100%, 39% 100%); }

/* Won-revenue caption doubles as a link to the won-deals list. */
.funnel-revenue-link {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: color 0.12s ease;
}
.funnel-revenue-link:hover,
.funnel-revenue-link:focus-visible {
    color: var(--mud-palette-success);
    text-decoration: underline;
}

/* ── Planner "Now" view — scrollable current-task list ── */
/* A bounded, vertically-scrollable region so the user can scroll through and
   click straight into any current task's notes. Tall enough to show a couple
   of panels; scrolls when there are more. */
.planner-now-current-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.planner-now-panel { scroll-margin-top: 8px; }

/* The task title leads the row and is the panel's primary text — larger and
   heavier than the surrounding controls so it reads as the heading. */
.planner-now-title input {
    font-size: 1.15rem;
    font-weight: 500;
}

/* Priority sits just before the "Working on now" button as a compact marker,
   so it's narrower than a normal select and its text is de-emphasised.

   Qualified with .mud-input-control rather than left as a bare class: MudBlazor
   puts .mud-input-control on the same element and its stylesheet loads after
   this one, so at equal specificity MudBlazor's `flex: 1 1 auto; max-width:
   100%` won and the select stretched to fill whatever space was going.

   82px to match the quick-add priority select in the topbar above. The 64px this
   used to ask for was never actually exercised (the rule never won), and once it
   did the label ellipsised to "P..". */
.mud-input-control.planner-now-priority {
    max-width: 82px;
    flex: 0 0 auto;
}
.planner-now-priority .mud-input-slot {
    font-size: 0.8rem;
}

/* The task you're actively "working on now" — accent border + subtle tint. */
.planner-now-panel.planner-now-active {
    border-left: 4px solid var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* Right-hand column that hosts the funnel widget on the Overview tab. */
.crm-funnel-col { width: 300px; flex: 0 0 auto; }
@media (max-width: 700px) {
    .crm-funnel-col { width: 100%; }
}

/* ── CRM Capture→Convert→Close scoreboard (target vs actual) ── */
.crm-scoreboard .sb-group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}
.crm-scoreboard .sb-group-title.t1 { color: var(--mud-palette-info);    border-bottom-color: var(--mud-palette-info); }
.crm-scoreboard .sb-group-title.t3 { color: var(--mud-palette-warning); border-bottom-color: var(--mud-palette-warning); }
.crm-scoreboard .sb-group-title.t4 { color: var(--mud-palette-success); border-bottom-color: var(--mud-palette-success); }

.crm-scoreboard .sb-metric { margin-bottom: 10px; }
.crm-scoreboard .sb-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
}
.crm-scoreboard .sb-label { color: var(--mud-palette-text-secondary); }
.crm-scoreboard .sb-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-scoreboard .sb-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
    margin-top: 3px;
}
.crm-scoreboard .sb-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }

/* RAG bands colour both the value and the bar fill. */
.crm-scoreboard .sb-green .sb-value    { color: var(--mud-palette-success); }
.crm-scoreboard .sb-green .sb-bar-fill { background: var(--mud-palette-success); }
.crm-scoreboard .sb-amber .sb-value    { color: var(--mud-palette-warning); }
.crm-scoreboard .sb-amber .sb-bar-fill { background: var(--mud-palette-warning); }
.crm-scoreboard .sb-red .sb-value      { color: var(--mud-palette-error); }
.crm-scoreboard .sb-red .sb-bar-fill   { background: var(--mud-palette-error); }
.crm-scoreboard .sb-dim .sb-value      { color: var(--mud-palette-text-disabled); }
.crm-scoreboard .sb-dim .sb-bar-fill   { background: var(--mud-palette-text-disabled); }

/* Chips — smaller */
.mud-chip {
    height: 26px !important;
    padding: 0 9px !important;
}

/* Expansion panels — compact headers */
.mud-expand-panel-header {
    padding: 7px 14px !important;
    min-height: 40px !important;
}

/* Dialogs — tighter padding */
.mud-dialog .mud-dialog-title {
    padding: 12px 18px !important;
}

.mud-dialog .mud-dialog-content {
    padding: 10px 18px !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 8px 18px !important;
}

/* AppBar — shorter */
.mud-appbar.mud-appbar-fixed-top {
    height: 52px;
    min-height: 52px;
}

.mud-main-content {
    padding-top: 52px !important;
}

/* Drawer header — tighter */
.mud-drawer-header {
    min-height: 52px !important;
    padding: 0 14px !important;
}

/* Nav items in drawer — tighter */
.mud-nav-item .mud-nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Nav group labels — tighter */
.mud-nav-group .mud-collapse-wrapper .mud-nav-link {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Alert — compact */
.mud-alert {
    padding: 5px 14px !important;
}

/* Toolbar / header spacing */
.mud-toolbar {
    padding: 5px 10px !important;
    min-height: 44px !important;
}

/*#endregion Compact Sizing — global density overrides */

/*#region Radzen HtmlEditor — dark theme overrides */

/* Override Radzen CSS variables on the editor scope */
.rz-html-editor {
    --rz-editor-button-background-color: transparent;
    --rz-editor-button-color: var(--mud-palette-text-primary);
    --rz-editor-button-selected-background-color: var(--mud-palette-primary);
    --rz-editor-button-selected-color: var(--mud-palette-primary-text);
    --rz-editor-button-disabled-color: var(--mud-palette-text-disabled);
    --rz-editor-separator-background-color: var(--mud-palette-lines-default);
    --rz-editor-toolbar-background-color: var(--mud-palette-surface);
    --rz-editor-border: 1px solid var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

/* Dark toolbar matching MudBlazor surface */
.rz-html-editor-toolbar {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Toolbar button backgrounds transparent, icons use MudBlazor text color */
.rz-html-editor-button {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-radius: var(--mud-default-borderradius);
}

.rz-html-editor-button.rz-selected {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Toolbar icons */
.rz-html-editor-toolbar .rzi {
    color: var(--mud-palette-text-primary) !important;
}

/* Color picker buttons in toolbar */
.rz-html-editor-colorpicker,
.rz-html-editor-colorpicker .rz-colorpicker-trigger,
.rz-html-editor-colorpicker .rz-colorpicker {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-colorpicker .rz-colorpicker:hover,
.rz-html-editor-colorpicker .rz-colorpicker-trigger:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* Dropdown items (font name, font size) */
.rz-html-editor .rz-dropdown {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.rz-html-editor-dropdown-items {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Light content area — emails are viewed on white backgrounds */
.rz-html-editor-content {
    background-color: #ffffff !important;
    color: #212121 !important;
}

/* Links inside editor content — blue underline, not white-on-white */
.rz-html-editor-content a {
    color: #1565c0 !important;
    text-decoration: underline !important;
}

/* Lists need padding so bullets/numbers aren't clipped off the left edge */
.rz-html-editor-content ol,
.rz-html-editor-content ul {
    padding-left: 1.5em !important;
    margin-left: 0.5em !important;
}

/* Source view (raw HTML) also light for consistency */
.rz-html-editor-source.rz-textarea {
    background-color: #ffffff !important;
    color: #212121 !important;
}

/* Radzen dialog (used by Link button) — z-index above MudBlazor dialogs + dark theme */
.rz-dialog-wrapper {
    z-index: 1500 !important;
}

.rz-dialog-mask {
    z-index: 1400 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

.rz-dialog-wrapper .rz-dialog {
    z-index: 1501 !important;
}

.rz-dialog {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-titlebar {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-content .rz-textbox {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.rz-dialog-content label {
    color: var(--mud-palette-text-secondary) !important;
}

.rz-dialog .rz-button {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/*#endregion Radzen HtmlEditor — dark theme overrides */

/*#region Help System */

.help-chip {
    opacity: 0.3;
    transition: opacity 0.2s ease;
    cursor: pointer;
    min-height: 24px !important;
    height: 24px !important;
}

.help-chip:hover {
    opacity: 1;
}

.help-popover {
    z-index: 1300;
}

.help-popover-body {
    font-size: 0.875rem;
    line-height: 1.6;
}

.help-popover-body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.help-popover-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.help-popover-body p {
    margin-bottom: 0.5rem;
}

.help-popover-body ul,
.help-popover-body ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.help-popover-body li {
    margin-bottom: 0.15rem;
}

.help-popover-body code {
    background-color: var(--mud-palette-background-gray);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.help-popover-body img {
    max-width: 100%;
    border-radius: 4px;
    margin: 0.5rem 0;
}

/*#endregion Help System */

/*#region Marketing */

.brand-switcher div.mud-input-slot {
    min-height: 32px;
}

/*#endregion Marketing */

/*#region Planner task rows */

/* Hover-reveal "open" button on any task row (Today, Week, Goals, dashboard
   widget). The button is invisible until the row is hovered or something
   inside it gains keyboard focus; on touch devices (no hover) it stays
   half-visible so it's still reachable. */
.planner-hover-row .planner-open-btn {
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.planner-hover-row:hover .planner-open-btn,
.planner-hover-row:focus-within .planner-open-btn {
    opacity: 1;
}

@media (hover: none) {
    .planner-hover-row .planner-open-btn {
        opacity: .5;
    }
}

/*#endregion Planner task rows */

/* Flash for a task panel arrived at via /Planner/Now?task={id} (dashboard "Now"
   widget). Fades out on its own; the class is removed after ~2s. */
.planner-now-panel.planner-now-arrived {
    animation: planner-now-arrive 2.2s ease-out;
}

@keyframes planner-now-arrive {
    0%   { box-shadow: 0 0 0 3px var(--mud-palette-primary); }
    60%  { box-shadow: 0 0 0 3px var(--mud-palette-primary); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* /Planner/Now: the started-tasks panel is a fixed right-hand column beside the
   quick-add row. Fixed width so the task titles ellipsis rather than the panel
   growing and squeezing the add controls; collapses to full width on narrow
   screens, where two columns don't fit anyway. */
.planner-now-topbar > .planner-running-strip {
    flex: 0 0 400px;
    max-width: 400px;
    align-self: stretch;
}

/* Row controls appear on hover, so at rest the strip reads as a list of what you
   are working on rather than a wall of icons. visibility rather than display: the
   buttons keep their space, so rows don't shift under the pointer as it moves down
   the list. :focus-within keeps them reachable by keyboard, where there is no hover. */
.planner-running-chip .planner-running-actions {
    visibility: hidden;
}

.planner-running-chip:hover .planner-running-actions,
.planner-running-chip:focus-within .planner-running-actions {
    visibility: visible;
}

@media (max-width: 900px) {
    .planner-now-topbar { flex-wrap: wrap; }
    .planner-now-topbar > .planner-running-strip {
        flex: 1 1 100%;
        max-width: 100%;
    }
}