@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.mainLayout{
    margin-top:40px;
}

.textToRight input {
    text-align: right;
    padding-right: 3px !important;
}

.paddingZero {
    padding: 0 !important;
}

.borderlessGrid td, .borderlessGrid th {
    border-left: none;
    border-right: none;
}

.checkedClass {
    justify-content: center;
    background-color: #0B0B61;
}

.uncheckClass {
    justify-content: center;
}

.activeCheckBox {
    margin-top: 12px;
    float: right;
    margin-left: 30px;
}

.version {
    font-size: 0.6em;
    color: #0f72ba;
    margin-left: 5px;
    margin-top: -1px;
}

.dashDiv {
    width: 31%;
    height: 100px;
    outline: 1px solid gray;
    margin: 5px;
    float: left;
    text-align: center;
    padding: 15px;
    font-size: 1em;
}

.marketingAuditMain {
    width: 100%;
    float: left;
}

.marketingAuditControl {
    float: left;
    width: 120px;
    margin-right: 30px;
}

.marketingAuditGrid {
    margin-top: 20px;
    margin-bottom: 40px;
}

.marketingAuditYear {
    float: left;
    width: 100px;
    margin-right: 20px;
}

.jobPopup {
    width: 1000px;
}

.bannerButton {
    float: right;
    margin-right: 30px;
}

.bannerButtonLeft {
    float: right;
    margin-left: 30px;
}


.bannerButtonLeftLeft {
    float: left;
    margin-left: 30px;
}

.banner {
    float: left;
}

.productCategories{
    float:right;
    margin-top:10px;
    width: 300px;
    margin-bottom: 10px;
}

.bd-toc {
    position: -webkit-sticky !important;
    position: sticky;
    top: 4rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
    order: 2;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: .875rem;
    margin-top: 65px;
}

.jobSearch {
    position: fixed;
    background-color: white;
    z-index: 1;
    top: 80px;
    height: 100px;
    padding-top: 12px;
}

.fixed {
    position: fixed;
}


.bd-content {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.top-bar {
    height: 5rem;
    background-color: rgb(255,255,255);
    display: flex;
    align-items: stretch;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    padding-left: 20px;
    padding-right: 20px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.logo {
    margin-top: 0px;
    height:25px;
}


.mnav-tab {
    margin: 0;
    padding: 0.3rem 1rem;
    display: inline-block;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    position: relative;
    text-transform: uppercase;
    transition: 0.2s ease-out;
}

    .mnav-tab:hover {
        color: white;
        text-decoration: none;
        background-color: rgba(255,255,255,0.3);
    }

    .mnav-tab:visited {
        color: black;
        text-decoration: none;
        background-color: rgba(255,255,255,0.2);
    }

    .mnav-tab.active {
        background-color: rgba(192,192,192,0.2);
        color: black;
    }

    .mnav-tab img {
        height: 2rem;
        margin-bottom: 0.25rem;
    }


    .mnav-tab.active:after {
        content: "";
        position: absolute;
        bottom: -1rem;
        z-index: 1;
        width: 0px;
        height: 0px;
        border-left: 0.6rem solid transparent;
        border-right: 0.6rem solid transparent;
        border-top: 1rem solid rgb(192, 192, 192);
    }


.main .top-row {
    background-color: #e6e6e6;
    border-bottom: 1px solid #d6d5d5;
}



.mhav-tab {
    margin: 0;
    padding: 0.8rem 1rem;
    display: inline-block;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    position: relative;
    text-transform: uppercase;
    transition: 0.2s ease-out;
}

    .mhav-tab:hover {
        color: white;
        text-decoration: none;
        background-color: rgba(255,255,255,0.3);
    }

    .mhav-tab:visited {
        color: black;
        text-decoration: none;
        background-color: rgba(255,255,255,0.2);
    }

    .mhav-tab.active {
        background-color: rgba(192,192,192,0.2);
        color: black;
    }

    .mhav-tab img {
        height: 2rem;
        margin-bottom: 0.25rem;
    }


    .mhav-tab.active:after {
        content: "";
        position: absolute;
        bottom: 20px;
        right: -15px;
        z-index: 1;
        width: 0px;
        height: 0px;
        border-top: 1rem solid transparent;
        border-left: 1rem solid rgb(192, 192, 192);
        border-bottom: 1rem solid transparent;
    }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}


app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem !important;
}

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



a, .btn-link {
    color: #0366d6;
}

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

.jsAsset {
    font-size: 0.8em;
}

    .jsAsset input {
        font-size: 0.8em;
    }

.Failed {
    color: red;
}

.Passed {
    color: green;
}

.Workshop {
    color: khaki;
}

.dxInitial {
    width: 200px;
    float: left;
    margin-right: 20px;
}

.runBoards {
    border: 2px dashed #ff8d00;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px;
    margin-top: 90px;
}


.jobs-container {
    display: flex;
}

.job-status {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    width: 250px;
    margin-right: 20px;
    background-color: #b3e5fc5c;
    border: 1px solid black;
    border-radius: 5px;
}

    .job-status ul {
        flex: 1;
    }

.dropzone {
    padding: 5px;
    list-style: none;
}

.draggable:hover {
    background-color: rgba(124, 127, 130, 0.7);
}

.no-drop {
    border: 2px dashed red;
}

.can-drop {
    border: 2px dashed green;
}

.draggable {
    margin-top: 10px;
    border: 1px solid #424d5c;
    cursor: pointer;
    background: #7c7f82;
    color: #ffffff;
    border-radius: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
    height: 120px;
}

.linked {
    margin-top: 0px;
    padding: 5px 10px;
    border: 1px solid #424d5c;
    cursor: grab;
    background: #7c7f82;
    color: #ffffff;
    border-radius: 5px;
}

.jobBranch {
    padding: 2px;
    background-color: white;
    color: black;
    width: 85px;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
}

.jobStatus {
    display: table-cell;
    vertical-align: bottom;
}

.jobNumber {
    font-weight: bold;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding-top: 2px;
    color: black;
    float: left;
    font-size: 0.8em;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
}

.jobTime {
    float: right;
    color: salmon;
    font-weight: bold;
    font-size: 0.8em;
}

.jobSite {
    font-size: 0.8em;
    width: 230px;
    margin-top: 30px;
    white-space: pre-line;
    padding-right: 10px;
    padding-left: 5px;
}

.jobClient {
    font-size: 0.7em;
    color: lightgray;
    font-weight: bold;
    white-space: pre-line;
    padding-right: 5px;
    padding-left: 3px;
}

.draggable:active {
    cursor: grabbing;
}

.dragging {
    cursor: grabbing;
}

.pallets {
    float: left;
    margin-right: 15px;
}

.pallet {
    float: right;
}

.overload {
    font-weight: bold;
    color: red;
}

.description {
    font-size: 16px;
    padding-bottom: 10px;
}

.last-updated {
    margin-bottom: 0;
    font-size: 11px;
    color: #e1e5ea;
    font-weight: bold;
}

    .last-updated small {
        text-transform: uppercase;
        color: #c4cbd4;
        font-size: 11px;
    }

.versiontext {
    padding-top: 60px;
    padding-left: 50px;
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 11px;
    color: white;
    font-weight: bold;
}

.boardTitle {
    padding-left: 8px;
    padding-top: 5px;
    font-size: 1em;
    font-weight: bold;
}

.boardSubtitle {
    padding-left: 8px;
    padding-top: 0px;
    font-size: 0.7em;
    font-weight: bold;
}

.action {
    float: right;
    margin-left: 10px;
}

.soOrderSummary {
    font-size: small;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 210px;
        height: 100vh;
        position: sticky;
        margin-top: 90px;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }
}


.dx-menu-item.notoggle > .dropdown-menu {
    transform: matrix(1, 0, 0, 1, -112, -1) !important;
}

.dx-menu-item.notoggle a > span.dropdown-toggle {
    display: none;
}

.dxbs-menu > .nav .dx-menu-item.notoggle {
    display: none;
}

.dxbs-menu > .nav .dx-menu-item.search-menu-item {
    display: none;
}

.dxbs-menu > .nav .separator {
    display: none;
}

.dx-menu-item .search {
    min-width: 123px
}

.dxbs-menu-item-tmpl > .search {
    padding: 0.25rem;
    position: relative;
}

.user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.menu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

.menu-icon-home {
    mask-image: url("../images/Home.svg");
    -webkit-mask-image: url("../images/Home.svg");
}

.menu-icon-support {
    mask-image: url("../images/Support.svg");
    -webkit-mask-image: url("../images/Support.svg");
}

.menu-icon-products {
    mask-image: url("../images/products.svg");
    -webkit-mask-image: url("../images/products.svg");
}

.menu-icon-customers {
    mask-image: url("../images/customers.svg");
    -webkit-mask-image: url("../images/customers.svg");
}

.menu-icon-orders {
    mask-image: url("../images/orders.svg");
    -webkit-mask-image: url("../images/orders.svg");
}

.menu-icon-audit {
    mask-image: url("../images/audit.svg");
    -webkit-mask-image: url("../images/audit.svg");
}

.menu-icon-user {
    mask-image: url("../images/login.svg");
    -webkit-mask-image: url("../images/login.svg");
}


.icon-logo {
    display: flex;
    height: 20px;
    width: 120px;
    background-color: blue;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/images/Logo_Light.png");
    -webkit-mask-image: url("/images/Logo_Light.png");
}

.card-box {
    position: relative;
    color: #fff;
    padding: 20px 10px 40px;
    margin: 20px 0px;
}

    .card-box:hover {
        text-decoration: none;
        color: #f1f1f1;
    }

        .card-box:hover .icon i {
            font-size: 100px;
            transition: 1s;
            -webkit-transition: 1s;
        }

    .card-box .inner {
        padding: 5px 10px 0 10px;
    }

    .card-box h3 {
        font-size: 27px;
        font-weight: bold;
        margin: 0 0 8px 0;
        white-space: nowrap;
        padding: 0;
        text-align: left;
    }

    .card-box p {
        font-size: 15px;
    }

    .card-box .icon {
        position: absolute;
        top: auto;
        bottom: 5px;
        right: 5px;
        z-index: 0;
        font-size: 72px;
        color: rgba(0, 0, 0, 0.15);
    }

    .card-box .card-box-footer {
        position: absolute;
        left: 0px;
        bottom: 0px;
        text-align: center;
        padding: 3px 0;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.1);
        width: 100%;
        text-decoration: none;
    }

    .card-box:hover .card-box-footer {
        background: rgba(0, 0, 0, 0.3);
    }

.bg-blue {
    background-color: #00c0ef !important;
}

.bg-green {
    background-color: #00a65a !important;
}

.bg-orange {
    background-color: #f39c12 !important;
}

.bg-red {
    background-color: #d9534f !important;
}

.bg-grey {
    background-color: gainsboro !important;
}

.dgSmaller {
   font-size:small;
}

.myButton {
    width: 100px;
    margin: .2rem !important
}
.myButtonWide {
    width: 130px;
    margin: .2rem !important
}

.mySpinner{
    text-align: right !important;
}

.fa-regular { 
    color: #0D72B9;
}

.searching{
    margin-top:4px;
    margin-right:5px;
    width: 170px;
}

/* =============================================================
   SMS bell — NavMenu unread-reply notification
   ============================================================= */

/* Bell button inside the DxMenu — sits next to the logout icon
   on the right of the menu strip. Subtle on idle, an unmissable
   red dot when there are unread replies. */
.sms-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 4px 6px 0 6px;
    border: none;
    background: transparent;
    color: #285481;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.sms-bell:hover            { background: #eef4ff; color: #1f4068; }
.sms-bell.has-unread       { color: #b34a4a; }
.sms-bell.has-unread:hover { background: #fff5f5; }
.sms-bell i { font-size: 1.1rem; }

.sms-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #b34a4a;
    color: #fff;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    font-variant-numeric: tabular-nums;
}

/* Dropdown header */
.sms-bell-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f7faff;
    border-bottom: 1px solid #d6e3f2;
    color: #285481;
    font-weight: 600;
}
.sms-bell-header i { color: #285481; }
.sms-bell-header-count {
    margin-left: auto;
    background: #285481;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.sms-bell-empty {
    padding: 22px 14px;
    color: #6b7280;
    font-style: italic;
    text-align: center;
}
.sms-bell-empty i { color: #16a34a; margin-right: 6px; }

.sms-bell-list { padding: 4px 0; }

/* One clickable card per customer with unread replies */
.sms-bell-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #eef2f7;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.sms-bell-item:last-child { border-bottom: none; }
.sms-bell-item:hover      { background: #fafbfc; }
/* Softer focus state — the previous outline:2px solid landed as a
   thick blue rectangle around each row, reading as a broken control
   rather than an affordance. Inset shadow keeps the keyboard cue
   without dominating the visual. */
.sms-bell-item:focus,
.sms-bell-item:focus-visible {
    outline: none;
    background: #f3f6fb;
    box-shadow: inset 3px 0 0 #285481;
}

.sms-bell-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.sms-bell-item-name {
    font-weight: 600;
    color: #285481;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sms-bell-item-count {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sms-bell-item-when {
    color: #9ca3af;
    font-size: 0.72rem;
    white-space: nowrap;
}
.sms-bell-item-body {
    color: #374151;
    font-size: 0.85rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actionButtonDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.actionButton{
    width: 150px;
}

.scheduleGrid{
    height: 400px;
}

.searchButtons {
    margin-top: 5px;
    padding: 2px;
    font-size: smaller;
    width: 68px;
}

.scheduleCard{
    background-color:powderblue; 
    overflow: hidden; 
    height: 100%;
}

.scheduleCardBody{
    height:100%; 
    display:flex; 
    flex-direction:column; 
    justify-content:flex-start;
}

.scheduleCardText{
    font-weight:400; 
    font-size: .825em;
    float:left;
    margin-left: 3px;
}

.scheduleFooter{
    position: absolute;
    width: 50%;
    bottom: 3px;
    right: 2px;
}

.fullWidthButton{
    width: 100%;
}

.details{
    margin-left: 20px;
    margin-top: 20px;
}

.highlightScheduleRow{
  font-weight: bold;
    color: #0f72ba;
}

.scheduleVisitBadge {
    float: left;
    margin-top: -0px;
    margin-left: -4px;
}
.scheduleVisitDate {
    float: right;
    margin-top: 3px;
}

.sm8Spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.captionCenter > dxbl-grid-header-content > span {
    text-align: center;
    width: 100%;
}

.captionRight > dxbl-grid-header-content > span {
    text-align: right;
    width: 100%;
}

.gridHoverRow:hover, .gridHoverRow:hover > td {
    cursor: pointer;
}

.gridInputCenter input {
    text-align: center;
}

.gridInputRight input {
    text-align: right;
}

.gridItemHover:hover {
    cursor: pointer;
}

.align-second td:nth-child(3),
.align-second th:nth-child(3) {
    text-align:right;
}

.busyQuote{
    background-color: red;
}

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.custom-drop-zone.custom-drag-over {
    background-color: #868A8D;
}

.docList{
    height:100px;
}

.qdFlyout{
    font-size: smaller !important;
}

.qdBody{
    font-size: smaller !important;
}


.email-mock {
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 600px;
    overflow-y: auto;
    height: auto;
    max-height: 400px; /* Adjust as needed for your design */
}

.email-header {
    margin-bottom: 20px;
}

.email-body {
    white-space: pre-wrap; /* Ensure newline characters are treated as spaces and newlines */
}

.email-meta {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #374151;
}

/* Renders the stored HTML email exactly as the client received it */
.email-frame {
    width: 100%;
    height: 620px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #eef2f7;
}

.pushBlade{
    margin-bottom:40px;
}

.invoices{
    white-space: pre-wrap; background-color:#006EB9; color: #ffffff; padding-left: 5px; padding-right: 5px; padding-bottom: 4px; margin-left:10px;
}

.bonusHeader{
    margin-top:40px;
}

.bonusData{
    font-weight: lighter;
    font-size: smaller;
}

.bonusDescription{
    font-weight: bold;
}

.postText{
    width: 270px;
}

.reportView{
    width: 100%;
    height: 90vh;
}

/* Sales Book Summary — own title rule so we DON'T inherit `.banner { float:left }`
   which makes sibling content (the cards) flow around it. */
.sbs-title {
    margin: 12px 0 8px 0;
}

/* Master region picker bar — sits above the title, lightweight inline row. */
.sbs-region-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px 0;
}
.sbs-region-label {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sbs-region-picker {
    min-width: 240px;
    max-width: 320px;
}

/* Sales Book Summary card grid.
   - 6 columns on md+, gracefully collapses on smaller viewports.
   - Each card has a fixed min-height so cards with fewer data rows (or no data)
     don't shrink and break alignment with their neighbours.
   - Year row is a 4-column track: year / amount / visit-count / trend-glyph.
     Right-aligning numbers and using a fixed-width visits cell keeps the visit
     count column flush across rows even when amounts have varying widths. */
.sbs-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}
@media (max-width: 1399.98px) { .sbs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .sbs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .sbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px)  { .sbs-grid { grid-template-columns: 1fr; } }

.sbs-card { min-height: 180px; }
.sbs-card-header {
    background: #0d72b9;
    color: #fff;
    font-weight: 600;
    padding: 6px 10px;
    font-size: 0.95rem;
}
.sbs-card-body { padding: 6px 8px; font-size: 0.82rem; }
.sbs-empty {
    color: #999;
    font-style: italic;
    padding: 6px 2px;
}
.sbs-row {
    display: grid;
    grid-template-columns: 42px 1fr 70px 18px;
    column-gap: 6px;
    align-items: baseline;
    padding: 2px 2px;
    border-radius: 3px;
    cursor: pointer;
}
.sbs-row:hover { background: rgba(13, 114, 185, 0.08); }
.sbs-year   { font-weight: 600; color: #0d72b9; }
.sbs-amount { text-align: right; font-variant-numeric: tabular-nums; }
.sbs-visits { text-align: right; color: #555; font-variant-numeric: tabular-nums; }
.sbs-trend  { text-align: center; font-size: 0.9rem; line-height: 1; }
.sbs-up     { color: #2e9e44; }
.sbs-down   { color: #d33; }
.sbs-flat   { color: #999; }

/* Chart + FY totals row sits beneath the card grid. Chart stretches; totals
   table is fixed-width on the right at wide viewports, narrows at md, then
   stacks below the chart on tablet and mobile. min-width:0 on the chart cell
   is critical — without it the chart's intrinsic content size can prevent the
   1fr track from shrinking below the chart's natural width. */
.sbs-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
@media (max-width: 1199.98px) { .sbs-chart-row { grid-template-columns: minmax(0, 1fr) 180px; } }
@media (max-width: 991.98px)  { .sbs-chart-row { grid-template-columns: 1fr; } }

.sbs-chart { min-width: 0; }  /* let the chart cell shrink within the grid track */

/* Chart canvas height scales with viewport so the chart looks balanced on
   tablets and phones rather than sticking at the desktop 380px. */
.sbs-chart-canvas {
    width: 100%;
    height: 380px;
}
@media (max-width: 1199.98px) { .sbs-chart-canvas { height: 340px; } }
@media (max-width: 991.98px)  { .sbs-chart-canvas { height: 300px; } }
@media (max-width: 575.98px)  { .sbs-chart-canvas { height: 240px; } }

.sbs-chart-title {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.sbs-fy-table {
    margin-top: 28px;       /* visually align table body roughly with chart bars */
    font-size: 0.9rem;
}
@media (max-width: 991.98px) {
    .sbs-fy-table { margin-top: 8px; }  /* no chart-legend offset needed when stacked */
}
.sbs-fy-table th {
    background: #f4f6f8;
    color: #333;
}
.sbs-fy-table td { font-variant-numeric: tabular-nums; }

.sbs-chart-tip {
    padding: 6px 10px;
    font-size: 0.85rem;
}

/* Customer-card "Messages" tab — emails block + SMS chat block. */
.messages-tab          { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px; }
@media (max-width: 1199.98px) { .messages-tab { grid-template-columns: 1fr; } }
.messages-block        { border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; overflow: hidden; }
.messages-block-header { background: #f1f5f9; padding: 8px 12px; font-weight: 600; color: #1f2937; display: flex; align-items: center; gap: 8px; }
.messages-placeholder  { padding: 16px; color: #6b7280; font-style: italic; font-size: 0.9rem; }

/* Email list */
.email-list      { max-height: 480px; overflow-y: auto; }
.email-row       { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.email-row:hover { background: #f8fafc; }
.email-meta      { font-size: 0.75rem; color: #6b7280; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.email-from      { color: #475569; }
.email-status    { padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.email-status.ok   { background: #dcfce7; color: #166534; }
.email-status.fail { background: #fee2e2; color: #991b1b; }
.email-subject   { font-size: 0.92rem; color: #111827; margin-top: 2px; }

/* SMS thread bubbles — in on left (grey), out on right (blue). */
.sms-thread {
    max-height: 420px; overflow-y: auto;
    padding: 12px; display: flex; flex-direction: column; gap: 6px;
    background: #f8fafc;
}
.sms-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 14px;
    font-size: 0.9rem; line-height: 1.35; word-wrap: break-word;
}
.sms-in  { align-self: flex-start; background: #e5e7eb; color: #111827; border-bottom-left-radius: 4px; }
.sms-out { align-self: flex-end;   background: #0d72b9; color: #ffffff; border-bottom-right-radius: 4px; }
.sms-body        { white-space: pre-wrap; }
.sms-meta        { font-size: 0.7rem; opacity: 0.75; margin-top: 4px; }
.sms-optout-flag { color: #fde68a; font-weight: 600; }

.sms-composer {
    display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch;
    padding: 8px 12px; border-top: 1px solid #e2e8f0; background: #ffffff;
}
.sms-phone-tag {
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 3px;
    padding: 1px 6px; font-weight: 500; font-size: 0.78rem; color: #475569;
}
.sms-optout-tag {
    background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
    border-radius: 3px; padding: 1px 6px; font-size: 0.78rem; font-weight: 600;
}

/* =====================================================================
   Franchise Sales pipeline (release 1) — MASTER-only pages under
   /admin/franchise-sales. Phase colours map to the same 5 phases the
   schema uses (Phase1At..Phase5At).
   ===================================================================== */

/* Pipeline grid */
.fs-pipeline-title   { margin: 12px 0 8px 0; }
.fs-pipeline-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px 0; }
.fs-pipeline-count   { color: #6b7280; font-size: 0.9rem; margin-left: auto; }
.fs-name-link        { color: #0d72b9; font-weight: 600; text-decoration: none; }
.fs-name-link:hover  { text-decoration: underline; }
.fs-secondary        { font-size: 0.78rem; color: #6b7280; }

.fs-phase-pill {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.fs-phase-1 { background: #e0e7ff; color: #3730a3; }
.fs-phase-2 { background: #fef3c7; color: #92400e; }
.fs-phase-3 { background: #dbeafe; color: #1e40af; }
.fs-phase-4 { background: #d1fae5; color: #065f46; }
.fs-phase-5 { background: #fce7f3; color: #9d174d; }

/* Detail page */
.fs-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin: 12px 0;
}
.fs-detail-subline   { color: #6b7280; font-size: 0.88rem; margin-top: 4px; }
.fs-detail-actions   { display: flex; gap: 8px; }

/* Two-column grid: identity stacks above notes in the left (wider) column;
   phases sits in its own right column, free to be as tall as it needs.
   align-items:start prevents either column from stretching vertically. */
.fs-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "identity phases" "notes phases";
    gap: 16px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .fs-detail-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "identity" "phases" "notes";
    }
}
.fs-detail-identity  { grid-area: identity; }
.fs-detail-phases    { grid-area: phases; }
.fs-detail-notes     { grid-area: notes; }
.fs-detail-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; min-width: 0;
}
.fs-detail-card h4 { margin: 0 0 12px 0; font-size: 1.05rem; color: #1f2937; }

/* Phase timeline */
.fs-phase-timeline { list-style: none; padding: 0; margin: 0; }
.fs-phase {
    display: grid; grid-template-columns: 32px 1fr; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.fs-phase:last-child { border-bottom: none; }
.fs-phase-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    background: #e5e7eb; color: #6b7280;
}
.fs-phase.reached .fs-phase-dot  { background: #10b981; color: #ffffff; }
.fs-phase.current .fs-phase-dot  { background: #0d72b9; color: #ffffff; box-shadow: 0 0 0 3px #dbeafe; }
.fs-phase-label  { font-weight: 600; color: #1f2937; }
.fs-phase-when   { font-size: 0.78rem; color: #6b7280; }
.fs-phase.pending .fs-phase-label { color: #6b7280; }

/* Documents — one row per type with checkbox + Send button */
.fs-doc-rows {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.92rem;
}
.fs-doc-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px dashed #f1f5f9;
}
.fs-doc-row:last-child { border-bottom: none; }
.fs-doc-library-link {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

/* Send Document popup */
.fs-send-doc-missing { padding: 16px; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; }

/* Reset-for-testing confirmation modal body. */
.fs-reset-confirm           { padding: 8px 20px; color: #1f2937; }
.fs-reset-confirm p         { margin: 0 0 10px; }
.fs-reset-confirm ul        { margin: 0 0 12px; padding-left: 22px; font-size: 0.9rem; color: #374151; }
.fs-reset-confirm li        { margin-bottom: 3px; }
.fs-reset-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 14px; border-top: 1px solid #e5e7eb; margin-top: 16px;
}

/* =====================================================================
   Inter-Company Sales
   ===================================================================== */
.ic-page                { padding: 8px 16px 32px; max-width: 1300px; margin: 0 auto; color: #1f2937; }
.ic-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.ic-header h1           { margin: 0; font-size: 1.5rem; font-weight: 700; color: #0d72b9; }
.ic-subtitle            { margin: 4px 0 0; color: #6b7280; font-size: 0.92rem; }
.ic-actions             { display: flex; gap: 8px; flex-wrap: wrap; }

.ic-detail-grid {
    display: grid; grid-template-columns: 1fr 380px; gap: 16px;
    align-items: start; margin-bottom: 16px;
}
@media (max-width: 991.98px) { .ic-detail-grid { grid-template-columns: 1fr; } }

.ic-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 18px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.ic-card h3             { margin: 0 0 10px; color: #1f2937; font-size: 1rem; }
.ic-warn                {
    margin-top: 8px; padding: 8px 12px;
    background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px;
    color: #92400e; font-size: 0.85rem;
}

/* Status chips */
.ic-chip {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px;
}
.ic-chip-ok    { background: #dcfce7; color: #166534; }
.ic-chip-busy  { background: #dbeafe; color: #1e40af; }
.ic-chip-warn  { background: #fef3c7; color: #92400e; }
.ic-chip-bad   { background: #fee2e2; color: #991b1b; }
.ic-chip-draft { background: #e2e8f0; color: #475569; }
.ic-chip-muted { background: #f1f5f9; color: #94a3b8; }

/* Push-status legs */
.ic-leg                 { padding: 10px 0; border-top: 1px solid #f1f5f9; font-size: 0.9rem; }
.ic-leg:first-of-type   { border-top: 0; padding-top: 0; }
.ic-leg-head            { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ic-leg a               { color: #0d72b9; text-decoration: none; }
.ic-leg a:hover         { text-decoration: underline; }
.ic-err                 { color: #b91c1c; font-size: 0.8rem; padding-top: 4px; word-break: break-word; }

/* Lines table */
.ic-lines               { padding: 14px 18px 8px; }
.ic-lines-head          { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ic-lines-table         { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ic-lines-table th      {
    text-align: left; padding: 8px 6px;
    background: linear-gradient(180deg, #0d72b9 0%, #0a5e95 100%);
    color: #ffffff; font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.ic-lines-table td      { padding: 6px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ic-lines-table input   {
    width: 100%; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px;
    font-family: inherit; font-size: 0.9rem; background: #ffffff;
}
.ic-lines-table input:focus { outline: none; border-color: #0d72b9; box-shadow: 0 0 0 2px rgba(13,114,185,0.18); }
.ic-col-code            { width: 110px; }
.ic-col-num             { width: 100px; text-align: right; }
.ic-col-act             { width: 36px; }
.ic-line-total          { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ic-tfoot-label         { text-align: right; font-weight: 700; color: #475569; padding-top: 6px; }
.ic-tfoot-total td      { font-size: 1rem; color: #0d72b9; border-top: 2px solid #0d72b9; padding-top: 8px; }

/* =====================================================================
   Schedule — Bulk reminder composer popup
   ===================================================================== */
.bulk-form         { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
.bulk-summary      { display: flex; gap: 12px; margin-bottom: 10px; }
.bulk-stat         { flex: 1; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; text-align: center; }
.bulk-stat-val     { font-size: 1.4rem; font-weight: 700; color: #0d72b9; font-variant-numeric: tabular-nums; }
.bulk-stat-lbl     { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; }
.bulk-stat-skip .bulk-stat-val { color: #b45309; }
/* "Already reminded" — softer signal than Skipped: purple instead of amber so
   the operator's eye can tell at a glance that this is "intentionally held
   back" rather than "couldn't reach". */
.bulk-stat-reminded .bulk-stat-val { color: #6b21a8; }

/* Schedule grid Name cell — anchor link + optional "Reminded DD MMM" pill
   side by side on one line. The pill colour matches the popup's
   bulk-stat-reminded accent so the same idea reads consistently in both
   places. */
.scheduleNameCell        { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scheduleReminderPill {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f3e8ff;
    color: #6b21a8;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: help;
}
.bulk-label        { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.bulk-input .dxbl-textbox,
.bulk-input .dxbl-memo,
.bulk-input input,
.bulk-input textarea {
    border: 1px solid #cbd5e1 !important; border-radius: 6px !important;
    background: #ffffff !important; padding: 8px 12px !important; box-shadow: none !important;
}
.bulk-input input:focus,
.bulk-input textarea:focus {
    border-color: #0d72b9 !important; box-shadow: 0 0 0 3px rgba(13,114,185,.15) !important; outline: none !important;
}
.bulk-hint         { font-size: 0.78rem; color: #6b7280; }
.bulk-hint code    { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-size: 0.85em; color: #0d72b9; }
.bulk-skipped      { margin-top: 6px; font-size: 0.85rem; color: #6b7280; }
.bulk-skipped summary { cursor: pointer; color: #b45309; }
.bulk-skipped ul   { margin: 6px 0 0 20px; padding: 0; max-height: 140px; overflow-y: auto; }

.bulk-busy         { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px; text-align: center; }
.bulk-busy-title   { font-size: 1.1rem; font-weight: 700; color: #0d72b9; }
.bulk-busy-sub     { font-size: 0.9rem; color: #4b5563; font-variant-numeric: tabular-nums; }

/* Inline counter sitting beside the SMS label. Green while the template
   fits the single-segment limit; flips red when the operator's edits push
   past 160 so they can see at a glance the next send will bill double. */
.bulk-sms-counter {
    margin-left: 10px; padding: 1px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: #dcfce7; color: #166534;
    text-transform: none; letter-spacing: 0;
}
.bulk-sms-counter.over { background: #fee2e2; color: #991b1b; }

/* Send Document popup — stacked fields with breathing room, recipient
   pill at the top, attachment chip with metadata, full-bordered inputs
   instead of DxFormLayout's underline-only default. */
.fs-send-doc-form        { display: flex; flex-direction: column; gap: 18px; padding: 8px 18px; }
.fs-send-doc-field       { display: flex; flex-direction: column; gap: 6px; }
.fs-send-doc-label       {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: #6b7280;
}

/* Recipient pill — avatar circle + name + email stacked. */
.fs-send-doc-recipient {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.fs-send-doc-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #0d72b9 0%, #123b7a 100%);
    color: #ffffff; font-weight: 700; font-size: 1rem;
    flex-shrink: 0;
}
.fs-send-doc-recipient-meta       { display: flex; flex-direction: column; min-width: 0; }
.fs-send-doc-recipient-name       { font-weight: 700; color: #111827; }
.fs-send-doc-recipient-email      { color: #6b7280; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }

/* Bordered inputs — overrides DxTextBox/DxMemo's underline style so the
   field looks like a proper form input. */
.fs-send-doc-input .dxbl-textbox,
.fs-send-doc-input .dxbl-memo,
.fs-send-doc-input input,
.fs-send-doc-input textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
}
.fs-send-doc-input input:focus,
.fs-send-doc-input textarea:focus {
    border-color: #0d72b9 !important;
    box-shadow: 0 0 0 3px rgba(13, 114, 185, 0.15) !important;
    outline: none !important;
}

/* Attachment chip — icon block + filename + size metadata. */
.fs-send-doc-attachment {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.fs-send-doc-attachment-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: #fee2e2; color: #b91c1c; font-size: 1.2rem;
    flex-shrink: 0;
}
.fs-send-doc-attachment-meta { display: flex; flex-direction: column; min-width: 0; }
.fs-send-doc-attachment-name { font-weight: 600; color: #111827; }
.fs-send-doc-attachment-size { color: #6b7280; font-size: 0.85rem; }

/* Footer — right-aligned button row with a separator line above. */
.fs-send-doc-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 14px; border-top: 1px solid #e5e7eb;
}

/* Force the paper-plane icon inside the Send button to white. DevExpress's
   primary-button stylesheet only sets text colour on the .dxbl-btn-text
   span, so the icon inherits whatever Font Awesome's default is (dark). */
.fs-send-btn i,
.fs-send-btn .fa,
.fs-send-btn svg { color: #ffffff !important; fill: #ffffff !important; }

/* Global: any DX button rendered in a coloured style (primary/info/success/
   warning/danger) carries a solid background with white text. Make the
   icon inside follow the same rule — otherwise Font Awesome paints it
   dark against the coloured fill. */
.dxbl-btn-primary i, .dxbl-btn-primary .fa, .dxbl-btn-primary svg,
.dxbl-btn-info    i, .dxbl-btn-info    .fa, .dxbl-btn-info    svg,
.dxbl-btn-success i, .dxbl-btn-success .fa, .dxbl-btn-success svg,
.dxbl-btn-warning i, .dxbl-btn-warning .fa, .dxbl-btn-warning svg,
.dxbl-btn-danger  i, .dxbl-btn-danger  .fa, .dxbl-btn-danger  svg {
    color: #ffffff !important; fill: #ffffff !important;
}

/* Busy panel — shown while the email's in flight. Mirrors the Indexed
   page's loading card so the brand language is consistent. */
.fs-send-busy {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 60px 24px;
    text-align: center;
}
.fs-send-busy-title { font-size: 1.1rem; font-weight: 700; color: #0d72b9; }
.fs-send-busy-sub   { font-size: 0.9rem; color: #4b5563; line-height: 1.5; }

/* Hint text under inputs (e.g. "an EOI button is added automatically"). */
.fs-send-doc-hint   { font-size: 0.8rem; color: #6b7280; padding-top: 4px; }

/* Attachment list — multiple chip rows stacked, used by the Financials
   email popup (3 PDFs in one message). */
.fs-send-doc-attachment-list { display: flex; flex-direction: column; gap: 8px; }

/* Email 1 / Email 2 action cards on the enquirer detail page. Replaces
   the previous per-document checkbox + send list. */
.fs-email-cards {
    display: flex; flex-direction: column; gap: 12px;
    margin: 6px 0 12px;
}
.fs-email-card {
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: #ffffff; padding: 14px 16px;
    transition: border-color 120ms ease, background 120ms ease;
}
.fs-email-card.fs-email-sent { background: #f0fdf4; border-color: #bbf7d0; }
.fs-email-card-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 8px;
}
.fs-email-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0d72b9; font-size: 1rem; }
.fs-email-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #0d72b9; color: #ffffff; font-size: 0.78rem; font-weight: 700;
}
.fs-email-card.fs-email-sent .fs-email-badge { background: #166534; }
.fs-email-card.fs-email-sent .fs-email-card-title { color: #166534; }
.fs-email-status { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
.fs-email-status-sent { color: #166534; }
.fs-email-card-body    { font-size: 0.85rem; color: #4b5563; line-height: 1.5; margin-bottom: 10px; }
.fs-email-card-actions { display: flex; justify-content: flex-end; }

/* EOI view popup — structured read-only render of the 8 sections so HQ
   can scan the submission without downloading the PDF. */
.eoi-view              { padding: 4px 20px; color: #1f2937; }
.eoi-view-meta {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-bottom: 14px; padding: 10px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 0.85rem; color: #475569;
}
.eoi-view-h {
    margin: 22px 0 10px; padding: 6px 12px;
    background: #e6f0fa; border-left: 4px solid #0d72b9; border-radius: 4px;
    color: #0d72b9; font-size: 1rem; font-weight: 700;
}
.eoi-view-dl {
    display: grid; grid-template-columns: 220px 1fr;
    gap: 6px 16px; margin: 0;
    font-size: 0.9rem;
}
@media (max-width: 575.98px) { .eoi-view-dl { grid-template-columns: 1fr; } }
.eoi-view-dl dt        { font-weight: 600; color: #374151; }
.eoi-view-dl dd        { margin: 0; color: #111827; }
.eoi-view-dl .eoi-view-wide { grid-column: 1 / -1; white-space: pre-wrap; }
.eoi-view-narrative dd { white-space: pre-wrap; padding-bottom: 6px; }
.eoi-view-refs         { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 767.98px) { .eoi-view-refs { grid-template-columns: 1fr; } }
.eoi-view-ref          { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; }
.eoi-view-ref h4       { margin: 0 0 8px; color: #0d72b9; font-size: 0.95rem; }
.eoi-view-sig          { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
@media (max-width: 767.98px) { .eoi-view-sig { grid-template-columns: 1fr; } }
.eoi-view-sig img      { max-width: 100%; max-height: 160px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px; background: #ffffff; }
.eoi-view-actions      { display: flex; justify-content: flex-end; padding-top: 16px; margin-top: 18px; border-top: 1px solid #e5e7eb; }

/* Variant chooser for Email 2 — radio-card style. The whole card is the
   click target; outline + tint flips when selected. */
.fs-variant-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 575.98px) { .fs-variant-chooser { grid-template-columns: 1fr; } }
.fs-variant-option {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #ffffff; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.fs-variant-option:hover    { border-color: #cbd5e1; background: #f8fafc; }
.fs-variant-option.selected { border-color: #0d72b9; background: #eff6ff; }
.fs-variant-option input    { margin-top: 3px; }
.fs-variant-meta            { display: flex; flex-direction: column; }
.fs-variant-name            { font-weight: 700; color: #1f2937; }
.fs-variant-sub             { font-size: 0.82rem; color: #6b7280; }

/* Doc Library page */
.fs-docs-header {
    display: flex; justify-content: space-between; align-items: center; margin: 12px 0;
}
.fs-docs-upload {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; margin-bottom: 20px;
}
.fs-docs-upload h4   { margin-top: 0; }
.fs-docs-upload-form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.fs-docs-row {
    display: grid; grid-template-columns: 160px 1fr; gap: 12px;
    align-items: center;
}
.fs-docs-row > label { font-weight: 600; color: #374151; font-size: 0.9rem; }
.fs-docs-pending {
    color: #166534; background: #dcfce7; border: 1px solid #86efac;
    border-radius: 4px; padding: 4px 10px; font-size: 0.85rem;
}
.fs-docs-existing-title { margin-top: 8px; }
.fs-docs-active {
    background: #dcfce7; color: #166534; padding: 1px 6px;
    border-radius: 3px; font-weight: 600; font-size: 0.78rem;
}

/* =====================================================================
   Public EOI form (/eoi/{token}) — applicant-facing layout. Outer
   .public-layout removes the internal navmenu via the EmptyLayout
   component. Section anchor nav stays sticky on desktop, collapses
   to a single-column flow on mobile.
   ===================================================================== */
.public-layout { background: #eef2f7; min-height: 100vh; }
.eoi-shell     { max-width: 1080px; margin: 0 auto; padding: 24px 16px 80px; color: #1f2937; font-family: Segoe UI, Arial, Helvetica, sans-serif; }

.eoi-header {
    display: flex; gap: 20px; align-items: center;
    background: #ffffff; border-radius: 12px; padding: 18px 24px;
    box-shadow: 0 4px 14px rgba(15,23,42,.06); margin-bottom: 18px;
}
.eoi-brand img { width: 90px; height: auto; }
.eoi-title h1  { margin: 0; font-size: 1.4rem; color: #0d72b9; }
.eoi-subtitle  { margin: 4px 0 0; color: #6b7280; font-size: 0.9rem; }

.eoi-state { background: #ffffff; padding: 32px; border-radius: 12px; text-align: center; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.eoi-state h2 { margin-top: 0; color: #0d72b9; }
.eoi-state-bad h2 { color: #b91c1c; }
.eoi-state-ok h2  { color: #166534; }

.eoi-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 767.98px) { .eoi-layout { grid-template-columns: 1fr; } }

.eoi-sidenav {
    background: #ffffff; padding: 16px; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15,23,42,.06);
    position: sticky; top: 16px;
    font-size: 0.85rem;
}
.eoi-sidenav ol { padding: 0 0 0 18px; margin: 0; color: #4b5563; }
.eoi-sidenav li { margin: 6px 0; }
.eoi-sidenav a  { color: #0d72b9; text-decoration: none; }
.eoi-sidenav a:hover { text-decoration: underline; }

.eoi-form           { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.eoi-section        { background: #ffffff; padding: 22px 26px; border-radius: 10px; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.eoi-section h2     { margin: 0 0 6px; font-size: 1.15rem; color: #0d72b9; }
.eoi-section-intro  { color: #6b7280; font-size: 0.88rem; margin: 0 0 12px; }

.eoi-form label {
    display: block; margin: 10px 0 4px;
    font-size: 0.85rem; font-weight: 600; color: #374151;
}
.eoi-form input[type="text"], .eoi-form input[type="email"],
.eoi-form input[type="tel"], .eoi-form input[type="number"],
.eoi-form textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 4px;
    font-family: inherit; font-size: 0.92rem; color: #111827;
    background: #ffffff; box-sizing: border-box;
}
.eoi-form input[readonly] { background: #f3f4f6; color: #6b7280; }
.eoi-form input:focus, .eoi-form textarea:focus {
    outline: none; border-color: #0d72b9; box-shadow: 0 0 0 3px rgba(13,114,185,.15);
}
.eoi-optional { color: #9ca3af; font-weight: 400; font-size: 0.78rem; }

/* "Same as residential" inline shortcut next to address labels. Rendered
   as a button so it never accidentally submits the form, but styled like
   a quiet link to read as a labelled affordance, not a primary action. */
.eoi-copy {
    background: transparent; border: 0; padding: 0;
    margin-left: 8px; cursor: pointer;
    color: #0d72b9; font-size: 0.78rem; font-weight: 400;
    text-decoration: underline; text-underline-offset: 2px;
}
.eoi-copy:hover { color: #0a5e95; }

/* Testing chip — fills every form field with sample data. Loud yellow
   so it's obviously a dev tool, never mistaken for a regular action. */
.eoi-fill-test {
    margin-left: auto;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fcd34d; border-radius: 999px;
    padding: 6px 14px; cursor: pointer;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.3px;
}
.eoi-fill-test:hover { background: #fde68a; }

/* Pre-submit completeness warning modal. Backdrop dims the form; the
   modal card sits centred. Two button options — "Go back" (secondary,
   recommended) and "Submit anyway" (amber to signal intent). */
.eoi-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.eoi-modal {
    background: #ffffff; border-radius: 14px;
    max-width: 560px; width: 100%;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}
.eoi-modal h2          { margin: 0 0 6px; color: #b45309; font-size: 1.3rem; }
.eoi-modal-sub         { color: #4b5563; font-size: 0.95rem; line-height: 1.5; margin: 0 0 16px; }
.eoi-modal-issues      {
    margin: 0 0 22px; padding: 14px 18px 14px 36px;
    background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
    color: #92400e; font-size: 0.9rem; line-height: 1.5;
}
.eoi-modal-issues li   { margin-bottom: 4px; }
.eoi-modal-actions     { display: flex; gap: 10px; justify-content: flex-end; }
.eoi-modal-secondary,
.eoi-modal-primary {
    padding: 10px 18px; border-radius: 6px; font-weight: 700;
    font-size: 0.92rem; cursor: pointer; border: 1px solid transparent;
}
.eoi-modal-secondary {
    background: #ffffff; color: #1f2937; border-color: #cbd5e1;
}
.eoi-modal-secondary:hover { background: #f8fafc; }
.eoi-modal-primary {
    background: #d97706; color: #ffffff;
}
.eoi-modal-primary:hover { background: #b45309; }

.eoi-grid                { display: grid; gap: 10px 16px; }
.eoi-grid-2              { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eoi-grid-3              { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .eoi-grid-2, .eoi-grid-3 { grid-template-columns: 1fr; } }
.eoi-grid-span-2         { grid-column: 1 / -1; }
.eoi-checkrow            { display: flex; flex-wrap: wrap; gap: 16px; padding: 6px 0; }
.eoi-checkrow label      { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }

/* Y/N row */
.eoi-yesno {
    display: grid; grid-template-columns: 1fr auto; gap: 12px;
    align-items: center; padding: 8px 0; border-bottom: 1px dashed #f1f5f9;
}
.eoi-yesno:last-child       { border-bottom: none; }
.eoi-yesno-label            { font-size: 0.9rem; color: #1f2937; }
.eoi-yesno-options          { display: inline-flex; gap: 14px; }
.eoi-yesno-options label    { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 600; color: #475569; }
.eoi-yesno-options input    { margin: 0; }

/* Referees side-by-side cards */
.eoi-ref-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 767.98px) { .eoi-ref-grid { grid-template-columns: 1fr; } }
.eoi-ref-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px; }
.eoi-ref-card h3 { margin: 0 0 8px; font-size: 1rem; color: #0d72b9; }

/* Signature pad */
.eoi-signature-section { background: #f9fafb; border: 1px solid #d1d5db; }

/* Deed of Confidentiality — long-form legal text inside the EOI form.
   Slightly tighter typography than the rest so the wall of text doesn't
   overwhelm. A subtle bordered card around it signals "read carefully". */
.eoi-deed {
    background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px;
    padding: 18px 22px; margin: 8px 0 14px;
    font-size: 0.9rem; line-height: 1.55; color: #374151;
    max-height: 480px; overflow-y: auto;
}
.eoi-deed h3   { margin: 0 0 12px; font-size: 1rem; color: #0d72b9; }
.eoi-deed h4   { margin: 18px 0 6px; font-size: 0.92rem; color: #0d72b9; letter-spacing: 0.4px; text-transform: uppercase; }
.eoi-deed p    { margin: 0 0 8px; }
.eoi-deed ol   { margin: 0 0 10px 22px; padding: 0; }
.eoi-deed li   { margin-bottom: 4px; }
.eoi-deed strong { color: #111827; }
.eoi-deed-acknowledge {
    background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
    padding: 10px 16px; margin: 4px 0 0;
}
.eoi-sig-wrap          { position: relative; }
.eoi-sig-canvas {
    width: 100%; height: 180px; background: #ffffff;
    border: 1px dashed #cbd5e1; border-radius: 6px; cursor: crosshair;
    touch-action: none; display: block;
}
.eoi-sig-clear {
    position: absolute; top: 8px; right: 8px;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px;
    padding: 4px 10px; font-size: 0.78rem; cursor: pointer; color: #475569;
}
.eoi-sig-clear:hover { background: #f8fafc; }

.eoi-error {
    background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
    border-radius: 4px; padding: 10px 12px; margin-top: 12px; font-size: 0.9rem;
}

.eoi-submit-row { padding-top: 14px; display: flex; justify-content: flex-end; }
.eoi-submit {
    background: #0d72b9; color: #ffffff; border: none; border-radius: 6px;
    padding: 12px 28px; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.eoi-submit:hover    { background: #0a5e95; }
.eoi-submit:disabled { background: #94a3b8; cursor: not-allowed; }

.eoi-footer       { text-align: center; padding-top: 20px; color: #6b7280; font-size: 0.78rem; }

/* Notes feed */
.fs-notes-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fs-notes-list    { display: flex; flex-direction: column; gap: 12px; }
.fs-note          { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 12px; }
.fs-note-meta     { font-size: 0.82rem; color: #475569; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.fs-note-subj     { color: #0d72b9; }
.fs-note-actions  { margin-left: auto; display: flex; gap: 4px; }
.fs-note-body     { margin-top: 6px; white-space: pre-wrap; color: #111827; }
.fs-note-form           { padding: 12px 4px; }
.fs-note-form-actions   { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Email Composer popup — DxPopup BodyTemplate content renders inside a portal
   outside scoped CSS boundaries, so these rules live in site.css (not a
   .razor.css partial). */
/* Per-element spacing instead of a uniform flex gap. The DxHtmlEditor reserves
   internal padding and visually "floats" off its container when there's a
   parent flex gap > 0, so we drive its top margin explicitly to 0 and use
   margins on the items above it instead. */
.ecp-body { display: flex; flex-direction: column; padding: 8px 20px; }
.ecp-body > .ecp-meta { margin-bottom: 10px; }
.ecp-body > .ecp-hint { margin-bottom: 6px; }
.ecp-body > .ecp-html-editor { margin: 0; }
.ecp-body > .ecp-actions { margin-top: 12px; }
.ecp-meta { display: flex; flex-direction: column; gap: 8px; }
.ecp-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.ecp-row > label { font-weight: 600; color: #374151; font-size: 0.9rem; }
.ecp-readonly { color: #4b5563; font-size: 0.92rem; }
.ecp-to-cell { display: flex; flex-direction: column; gap: 4px; }
.ecp-validation { font-size: 0.82rem; }
.ecp-validation.ecp-error { color: #b91c1c; }
.ecp-validation.ecp-info  { color: #1d4ed8; }
.ecp-hint {
    background: #f3f6fa;
    border: 1px solid #dbe3eb;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.82rem;
    color: #374151;
}
.ecp-hint code {
    background: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #d1d5db;
    color: #0d72b9;
}
.ecp-hint code.ecp-token {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}
.ecp-hint code.ecp-token:hover {
    background: #e0ecf6;
    border-color: #0d72b9;
}
.ecp-signature-preview {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
}
.ecp-sig-title { font-size: 0.78rem; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.ecp-sig-line  { line-height: 1.35; color: #111827; }
.ecp-sig-muted { color: #6b7280; font-size: 0.78rem; padding-top: 4px; }
.ecp-actions   { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }

.badge-collected {
    display: inline-block;
    background-color: #0d72b9;
    color: white;
    font-size: 0.75rem;
    /*font-weight: bold;*/
    padding: 4px 7px 4px 7px;
    border-radius: 8px;
    font-family: sans-serif;
    border-radius: 6px;
}

.soOrderSummary .dxbl-checkbox {
    --dxbl-checkbox-primary-indeterminate-readonly-check-element-bg: black;
    --dxbl-checkbox-primary-checked-readonly-check-element-border: black;
}

.mapmarker{
    background-color: red;
}

.gm-style-iw-chr{
    height:19px;
}

.toolbar { margin: 12px 0 16px; max-width: 420px; }

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.asset-card {
    text-align: left;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 16px;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: transform .08s ease, box-shadow .08s ease;
}
.asset-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.asset-card.selected { outline: 2px solid rgba(0, 122, 255, .55); }

.asset-title { font-size: 1.05rem; font-weight: 650; margin-bottom: 6px; }
.asset-sub { opacity: .8; font-size: .9rem; }
.asset-sub .sep { margin: 0 8px; opacity: .6; }

.doc-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 1100px) {
    .doc-sections { grid-template-columns: 1fr 1fr; }
}

.section {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.section-header h3 { margin: 0; font-size: 1.02rem; }
.count { opacity: .7; }

.doc-grid { display: grid; gap: 10px; }

.doc-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 12px;
}

.doc-title { font-weight: 650; margin-bottom: 4px; }
.doc-summary { opacity: .85; font-size: .92rem; margin-bottom: 8px; }
.doc-meta { opacity: .65; font-size: .85rem; }

.doc-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.empty { opacity: .75; padding: 14px 2px; }
.empty.small { padding: 8px 2px; }

.popup-body { display: grid; gap: 10px; }
.field label { display:block; font-size:.9rem; opacity:.75; margin-bottom:6px; }
.popup-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }

.bulkbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    background: rgba(0,0,0,.04);
    margin: 8px 0 12px;
}
.bulk-left, .bulk-right{ display:flex; align-items:center; gap:10px; }

.doc-select{
    display:flex;
    align-items:flex-start;
    padding-top:4px;
}
.doc-card.row{
    grid-template-columns: 34px 1fr auto; /* adds checkbox column */
}

/* Each doc becomes a clean 3-column row */
.doc-card.doc-row{
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 12px 14px;
}

/* Checkbox column */
.doc-select{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: 2px;
}

/* Main text column */
.doc-main{ min-width: 0; }
.doc-title{ font-weight: 650; margin-bottom: 2px; }
.doc-meta{ opacity: .70; font-size: .9rem; }
.doc-url{
    opacity:.65;
    font-size:.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 700px;
    margin-top: 2px;
}

/* Actions: horizontal, compact, right-aligned */
.doc-actions.doc-actions-row{
    display:flex;
    flex-direction: row;
    gap: 10px;
    align-items:center;
    justify-content:flex-end;
    min-width: 0;
}

/* Optional: highlight selected rows */
.doc-card.is-selected{
    outline: 2px solid rgba(0, 122, 255, .35);
    background: rgba(0, 122, 255, .04);
}

/* Responsive: on narrow screens, actions wrap under nicely */
@media (max-width: 900px){
    .doc-card.doc-row{
        grid-template-columns: 44px 1fr;
        grid-template-areas:
      "sel main"
      "sel actions";
    }
    .doc-select{ grid-area: sel; }
    .doc-main{ grid-area: main; }
    .doc-actions.doc-actions-row{
        grid-area: actions;
        justify-content:flex-start;
        flex-wrap: wrap;
        margin-top: 8px;
    }
}

.email-text{
    white-space: pre-wrap;   /* keeps newlines, still wraps long lines */
    font-family: inherit;    /* or monospace if you prefer */
    margin: 0;
}

.meetingListItem {
    cursor: pointer;
}

.meetingListItem:hover {
    background-color: #f0f0f0;
}

.meetingListItemSelected {
    border-color: #0d6efd;
    background-color: #eef4ff;
}

/* Product Quick Edit drill-down popup -- must live in global CSS because
   DxPopup body content renders in an overlay outside scoped-CSS boundaries. */
.stockBtn {
    min-width: 60px;
    font-weight: 600;
}

.stockSummaryCard .h5 {
    font-weight: 600;
    color: #212529;
}

.stockSummaryCard small {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.stockTabs {
    border-bottom: 1px solid #dee2e6;
}

.stockTabContent {
    padding-top: 1rem;
}

/* =====================================================================
   Indexed page — business-performance dashboard. Grid-based two-column
   layout (chart + side card) per section, plus a KPI strip at the top
   so the most important number is visible without scanning a chart.
   ===================================================================== */
/* Constrain the dashboard canvas + centre it. The summary grid is ~1100px
   of column widths, so a 1300px cap keeps the table aligned without
   pushing it edge-to-edge on wide monitors. Same cap reads well for the
   Indexed page's chart + sidebar pairing. */
.ix-page {
    padding: 8px 16px 32px;
    color: #1f2937;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* Header bar — title + subtitle on the left, controls on the right.
   Wraps under each other on narrower viewports. */
.ix-header {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 18px;
}
.ix-header-text h1 { margin: 0; font-size: 1.6rem; font-weight: 700; color: #0d72b9; }
.ix-subtitle       { margin: 4px 0 0; color: #6b7280; font-size: 0.92rem; }

.ix-controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ix-control  { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.ix-control > label {
    font-size: 0.78rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ix-control-toggle { justify-content: flex-end; padding-bottom: 4px; }

/* ---- KPI strip ---------------------------------------------------- */
.ix-kpi-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; margin: 6px 0 24px;
}
@media (max-width: 767.98px) { .ix-kpi-strip { grid-template-columns: 1fr; } }

.ix-kpi-tile {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 16px 18px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.ix-kpi-label { font-size: 0.78rem; font-weight: 700; color: #6b7280; letter-spacing: 0.5px; text-transform: uppercase; }
.ix-kpi-value {
    font-size: 1.65rem; font-weight: 700; color: #111827; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ix-kpi-sub   { font-size: 0.82rem; color: #6b7280; margin-top: 2px; }

.ix-kpi-tile-delta .ix-kpi-value { color: #0d72b9; }
.ix-kpi-tile-delta.ix-kpi-up   .ix-kpi-value { color: #166534; }
.ix-kpi-tile-delta.ix-kpi-down .ix-kpi-value { color: #b91c1c; }
.ix-kpi-tile-delta.ix-kpi-up   { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%); border-color: #bbf7d0; }
.ix-kpi-tile-delta.ix-kpi-down { background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%); border-color: #fecaca; }

/* ---- Section (chart + side-table pair) --------------------------- */
.ix-section          { margin: 26px 0; }
.ix-section-head     {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.ix-section-head h2  { margin: 0; font-size: 1.2rem; font-weight: 700; color: #1f2937; }
.ix-section-control  { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.ix-section-control > label { font-size: 0.78rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }

.ix-section-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px; align-items: start;
}
@media (max-width: 991.98px) { .ix-section-body { grid-template-columns: 1fr; } }

.ix-chart-pane {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 12px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.ix-side-pane  { min-width: 0; }

/* ---- FY side card --------------------------------------------------
   Row layout: year (auto) · amount (right-aligned, tabular) · delta (right).
   Current FY gets a coloured chip background so "this year" is the first
   thing you read.
   ------------------------------------------------------------------ */
.ix-fy-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.ix-fy-card-header {
    background: #f1f5f9; color: #475569;
    padding: 10px 14px; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}
.ix-fy-rows { padding: 6px 0; }
.ix-fy-row {
    display: grid; grid-template-columns: 60px 1fr 64px;
    align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.ix-fy-row:last-child { border-bottom: none; }
.ix-fy-row-current {
    background: #e6f0fa;
    border-left: 3px solid #0d72b9;
    padding-left: 11px;
}
.ix-fy-year   { font-weight: 700; color: #1f2937; }
.ix-fy-amount {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: #111827;
}
.ix-fy-row-current .ix-fy-amount { color: #0d72b9; }
.ix-fy-delta {
    text-align: right; font-size: 0.78rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ix-fy-delta-up   { color: #166534; }
.ix-fy-delta-down { color: #b91c1c; }
.ix-fy-delta-flat { color: #94a3b8; }

/* ---- Loading card --------------------------------------------------
   Displayed while the BIData rollup runs server-side. Lives in the same
   visual language as the KPI strip / chart panes so it doesn't read as
   "something broke" — just "data is on the way". */
.ix-loading {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 56px 24px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    margin: 16px 0;
}
.ix-loading-text {
    font-size: 1.1rem; font-weight: 700; color: #0d72b9;
}
.ix-loading-sub {
    font-size: 0.9rem; color: #6b7280;
}
.ix-spinner {
    width: 52px; height: 52px;
    border: 5px solid #e2e8f0;
    border-top-color: #0d72b9;
    border-radius: 50%;
    animation: ix-spin 0.9s linear infinite;
}
@keyframes ix-spin { to { transform: rotate(360deg); } }

/* ---- Network Performance (Master home) ------------------------------
   Reuses the .ix-kpi-strip + .ix-section + .ix-chart-pane primitives.
   Only the bits unique to this page (4-tile strip variant, summary grid,
   CTA card) live here.
   ------------------------------------------------------------------ */
.ix-kpi-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .ix-kpi-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ix-kpi-strip-4 { grid-template-columns: 1fr; } }

/* Grid card polish — tabular numerics, alternating row stripes, hover
   highlight, and a gradient header band that lifts the table out of
   "drab DX grid" territory. */
.ix-summary-grid                                  { font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.ix-summary-grid .dxbl-grid-header-row > th       {
    background: linear-gradient(180deg, #0d72b9 0%, #0a5e95 100%);
    color: #ffffff; font-weight: 700;
    font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase;
    border-bottom: 0;
}
/* DevExpress wraps the caption in nested span/a elements that carry
   their own colour declarations. Force every descendant of the header
   row to inherit white, including SVG sort glyphs. !important is the
   sledgehammer needed to beat DX's stylesheet specificity. */
.ix-summary-grid .dxbl-grid-header-row,
.ix-summary-grid .dxbl-grid-header-row *      { color: #ffffff !important; }
.ix-summary-grid .dxbl-grid-header-row svg,
.ix-summary-grid .dxbl-grid-header-row path   { fill: #ffffff !important; stroke: #ffffff !important; }
.ix-summary-grid .dxbl-grid-data-row:nth-child(odd)  { background-color: #fafbfc; }
.ix-summary-grid .dxbl-grid-data-row:nth-child(even) { background-color: #ffffff; }
.ix-summary-grid .dxbl-grid-data-row:hover           { background-color: #eef5fb !important; }
.ix-summary-grid .dxbl-grid-data-row > td            { padding: 6px 10px; border-color: #f1f5f9; }
.ix-summary-grid .dxbl-grid-footer-cell {
    font-weight: 800; color: #0d72b9;
    background: #f1f5f9; border-top: 2px solid #0d72b9;
}

/* Franchisee column — first thing the eye should land on. Blue
   accent stripe on the left tells you "this is the row identifier". */
.ix-fr-name {
    font-weight: 700; color: #1f2937;
    border-left: 3px solid #0d72b9;
    padding-left: 8px; margin-left: -4px;
}

/* In-cell bar chart cells. The fill sits behind the number; the bar
   width is set inline so it scales with the column max. */
.ix-cell-bar {
    position: relative;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: #f8fafc;
}
.ix-cell-bar-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    border-radius: 4px;
    opacity: 0.85;
}
.ix-cell-bar-text {
    position: relative;
    z-index: 1;
    text-align: right;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #111827;
    line-height: 18px;
}

/* Series-specific bar colours — same palette as the Indexed chart so the
   two pages feel related. */
.ix-cell-bar-fill-brand { background: linear-gradient(90deg, #0d72b9 0%, #3b82f6 100%); }
.ix-cell-bar-fill-blue  { background: #bfdbfe; }
.ix-cell-bar-fill-amber { background: #fde68a; }
.ix-cell-bar-fill-green { background: #bbf7d0; }

/* Empty/zero cells — faded so the eye skips them and active rows
   stand out instead of competing for attention. */
.ix-cell-bar.is-zero    { background: transparent; }
.ix-cell-bar.is-zero .ix-cell-bar-fill { display: none; }
.ix-cell-bar.is-zero .ix-cell-bar-text { color: #cbd5e1; font-weight: 400; }
.ix-plain               { text-align: right; padding: 2px 6px; font-variant-numeric: tabular-nums; font-weight: 600; color: #111827; }
.ix-plain.is-zero       { color: #cbd5e1; font-weight: 400; }

/* Unactioned chip — only renders when count > 0, so it works as a
   "needs attention" badge rather than a constant red dot. */
.ix-chip-warn {
    display: inline-block;
    padding: 2px 10px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* CTA card — replaces the bare "fancy charts" anchor with something
   tappable that signals "more here". Plays nicely as a link. */
.ix-cta {
    display: flex; align-items: center; gap: 16px;
    margin-top: 22px; padding: 16px 22px;
    background: linear-gradient(135deg, #0d72b9 0%, #123b7a 100%);
    color: #ffffff; text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(13, 114, 185, 0.18);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.ix-cta:hover { transform: translateY(-1px); color: #ffffff; box-shadow: 0 10px 24px rgba(13, 114, 185, 0.28); text-decoration: none; }
.ix-cta-icon  { font-size: 1.6rem; opacity: 0.85; }
.ix-cta-body  { flex: 1; min-width: 0; }
.ix-cta-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ix-cta-sub   { font-size: 0.85rem; opacity: 0.85; margin-top: 2px; }
.ix-cta-arrow { font-size: 1.4rem; opacity: 0.85; }

/* =====================================================================
   POS-style line entry table — shared between Quote, Purchase Order
   and (transitively) any future page that picks the same UX.
   Originally lived in QuoteCard.razor.css (component-scoped); promoted
   here so the PurchaseOrderDetailPage can render the same look without
   needing its own copy.
   ===================================================================== */
.quote-lines {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.quote-lines th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e9ee;
    background: #f8fafc;
}
.quote-lines td {
    padding: 6px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}
.quote-lines .text-right { text-align: right; }

.ql-input-center input { text-align: center; }
.ql-input-right input  { text-align: right; }

.ql-total {
    font-variant-numeric: tabular-nums;
    color: #1f2a44;
}
.ql-trash {
    color: #b91c1c;
    cursor: pointer;
    padding: 4px;
}
.ql-trash:hover { color: #7f1d1d; }

.ql-totals-row td {
    font-weight: 600;
    background: #f8fafc;
    border-top: 1px solid #cbd5e1;
    border-bottom: none;
    font-size: 14px;
}
.ql-grand {
    font-size: 16px;
    color: #1f2a44;
    font-variant-numeric: tabular-nums;
}
.ql-empty {
    margin: 8px 0 16px;
    color: #6b7280;
}
.ql-add-row {
    margin-top: 12px;
}

/* ============================================================
   Customer card — "Invoices" tab
   Per-customer Xero-backed invoice list with paid/outstanding
   summary strip. Shown only when home franchise has linked Xero.
   ============================================================ */
.invoices-tab          { padding: 12px; }
.invoices-placeholder  { padding: 16px; color: #6b7280; font-style: italic; font-size: 0.9rem; }

/* Summary strip */
.invoices-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 991.98px) {
    .invoices-summary { grid-template-columns: repeat(2, 1fr); }
}
.invoices-summary-cell {
    background: #f7faff;
    border: 1px solid #d6e3f2;
    border-radius: 6px;
    padding: 10px 14px;
}
.invoices-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6b80;
    margin-bottom: 4px;
}
.invoices-summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #285481;
    font-variant-numeric: tabular-nums;
}
.invoices-summary-value.paid        { color: #166534; }
.invoices-summary-value.outstanding { color: #b34a4a; }

/* Invoices grid */
.invoices-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.9rem;
}
.invoices-grid thead th {
    background: #f4f6f9;
    color: #285481;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #dadada;
}
.invoices-grid thead th.text-right { text-align: right; }
.invoices-grid tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.invoices-grid tbody tr:last-child td { border-bottom: none; }
.invoices-grid tbody tr:hover { background: #fafbfc; }
.invoices-grid tbody tr.row-overdue { background: #fff7f7; }
.invoices-grid tbody tr.row-overdue:hover { background: #fff0f0; }
.invoices-grid .money {
    font-variant-numeric: tabular-nums;
    color: #285481;
    font-weight: 500;
}

/* Status pills */
.invoice-status {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #e2e8f0;
    color: #475569;
}
.invoice-status.status-paid       { background: #dcfce7; color: #166534; }
.invoice-status.status-authorised { background: #fef3c7; color: #92400e; }
.invoice-status.status-submitted  { background: #e0e7ff; color: #3730a3; }
.invoice-status.status-draft      { background: #f1f5f9; color: #475569; }
.invoice-status.status-voided,
.invoice-status.status-deleted    { background: #f3e8ff; color: #6b21a8; }

.invoices-note {
    display: block;
    margin-top: 8px;
    color: #6b7280;
    font-style: italic;
    font-size: 0.78rem;
}

/* Clickable rows in the invoices grid */
.invoices-grid tr.invoice-clickable { cursor: pointer; }
.invoices-grid tr.invoice-clickable:hover { background: #eef4ff; }

/* Invoice-detail popup body */
.invoice-detail              { padding: 4px 4px 12px 4px; }
.invoice-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 16px;
    padding: 8px 12px;
    background: #f7faff;
    border: 1px solid #d6e3f2;
    border-radius: 4px;
    font-size: 0.88rem;
}
@media (max-width: 991.98px) {
    .invoice-detail-meta { grid-template-columns: repeat(2, 1fr); }
}
.invoice-detail-section {
    color: #285481;
    margin-top: 18px;
    margin-bottom: 6px;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 4px;
}
.invoice-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #e6e6e6;
    margin-top: 14px;
}
.invoices-grid tfoot td {
    background: #fafbfc;
    border-top: 1px solid #dadada;
    padding: 6px 10px;
}