/*#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; }

/* ── Planner "Today" view — scrollable task list ── */
/* The task rows scroll inside their own panel instead of lengthening the page.
   Without this, enough tasks pushed the page down far enough that the day
   timeline — which sits in the column beside the list, not below it — scrolled
   out of view, and dragging a task onto a slot became impossible: the handle and
   its target could not be on screen together. Bounding the list keeps both in
   view no matter how many tasks there are. The panel heading and the search bar
   sit outside this box, so they stay put while the rows move. */
.planner-today-task-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* 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;
}

/* /Planner/Now task panel: controls left, notes right.
   Stacked full-width, a couple of in-progress tasks filled the viewport and the Current
   list stopped reading as a list. The left column is a fixed width so the notes box gets
   the remaining space and every panel lines up down the page; min-width:0 lets the title
   field ellipsis inside it rather than forcing the column wider. */
.planner-now-panel .planner-now-controls {
    flex: 0 0 380px;
    max-width: 380px;
    min-width: 0;
}

.planner-now-panel .planner-now-notes {
    min-width: 0; /* without this the editor refuses to shrink and overflows the panel */
}

/* Below this the two columns leave the notes box too narrow to type in, so stack. */
@media (max-width: 1100px) {
    .planner-now-panel .planner-now-row { flex-wrap: wrap; }
    .planner-now-panel .planner-now-controls {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 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;
}

/* Text on the dark toolbar, and the font-size / font-name pickers in it ("Font size", "13px").
   Those pickers are .rz-html-editor-dropdown, not .rz-dropdown, so the dropdown rule further down
   never reached them: they inherited the toolbar's text colour, which SharedUI's site.css sets to
   #212121 for the LIGHT toolbar it gives .rich-text-editor. This file makes that toolbar dark, so it
   must make its text light too — dark text on #373740 is what support tickets and the RDTI
   documents showed until Oct 2026. Set on the toolbar itself so anything else inside inherits it. */
.rz-html-editor-toolbar,
.rz-html-editor-toolbar .rz-html-editor-dropdown,
.rz-html-editor-toolbar .rz-html-editor-dropdown-value {
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-toolbar .rz-html-editor-dropdown {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.rz-html-editor-toolbar .rz-html-editor-dropdown:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* 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 row actions - open and delete - on any task row (Today, Week,
   Goals, dashboard widget, search results). Invisible until the row is hovered
   or something inside it gains keyboard focus; on touch devices (no hover) they
   stay half-visible so they're still reachable.

   Delete is in here for a second reason on top of the tidiness one: permanently
   visible, it sits a few pixels from open on every row of a long list, and it is
   the only action on the row that cannot be undone.

   Keyed off one shared class rather than one per button, so a third action does
   not mean a third pair of selectors to remember to add. .planner-open-btn is
   still on the open button as the E2E suite's hook - it just no longer carries
   the behaviour. */
.planner-hover-row .planner-row-action {
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

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

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

/* The task title opens the task. It is a div rather than a button because it has
   to keep the row's ellipsis-on-overflow behaviour, which a MudBlazor button
   would fight, so the affordance is carried by the cursor and a hover underline
   rather than by looking like a control at rest - a list of forty rows each
   drawn as a button is unreadable.

   Underline on hover of the TITLE, not of the row: the row already lights its
   action buttons on hover, and underlining text the pointer is nowhere near
   suggests it is the thing about to be clicked. */
.planner-task-title {
    cursor: pointer;
}

.planner-task-title:hover,
.planner-task-title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Focus has to be visible on a div that behaves like a button - it is the only
   signal a keyboard user gets that Enter will do something here. */
.planner-task-title:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* A done task is struck through and dimmed; keeping the underline on top of that
   reads as a second strike. */
.planner-hover-row .planner-task-title[style*="line-through"]:hover {
    text-decoration: line-through;
}

/* ── Row spacing, in two densities ──────────────────────────────────────────

   The padding used to be `py-1` in the markup of each row. It moved here so that
   both densities are declared in one place, and so the compact rule below does
   not have to fight MudBlazor's spacing utilities, which carry !important - the
   fight density.css records losing once already.

   4px top and bottom is what `py-1` gave, so touch devices see no change. */
.planner-hover-row {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Where a task is dropped to reorder it: a gap between rows, with an inner bar
   that lights up when a dragged task is over it. Moved here from the <style>
   block in PlannerToday.razor, because a rule in a page renders after every
   linked stylesheet and no file could override it without out-specifying it.
   Now the two densities are neighbours and the ordering question disappears. */
.planner-task-insert {
    height: 6px;
}

.planner-task-insert > .bar {
    height: 2px;
    background: transparent;
    border-radius: 1px;
    transition: background .08s;
}

.planner-task-insert.hover > .bar {
    background: var(--mud-palette-primary);
}

/* Compact, on a device with a mouse. Same test as density.css - see the header
   comment in that file, which is the reasoning for the whole approach.

   The gap between two rows is the insert target plus the padding either side of
   it: 6 + 4 + 4 = 14px, down to 4 + 2 + 2 = 8px. Together with the compact row
   controls in density.css the pitch of the list goes from about 56px to about
   40px, which is the part actually worth having - the gap is what you notice,
   but the row is where the height is.

   The insert target stops at 4px rather than the 3px that would halve the gap
   exactly. It is a drop target, and README_todo.md P3 records that the planner's
   drag is raw HTML5 `draggable` which does not work on touch at all - so a mouse
   is its only user and there is nothing to be won by making it harder to hit.
   3px is a one-character change if 8px still reads as loose. */
@media (hover: hover) and (pointer: fine) {
    .exa-compact .planner-hover-row {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .exa-compact .planner-task-insert {
        height: 4px;
    }

    /* Goals states its own row padding in a <style> block on the page; these two
       carry a class more so they out-specify it rather than depend on order. */
    .exa-compact .planner-goal-row {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .exa-compact .planner-subtask-row {
        padding-top: 1px;
        padding-bottom: 1px;
    }
}

/*#endregion Planner task rows */

/*#region Planner task card dialog */

/* Click-to-edit title in the task card's TitleContent. Same shape as the
   support portal's description editor: the text itself is the target, with the
   pencil as an affordance rather than the button. A pencil button beside the
   heading is a smaller target than the thing it edits, and people try clicking
   the text first anyway.

   These live here rather than in a .razor.css because this app does not link
   the Blazor scoped-CSS bundle in App.razor, so component-scoped files are
   never loaded at all - see the .crm-bizplan-tabs comment above. */
.planner-task-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 2px 6px;
    margin: -2px -6px; /* Cancel the padding so the title doesn't shift on hover. */
    border: 1px dashed transparent;
    border-radius: 6px;
    cursor: text;
    transition: border-color .12s, background-color .12s;
}

.planner-task-card-title:hover,
.planner-task-card-title:focus-visible {
    border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.planner-task-card-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Held back until the title is hovered or focused, so the resting state is a
   heading rather than a control. */
.planner-task-card-title-pencil {
    opacity: 0;
    flex: 0 0 auto;
    transition: opacity .12s;
}

.planner-task-card-title:hover .planner-task-card-title-pencil,
.planner-task-card-title:focus-visible .planner-task-card-title-pencil {
    opacity: .55;
}

/* No hover on a touch device, so the affordance has to be permanent there. */
@media (hover: none) {
    .planner-task-card-title-pencil {
        opacity: .4;
    }
}

/* The edit box has to read as the heading it replaces, or the title jumps a
   size the moment it's clicked.

   Set on the WRAPPER, not on the input. Targeting the input directly does not
   work however specific you make it, and it fails in a way that looks like a
   specificity problem and is not: MudBlazor ships

       .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root
           { font-size: inherit }

   which is (0,2,1) - the same specificity as `.mud-dialog-container
   .planner-task-card-title-input input` - and its stylesheet loads after this
   file, so it wins the tie and the input inherits regardless. Measured: the
   rule matched, declared 1.25rem, and the input still computed to 12px.

   Because the input inherits, the size it inherits is the thing to set. This
   rule is (0,3,0) against the (0,2,0) of ".mud-dialog-container .mud-input"
   in the Common Elements region, which is the 0.8rem it has to beat. */
.mud-dialog-container .planner-task-card-title-input .mud-input {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Tab panels in the card. The dialog is Small/FullWidth and the Time and
   Schedule tabs both hold lists that grow without limit, so the panel scrolls
   rather than the dialog running off the bottom of the viewport. 55vh leaves
   room for the title bar, the summary line, the tab header and the actions. */
.planner-task-card-panel {
    max-height: 55vh;
    overflow-y: auto;
}

/*#endregion Planner task card dialog */

/* 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%;
    }
}

/* The numbered step rail's left-alignment now lives with the StepWizard component itself,
   in SharedUI/wwwroot/css/site.css keyed to .exa-step-wizard. It was here, keyed to
   .marketing-plan-steps, which meant the next page to adopt the wizard rendered centred. */