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

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

.btn-primary {
    color: #007bff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.mud-popover .mud-list-item {
    font-size: 12px !important;
    line-height: 1.2rem; /* Optional: adjust spacing */
}

.table-padded td,
.table-padded th {
    padding: 1px; /* adjust as needed */
}

.save-message {
    font-weight: bold;
    font-size: 18px;
}

.disabled-link {
    pointer-events: none;
    color: gray;
    cursor: not-allowed;
    text-decoration: none;
}
.unread-message {
    font-weight: bold;
}

.read-message {
    font-weight: normal;
}
.email-selector-overlay {
    position: absolute;
    top: 40px; /* Adjust as needed */
    left: 55px;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}
.hide-headers .mud-table thead {
    display: none;
}
.mud-table thead th {
    font-weight: bold !important;
}
.inline-file-input {
    display: inline-block;
    width: auto;
    padding: 0;
    margin-left: 5px;
    vertical-align: middle;
}
.overlay-container {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    min-height: 600px;
    box-sizing: border-box;
    
}
.compare-selector-overlay {
    position: absolute;
    top: 40px; /* Adjust as needed */
    left: 0px;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-height: 800px;
    overflow-y: auto;
}
.grid-wrapper {
    display: inline-block;
}
.responsive-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}
.property-view-wrapper {
    position: relative;
    z-index: 1;
}
.container {
    position: relative;
    z-index: 2;
}
.vendor-tile {
    width: 240px;
}

/* Grid layout with footer row spanning full width */
.page {
    display: grid;
    grid-template-columns: 250px minmax(0,1fr); /* sidebar + content */
    grid-template-rows: 1fr auto; /* content + footer */
    min-height: 100dvh;
}

.sidebar {
    grid-column: 1;
    grid-row: 1 / span 2;
}

main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.app-footer {
    grid-column: 1 / -1;
    grid-row: 2;
    background: #261354;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* Compact round social buttons */
.social-btn .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1em;
    height: 1em;
}

.social-btn .bi {
    display: block;
    line-height: 1;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    .page {
        grid-template-columns: 1fr;
    }

    .sidebar {
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    td.industry-cell {
        text-align: left !important;
        justify-content: flex-start !important;
    }

        td.industry-cell .mud-data-grid-cell,
        td.industry-cell .mud-table-cell {
            justify-content: flex-start !important;
            text-align: left !important;
        }
}

.industry-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* site.css (after MudBlazor) or YourComponent.razor.css with ::deep where needed */
/* Selected value (the closed select) */
/* Closed select (the visible input) */
.vendor-select-sm .mud-input-input,
.vendor-select-sm .mud-input-slot {
    font-size: 0.875rem; /* 14px-ish */
    line-height: 1.2;
}

/* Open dropdown menu (rendered in a portal/popover) */
.vendor-popover-sm .mud-list-item,
.vendor-popover-sm .mud-list-item-text,
.vendor-popover-sm .mud-list-item-text-primary {
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Optional: make it even smaller on phones */
@media (max-width: 600px) {
    .vendor-select-sm .mud-input-input,
    .vendor-popover-sm .mud-list-item,
    .vendor-popover-sm .mud-list-item-text,
    .vendor-popover-sm .mud-list-item-text-primary {
        font-size: 0.8125rem; /* 13px */
    }
}

/* phones */
@media (max-width: 600px) {

    /* MudDataGrid mobile label element (newer versions) */
    tr.category-row .mud-data-grid-cell-label {
        display: none !important;
    }

    /* Fallback for versions that use data-label/::before on <td> */
    tr.category-row td::before {
        content: none !important;
        display: none !important;
    }
}

.thumb-link {
    display: inline-flex;
    margin-right: .5rem;
}

.thumb-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.1);
}

.upload-btn {
    min-width: 110px;
}

.dueat-picker input {
    font-size: 0.75rem; /* or whatever size you like */
    padding-left: 4px;
    padding-right: 4px;
}

/* replace with your actual purple hex if different */
:root {
    --real-purple: #261354; /* example */
}

.task-grid-header-purple .mud-table-head {
    background-color: var(--real-purple);
}

.task-grid-header-purple .mud-table-head .mud-table-cell {
    background-color: var(--real-purple); /* ensures full cell fills */
    color: #ffffff;
    font-weight: 600;
}

/* optional: make header row a bit tighter */
.task-grid-header-purple .mud-table-head .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Bigger / bolder labels inside the filter row */
.task-filter-row .mud-input-control .mud-input-label {
    font-size: 1rem !important; /* adjust size to taste */
    font-weight: 600;
}

/* Optional: tweak animated label position/scale if needed */
.task-filter-row .mud-input-control .mud-input-label.mud-input-label-animated {
    transform: translateY(-4px) scale(1) !important;
}


:root {
    --real-purple2: #4b4bff; /* or your existing purple */
}

.filter-btn {
    background-color: var(--real-purple2) !important;
    color: #ffffff !important;
    font-size: 1rem;
    padding: 4px 10px;
    min-width: 0; /* no huge min-width */
    border-radius: 999px; /* more “pill” like, like your image */
}

    /* remove uppercase if you don’t want it */
    .filter-btn .mud-button-label {
        text-transform: none;
    }


/* Only affect this grid */
:root {
    --stage-contract: #90CAF9; /* Soft Blue */
    --stage-due-diligence: #FFF9C4; /* Pale Yellow */
    --stage-financing: #80DEEA; /* Soft Aqua */
    --stage-insurance: #FFCC80; /* Soft Orange */
    --stage-title-escrow: #CE93D8; /* Soft Lavender */
    --stage-closing: #A5D6A7; /* Soft Green */
    --stage-post-closing: #CFD8DC; /* Light Cool Gray */
    /* optional: darker border versions */
    --stage-contract-dark: #1E88E5;
    --stage-due-diligence-dark: #FBC02D;
    --stage-financing-dark: #00ACC1;
    --stage-insurance-dark: #FB8C00;
    --stage-title-escrow-dark: #8E24AA;
    --stage-closing-dark: #43A047;
    --stage-post-closing-dark: #90A4AE;
}

.stage-key {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.85rem;
    align-items: center;
    vertical-align : central;
    padding: 6px 0;
}

/* Little circles */
.stage-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

    /* assign colors */
.stage-swatch.stage-contract {
    background-color: var(--stage-contract);
}

.stage-swatch.stage-due-diligence {
    background-color: var(--stage-due-diligence);
}

.stage-swatch.stage-financing {
    background-color: var(--stage-financing);
}

.stage-swatch.stage-insurance {
    background-color: var(--stage-insurance);
}

.stage-swatch.stage-title-escrow {
    background-color: var(--stage-title-escrow);
}

.stage-swatch.stage-closing {
    background-color: var(--stage-closing);
}

.stage-swatch.stage-post-closing {
    background-color: var(--stage-post-closing);
}

.task-grid-header-purple .stage-contract {
    background-color: var(--stage-contract);
}

.task-grid-header-purple .stage-due-diligence {
    background-color: var(--stage-due-diligence);
}

.task-grid-header-purple .stage-financing {
    background-color: var(--stage-financing);
}

.task-grid-header-purple .stage-insurance {
    background-color: var(--stage-insurance);
}

.task-grid-header-purple .stage-title-escrow {
    background-color: var(--stage-title-escrow);
}

.task-grid-header-purple .stage-closing {
    background-color: var(--stage-closing);
}

.task-grid-header-purple .stage-post-closing {
    background-color: var(--stage-post-closing);
}

/* readable text no matter background */
.task-grid-header-purple tr[class^="stage-"] td {
    color: #111;
    font-weight: 600;
}



.stage-key-box {
    border: 2px solid var(--real-purple);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Each legend item */
.stage-key-box > div {
    display: flex;
    align-items: center; /* vertically centers text with circle */
    gap: 6px; /* space between circle and text */
    font-size: 0.85rem;
}

.email-row-label {
    flex: 0 0 90px; /* fixed width for label column */
    max-width: 90px;
}

.email-row-input {
    flex: 1 1 auto; /* fill the rest */
}

.email-label {
    width: 120px; /* adjust to your taste: 70–100px works well */
    text-align: right;
}

.debug * {
    border: 1px solid red !important;
}

.label-col {
    width: 500px; /* adjust until perfect */
    text-align: right;
}

/* Make MudSelect match MudDataGrid text */
.grid-select,
.grid-select .mud-input-root,
.grid-select .mud-input-control,
.grid-select .mud-input-slot,
.grid-select input,
.grid-select .mud-select-input {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.grid-action-btn {
    background-color: #E8EEF5; /* soft slate */
    color: #1E3A5F; /* header color */
    border-color: #B5C6DA;
    font-weight: 600;
}

/*.stage-contract,
.task-grid-header-purple .stage-contract td {
    color: #fff !important;
}

.stage-financing,
.task-grid-header-purple .stage-financing td {
    color: #fff !important;
}

.stage-title-escrow,
.task-grid-header-purple .stage-title-escrow td {
    color: #fff !important;
}*/

/* leave green/yellow/orange/gray black text unless needed */

/* Normalize all text inside this grid */
.task-grid-header-purple {
    font-size: 0.875rem;
}

/* Inputs, selects, numeric fields */
.task-grid-header-purple .mud-input,
.task-grid-header-purple .mud-input-control,
.task-grid-header-purple .mud-select,
.task-grid-header-purple .mud-numeric-field {
    font-size: 0.875rem;
}

/* Buttons (Upload / Replace) */
.task-grid-header-purple .mud-button {
    font-size: 0.875rem;
    text-transform: none; /* optional: removes ALL CAPS look */
}

/* Checkboxes */
.task-grid-header-purple .mud-checkbox {
    font-size: 0.875rem;
}

/* Plain text cells */
.task-grid-header-purple .mud-typography {
    font-size: 0.875rem;
}

.task-grid-header-purple .upload-btn {
    text-transform: none;
}

.task-grid-header-purple .mud-input input {
    line-height: 1.4;
}

/* Right-align currency values */
.task-grid-header-purple .cost-input input {
    text-align: right;
}

.photo-flex {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.photo-flex .mud-input-control,
.photo-flex .mud-file-upload {
    display: inline-flex !important;
    align-items: center;
}

.photo-flex .mud-input-control {
    margin: 0 !important;
}

.cost-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cost-flex .mud-input-control {
    margin: 0 !important;
    width: 100%;
}

.cost-input {
    max-width: 110px; /* keeps them compact */
}

.notes-field textarea {
    resize: none;           /* prevent manual resize fighting auto-grow */
    line-height: 1.4;
}

.mud-table-cell {
    white-space: normal !important;
}

.datetime-cell {
    flex-wrap: nowrap;
}

.date-input,
.time-input {
    max-width: 130px;
}

.mud-picker {
    min-width: 0; /* critical inside grid cells */
}

/* Lock Date/Time columns */
.datetime-col {
    width: 300px;
    max-width: 300px;
    white-space: nowrap;
}

/* Inline layout for date/time */
.datetime-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Prevent Mud inputs from forcing width */
.datetime-inline .mud-input-control {
    width: auto !important;
    min-width: 0 !important;
}

/* Date vs time sizing */
.datetime-inline .mud-date-picker {
    max-width: 160px;
}

.datetime-inline .mud-time-picker {
    max-width: 115px;
}

/* Notes absorbs remaining width */
.notes-col {
    flex-grow: 1;
    width: auto !important;
}

/* Let Notes grow vertically */
.notes-col .mud-input {
    min-height: 48px;
}

/* tighter checkbox rows + smaller label text */
.vendor-contact-options .mud-checkbox {
    margin-top: -4px;
    margin-bottom: -4px;
}

.vendor-contact-options .mud-checkbox .mud-label {
    font-size: 0.9rem; /* slightly smaller */
    line-height: 1.1;
}

@media (min-width: 768px) {
    .w-md-auto .mud-button-root {
        width: auto !important;
    }
}

/* Rounded "pill" look */
.pill-btn .mud-button-root {
    border-radius: 9999px !important;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Desktop: don't stretch across the row */
@media (min-width: 768px) {
    .pill-btn .mud-button-root {
        width: auto !important;
    }
}

/* Mobile: full width buttons (nice tap targets) */
@media (max-width: 767.98px) {
    .pill-btn {
        width: 100%;
    }

        .pill-btn .mud-button-root {
            width: 100% !important;
        }
}

.task-grid-header-purple .mud-table-row {
    cursor: pointer;
}

/* Header (replaces Buyer Information styling everywhere) */
/* =========================
   ENTITY HEADER
   ========================= */

.entity-shell-header {
    background-color: #261354;
    color: #fff;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}

.entity-shell-header-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.entity-shell-header-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    opacity: 0.95;
    line-height: 1.2;
    margin-top: 0.2rem;
}

.entity-shell-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* =========================
   CUSTOM ENTITY TAB SHELL
   ========================= */

.entity-tabs-shell {
    border: none;
    border-radius: 0 0 8px 8px;
    overflow: visible;
    margin-bottom: 1rem;
    box-shadow: none;
}

.entity-tabs-shell > .entity-tabs-content {
border: none;
}

.entity-tabs-shell .entity-tab-panel {
display: none;
}

.entity-tabs-shell .entity-tab-panel.active {
    display: block;
}


/* Desktop tab strip */
.entity-tabs-shell .nav-tabs {
    border-bottom: 1px solid #d6c9ff;
    margin-bottom: 1rem;
}

.entity-tabs-shell .nav-tabs .nav-link {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.8rem 1.3rem;
    color: #3c2a8c;
    background-color: #f4f1ff;
    border: 1px solid #d6c9ff;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
}

.entity-tabs-shell .nav-tabs .nav-link:hover {
    background-color: #ece6ff;
    color: #2f216d;
}

.entity-tabs-shell .nav-tabs .nav-link.active {
    background-color: #6f42c1;
    color: #fff;
    border-color: #6f42c1 #6f42c1 transparent;
}

/* Mobile selector */
.entity-mobile-selector {
    background: linear-gradient(135deg, #f3efff, #ffffff);
    border: 1px solid #d6c9ff;
    border-radius: 10px;
}

.entity-mobile-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a3ec8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entity-mobile-dropdown {
    border: 2px solid #6f42c1;
    border-radius: 10px;
    font-weight: 600;
    color: #261354;
    background-color: #fff;
}

.entity-mobile-dropdown:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}


/* =========================
   ENTITY SECTIONS
   ========================= */

.entity-section {
    border-radius: 8px;
    overflow: hidden;
}

.entity-section-header {
    background-color: #261354;
    color: #fff;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid #1b0e3d;
}

    .entity-section-header.light {
        background-color: #3a1d7a;
    }


/* =========================
   ENTITY TABLES
   ========================= */

.entity-table .mud-table-head {
    background-color: #261354;
}

.entity-table .mud-table-head th {
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid #3a1d7a;
}

.entity-table .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* =========================
   MUD TABS
   KEEP ONLY IF YOU STILL USE MudTabs ELSEWHERE
   ========================= */

.entity-tabs .mud-tabs-tabbar {
    background-color: #261354;
    padding-left: 8px;
    padding-right: 8px;
}

.entity-tabs .mud-tab {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: none;
    min-height: 50px;
    border-radius: 6px 6px 0 0;
    margin-right: 6px;
    padding-left: 10px;
    padding-right: 10px;
}

.entity-tabs .mud-tab:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.entity-tabs .mud-tab.mud-tab-active {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

.entity-tabs .mud-tabs-slider {
    background-color: #fff !important;
    height: 3px;
}

.entity-tabs .mud-tabs-panels {
    background-color: #fff;
}

@media (max-width: 576px) {
    .entity-tabs .mud-tab {
        min-width: auto;
        font-size: 0.85rem;
        padding-left: 8px;
        padding-right: 8px;
    }
}

.entity-shell-between-header-tabs {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

.vendor-rate-btn {
    min-width: 160px;
}

.vendor-rating-chip-wrap {
    align-items: center;
}

.vendor-rating-chip {
    font-size: 0.75rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .vendor-rate-btn {
        width: 100%;
    }

    .vendor-rating-chip-wrap {
        gap: 0.35rem !important;
    }
}

.broker-add-btn {
    min-height: 38px;
    white-space: nowrap;
}

.qe-action-btn {
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
}


.required-star {
    color: #dc3545;
    font-weight: 700;
    margin-left: 2px;
}


.message-3d-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}

.message-3d-header {
    background: linear-gradient(145deg, #321a6d, #261354);
    color: white;
    padding: 1rem 1.25rem;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 12px 24px rgba(38, 19, 84, 0.28);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.message-3d-subtitle {
    opacity: .85;
    font-size: .95rem;
    margin-top: .25rem;
}

.message-3d-card {
    background: linear-gradient(145deg, #ffffff, #f3f1f8);
    border: 1px solid rgba(38, 19, 84, 0.22);
    border-radius: 0 0 16px 16px;
    padding: 1.25rem;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.message-meta-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .65rem .85rem;
}

.message-label {
    text-align: right;
    font-weight: 700;
    color: #261354;
    padding-top: .55rem;
}

.message-value {
    background: #ffffff;
    border: 1px solid rgba(38, 19, 84, 0.25);
    border-radius: 10px;
    padding: .55rem .75rem;
    min-height: 42px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8);
}

.italic {
    font-style: italic;
}

.message-body-panel {
    background: #ffffff;
    border: 1px solid rgba(38, 19, 84, 0.28);
    border-radius: 14px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.08), 0 5px 14px rgba(38, 19, 84, 0.12);
    overflow: hidden;
}

.message-body-label {
    background: #f0edf7;
    color: #261354;
    font-weight: 700;
    padding: .6rem .85rem;
    border-bottom: 1px solid rgba(38, 19, 84, 0.18);
}

.message-body-content {
    min-height: 300px;
    padding: 1rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .message-meta-grid {
        grid-template-columns: 1fr;
    }

    .message-label {
        text-align: left;
        padding-top: 0;
    }
}

.message-page-shell {
    max-width: 1150px;
    margin: 0 auto;
    padding: 1rem;
}

.message-card-3d {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(38, 19, 84, 0.18);
    box-shadow: 0 18px 35px rgba(38, 19, 84, 0.18), 0 6px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
}

.message-card-header {
    background: linear-gradient(135deg, #261354 0%, #3b1d7a 65%, #4b2a91 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15);
}

.message-title {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.message-subtitle {
    margin-top: .25rem;
    font-size: .95rem;
    opacity: .9;
}

.message-card-body {
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
}

.compose-input {
    border: 1px solid rgba(38, 19, 84, 0.35);
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

    .compose-input:focus {
        border-color: #261354;
        box-shadow: 0 0 0 .2rem rgba(38, 19, 84, 0.15), inset 0 1px 3px rgba(0,0,0,0.08);
    }

.compose-body {
    min-height: 400px;
    resize: vertical;
}

.compose-action-btn {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(38, 19, 84, 0.22);
}

.broker-profile-shell {
    max-width: 1150px;
    margin: 0 auto;
}

.broker-hero-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(38, 19, 84, 0.14);
    box-shadow: 0 18px 35px rgba(38, 19, 84, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08);
}

.broker-hero-header {
    padding: 1.5rem;
    color: white;
    background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 28%), linear-gradient(135deg, #261354 0%, #3b1d7a 62%, #4b2a91 100%);
}

.broker-photo-wrap {
    width: 108px;
    height: 108px;
    border-radius: 22px;
    padding: 4px;
    background: rgba(255,255,255,.25);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    flex: 0 0 auto;
}

.broker-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    background: #f4f4f4;
}

.broker-eyebrow {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .82;
    font-weight: 700;
}

.broker-name {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
}

.broker-firm {
    display: flex;
    align-items: center;
    opacity: .92;
    font-size: .98rem;
}

.broker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
}

.broker-card-body {
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}

.broker-info-card {
    background: #ffffff;
    border: 1px solid rgba(38, 19, 84, 0.12);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 18px rgba(38, 19, 84, 0.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.info-label {
    color: #6b7280;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    margin-bottom: .35rem;
}

.info-value {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.mission-card .info-value {
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .broker-hero-header {
        padding: 1.25rem;
    }

    .broker-photo-wrap {
        width: 92px;
        height: 92px;
    }

    .broker-actions {
        width: 100%;
    }

        .broker-actions .mud-button-root {
            flex: 1 1 100%;
        }

    .broker-card-body {
        padding: 1rem;
    }
}

.agent-profile-shell {
    max-width: 1150px;
    margin: 0 auto;
}

.agent-hero-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(38, 19, 84, 0.14);
    box-shadow: 0 18px 35px rgba(38, 19, 84, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08);
}

.agent-hero-header {
    padding: 1.5rem;
    color: white;
    background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 28%), linear-gradient(135deg, #261354 0%, #3b1d7a 62%, #4b2a91 100%);
}

.agent-photo-wrap {
    width: 108px;
    height: 108px;
    border-radius: 22px;
    padding: 4px;
    background: rgba(255,255,255,.25);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    flex: 0 0 auto;
}

.agent-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    background: #f4f4f4;
}

.agent-eyebrow {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .82;
    font-weight: 700;
}

.agent-name {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
}

.agent-firm {
    display: flex;
    align-items: center;
    opacity: .92;
    font-size: .98rem;
}

.agent-actions,
.agent-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.agent-card-body {
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}

.agent-info-card {
    background: #ffffff;
    border: 1px solid rgba(38, 19, 84, 0.12);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 18px rgba(38, 19, 84, 0.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.info-label {
    color: #6b7280;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    margin-bottom: .35rem;
}

.info-value {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.mission-card .info-value {
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .agent-hero-header {
        padding: 1.25rem;
    }

    .agent-photo-wrap {
        width: 92px;
        height: 92px;
    }

    .agent-actions .mud-button-root {
        flex: 1 1 100%;
    }

    .agent-card-body {
        padding: 1rem;
    }
}

.buyer-bottom-save-bar {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid rgba(38, 19, 84, 0.12);
    background: #fbfaff;
    border-radius: 0 0 14px 14px;
}

@media (max-width: 767.98px) {
    .buyer-bottom-save-bar .mud-button-root {
        width: 100%;
    }
}

.vendor-action-btn,
.vendor-save-btn,
.vendor-approve-btn,
.vendor-rate-btn {
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    min-height: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.vendor-action-btn {
    min-width: 185px;
}

.vendor-save-btn {
    min-width: 260px;
}

.vendor-approve-btn {
    min-height: 36px;
}

.vendor-select .mud-input-control {
    border-radius: 10px;
}

.task-grid-header-purple .mud-table-head {
    background: #261354;
}

    .task-grid-header-purple .mud-table-head th {
        color: white !important;
        font-weight: 700;
    }

.vendor-rating-chip {
    font-weight: 600;
}

.compare-selector-overlay {
    z-index: 1500;
}

@media (max-width: 768px) {

    .vendor-action-btn,
    .vendor-save-btn {
        width: 100%;
    }

    .vendor-save-btn {
        margin-top: 8px;
    }
}

.vendor-toolbar {
    background: #fafafa;
    border: 1px solid #ececec;
}

.vendor-action-btn,
.vendor-save-btn,
.vendor-approve-btn,
.vendor-rate-btn {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.vendor-action-btn {
    min-width: 150px;
}

.vendor-save-btn {
    min-width: 260px;
}

.vendor-rate-btn {
    min-height: 34px;
}

.vendor-approve-btn {
    min-height: 34px;
}

.vendor-rating-chip {
    font-weight: 600;
}

.mud-table {
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 768px) {

    .vendor-action-btn,
    .vendor-save-btn {
        width: 100%;
    }
}

.compose-body {
    min-height: 450px !important;
    resize: vertical;
    font-size: 1rem;
    line-height: 1.5;
    padding: 1rem;
}

.agent-action-btn {
    min-width: 150px;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

@media (max-width: 768px) {
    .agent-action-btn {
        width: 100%;
    }
}

.dashboard-pill {
    border-radius: 16px !important;
    min-height: 56px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: .2px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transition: all .18s ease-in-out;
}

    .dashboard-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,.14);
    }

.dashboard-pill-alert {
    animation: pulseAlert 2s infinite;
}

.dashboard-pill-warning {
    box-shadow: 0 0 0 rgba(255,193,7,.45);
}

.dashboard-pill-success {
    background: linear-gradient(135deg,#198754,#157347) !important;
}

@keyframes pulseAlert {

    0% {
        box-shadow: 0 0 0 0 rgba(220,53,69,.45);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220,53,69,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}

@media (max-width: 768px) {

    .dashboard-pill {
        width: 100%;
    }
}

.seller-header-avatar {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

.seller-upload-btn {
    border-radius: 12px !important;
    min-height: 42px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

.seller-upload-btn:hover {
    transform: translateY(-1px);
}

.entity-header-avatar-img {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid rgba(255,255,255,.25);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.entity-header-photo {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid rgba(255,255,255,.35);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.agent-dashboard-header {
    background: linear-gradient(135deg, #261354, #4f46e5);
    border-radius: 14px;
}

.broker-dashboard-header {
    background: linear-gradient(135deg, #261354, #4f46e5);
    border-radius: 14px;
}

@media (max-width: 768px) {

    .vendor-mobile-grid .mud-table-container {
        background: transparent;
    }

    .vendor-mobile-grid table,
    .vendor-mobile-grid thead,
    .vendor-mobile-grid tbody,
    .vendor-mobile-grid tr,
    .vendor-mobile-grid th,
    .vendor-mobile-grid td {
        display: block;
    }

    .vendor-mobile-grid thead {
        display: none;
    }

    .vendor-mobile-grid .mud-table-row {
        margin: 0 0 18px 0;
        border: 1px solid #d8d2ea;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 5px 14px rgba(38, 19, 84, 0.14);
    }

    .vendor-mobile-grid .mud-table-cell {
        border-bottom: 1px solid #eee;
        padding: 10px 14px;
    }

        .vendor-mobile-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

    .vendor-mobile-industry-cell {
        background: linear-gradient(90deg, #261354, #5b3ee4) !important;
        color: white !important;
        font-weight: 800;
        font-size: 1rem;
        padding: 13px 14px !important;
        border-bottom: none !important;
    }

    vendor-mobile-industry-cell .mud-icon-root {
        color: white !important;
    }

    .vendor-mobile-industry-title,
    .vendor-mobile-category-title {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .vendor-mobile-category-title {
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .vendor-mobile-field-cell {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 48px;
    }

        .vendor-mobile-field-cell::before {
            font-weight: 700;
            color: #4b3b73;
            font-size: .85rem;
            line-height: 1.1;
        }

    .vendor-mobile-compare-cell::before {
        content: "Compare";
    }

    .vendor-mobile-grid td:nth-child(3)::before {
        content: "Quote/Estimate";
    }

    .vendor-mobile-grid td:nth-child(4)::before {
        content: "Vendor";
    }

    .vendor-mobile-grid td:nth-child(5)::before {
        content: "Approve";
    }

    .vendor-mobile-grid td:nth-child(6)::before {
        content: "Approval Time";
    }

    .vendor-mobile-grid td:nth-child(7)::before {
        content: "Status";
    }

    .vendor-mobile-rate-cell::before {
        content: "Rate Vendor";
    }

    .vendor-mobile-cell-content {
        min-width: 0;
        width: 100%;
    }

    .vendor-mobile-center-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .vendor-mobile-grid .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

    .vendor-mobile-grid .mud-select {
        min-width: 0;
    }

    .vendor-approve-btn,
    .vendor-rate-btn {
        min-height: 36px;
        border-radius: 10px;
        font-weight: 700;
    }

    .vendor-rating-chip-wrap {
        margin-top: 4px;
    }

    .vendor-rating-chip {
        font-size: .75rem;
    }
}
@media (max-width: 768px) {

    .task-mobile-card-grid .mud-table-container {
        background: transparent;
    }

    .task-mobile-card-grid table,
    .task-mobile-card-grid thead,
    .task-mobile-card-grid tbody,
    .task-mobile-card-grid tr,
    .task-mobile-card-grid th,
    .task-mobile-card-grid td {
        display: block;
    }

    .task-mobile-card-grid thead {
        display: none;
    }

    .task-mobile-card-grid .mud-table-row {
        margin: 0 0 18px 0;
        border: 1px solid #d8d2ea;
        border-radius: 18px;
        overflow: hidden;
        background: transparent;
        box-shadow: 0 5px 14px rgba(38, 19, 84, 0.14);
    }

    .task-mobile-card-grid .mud-table-cell {
        border-bottom: 1px solid #eee;
        padding: 12px 14px;
    }

        .task-mobile-card-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

    /* Hide duplicate ID and Industry rows because they are shown inside the title header */
    .task-mobile-card-grid .task-card-id-cell,
    .task-mobile-card-grid .task-card-industry-cell {
        display: none !important;
    }

    .task-card-title-cell {
        background: linear-gradient(90deg, #261354, #5b3ee4) !important;
        color: white !important;
        padding: 16px !important;
        border-bottom: none !important;
        text-align: left !important;
    }

    .task-card-title-cell::before {
        display: none !important;
        content: "" !important;
    }

    .task-card-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        text-align: left;
    }

    .task-card-title-icon {
        color: white !important;
        border: 2px solid rgba(255,255,255,.9);
        border-radius: 50%;
        padding: 8px;
        font-size: 44px !important;
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 auto;
    }

    .task-card-title-text {
        min-width: 0;
        flex: 1;
        text-align: left;
    }

    .task-card-title-main {
        font-weight: 800;
        font-size: 1.05rem;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .task-card-title-meta {
        margin-top: 6px;
        font-size: .86rem;
        font-weight: 700;
        opacity: .95;
        text-align: left;
    }

    .task-card-meta-separator {
        margin: 0 8px;
        opacity: .8;
    }

    

    .task-card-field-cell::before {
        font-weight: 800;
        color: #2f1b70;
        font-size: .9rem;
        line-height: 1.1;
    }

    .task-card-quote-cell::before {
        content: "Quote/Estimate";
    }

    .task-card-vendor-cell::before {
        content: "Selected Vendor";
    }

    .task-card-contact-cell::before {
        content: "Contact";
    }

    .task-card-vendor-status-cell::before {
        content: "Vendor Status";
    }

    .task-card-roles-cell::before {
        content: "Responsible Party(s)";
    }

    .task-card-user-cell::before {
        content: "Assigned User";
    }

    .task-card-origin-cell::before {
        content: "Origin";
    }

    .task-card-due-cell::before {
        content: "Due At";
    }

    .task-card-status-cell::before {
        content: "Status";
    }

    .task-card-created-cell::before {
        content: "Created";
    }

    .task-card-history-cell::before {
        content: "History";
    }

    .task-card-delete-cell::before {
        content: "Delete";
    }

    .task-card-cell-content {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .task-mobile-card-grid .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

    .task-mobile-card-grid .mud-select,
    .task-mobile-card-grid .mud-picker {
        min-width: 0;
        width: 100%;
    }

    .task-mobile-card-grid .mud-chip {
        max-width: 100%;
        font-weight: 700;
    }

    .task-mobile-card-grid .grid-action-btn {
        width: 100%;
    }

    .task-card-history-cell .task-card-cell-content,
    .task-card-delete-cell .task-card-cell-content {
        display: flex;
        justify-content: flex-start;
    }
}


@media (max-width: 768px) {

    .task-mobile-card-grid .stage-contract .mud-table-cell:not(.task-card-title-cell) {
        background-color: #90CAF9 !important;
    }

    .task-mobile-card-grid .stage-due-diligence .mud-table-cell:not(.task-card-title-cell) {
        background-color: #FFF9C4 !important;
    }

    .task-mobile-card-grid .stage-financing .mud-table-cell:not(.task-card-title-cell) {
        background-color: #80DEEA !important;
    }

    .task-mobile-card-grid .stage-insurance .mud-table-cell:not(.task-card-title-cell) {
        background-color: #FFCC80 !important;
    }

    .task-mobile-card-grid .stage-title-escrow .mud-table-cell:not(.task-card-title-cell) {
        background-color: #CE93D8 !important;
    }

    .task-mobile-card-grid .stage-closing .mud-table-cell:not(.task-card-title-cell) {
        background-color: #A5D6A7 !important;
    }

    .task-mobile-card-grid .stage-post-closing .mud-table-cell:not(.task-card-title-cell) {
        background-color: #CFD8DC !important;
    }
}

@media (max-width: 768px) {

    .task-mobile-card-grid .stage-contract .task-card-due-cell,
    .task-mobile-card-grid .stage-contract .task-card-due-cell *,
    .task-mobile-card-grid .stage-contract .task-card-history-cell,
    .task-mobile-card-grid .stage-contract .task-card-history-cell * {
        background-color: #90CAF9 !important;
    }

    .task-mobile-card-grid .task-card-due-cell .task-card-cell-content,
    .task-mobile-card-grid .task-card-history-cell .task-card-cell-content {
        width: 100%;
        min-height: 100%;
    }

    .task-mobile-card-grid .task-card-due-cell .mud-input-control,
    .task-mobile-card-grid .task-card-due-cell .mud-input,
    .task-mobile-card-grid .task-card-due-cell .mud-input-slot {
        background-color: transparent !important;
    }
}

@media (max-width: 768px) {
    .task-mobile-card-grid .task-card-history-cell {
        width: 100% !important;
        min-width: 100% !important;
    }

    .task-mobile-card-grid .task-card-history-content {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        background: transparent !important;
    }

    .task-mobile-card-grid .task-card-history-cell .mud-icon-button,
    .task-mobile-card-grid .task-card-history-cell .mud-button-root {
        background: transparent !important;
    }
}

@media (max-width: 768px) {
    .task-mobile-card-grid .task-card-due-cell {
        width: 100% !important;
        min-width: 100% !important;
    }

    .task-mobile-card-grid .task-card-due-content {
        width: 100%;
        background: transparent !important;
    }

    .task-mobile-card-grid .task-card-due-cell .mud-input-control,
    .task-mobile-card-grid .task-card-due-cell .mud-input,
    .task-mobile-card-grid .task-card-due-cell .mud-input-slot {
        background: transparent !important;
    }
}

@media (max-width: 768px) {

    .customer-mobile-grid .mud-table-container {
        background: transparent;
    }

    .customer-mobile-grid table,
    .customer-mobile-grid thead,
    .customer-mobile-grid tbody,
    .customer-mobile-grid tr,
    .customer-mobile-grid th,
    .customer-mobile-grid td {
        display: block;
    }

    .customer-mobile-grid thead {
        display: none;
    }

    .customer-mobile-grid .mud-table-row {
        margin: 0 0 18px 0;
        border: 1px solid #d8d2ea;
        border-radius: 18px;
        overflow: hidden;
        background: transparent;
        box-shadow: 0 5px 14px rgba(38, 19, 84, 0.14);
    }

    .customer-mobile-grid .mud-table-cell {
        border-bottom: 1px solid #eee;
        padding: 12px 14px;
        background: #fff;
    }

        .customer-mobile-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

    .customer-card-title-cell {
        background: linear-gradient(90deg, #261354, #5b3ee4) !important;
        color: white !important;
        padding: 16px !important;
        border-bottom: none !important;
        text-align: left !important;
    }

        .customer-card-title-cell::before {
            display: none !important;
            content: "" !important;
        }

    .customer-card-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        text-align: left;
    }

    .customer-card-title-icon {
        color: white !important;
        border: 2px solid rgba(255,255,255,.9);
        border-radius: 50%;
        padding: 8px;
        font-size: 44px !important;
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 auto;
    }

    .customer-card-title-text {
        min-width: 0;
        flex: 1;
        text-align: left;
    }

    .customer-card-title-main {
        color: white !important;
        font-weight: 800;
        font-size: 1.08rem;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .customer-card-title-meta {
        margin-top: 6px;
        font-size: .88rem;
        font-weight: 700;
        opacity: .95;
        text-align: left;
    }

    .customer-card-type-cell {
        display: none !important;
    }

    .customer-card-field-cell {
        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 56px;
    }

        .customer-card-field-cell::before {
            font-weight: 800;
            color: #2f1b70;
            font-size: .9rem;
            line-height: 1.1;
        }

    .customer-card-address-cell::before {
        content: "Address";
    }

    .customer-card-tasks-cell::before {
        content: "Tasks";
    }

    .customer-card-mls-cell::before {
        content: "MLS";
    }

    .customer-card-actions-cell::before {
        content: "Actions";
    }

    .customer-card-percent-cell::before {
        content: "% Complete";
    }

    .customer-card-health-cell::before {
        content: "Health";
    }

    .customer-card-transaction-status-cell::before {
        content: "Transaction";
    }

    .customer-card-vendor-status-cell::before {
        content: "Vendor Status";
    }

    .customer-card-complete-cell::before {
        content: "Complete?";
    }

    .customer-card-cell-content {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .customer-card-icon-content {
        display: flex;
        justify-content: flex-start;
    }

    .customer-mobile-grid .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

    .customer-mobile-grid .mud-select,
    .customer-mobile-grid .mud-picker {
        min-width: 0;
        width: 100%;
    }

    .customer-mobile-grid .mud-chip {
        max-width: 100%;
        font-weight: 700;
    }

    .customer-mobile-grid .btn {
        white-space: nowrap;
    }
}

/* Desktop */
@media (min-width: 769px) {

    .task-card-title-meta,
    .task-card-title-icon,
    .customer-card-title-meta,
    .customer-card-title-icon {
        display: none;
    }

    .task-card-title-wrap,
    .customer-card-title-wrap {
        gap: 0;
    }

    .task-card-title-main,
    .customer-card-title-main {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }
}

.entity-header {
    background: linear-gradient(135deg, #261354 0%, #3d1f7a 100%);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 8px 24px rgba(38, 19, 84, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}

.entity-header-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.entity-header-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    margin-top: 2px;
}

.landho-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #261354 0%, #3d1f7a 100%);
    color: white !important;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 20px 24px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}

.landho-dialog .mud-dialog-content {
    padding-top: 28px;
}

.landho-dialog .mud-dialog {
    border-radius: 18px;
    overflow: hidden;
}

.modern-action-btn {
    border-radius: 14px;
    padding: 10px 22px;
    font-weight: 700;
    text-transform: none;
    background: linear-gradient(135deg, #261354 0%, #3d1f7a 100%);
    color: white !important;
    box-shadow: 0 6px 18px rgba(38, 19, 84, 0.25);
    transition: all 0.2s ease;
}

    .modern-action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(38, 19, 84, 0.35);
    }

.message-subject {
    font-weight: 700;
    color: #261354;
}

.message-preview {
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

.message-grid-row {
    transition: all 0.18s ease;
}

    .message-grid-row:hover {
        background-color: rgba(38, 19, 84, 0.04);
    }

/* MOBILE */
@media (max-width: 768px) {

    .mobile-message-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 16px;
        border-radius: 16px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.12);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        padding: 12px;
    }

    .mobile-message-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        gap: 12px;
    }

    .mobile-message-grid .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mobile-message-grid .mud-table-cell::before {
        content: attr(data-label);
        font-weight: 700;
        color: #261354;
        min-width: 80px;
        flex-shrink: 0;
    }

    .message-preview {
        white-space: normal;
        max-width: 100%;
        line-height: 1.4;
    }

    .message-subject {
        font-size: 1rem;
    }
}

.customer-grid-name {
    font-weight: 700;
    color: #261354;
}

.customer-grid-row {
    transition: all 0.18s ease;
}

.customer-grid-row:hover {
    background-color: rgba(38, 19, 84, 0.04);
}

@media (max-width: 768px) {
    .mobile-customer-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 16px;
        border-radius: 16px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.12);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        padding: 12px;
    }

    .mobile-customer-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        gap: 12px;
    }

    .mobile-customer-grid .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mobile-customer-grid .mud-table-cell::before {
        content: attr(data-label);
        font-weight: 700;
        color: #261354;
        min-width: 90px;
        flex-shrink: 0;
    }
}

.mobile-listing-grid .mud-table-row {
    transition: all 0.18s ease;
}

    .mobile-listing-grid .mud-table-row:hover {
        background-color: rgba(38, 19, 84, 0.04);
    }

.listing-address-link {
    font-weight: 800;
    color: #261354 !important;
    text-decoration: none;
}

    .listing-address-link:hover {
        text-decoration: underline;
    }

.listing-location {
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 2px;
}

.listing-stat {
    font-weight: 600;
}

.listing-price {
    font-weight: 800;
    color: #261354;
}

.listing-mls-btn {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
}

@media (max-width: 768px) {
    .mobile-listing-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 16px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-listing-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        gap: 14px;
        text-align: right;
    }

    .mobile-listing-grid .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mobile-listing-grid .mud-table-cell::before {
        content: attr(data-label);
        font-weight: 800;
        color: #261354;
        min-width: 92px;
        text-align: left;
        flex-shrink: 0;
    }

    .mobile-listing-grid .mud-table-cell:first-child {
        display: block;
        text-align: left;
        background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
        border-radius: 14px;
        margin-bottom: 8px;
    }

        .mobile-listing-grid .mud-table-cell:first-child::before {
            display: none;
        }

.listing-address-link {
    font-size: 1.05rem;
}

.listing-location {
    font-size: 0.9rem;
}

.listing-mls-btn {
    width: 100%;
    justify-content: center;
}
}

.property-grid-address {
    font-weight: 800;
    color: #261354;
}

.property-grid-row {
    transition: all 0.18s ease;
}

    .property-grid-row:hover {
        background-color: rgba(38, 19, 84, 0.04);
    }

@media (max-width: 768px) {
    .mobile-property-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 16px;
        border-radius: 16px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.12);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        padding: 12px;
    }

    .mobile-property-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        gap: 12px;
    }

    .mobile-property-grid .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mobile-property-grid .mud-table-cell::before {
        content: attr(data-label);
        font-weight: 800;
        color: #261354;
        min-width: 95px;
        flex-shrink: 0;
    }

    .mobile-property-grid .mud-table-cell:nth-child(2) {
        display: block;
        text-align: left;
        background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
        border-radius: 14px;
        margin-bottom: 8px;
    }

    .mobile-property-grid .mud-table-cell:nth-child(2)::before {
        display: none;
    }

    .property-grid-address {
        font-size: 1.05rem;
    }
}

.vendor-grid-row {
    transition: all 0.18s ease;
}

    .vendor-grid-row:hover {
        background-color: rgba(38, 19, 84, 0.04);
    }

.vendor-grid-logo {
    border-radius: 12px;
    object-fit: contain;
    background: #f7f5fb;
    border: 1px solid rgba(38, 19, 84, 0.12);
    padding: 4px;
}

.vendor-grid-name {
    font-weight: 800;
    color: #261354;
}

.vendor-rating-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 180px;
}

@media (max-width: 768px) {
    .mobile-vendor-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 16px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.12);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-vendor-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        gap: 12px;
        text-align: right;
    }

        .mobile-vendor-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

        .mobile-vendor-grid .mud-table-cell::before {
            content: attr(data-label);
            font-weight: 800;
            color: #261354;
            min-width: 120px;
            text-align: left;
            flex-shrink: 0;
        }

        .mobile-vendor-grid .mud-table-cell:nth-child(1),
        .mobile-vendor-grid .mud-table-cell:nth-child(2) {
            display: inline-flex;
            border-bottom: none;
            padding-bottom: 4px;
        }

            .mobile-vendor-grid .mud-table-cell:nth-child(1)::before,
            .mobile-vendor-grid .mud-table-cell:nth-child(2)::before {
                display: none;
            }

        .mobile-vendor-grid .mud-table-cell:nth-child(1) {
            width: 64px;
            vertical-align: top;
        }

        .mobile-vendor-grid .mud-table-cell:nth-child(2) {
            width: calc(100% - 72px);
            justify-content: flex-start;
            text-align: left;
            background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
            border-radius: 14px;
            min-height: 58px;
        }

    .vendor-grid-name {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .vendor-rating-wrap {
        max-width: 190px;
        justify-content: flex-end;
        overflow: hidden;
    }
}

.vendor-not-member-chip {
    border-radius: 999px;
    font-weight: 700;
}

.vendor-not-member-placeholder {
    color: #999;
    font-weight: 700;
}

.vendor-grid-logo {
    border-radius: 12px;
    object-fit: contain;
    background: #f7f5fb;
    border: 1px solid rgba(38, 19, 84, 0.12);
    padding: 4px;
}

.inspection-type-title {
    font-weight: 800;
    color: #261354;
}

.inspection-address {
    color: #555;
    line-height: 1.35;
}

.datetime-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inspection-results-btn {
    border-radius: 999px;
    text-transform: none;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(38, 19, 84, 0.22);
}

@media (max-width: 768px) {
    .mobile-inspection-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 18px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-inspection-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #eee;
        padding: 11px 8px;
        gap: 14px;
        text-align: right;
    }

        .mobile-inspection-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

        .mobile-inspection-grid .mud-table-cell::before {
            content: attr(data-label);
            font-weight: 800;
            color: #261354;
            min-width: 110px;
            text-align: left;
            flex-shrink: 0;
        }

        .mobile-inspection-grid .mud-table-cell:first-child {
            display: block;
            text-align: left;
            background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
            border-radius: 14px;
            margin-bottom: 8px;
        }

            .mobile-inspection-grid .mud-table-cell:first-child::before {
                display: none;
            }

    .inspection-type-title {
        font-size: 1.08rem;
    }

    .inspection-address {
        max-width: 220px;
        text-align: right;
    }

    .datetime-col {
        display: block !important;
        text-align: left !important;
    }

        .datetime-col::before {
            display: block;
            margin-bottom: 8px;
        }

    .datetime-inline {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

        .datetime-inline .mud-input-control {
            width: 100%;
        }

    .notes-col {
        display: block !important;
        text-align: left !important;
    }

        .notes-col::before {
            display: block;
            margin-bottom: 8px;
        }

        .notes-col .mud-input-control {
            width: 100%;
        }

    .inspection-results-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
}

.finding-title {
    font-weight: 800;
    color: #261354;
    line-height: 1.25;
}

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

.cost-input {
    max-width: 120px;
}

.photo-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thumb-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(38, 19, 84, 0.16);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.upload-btn {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
}

@media (max-width: 768px) {
    .mobile-findings-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 18px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-findings-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        border-bottom: 1px solid #ececec;
        padding: 12px 8px;
        text-align: right;
    }

        .mobile-findings-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

        .mobile-findings-grid .mud-table-cell::before {
            content: attr(data-label);
            font-weight: 800;
            color: #261354;
            min-width: 95px;
            text-align: left;
            flex-shrink: 0;
        }

        .mobile-findings-grid .mud-table-cell:nth-child(2) {
            display: block;
            text-align: left;
            background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
            border-radius: 14px;
            margin-bottom: 10px;
            border-bottom: none;
        }

            .mobile-findings-grid .mud-table-cell:nth-child(2)::before {
                display: none;
            }

    .finding-title {
        font-size: 1.08rem;
    }

    .finding-check-cell {
        align-items: center !important;
    }

    .finding-detail-cell,
    .finding-photo-cell {
        display: block !important;
        text-align: left !important;
    }

        .finding-detail-cell::before,
        .finding-photo-cell::before {
            display: block;
            margin-bottom: 8px;
        }

        .finding-detail-cell .mud-input-control,
        .mobile-findings-grid .grid-select {
            width: 100%;
        }

    .cost-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .cost-input {
        max-width: none;
        width: 100%;
    }

    .photo-flex {
        justify-content: space-between;
        width: 100%;
    }

    .upload-btn {
        min-width: 120px;
    }
}

.qe-id-chip {
    font-weight: 800;
    border-radius: 999px;
}

.qe-industry {
    font-weight: 800;
    color: #261354;
    line-height: 1.25;
}

.qe-request {
    color: #555;
    line-height: 1.35;
    max-width: 420px;
}

.qe-date {
    color: #555;
    white-space: nowrap;
}

.qe-count-chip {
    min-width: 42px;
    justify-content: center;
    font-weight: 800;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .mobile-qe-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 18px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-qe-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        border-bottom: 1px solid #ececec;
        padding: 12px 8px;
        text-align: right;
    }

        .mobile-qe-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

        .mobile-qe-grid .mud-table-cell::before {
            content: attr(data-label);
            font-weight: 800;
            color: #261354;
            min-width: 100px;
            text-align: left;
            flex-shrink: 0;
        }

        .mobile-qe-grid .mud-table-cell:nth-child(2) {
            display: block;
            text-align: left;
            background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
            border-radius: 14px;
            margin-bottom: 10px;
            border-bottom: none;
        }

            .mobile-qe-grid .mud-table-cell:nth-child(2)::before {
                display: none;
            }

    .qe-industry {
        font-size: 1.08rem;
    }

    .qe-request {
        max-width: 230px;
        text-align: right;
    }

    .qe-date {
        white-space: normal;
    }

    .qe-count-chip {
        min-width: 48px;
    }
}

.qe-id-chip,
.qe-type-chip {
    font-weight: 800;
    border-radius: 999px;
}

.qe-vendor-requestor {
    font-weight: 800;
    color: #261354;
    line-height: 1.25;
}

.qe-vendor-text {
    color: #555;
    line-height: 1.35;
    max-width: 420px;
}

.qe-vendor-amount {
    font-weight: 900;
    color: #261354;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .mobile-qe-vendor-grid .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 18px;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(38, 19, 84, 0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 12px;
        overflow: hidden;
    }

    .mobile-qe-vendor-grid .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        border-bottom: 1px solid #ececec;
        padding: 12px 8px;
        text-align: right;
    }

        .mobile-qe-vendor-grid .mud-table-cell:last-child {
            border-bottom: none;
        }

        .mobile-qe-vendor-grid .mud-table-cell::before {
            content: attr(data-label);
            font-weight: 800;
            color: #261354;
            min-width: 105px;
            text-align: left;
            flex-shrink: 0;
        }

        .mobile-qe-vendor-grid .mud-table-cell:nth-child(3) {
            display: block;
            text-align: left;
            background: linear-gradient(135deg, rgba(38,19,84,0.08), rgba(38,19,84,0.02));
            border-radius: 14px;
            margin-bottom: 10px;
            border-bottom: none;
        }

            .mobile-qe-vendor-grid .mud-table-cell:nth-child(3)::before {
                display: none;
            }

    .qe-vendor-requestor {
        font-size: 1.08rem;
    }

    .qe-vendor-text {
        max-width: 230px;
        text-align: right;
    }

    .qe-vendor-amount {
        font-size: 1.05rem;
    }
}

.qe-action-btn,
.qe-return-btn {
    height: 48px;
    border-radius: 14px;
    font-weight: 800;
    text-transform: none;
}

.qe-action-btn {
    box-shadow: 0 6px 18px rgba(38, 19, 84, 0.25);
}

.report-pill {
    border-radius: 12px;
    background: #eef8f0;
    border: 1px solid #b8e0c2;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 320px;
}

.report-link {
    color: #1b5e20;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.report-link:hover {
    text-decoration: underline;
}

.report-upload-btn {
    cursor: pointer;
    margin-bottom: 0;
}

.photo-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.thumb-link {
    display: inline-flex;
    align-items: center;
}

.thumb-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.upload-btn {
    cursor: pointer;
    margin-bottom: 0;
    white-space: nowrap;
}

.upload-btn.mud-disabled {
    pointer-events: none;
    opacity: .45;
    cursor: default;
}

.ai-assist-box .mud-checkbox {
    margin-bottom: 4px;
}

.ai-assist-box {
    border: 2px solid #7b61c8;
    border-radius: 10px;
    background: #faf9ff;
}

.ai-role-row {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 0;
}

.ai-role-label {
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}
.qe-empty-state {
    border-radius: 12px;
    border: 1px solid #d8d0f0;
    background: #faf9ff;
}
.vendor-empty-state {
    border-radius: 12px;
    border: 1px solid #d8d0f0;
    background: #faf9ff;
}
.mud-dialog-title {
    background-color: #261354;
    color: white;
    font-weight: 600;
    padding: 12px 20px;
}

.mud-dialog-title .mud-icon-button {
    color: white;
}

.vendor-box {
    width: 250px;
    height: 175px;
    margin: 10px;
    padding: 0;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
}

.vendor-box-industry {
    background-color: #261354;
    color: white;
    font-size: 22px;
    height: 45px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.vendor-box-compare {
    background-color: #261354;
    font-size: 16px;
    height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .vendor-box-compare a {
        color: cornflowerblue;
    }

.vendor-box-name {
    background-color: #390546;
    color: white;
    font-size: 18px;
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.vendor-box-approved {
    background-color: #390546;
    color: white;
    font-size: 12px;
    height: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vendor-box-rating {
    background-color: #390546;
    height: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vendor-box-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .vendor-box-wrap {
        justify-content: center;
    }
}