/* =========================================================
   0) TOKENS & GLOBALS
   ========================================================= */
:root {
    /* Brand */
    --jd-brand: #FF7043; /* primary */
    --jd-brand-soft: #fff3e0; /* light brand tint */
    /* Layout */
    --jd-drawer-bg: #f6f6f6;
    /* Editor */
    --editor-radius: 8px;

    --jd-hover: #fff3e0;
    --jd-hover-border: rgba(0,0,0,0.12);
    --jd-tooltip-bg: #E0F7FA; /* light cyan (muted) */
    --jd-tooltip-text: #1f1f1f;
    --jd-tooltip-border: rgba(0,0,0,0.12);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Small helpers */
.mr-1 {
    margin-right: .25rem;
}

.text-strong {
    font-weight: 800 !important;
    letter-spacing: .2px;
}

.text-brand {
    color: var(--jd-brand) !important;
}

.text-brand-weak {
    color: color-mix(in srgb, var(--jd-brand) 70%, #0000) !important;
}

.text-brand-strong {
    color: color-mix(in srgb, var(--jd-brand) 100%, #000) !important;
}

.bg-muted {
    background: #f7f7f7;
}


/* =========================================================
   1) PAGE SHELL (layout containers)
   ========================================================= */
.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}


/* =========================================================
   2) TOP NAV / HEADER
   ========================================================= */
.top-nav {
    background: var(--jd-brand);
    color: #fff;
    padding: .5rem 1.5rem;
    position: relative;
}

    /* Center everything inside the top bar, including MudGrid rows/items */
    .top-nav .mud-grid {
        align-items: center !important;
    }



.logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 70px;
}

.top-banner-text {
    color: var(--jd-contrast);
    font-size: 1.6rem;
    margin-left: 3rem;
    font-weight: 700;
    align-self: center;
}


/* Header links – identical weight/hover as footer links */
.jd-menu-link,
.jd-menu-link:visited,
.jd-menu-link:active {
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700 !important;
    padding: 5px;
    line-height: 1;
    border-radius: 6px;
}


    .jd-menu-link:hover,
    .jd-menu-link.active,
    .jd-menu-link:focus {
        background: #fff;
        color: var(--jd-brand) !important;
        transition: background-color .2s, color .2s;
    }



/* --- Shared numbers so it's easy to tune once --- */
:root {
    --nav-pill-h: 30px; /* set to 28–30px to match what you see on MudLink */
    --nav-pill-px: 10px;
    --nav-pill-radius: 8px;
}

/* NavLink in the header */
.jd-nav-link,
.jd-nav-link:visited,
.jd-nav-link:active {
    display: inline-flex; /* match MudLink */
    align-items: center; /* center text vertically */
    height: var(--nav-pill-h); /* give it the same height as the MudLink pill */
    padding: 0 var(--nav-pill-px); /* horizontal space only */
    border-radius: var(--nav-pill-radius);
    border: 1px solid transparent; /* avoid jump when active adds a border */
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700 !important;
    line-height: 1; /* let height control the box, not text line-height */
    vertical-align: middle;
    transition: background-color .2s, color .2s, border-color .2s;
}

    /* Hover + current route (active) look exactly like your MudLink pill */
    .jd-nav-link:hover,
    .jd-nav-link:focus,
    .jd-nav-link.active {
        background: #fff;
        color: var(--jd-brand) !important;
        border-color: var(--jd-brand);
    }


/* Country pill next to links */
.country-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    margin-right: 50px;
}

    .country-pill .mud-icon-root {
        width: 16px !important;
        height: 16px !important;
        font-size: 18px !important;
        opacity: .95;
    }


/* Account trigger (avatar button) */
.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 9999px;
    color: #fff !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    .account-trigger .mud-avatar-content {
        color: inherit !important;
    }

    .account-trigger:hover {
        background: var(--jd-brand-soft) !important;
        border-color: var(--jd-brand);
        color: var(--jd-brand) !important;
    }

/* Account popover placement (below avatar) */
.account-popover {
    margin-top: 60px;
    margin-right: 0;
}

/* Large avatar used inside the card */
.account-avatar-lg {
    width: 56px;
    height: 56px;
    font-weight: 800;
}

/* Header drawer toggle (keeps the light gutter feel) */
.drawer-toggle {
    margin: 4px;
    background: var(--jd-drawer-bg);
    border-radius: 8px;
}


/* =========================
   Account menu (popover + card)
   ===========https://localhost:7015/users============== */

/* Popover offset under the avatar */
.account-popover {
    margin-top: 60px;
    margin-right: 0;
}

/* The card container */
.account-card {
    min-width: 300px;
    max-width: 360px;
    border-radius: 12px;
    box-shadow: none;
    border: 0;
    background: #fff; /* keep the content area crisp */
}

/* Brand mark in header */
.account-logo {
    height: 42px;
    object-fit: contain;
    display: block;
}

/* Large avatar in the identity row */
.account-avatar-lg {
    width: 56px;
    height: 56px;
    font-weight: 800;
}



/* =========================================================
   3) LEFT DRAWER / NAV MENU
   ========================================================= */
.jd-drawer-container {
    background: var(--jd-drawer-bg);
}

/* Paint the drawer and remove shadows */
.jd-drawer, .jd-drawer .mud-drawer-paper {
    background: var(--jd-drawer-bg) !important;
    box-shadow: none !important;
    padding: 6px 0 0 6px;
    display: flex;
    flex-direction: column;
}

    /* Make the MudDrawer’s inner content a full-height flex column */
    .jd-drawer .mud-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

/* Push the bottom block to the bottom of the drawer */
.jd-nav-bottom {
    margin-top: auto;
    padding: .5rem; /* optional: match your drawer padding */
}

/* (Optional) ensure drawer itself stretches in its container */
.jd-drawer {
    height: 100%;
}

/* clamp long titles to 2 lines */
.jd-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Title grows, can wrap; keeps badge on the right */
.jd-job-link {
    flex: 1 1 auto;
    min-width: 0;
}



/* =========================================================
   4) FOOTER
   ========================================================= */
.jd-footer {
    background: var(--jd-brand);
    color: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
}

.jd-footer__container {
    padding: 12px clamp(24px, 6vw, 64px);
}

.jd-footer__copy {
    font-size: .875rem;
    font-weight: 700 !important;
    line-height: 1.1;
    color: #fff;
}

/* Footer links (and hover) */
.jd-footer a,
.jd-footer__link,
.jd-footer__link:visited,
.jd-footer__link:active {
    color: #fff !important;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700;
    padding: 5px;
}

    .jd-footer__link:hover, .jd-footer__link:focus {
        background: #fff;
        color: var(--jd-brand) !important;
        border-radius: 6px;
        transition: background-color .2s, color .2s;
    }


/* =========================================================
   5) BUTTONS (shared)
   ========================================================= */
.jd-btn, .jd-btn.mud-button-root {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    line-height: 1 !important;
    background-color: var(--jd-brand);
    color: #fff;
    border-radius: 6px;
    border: 1px solid #f58025;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    transition: background-color .2s, color .2s;
    text-transform: none !important;
}

    .jd-btn .mud-icon-root {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .jd-btn.jd-btn-save {
        background: var(--jd-brand);
        color: #fff;
        white-space: nowrap;
    }

        .jd-btn.jd-btn-save:hover {
            background: var(--jd-hover);
            color: var(--jd-brand);
            box-shadow: 0 2px 6px rgba(255,112,67,.35);
        }

    .jd-btn.jd-btn-discard {
        background: transparent;
        color: var(--jd-brand);
        border: 1px solid var(--jd-brand);
    }

        .jd-btn.jd-btn-discard:hover {
            background: var(--jd-hover);
            color: var(--jd-brand);
        }

    .jd-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
        background: #f5f5f5 !important;
        color: #999 !important;
        border-color: #ddd !important;
    }


.refresh-btn {
    color: #FF7043;
    transition: background-color 0.2s, color 0.2s;
}

    .refresh-btn:hover {
        background-color: #fff3e0; /* soft orange background */
        color: #FF7043;
        border-radius: 4px;
    }
/* base style for the icon button */
button.refresh-btn.mud-button-root.mud-icon-button {
    color: #FF7043;
    border-radius: 6px !important; /* override Mud's 50% circle */
    transition: background-color .15s ease, color .15s ease;
}

    /* hover / focus */
    button.refresh-btn.mud-button-root.mud-icon-button:hover,
    button.refresh-btn.mud-button-root.mud-icon-button:focus-visible {
        background-color: #fff3e0 !important; /* the light orange you want */
        color: #FF7043;
    }



/* Big CTA used in pricing cards */
.start-trial-btn,
.mud-button-root.start-trial-btn {
    background: var(--jd-brand);
    color: #fff;
    height: 44px;
    width: 100%;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    border-radius: 6px;
    border: none;
    box-shadow: none;
    transition: background-color .2s, box-shadow .2s, color .2s;
    text-transform: none !important;
}

    .start-trial-btn:hover, .mud-button-root.start-trial-btn:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }

/* Small toggle pair in pricing */
.term-switch-btn.mud-button-root {
    text-transform: none !important;
    border-radius: 6px;
    border-color: var(--jd-brand);
    color: var(--jd-brand);
    box-shadow: none;
    transition: background-color .2s, box-shadow .2s, color .2s, border-color .2s;
}

    .term-switch-btn.mud-button-root:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        border-color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }

.term-switch-btn--active.mud-button-root {
    background: var(--jd-brand);
    color: #fff;
    border: none;
}

    .term-switch-btn--active.mud-button-root:hover {
        background: var(--jd-brand-soft);
        color: #d95e00;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }


/* =========================================================
   6) TABLES / LISTS / HOVER
   ========================================================= */
.custom-hover-table.mud-table-row:hover,
.custom-hover-table.selected {
    background: var(--jd-brand-soft) !important;
}

.no-hover-list .mud-list-item:hover,
.no-hover-list .mud-list-item:focus,
.no-hover-list .mud-selected-item {
    background-color: transparent !important;
    box-shadow: none !important;
}

.no-hover-list .mud-list-item {
    cursor: default;
}


/* =========================================================
   7) BRAND HELPERS & LINKS
   ========================================================= */
.brand-primary {
    --mud-palette-primary: var(--jd-brand);
}

.brand-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.brand-link {
    color: inherit !important;
    text-decoration: none !important;
}

    .brand-link:hover {
        text-decoration: underline !important;
        color: var(--jd-brand) !important;
    }

.brand-link-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

    .brand-link-strong:hover {
        text-decoration: underline !important;
    }


a.brand-link-strong,
a.brand-link-strong:link,
a.brand-link-strong:visited,
.jd-nudge__text a.brand-link-strong {
    color: var(--jd-brand) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

    a.brand-link-strong:hover,
    a.brand-link-strong:focus {
        color: var(--jd-brand) !important;
        text-decoration: underline !important;
    }

.plan-accent {
    color: var(--jd-brand);
    font-weight: 600;
}

.help-breadcrumbs a,
.help-breadcrumbs .mud-link-root {
    color: inherit;
    text-decoration: none;
}

    .help-breadcrumbs a:hover,
    .help-breadcrumbs .mud-link-root:hover {
        text-decoration: underline;
        color: var(--jd-brand);
    }

/* Horizontal divider */
.mud-divider.brand {
    height: 1px; /* a touch thicker */
    background-color: var(--jd-brand) !important;
    border: 0 !important; /* ensure color comes from background */
    opacity: 1 !important; /* cancel Mud’s “light” look */
}

/* (optional) vertical divider support */
.mud-divider-vertical.brand {
    width: 2px;
    background-color: var(--jd-brand) !important;
    opacity: 1 !important;
}


/* optional: align icon+link nicely */
.menu-line {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}




/* Make MudTable's built-in loader use brand color on all states */
.mud-table .mud-progress-linear {
    height: 1px;
    background: transparent;
}

    /* Bars inside the loader */
    .mud-table .mud-progress-linear .mud-progress-linear-bar,
    .mud-table .mud-progress-linear .mud-progress-linear-bar1,
    .mud-table .mud-progress-linear .mud-progress-linear-bar2 {
        background-color: var(--jd-brand) !important; /* e.g. #FF7043 */
    }

    /* Also catch Mud's color modifier classes used before .mud-table-loading toggles */
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar,
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar1,
    .mud-table .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar2 {
        background-color: var(--jd-brand) !important;
    }



/* =========================================================
   8) EDITOR (Quill) & PREVIEW
   ========================================================= */
.blazored-text-editor,
.blazored-text-editor .ql-toolbar,
.blazored-text-editor .ql-container,
.blazored-text-editor .ql-tooltip,
.blazored-text-editor .ql-picker-options {
    position: relative;
    z-index: 0 !important;
}

    .blazored-text-editor .ql-toolbar.ql-snow,
    .blazored-text-editor .ql-container.ql-snow {
        border: 0 !important;
        box-shadow: none !important;
    }

.jd-editor.ql-toolbar {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-bottom: 0;
    border-top-left-radius: var(--editor-radius);
    border-top-right-radius: var(--editor-radius);
}

.jd-editor.ql-container {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-top: 0;
    border-bottom-left-radius: var(--editor-radius);
    border-bottom-right-radius: var(--editor-radius);
    overflow: hidden;
}

    .jd-editor.ql-container .ql-editor {
        min-height: 420px;
        outline: none;
        padding-bottom: 0 !important;
    }

        .jd-editor.ql-container .ql-editor > *:last-child {
            margin-bottom: 0 !important;
        }

.jd-preview {
    isolation: isolate;
    contain: layout paint style;
    overflow: auto;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--mud-palette-surface);
}

    .jd-preview * {
        pointer-events: none !important;
    }

    .jd-preview [style*="position:fixed"], .jd-preview [style*="position:absolute"] {
        position: static !important;
    }

    .jd-preview img {
        max-width: 100%;
        height: auto;
    }

.jd-bottom-spacer {
    height: 10px;
}

.jd-page {
    box-shadow: none !important;
}


/* =========================================================
   9) SNACKBARS (on-brand, readable)
   ========================================================= */
.mud-snackbar.mud-snackbar-success {
    background: #eaf6ee !important;
    color: #1e4620 !important;
    border: 1px solid #cfe9dc !important;
}

    .mud-snackbar.mud-snackbar-success .mud-snackbar-icon {
        color: #2e7d32 !important;
    }

.mud-snackbar.mud-snackbar-info {
    background: #e8f4fd !important;
    color: #0b3d5c !important;
    border: 1px solid #cfe8ff !important;
}

    .mud-snackbar.mud-snackbar-info .mud-snackbar-icon {
        color: #1976d2 !important;
    }

.mud-snackbar.mud-snackbar-warning {
    background: #fff4e5 !important;
    color: #7a3e00 !important;
    border: 1px solid #ffe0b2 !important;
}

    .mud-snackbar.mud-snackbar-warning .mud-snackbar-icon {
        color: #ed6c02 !important;
    }

.mud-snackbar.mud-snackbar-error {
    background: #fdecea !important;
    color: #5f2120 !important;
    border: 1px solid #f5c6cb !important;
}

    .mud-snackbar.mud-snackbar-error .mud-snackbar-icon {
        color: #d32f2f !important;
    }

.mud-snackbar.mud-snackbar-normal {
    background: #f5f5f7 !important;
    color: #222 !important;
    border: 1px solid #e5e5ea !important;
}

    .mud-snackbar.mud-snackbar-normal .mud-snackbar-icon {
        color: #6b6b6b !important;
    }


/* =========================================================
   10) PRICING CARDS / PLANS
   ========================================================= */
.plan-grid .mud-grid-item {
    display: flex;
    color: var(--jd-brand);
}

.plan-item {
    width: 280px;
}

.mud-card.plan-card, .plan-card.mud-paper {
    border-radius: 14px !important;
}

.plan-features {
    margin-top: 1rem;
}

.plan-header {
    text-align: center;
    margin-bottom: 8px;
}

.plan-cta {
    text-align: center;
    margin: 6px 0 4px;
}

.plan-title {
    color: var(--jd-brand) !important;
}

.plan-title-row {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
}

    .plan-title-row .plan-title {
        white-space: nowrap;
    }

.term-chip {
    background: var(--jd-brand) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0 .5rem;
    height: 22px;
    line-height: 22px;
    border-radius: 9999px;
    text-transform: capitalize;
}
/* Misc plan layout */
.plan-summary {
    width: 30px;
    min-width: 320px;
    border-right: 1px solid #ddd;
    padding-right: 3rem;
}

.plan-details {
    border-top: 1px solid #eee;
    padding-top: 1rem;
    font-size: 1.2rem;
}

    .plan-details .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: .5rem;
    }

    .plan-details .total {
        font-weight: 700;
        margin-top: 1rem;
    }

.plan-header {
    min-height: 120px;
}

.plan-card .mud-card-header.pb-0 {
    padding-bottom: 0 !important;
}

.plan-card .mud-card-content.pt-0 {
    padding-top: 0 !important;
}

.price-line {
    display: inline-flex;
    gap: .25rem;
    align-items: baseline;
}

    .price-line .price-currency {
        font-weight: 600;
        margin-right: 2px;
    }



.amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .amount-row.total {
        font-weight: 600;
    }


/* subtle emphasis for compact numbers (no chip) */
.usage-num {
    font-weight: 800; /* heavier bold */
    font-size: 1rem; /* slightly larger than body text */
    color: var(--jd-brand); /* give it your brand orange */
    margin-left: .35rem; /* bit more spacing from label */
    line-height: 1; /* keep tight alignment */
}

/* =========================================================
   11) BILLING / SUBSCRIPTIONS
   ========================================================= */
.billing-card {
    max-width: 760px;
}

.billing-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-label {
    width: 160px;
    min-width: 160px;
    color: var(--mud-palette-text-secondary);
}

.billing-field {
    max-width: 420px;
}

    .billing-field .mud-input-root {
        height: 36px;
    }

.subscription-card {
    background: transparent;
    box-shadow: none;
    width: 50%;
}

.subscription-table .mud-table {
    table-layout: auto;
}

.subscription-table .mud-table-container {
    overflow-x: visible;
}

.subscription-table .mud-table-cell:first-child {
    width: 50%;
}

.subscription-table .mud-table-cell:nth-child(2) {
    width: 30%;
}

.subscription-table .mud-table-cell:last-child {
    width: 20%;
}

.form-section {
    width: 300px;
    min-width: 300px;
    padding-left: 0rem;
}

/* =========================================================
   12) CHIPS / STATUS
   ========================================================= */
.status-chip {
    border-radius: 9999px;
    font-weight: 600;
    padding: 0 10px;
    line-height: 22px;
}

    .status-chip.chip--active {
        background: #E8F5E9 !important;
        color: #1B5E20 !important;
        border: 1px solid #C8E6C9 !important;
    }

    .status-chip.chip--inactive {
        background: #F5F5F5 !important;
        color: #616161 !important;
        border: 1px solid #E0E0E0 !important;
    }

.mud-chip.chip--active {
    background: #E8F5E9;
    border-color: #C8E6C9;
    color: #1B5E20;
}

.mud-chip.chip--trial {
    background: #E3F2FD;
    border-color: #BBDEFB;
    color: #0D47A1;
}

.mud-chip.chip--warning {
    background: #FFF8E1;
    border-color: #FFE0B2;
    color: #E65100;
}

.mud-chip.chip--error {
    background: #FFEBEE;
    border-color: #FFCDD2;
    color: #B71C1C;
}

.mud-chip.chip--default {
    background: #F5F5F5;
    border-color: #E0E0E0;
    color: #424242;
}

.chip {
    font-size: .75rem;
    height: 22px;
    line-height: 22px;
    padding: 0 8px;
}


/* =========================================================
   13) HELP PAGES
   ========================================================= */
.help-static-list .mud-list-item {
    cursor: default !important;
}

    .help-static-list .mud-list-item:hover {
        background-color: transparent !important;
    }

    .help-static-list .mud-list-item button,
    .help-static-list .mud-list-item a {
        pointer-events: none !important;
    }
/* width knobs */
.help-page {
    --narrow-width: 640px;
    --key-col-width: 240px;
}

    .help-page .content-narrow {
        width: 100%;
        max-width: var(--narrow-width);
        margin: 0 auto;
    }

    .help-page .details-table {
        width: 100%;
    }

    .help-page .key-col {
        width: var(--key-col-width);
    }

    .help-page .key-cell {
        white-space: nowrap;
        font-weight: 600;
    }

@media (max-width:640px) {
    .help-page {
        --narrow-width: 100%;
        --key-col-width: 42%;
    }
}


/* =========================================================
   14) MISC UI BITS (icons, pills, actions, sections)
   ========================================================= */
.edit-icon {
    font-size: 18px;
    color: var(--jd-brand);
    cursor: pointer;
    transition: transform .1s;
}

    .edit-icon:hover {
        transform: scale(1.2);
    }

/* brand-colored underline on hover for job titles */
.mud-link.jd-job-link:hover {
    text-decoration-color: var(--jd-brand) !important;  your brand color 
    text-underline-offset: 2px;  nicer spacing 
    text-decoration-thickness: 2px;  optional, bolder 
}

/* fallback if text-decoration-color isn't applied in some browsers */
.mud-link.jd-job-link {
    border-bottom: 2px solid transparent;
}

    .mud-link.jd-job-link:hover {
        text-decoration: none;  hide default underline 
        border-bottom-color: var(--jd-brand);
    }


.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--jd-brand);
    font-weight: 600;
    line-height: 1;
    user-select: none;
    cursor: default;
}

    .pill .mud-icon-root {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        height: 1em;
        width: 1em;
    }

    .pill .pill-icon {
        transform: translateY(-.5px);
    }

.jd-hint__icon {
    color: #fff;
    background: var(--jd-brand);
    border-radius: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.jd-action {
    width: 220px;
    justify-content: center;
}

@media (max-width:600px) {
    .jd-action {
        width: 100%;
    }
}

/* Brand lockup (© JD Align™) */
.jd-brand-mark {
    color: var(--jd-brand) !important;
    font-weight: 700;
}

    .jd-brand-mark sup {
        position: relative;
        top: -.45em;
        font-size: .6em;
        margin-left: .15em;
    }

/* About page */
.about-hero {
    background: linear-gradient(180deg, #fff7f2 0%, #fff 80%);
    border-radius: 12px;
}

    .about-hero .text-muted {
        color: #7a7a7a;
    }

.about-hero-card {
    border-radius: 14px;
}

.section-alt {
    background: #fafafa;
    border-radius: 12px;
}

.brand-icon {
    color: var(--jd-brand);
    margin-right: .4rem;
    vertical-align: -2px;
}

.brand-icon-sm {
    color: var(--jd-brand);
    margin-right: .4rem;
    vertical-align: -2px;
}

/* Numbered step chip */
.step-chip {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: .5rem;
}

/* File upload overlay */
.file-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
}

/* Candidate inline pairs */
.candidate-inline .pair {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    margin-right: 1.25rem;
    margin-bottom: .25rem;
}

.candidate-inline .label {
    font-weight: 600;
}

/* Upgrade cards */
.upgrade-grid__item {
    display: flex;
}

.upgrade-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.upgrade-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.upgrade-card__spacer {
    flex: 1 1 auto;
}



/* Make MudAlert use brand color (not blue),
   keep text black, and style the icon + border */
.jd-nudge {
    /* kill Mud's info-blue background/tint */
    background-color: #fff !important;
    /* full border for a clean box look */
    border: 1px solid var(--jd-brand) !important;
    border-left-width: 3px !important; /* subtle accent */
    color: #000 !important; /* body text black */
}

    .jd-nudge.mud-alert-outlined {
        /* ensure outlined variant doesn't bring its own tint */
        background-color: transparent !important;
    }

    /* Icon in brand */
    .jd-nudge .mud-alert-icon,
    .jd-nudge__icon {
        color: var(--jd-brand) !important;
    }

    /* Text stays black (Mud can inject severity color) */
    .jd-nudge .mud-alert-message,
    .jd-nudge__text {
        color: #000 !important;
    }

    /* Links: inherit (black), brand on hover — matches your .brand-link */
    .jd-nudge a {
        color: inherit !important;
        text-decoration: none !important;
    }

        .jd-nudge a:hover {
            color: var(--jd-brand) !important;
            text-decoration: underline !important;
        }
    .jd-nudge .mud-alert-icon,
    .jd-nudge__icon {
        color: var(--jd-brand) !important;
    }

    .jd-nudge .mud-alert-message,
    .jd-nudge__text {
        color: #000 !important;
    }





/* Promo line sits at bottom-right of the orange banner */
.signup-freebar {
    position: absolute;
    right: 16px; /* tuck under the right-side menu */
    bottom: 6px; /* close to the bottom of the banner */
    pointer-events: none; /* never blocks clicks on nav items */
}

/* Light green text, slightly emphasized */
.signup-freebar__text {
    color: white; /* light green; tweak if you prefer */
    font-weight: 600;
    line-height: 1.1;
}

/* Hide on small screens to avoid overlap */
@media (max-width: 768px) {
    .signup-freebar {
        display: none;
    }
}


/* Thank-you note styling */
.brand-note {
    border-color: var(--jd-brand) !important;
}

    .brand-note .mud-alert-icon {
        color: var(--jd-brand) !important;
    }

    .brand-note .mud-alert-message {
        color: #000; /* keep body text black for clarity */
    }
    .brand-note .mud-alert-icon {
        color: var(--jd-brand) !important;
    }

/* brand color for the leading phrase */
.brand-accent {
    color: var(--jd-brand) !important;
}


.env-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 1.0rem; /* ⬅ bigger */
    font-weight: 600;
    letter-spacing: 0.04em;

    background-color: rgba(255, 255, 255, 0.2);
    color: greenyellow;
    line-height: 1.2;
    white-space: nowrap;
}






/* =========================
   Toggle group container
   ========================= */
.jd-toggle-btn-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================
   Toggle buttons (base)
   ========================= */
.jd-toggle-btn.mud-toggle-item.mud-button-root {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    /* kill Mud’s default button height/padding */
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid var(--jd-brand) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    background-color: transparent !important;
    color: var(--jd-brand) !important;
    white-space: nowrap;
}

    /* Inner label: same vertical padding as jd-btn, a bit more on right */
    .jd-toggle-btn.mud-toggle-item.mud-button-root .mud-button-label {
        padding: 6px 18px !important; /* 6px top/bottom, 18px left/right */
        line-height: 1 !important;
        text-transform: none !important;
    }

    /* =========================
   Selected state
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root.mud-toggle-item-selected {
        background-color: var(--jd-brand) !important;
        color: #fff !important;
        border-color: var(--jd-brand) !important;
    }

    /* =========================
   Hover state
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root:hover {
        background-color: var(--jd-brand-soft) !important;
        color: var(--jd-brand) !important;
        border-color: var(--jd-brand) !important;
    }

    /* keep hover on selected the same as your jd-btn-save:hover */
    .jd-toggle-btn.mud-toggle-item.mud-button-root.mud-toggle-item-selected:hover {
        background-color: var(--jd-brand-soft) !important;
        color: var(--jd-brand) !important;
    }

    /* =========================
   Focus ring (no blue outline)
   ========================= */
    .jd-toggle-btn.mud-toggle-item.mud-button-root:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(255,112,67,.35) !important;
    }
/* Extra spacing on the right of the text */
.jd-toggle-btn .mud-toggle-item-content {
    padding-right: 10px !important; /* adjust 8–12px to taste */
}

/* Make the tick icon match your normal button icon size */
.jd-toggle-btn .mud-icon-root.mud-toggle-item-check-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important; /* small gap between tick and text */
}


/* Brand-soft tooltips (scoped via MudTooltip Class=) */
.mud-tooltip {
    background-color: var(--jd-tooltip-bg) !important;
    color: var(--jd-tooltip-text) !important;
    border: 1px solid var(--jd-tooltip-border) !important;
}

.mud-tooltip-arrow::before,
.mud-tooltip-arrow:before {
    background-color: var(--jd-tooltip-bg) !important;
}