/* _content/HHCRM_Web/Components/AddressLookup.razor.rz.scp.css */
/* Make this component render like the other cards in the drawer */

/* Card wrapper */
.group[b-rmid1r5hof] {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .group > .legend[b-rmid1r5hof] {
        font-weight: 600;
        margin: 0 0 6px;
        opacity: .75;
    }

/* Grid + fields */
.form-grid[b-rmid1r5hof] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 6px 10px;
}

.ff[b-rmid1r5hof] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

    .ff > label[b-rmid1r5hof] {
        font-size: .78rem;
        line-height: 14px;
        height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

/* Column helpers */
.col-12[b-rmid1r5hof] {
    grid-column: 1 / -1;
}

.col-8[b-rmid1r5hof] {
    grid-column: span 8;
}

.col-6[b-rmid1r5hof] {
    grid-column: span 6;
}

.col-4[b-rmid1r5hof] {
    grid-column: span 4;
}

.col-3[b-rmid1r5hof] {
    grid-column: span 3;
}

.col-2[b-rmid1r5hof] {
    grid-column: span 2;
}

@media (max-width:980px) {
    .col-8[b-rmid1r5hof], .col-6[b-rmid1r5hof], .col-4[b-rmid1r5hof], .col-3[b-rmid1r5hof], .col-2[b-rmid1r5hof] {
        grid-column: 1 / -1;
    }
}

/* Respect Bootstrap look */
input.form-control[b-rmid1r5hof],
select.form-control[b-rmid1r5hof],
textarea.form-control[b-rmid1r5hof] {
    width: 100%;
}
/* _content/HHCRM_Web/Components/AdminCrudTable.razor.rz.scp.css */
/* Container: header + scrollable table area */
.admin-crud[b-qdtkhm3js0] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    max-height: calc(100vh - 180px); /* keep within screen, inner scroll handles overflow */
}

/* Header row (search + New) */
.crud-head[b-qdtkhm3js0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
}

    .crud-head h3[b-qdtkhm3js0] {
        margin: 0;
    }

    .crud-head .spacer[b-qdtkhm3js0] {
        flex: 1;
    }

/* Search box */
.crud-search[b-qdtkhm3js0] {
    min-width: 180px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font: inherit;
    outline: none;
}

    .crud-search:focus[b-qdtkhm3js0] {
        border-color: #c7d2fe;
    }

/* Body */
.admin-crud-body[b-qdtkhm3js0] {
    flex: 1;
    min-height: 0;
}

/* Scroll area for the table */
.table-scroll[b-qdtkhm3js0] {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
}

/* Grid */
.grid[b-qdtkhm3js0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .grid thead th[b-qdtkhm3js0] {
        position: sticky;
        top: 0;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        z-index: 1;
        font-weight: 600;
        text-align: left;
        padding: 9px 10px;
        white-space: nowrap;
    }

    .grid tbody td[b-qdtkhm3js0] {
        padding: 8px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .grid tr:hover td[b-qdtkhm3js0] {
        background: #fafafa;
    }

/* Action icons – soft look */
.actions[b-qdtkhm3js0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .actions .icon-btn[b-qdtkhm3js0] {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #f9fafb;
        border: none;
        outline: none;
    }

        .actions .icon-btn:hover[b-qdtkhm3js0] {
            background: #e5e7eb;
        }

/* Inputs in inline edit mode */
.grid input[type="text"][b-qdtkhm3js0],
.grid input[type="number"][b-qdtkhm3js0],
.grid input[type="checkbox"][b-qdtkhm3js0],
.grid input[type="date"][b-qdtkhm3js0] {
    font: inherit;
}

.grid input[type="text"][b-qdtkhm3js0],
.grid input[type="number"][b-qdtkhm3js0],
.grid input[type="date"][b-qdtkhm3js0] {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px;
}
/* _content/HHCRM_Web/Components/AuditStamp.razor.rz.scp.css */
/* site.css */
.card .card-head[b-jk5cr2ggc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card .card-head .header-right[b-jk5cr2ggc0] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.audit-stamp[b-jk5cr2ggc0] {
    font-size: .875rem;
    opacity: .85;
}
/* _content/HHCRM_Web/Components/ClinicAutocomplete.razor.rz.scp.css */
.autocomplete[b-kifyra73vy] {
    position: relative;
}

.autocomplete-list[b-kifyra73vy] {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 0;
    right: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-kifyra73vy] {
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-kifyra73vy] {
            background: #f6f9ff;
        }

.autocomplete-empty div[b-kifyra73vy] {
    padding: 8px 10px;
    cursor: not-allowed;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.create-btn[b-kifyra73vy] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-kifyra73vy] {
        background: #f8fbff;
    }

.autocomplete-status[b-kifyra73vy] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/ColumnHeaderMenu.razor.rz.scp.css */
.chm[b-gsxitv7u44] {
    position: relative;
    display: inline-block;
}

.chm-trigger[b-gsxitv7u44] {
    appearance: none;
    border: 0;
    background: transparent;
    /*padding: 6px 8px; Must be same as data for everything to align*/
    font: inherit;
    font-weight: 600; /* make the text bold like th */
    color: #20314f; /* dark text so it shows */
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex; /* keep arrow aligned */
    align-items: center;
    gap: 6px;
}

    .chm-trigger:hover[b-gsxitv7u44] {
        background: #eef3ff;
    }

    .chm-trigger:focus[b-gsxitv7u44], .chm-trigger:focus-visible[b-gsxitv7u44] {
        outline: none;
    }

.chev[b-gsxitv7u44] {
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 4px;
}


.chm-menu[b-gsxitv7u44] {
    position: absolute;
    top: 100%;
    left: 0;
    display:flex;
    flex-direction:column;
    margin-top: 6px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    padding: 6px;
    z-index: 20;
}

.chm-item[b-gsxitv7u44] {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}

    .chm-item:hover[b-gsxitv7u44] {
        background: #f2f6ff;
    }

.chm-sep[b-gsxitv7u44] {
    height: 1px;
    background: #eef1f5;
    margin: 6px 0;
}

.chm-filter[b-gsxitv7u44] {
    padding: 8px;
    display: grid;
    gap: 8px;
}

    .chm-filter select[b-gsxitv7u44], .chm-input[b-gsxitv7u44] {
        width: 100%;
        height: 34px;
        border: 1px solid #d5dbe7;
        border-radius: 8px;
        padding: 6px 8px;
    }

.chm-row[b-gsxitv7u44] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn[b-gsxitv7u44] {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #cfd6e4;
    background: #fff;
    cursor: pointer;
}

    .btn.primary[b-gsxitv7u44] {
        background: #2b6fdc;
        border-color: #2b6fdc;
        color: #fff;
    }

    .btn:focus[b-gsxitv7u44], .btn:focus-visible[b-gsxitv7u44] {
        outline: none;
    }
.chm-trigger.filtered[b-gsxitv7u44] {
    color: #2b6fdc; /* blue to show active filter */
}

.filter-dot[b-gsxitv7u44] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2b6fdc;
    border-radius: 50%;
    margin-left: 4px;
}
/* _content/HHCRM_Web/Components/CustomerAutocomplete.razor.rz.scp.css */
.autocomplete[b-5rto7lh7bw] {
    position: relative;
}

.autocomplete-list[b-5rto7lh7bw] {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 0;
    right: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-5rto7lh7bw] {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        padding: 8px 10px;
        cursor: pointer;
    }

        .autocomplete-list li:hover[b-5rto7lh7bw] {
            background: #f6f9ff;
        }

.autocomplete-empty[b-5rto7lh7bw] {
    display: grid;
    gap: 8px;
    cursor: not-allowed;
}

.create-btn[b-5rto7lh7bw] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-5rto7lh7bw] {
        background: #f8fbff;
    }

.autocomplete-status[b-5rto7lh7bw] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/CustomerDetailsView.razor.rz.scp.css */
/* ===== page wrapper ===== */
.detail-page[b-70hrr0htfw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===========================================================
   Labels / values (your preferred style)
   =========================================================== */
.customer-details-view .f .label[b-70hrr0htfw],
.customer-details-view dt[b-70hrr0htfw] {
    font-weight: 400;
    color: #2b3648;
}

.customer-details-view .f .value[b-70hrr0htfw],
.customer-details-view dd[b-70hrr0htfw] {
    font-weight: 600;
    color: #1f2937;
}

/* Make section headers bold */
.customer-details-view .card-head h3[b-70hrr0htfw] {
    font-weight: 700;
}

/* ===== tabs ===== */
.tabs[b-70hrr0htfw] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.tab[b-70hrr0htfw] {
    color: #1f2d4d;
    text-decoration: none;
    padding: 8px 6px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
}

    .tab:hover[b-70hrr0htfw] {
        background: #eef3ff;
    }

    .tab.active[b-70hrr0htfw] {
        border-color: #2b6fdc;
    }

/* ===== columns ===== */
.cols[b-70hrr0htfw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width:1100px) {
    .cols[b-70hrr0htfw] {
        grid-template-columns: 1fr;
    }
}

/* ===== cards ===== */
.card[b-70hrr0htfw] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid #e9edf3;
}

.card-head[b-70hrr0htfw] {
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card-head h3[b-70hrr0htfw] {
        margin: 0;
        font-size: 1.05rem;
        color: #20314f;
    }

.card-body[b-70hrr0htfw] {
    padding: 12px;
}

/* ===== field rows ===== */
.fields[b-70hrr0htfw] {
    margin: 0;
}

    .fields .row[b-70hrr0htfw],
    .f[b-70hrr0htfw] {
        display: grid;
        grid-template-columns: 180px 1fr;
        align-items: start;
        gap: 10px;
        padding: 6px 0;
    }

/* ===== two-col in card ===== */
.two-col[b-70hrr0htfw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width:900px) {
    .two-col[b-70hrr0htfw] {
        grid-template-columns: 1fr;
    }
}

/* ===== inputs ===== */
input.text[b-70hrr0htfw],
select.text[b-70hrr0htfw],
textarea.text[b-70hrr0htfw] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

input.text[b-70hrr0htfw] {
    height: 34px;
    padding: 6px 8px;
    border: 1px solid #cfd7e6;
    border-radius: 8px;
}

/* ===== buttons ===== */
.btn[b-70hrr0htfw] {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cfd7e6;
    background: #fff;
    cursor: pointer;
}

    .btn:hover[b-70hrr0htfw] {
        background: #f3f6fd;
    }

    .btn.primary[b-70hrr0htfw] {
        background: #2b6fdc;
        color: #fff;
        border-color: #2b6fdc;
    }

    .btn.outline[b-70hrr0htfw] {
        background: #fff;
        border-color: #2b6fdc;
        color: #2b6fdc;
    }

/* ===== map ===== */
.map[b-70hrr0htfw] {
    margin-top: 12px;
    height: 280px;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(135deg,#f6f4f2 0%, #efeceb 100%);
    overflow: hidden;
    border: 1px dashed #d7dbe4;
}

    .map .pin[b-70hrr0htfw] {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #556;
        opacity: .8;
    }

/* ===== group titles ===== */
.group-title[b-70hrr0htfw] {
    margin: 12px 0 6px;
    font-size: .95rem;
    font-weight: 700;
    color: #2b3648;
    opacity: .85;
}

.card-body hr[b-70hrr0htfw] {
    border: 0;
    border-top: 1px solid #edf1f7;
    margin: 14px 0;
}

/* ===== favourite icon ===== */
.icon-btn[b-70hrr0htfw] {
    --fav-on: #f59e0b;
    --fav-off: #94a3b8;
    height: 34px;
    width: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid #cfd7e6;
    background: #fff;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
    padding: 0;
    line-height: 1;
}

    .icon-btn .star[b-70hrr0htfw] {
        font-size: 18px;
        line-height: 1;
        color: var(--fav-off);
        transition: color .2s, text-shadow .2s, filter .2s;
    }

    .icon-btn:hover[b-70hrr0htfw] {
        background: #f3f6fd;
    }

    .icon-btn:active[b-70hrr0htfw] {
        transform: scale(0.96);
    }

.card-head .header-actions[b-70hrr0htfw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn.is-fav[b-70hrr0htfw] {
    border-color: rgba(245,158,11,.35);
    background: linear-gradient(180deg,#fff 0%, #fff7e6 100%);
}

    .icon-btn.is-fav .star[b-70hrr0htfw] {
        color: #f59e0b;
    }

/* ===========================================================
   Autocomplete width + dropdown fix (THIS IS THE KEY BIT)
   =========================================================== */

/* allow dropdown to escape the grid cell */
.customer-details-view .f .value[b-70hrr0htfw] {
    overflow: visible;
    min-width: 0;
}

/* host wrapper you added */
.customer-details-view .ac-host[b-70hrr0htfw] {
    width: 100%;
    display: block;
    min-width: 0;
}

/* the component wrapper itself */
.customer-details-view[b-70hrr0htfw]  .ac-host .autocomplete {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    min-width: 0 !important;
}

/* FIX: bootstrap col-6 forces 50% width */
.customer-details-view[b-70hrr0htfw]  .ac-host .col-6,
.customer-details-view[b-70hrr0htfw]  .ac-host .col-6.autocomplete {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Make the actual input match your other inputs */
.customer-details-view[b-70hrr0htfw]  .ac-host input.form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 34px !important;
    padding: 6px 8px !important;
    border: 1px solid #cfd7e6 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* If the "selected value" is rendered as a button/div/pill, force full width too */
.customer-details-view[b-70hrr0htfw]  .ac-host button,
.customer-details-view[b-70hrr0htfw]  .ac-host .btn,
.customer-details-view[b-70hrr0htfw]  .ac-host .chip,
.customer-details-view[b-70hrr0htfw]  .ac-host .selected {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Keep dropdown above cards */
.customer-details-view[b-70hrr0htfw]  .autocomplete {
    position: relative;
    z-index: 9999;
}

.customer-details-view[b-70hrr0htfw]  .autocomplete-list,
.customer-details-view[b-70hrr0htfw]  .autocomplete-status {
    position: absolute;
    z-index: 10000;
    left: 0;
    right: 0;
}
/* _content/HHCRM_Web/Components/EmployeeAutocomplete.razor.rz.scp.css */
.autocomplete[b-45u31w782u] {
    position: relative;
}

.autocomplete-list[b-45u31w782u] {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 0;
    right: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-45u31w782u] {
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-45u31w782u] {
            background: #f6f9ff;
        }

.autocomplete-empty div[b-45u31w782u] {
    padding: 8px 10px;
    cursor: not-allowed;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.create-btn[b-45u31w782u] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-45u31w782u] {
        background: #f8fbff;
    }

.autocomplete-status[b-45u31w782u] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/EmployeeEditDrawer.razor.rz.scp.css */
/* Overlay / panel shell (unchanged visual chrome) */
.overlay[b-yjj9tr1l1e] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
}

    .overlay.is-drawer-right[b-yjj9tr1l1e] {
        justify-content: flex-end;
        align-items: stretch;
    }

    .overlay.is-drawer-left[b-yjj9tr1l1e] {
        justify-content: flex-start;
        align-items: stretch;
    }

    .overlay.is-modal[b-yjj9tr1l1e] {
        justify-content: center;
        align-items: center;
        padding: 16px;
    }

.panel[b-yjj9tr1l1e], .panel *[b-yjj9tr1l1e] {
    box-sizing: border-box;
}

.panel[b-yjj9tr1l1e] {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 48px rgba(0,0,0,.25);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    width: min(1040px,96vw); /* widened so the grid breathes */
    max-width: 96vw;
    height: 100dvh;
    overflow: hidden;
    border-radius: 12px;
}

.overlay.is-drawer-right .panel[b-yjj9tr1l1e] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(1040px,96vw); /* keep in sync */
    animation: slideInRight-b-yjj9tr1l1e .22s ease-out;
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
    border-left: 1px solid #e5e7eb;
}

.overlay.is-drawer-left .panel[b-yjj9tr1l1e] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(1040px,96vw); /* keep in sync */
    animation: slideInLeft-b-yjj9tr1l1e .22s ease-out;
    box-shadow: 24px 0 48px rgba(0,0,0,.25);
    border-right: 1px solid #e5e7eb;
}

.overlay.is-modal .panel[b-yjj9tr1l1e] {
    width: auto;
    max-width: 720px;
    height: auto;
    max-height: min(90dvh, 960px);
    animation: scaleIn-b-yjj9tr1l1e .18s ease-out;
    border-radius: 12px;
}

.panel-header[b-yjj9tr1l1e] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title[b-yjj9tr1l1e] {
    font-weight: 600;
}

.panel-body[b-yjj9tr1l1e] {
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 16px;
    scrollbar-gutter: stable;
}

.panel-footer[b-yjj9tr1l1e] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.icon-btn[b-yjj9tr1l1e] {
    border: none;
    background: rgba(0,0,0,.06);
    color: #111;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

/* Form layout (grid + groups) */
.form-grid[b-yjj9tr1l1e] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 6px 10px;
}

.group[b-yjj9tr1l1e] {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .group > .legend[b-yjj9tr1l1e] {
        font-weight: 600;
        margin: 0 0 6px;
        opacity: .75;
    }

    .group .form-grid[b-yjj9tr1l1e] {
        display: grid;
        grid-template-columns: repeat(12, minmax(0,1fr));
        gap: 6px 10px;
    }

.ff[b-yjj9tr1l1e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

    .ff > label[b-yjj9tr1l1e] {
        font-size: .78rem;
        line-height: 18px;
        height: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

/* column helpers */
.col-12[b-yjj9tr1l1e] {
    grid-column: 1/-1;
}

.col-8[b-yjj9tr1l1e] {
    grid-column: span 8;
}

.col-6[b-yjj9tr1l1e] {
    grid-column: span 6;
}

.col-4[b-yjj9tr1l1e] {
    grid-column: span 4;
}

.col-3[b-yjj9tr1l1e] {
    grid-column: span 3;
}

.col-2[b-yjj9tr1l1e] {
    grid-column: span 2;
}

@media (max-width:980px) {
    .col-8[b-yjj9tr1l1e], .col-6[b-yjj9tr1l1e], .col-4[b-yjj9tr1l1e], .col-3[b-yjj9tr1l1e], .col-2[b-yjj9tr1l1e] {
        grid-column: 1/-1;
    }
}

/* Animations */
@keyframes slideInRight-b-yjj9tr1l1e {
    from {
        transform: translateX(12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slideInLeft-b-yjj9tr1l1e {
    from {
        transform: translateX(-12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes scaleIn-b-yjj9tr1l1e {
    from {
        transform: scale(.98);
        opacity: .85
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* Buttons */
.form-error[b-yjj9tr1l1e] {
    font-size: .9rem;
}

.primary[b-yjj9tr1l1e] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn[b-yjj9tr1l1e] {
    border: 1px solid #d0d7e2;
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.overlay.is-editing[b-yjj9tr1l1e] {
    background: rgba(0,0,0,0.35);
}

/* --- Default Clinic By Day layout (FINAL) --- */
/* roomy but tight, and keep all rows the same height regardless of label length */
.group .clinics-grid[b-yjj9tr1l1e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px,1fr)); /* 4 across in drawer */
    gap: 8px 14px;
    align-items: start;
    justify-items: stretch;
}

/* Responsive downshifts */
@media (max-width:1140px) {
    .group .clinics-grid[b-yjj9tr1l1e] {
        grid-template-columns: repeat(3, minmax(230px,1fr));
    }
}

@media (max-width:900px) {
    .group .clinics-grid[b-yjj9tr1l1e] {
        grid-template-columns: repeat(2, minmax(220px,1fr));
    }
}

@media (max-width:560px) {
    .group .clinics-grid[b-yjj9tr1l1e] {
        grid-template-columns: 1fr;
    }
}

/* Force the day labels to a single line everywhere inside the clinic component */
.group .clinics-grid label[b-yjj9tr1l1e] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 18px !important; /* uniform label height = uniform row height */
    line-height: 18px !important;
    margin-bottom: 4px !important;
    display: block;
}

/* Make the autocomplete input fill the grid cell regardless of its internal structure */
.group .clinics-grid .ff[b-yjj9tr1l1e],
.group .clinics-grid .ff > *:not(label)[b-yjj9tr1l1e] {
    width: 100%;
    max-width: none;
}

.group .clinics-grid input[b-yjj9tr1l1e],
.group .clinics-grid .form-control[b-yjj9tr1l1e],
.group .clinics-grid .search[b-yjj9tr1l1e],
.group .clinics-grid .autocomplete[b-yjj9tr1l1e],
.group .clinics-grid .pe-input[b-yjj9tr1l1e],
.group .clinics-grid .pe-autocomplete[b-yjj9tr1l1e],
.group .clinics-grid .pe-autocomplete *[b-yjj9tr1l1e] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Keep each clinic cell top-aligned (no “dropped” last item) */
.group .clinics-grid .ff[b-yjj9tr1l1e] {
    align-self: start;
}
/* --- tighten spacing for the clinics row --- */
.group[b-yjj9tr1l1e] {
    padding: 8px;
}
/* a bit tighter */
.form-grid[b-yjj9tr1l1e] {
    gap: 6px 8px;
}
/* slightly smaller global grid gap */

.group .clinics-grid[b-yjj9tr1l1e] {
    grid-template-columns: repeat(4, minmax(220px,1fr)); /* narrower cells still 4-across */
    gap: 6px 10px; /* smaller gaps between cells */
}

    /* reduce inner spacing in each day cell */
    .group .clinics-grid .ff[b-yjj9tr1l1e] {
        gap: 2px; /* stack label + input tighter */
        padding: 0; /* remove any inner padding */
    }

        /* compact labels so rows don’t grow tall */
        .group .clinics-grid .ff > label[b-yjj9tr1l1e] {
            height: 16px !important;
            line-height: 16px !important;
            margin-bottom: 2px !important;
        }

        /* remove extra margins some inputs/components add */
        .group .clinics-grid .ff > :not(label)[b-yjj9tr1l1e] {
            margin: 0 !important;
            width: 100% !important;
            max-width: none !important;
        }
/* _content/HHCRM_Web/Components/ExportToExcel.razor.rz.scp.css */
/* Make the button look like your primary buttons in size,
   but green and without borders/outlines */
.export-btn[b-cq2t9j12u7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px; /* matches your .primary spacing */
    border-radius: 8px;
    border: none !important; /* remove black border */
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    background: #0e7a3a; /* base */
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .04s ease, box-shadow .15s ease, opacity .15s ease;
}

    .export-btn:hover[b-cq2t9j12u7] {
        background: #0c6a33; /* hover */
    }

    .export-btn:active[b-cq2t9j12u7] {
        background: #0a5b2c; /* active/pressed */
        transform: translateY(1px);
    }

    .export-btn:focus-visible[b-cq2t9j12u7] {
        box-shadow: 0 0 0 3px rgba(14,122,58,.35);
    }

    .export-btn[disabled][b-cq2t9j12u7] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

    /* Icon size/color */
    .export-btn .excel-icon[b-cq2t9j12u7] {
        /* solid FA6 icon */
        font-size: 1.125rem; /* bump to 1.25rem or 1.5rem if you want larger */
        color: #fff;
        line-height: 1;
    }
/* Ensure exact same height as .primary (10px + ~16px + 10px = 36px) */
.export-btn[b-cq2t9j12u7] {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 8px; /* same as .primary */
    font-weight: normal; /* avoid bold look */
    line-height: 1; /* keeps icon vertically centered */
}

    /* Icon size — tweak as you like (18–20px usually looks right in a 36px button) */
    .export-btn .excel-icon[b-cq2t9j12u7] {
        font-size: 18px; /* try 20px if you want it a touch larger */
    }

/* If you want a perfectly square icon button, use this instead of the padding above: */
/*
.export-btn {
  width: 36px;
  height: 36px;
  padding: 0;
}
*/
/* _content/HHCRM_Web/Components/LocationAutocomplete - Copy.razor.rz.scp.css */
.autocomplete[b-z5rx0mgcwj] {
    position: relative;
}

.autocomplete-list[b-z5rx0mgcwj] {
    position: absolute;
    z-index: 20;
    top:35px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    max-height: 280px;
    overflow: auto;
}

    .autocomplete-list li[b-z5rx0mgcwj] {
        padding: 6px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-z5rx0mgcwj] {
            background: #f3f4f6;
        }

.autocomplete-list[b-z5rx0mgcwj] {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-z5rx0mgcwj] {
        padding: 8px 10px;
        cursor: pointer;
    }

        .autocomplete-list li:hover[b-z5rx0mgcwj] {
            background: #f6f9ff;
        }

.autocomplete-empty[b-z5rx0mgcwj] {
    margin-top: 6px;
    padding: 10px;
    border: 1px dashed #d6dbe6;
    border-radius: 8px;
    background: #fff;
    display: grid;
    gap: 8px;
}

.create-btn[b-z5rx0mgcwj] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-z5rx0mgcwj] {
        background: #f8fbff;
    }

.autocomplete-status[b-z5rx0mgcwj] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/LocationAutocomplete.razor.rz.scp.css */
.autocomplete[b-1qu3su7ulz] {
    position: relative;
}

.autocomplete-list[b-1qu3su7ulz] {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 0;
    right: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-1qu3su7ulz] {
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-1qu3su7ulz] {
            background: #f6f9ff;
        }

.autocomplete-empty div[b-1qu3su7ulz] {
    padding: 8px 10px;
    cursor: not-allowed;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.create-btn[b-1qu3su7ulz] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-1qu3su7ulz] {
        background: #f8fbff;
    }

.autocomplete-status[b-1qu3su7ulz] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/NewCustomer.razor.rz.scp.css */
/* Overlay / panel shell (unchanged visual chrome) */
.overlay[b-ougi8s2kgn] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
}

    .overlay.is-drawer-right[b-ougi8s2kgn] {
        justify-content: flex-end;
        align-items: stretch;
    }

    .overlay.is-drawer-left[b-ougi8s2kgn] {
        justify-content: flex-start;
        align-items: stretch;
    }

    .overlay.is-modal[b-ougi8s2kgn] {
        justify-content: center;
        align-items: center;
        padding: 16px;
    }

.panel[b-ougi8s2kgn], .panel *[b-ougi8s2kgn] {
    box-sizing: border-box;
}

.panel[b-ougi8s2kgn] {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 48px rgba(0,0,0,.25);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    width: min(920px,96vw);
    max-width: 96vw;
    height: 100dvh;
    overflow: hidden;
    border-radius: 12px;
}

.overlay.is-drawer-right .panel[b-ougi8s2kgn] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(920px,96vw);
    animation: slideInRight-b-ougi8s2kgn .22s ease-out;
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
    border-left: 1px solid #e5e7eb;
}

.overlay.is-drawer-left .panel[b-ougi8s2kgn] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(920px,96vw);
    animation: slideInLeft-b-ougi8s2kgn .22s ease-out;
    box-shadow: 24px 0 48px rgba(0,0,0,.25);
    border-right: 1px solid #e5e7eb;
}

.overlay.is-modal .panel[b-ougi8s2kgn] {
    width: auto;
    max-width: 720px;
    height: auto;
    max-height: min(90dvh, 960px);
    animation: scaleIn-b-ougi8s2kgn .18s ease-out;
    border-radius: 12px;
}

.panel-header[b-ougi8s2kgn] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title[b-ougi8s2kgn] {
    font-weight: 600;
}

.panel-body[b-ougi8s2kgn] {
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 16px;
    scrollbar-gutter: stable;
}

.panel-footer[b-ougi8s2kgn] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.icon-btn[b-ougi8s2kgn] {
    border: none;
    background: rgba(0,0,0,.06);
    color: #111;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

/* Form layout (grid + groups) */
.form-grid[b-ougi8s2kgn] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 6px 10px;
}

.group[b-ougi8s2kgn] {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .group > .legend[b-ougi8s2kgn] {
        font-weight: 600;
        margin: 0 0 6px;
        opacity: .75;
    }

    .group .form-grid[b-ougi8s2kgn] {
        display: grid;
        grid-template-columns: repeat(12, minmax(0,1fr));
        gap: 6px 10px;
    }

.ff[b-ougi8s2kgn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

    .ff > label[b-ougi8s2kgn] {
        font-size: .78rem;
        line-height: 14px;
        height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

/* column helpers */
.col-12[b-ougi8s2kgn] {
    grid-column: 1/-1;
}

.col-8[b-ougi8s2kgn] {
    grid-column: span 8;
}

.col-6[b-ougi8s2kgn] {
    grid-column: span 6;
}

.col-4[b-ougi8s2kgn] {
    grid-column: span 4;
}

.col-3[b-ougi8s2kgn] {
    grid-column: span 3;
}

.col-2[b-ougi8s2kgn] {
    grid-column: span 2;
}

@media (max-width:980px) {
    .col-8[b-ougi8s2kgn], .col-6[b-ougi8s2kgn], .col-4[b-ougi8s2kgn], .col-3[b-ougi8s2kgn], .col-2[b-ougi8s2kgn] {
        grid-column: 1/-1;
    }
}

/* Animations */
@keyframes slideInRight-b-ougi8s2kgn {
    from {
        transform: translateX(12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slideInLeft-b-ougi8s2kgn {
    from {
        transform: translateX(-12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes scaleIn-b-ougi8s2kgn {
    from {
        transform: scale(.98);
        opacity: .85
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* Buttons */
.form-error[b-ougi8s2kgn] {
    font-size: .9rem;
}

.primary[b-ougi8s2kgn] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn[b-ougi8s2kgn] {
    border: 1px solid #d0d7e2;
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.overlay.is-editing[b-ougi8s2kgn] {
    background: rgba(0,0,0,0.35); 
}


/* IMPORTANT: do NOT restyle inputs here. We let Bootstrap's .form-control handle it. */
/* _content/HHCRM_Web/Components/NewCustomerModal.razor.rz.scp.css */
/* Overlay / panel shell (unchanged visual chrome) */
.overlay[b-zjnccfud7f] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
}

    .overlay.is-drawer-right[b-zjnccfud7f] {
        justify-content: flex-end;
        align-items: stretch;
    }

    .overlay.is-drawer-left[b-zjnccfud7f] {
        justify-content: flex-start;
        align-items: stretch;
    }

    .overlay.is-modal[b-zjnccfud7f] {
        justify-content: center;
        align-items: center;
        padding: 16px;
    }

.panel[b-zjnccfud7f], .panel *[b-zjnccfud7f] {
    box-sizing: border-box;
}

.panel[b-zjnccfud7f] {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 48px rgba(0,0,0,.25);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    width: min(920px,96vw);
    max-width: 96vw;
    height: 100dvh;
    overflow: hidden;
    border-radius: 12px;
}

.overlay.is-drawer-right .panel[b-zjnccfud7f] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(920px,96vw);
    animation: slideInRight-b-zjnccfud7f .22s ease-out;
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
    border-left: 1px solid #e5e7eb;
}

.overlay.is-drawer-left .panel[b-zjnccfud7f] {
    border-radius: 0;
    height: 100dvh;
    max-width: none;
    width: min(920px,96vw);
    animation: slideInLeft-b-zjnccfud7f .22s ease-out;
    box-shadow: 24px 0 48px rgba(0,0,0,.25);
    border-right: 1px solid #e5e7eb;
}

.overlay.is-modal .panel[b-zjnccfud7f] {
    width: auto;
    max-width: 720px;
    height: auto;
    max-height: min(90dvh, 960px);
    animation: scaleIn-b-zjnccfud7f .18s ease-out;
    border-radius: 12px;
}

.panel-header[b-zjnccfud7f] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title[b-zjnccfud7f] {
    font-weight: 600;
}

.panel-body[b-zjnccfud7f] {
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 16px;
    scrollbar-gutter: stable;
}

.panel-footer[b-zjnccfud7f] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.icon-btn[b-zjnccfud7f] {
    border: none;
    background: rgba(0,0,0,.06);
    color: #111;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

/* Form layout (grid + groups) */
.form-grid[b-zjnccfud7f] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 6px 10px;
}

.group[b-zjnccfud7f] {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .group > .legend[b-zjnccfud7f] {
        font-weight: 600;
        margin: 0 0 6px;
        opacity: .75;
    }

    .group .form-grid[b-zjnccfud7f] {
        display: grid;
        grid-template-columns: repeat(12, minmax(0,1fr));
        gap: 6px 10px;
    }

.ff[b-zjnccfud7f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

    .ff > label[b-zjnccfud7f] {
        font-size: .78rem;
        line-height: 14px;
        height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

/* column helpers */
.col-12[b-zjnccfud7f] {
    grid-column: 1/-1;
}

.col-8[b-zjnccfud7f] {
    grid-column: span 8;
}

.col-6[b-zjnccfud7f] {
    grid-column: span 6;
}

.col-4[b-zjnccfud7f] {
    grid-column: span 4;
}

.col-3[b-zjnccfud7f] {
    grid-column: span 3;
}

.col-2[b-zjnccfud7f] {
    grid-column: span 2;
}

@media (max-width:980px) {
    .col-8[b-zjnccfud7f], .col-6[b-zjnccfud7f], .col-4[b-zjnccfud7f], .col-3[b-zjnccfud7f], .col-2[b-zjnccfud7f] {
        grid-column: 1/-1;
    }
}

/* Animations */
@keyframes slideInRight-b-zjnccfud7f {
    from {
        transform: translateX(12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slideInLeft-b-zjnccfud7f {
    from {
        transform: translateX(-12px);
        opacity: .8
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes scaleIn-b-zjnccfud7f {
    from {
        transform: scale(.98);
        opacity: .85
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* Buttons */
.form-error[b-zjnccfud7f] {
    font-size: .9rem;
}

.primary[b-zjnccfud7f] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn[b-zjnccfud7f] {
    border: 1px solid #d0d7e2;
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* IMPORTANT: do NOT restyle inputs here. We let Bootstrap's .form-control handle it. */
/* _content/HHCRM_Web/Components/NewOrderDrawerwCustomer.razor.rz.scp.css */
/* NewOrderDrawerwCustomer.razor.css  (Blazor CSS-isolated)
   NOTE: when styling content passed from the parent (ChildContent),
   use `::deep <selector>` (with a space) so the rules pierce isolation. */

/* The component wrapper should not create extra layout boxes */
:host[b-ckauqpps7p] {
    display: contents;
}

/* Make all inner elements use border-box to mirror the page version */
.drawer-sheet[b-ckauqpps7p], .drawer-sheet *[b-ckauqpps7p] {
    box-sizing: border-box;
}

/* ===== Overlay & sheet (component chrome) ===== */

.drawer-overlay[b-ckauqpps7p] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);
    z-index: 9999;
}

.drawer-sheet[b-ckauqpps7p] {
    width: min(920px, 96vw);
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto; /* header / body (scrolls) / footer */
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -24px 0 48px rgba(0, 0, 0, .25);
    animation: slideIn-b-ckauqpps7p .22s ease-out;
    overflow: hidden; /* scrolling handled by .sheet-body */
}

/* Sticky header/footer inside the sheet */
.sheet-header[b-ckauqpps7p],
.sheet-footer[b-ckauqpps7p] {
    background: #fff;
}

.sheet-header[b-ckauqpps7p] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sheet-title[b-ckauqpps7p] {
    font-weight: 600;
}

.sheet-footer[b-ckauqpps7p] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Scrollable body region */
.sheet-body[b-ckauqpps7p] {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 10px 12px 16px;
}

/* Small icon button (e.g., close ‘×’) */
.icon-btn[b-ckauqpps7p] {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    color: #374151;
    font-weight: 700;
}

    .icon-btn:hover[b-ckauqpps7p] {
        background: #f3f4f6;
        color: #111827;
    }

.close-btn[b-ckauqpps7p] {
    font-weight: 700;
}

/* Slide-in animation */
@keyframes slideIn-b-ckauqpps7p {
    from {
        transform: translateX(12px);
        opacity: .85;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* Keep forms inside the sheet from adding an extra wrapper */
.drawer-sheet[b-ckauqpps7p]  form {
    display: contents;
}

/* ===== Content from parent (ChildContent) — use ::deep to pierce isolation ===== */

/* Grid layout used by your form */
.drawer-sheet[b-ckauqpps7p]  .form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px 10px;
}

/* Card-like groups */
.drawer-sheet[b-ckauqpps7p]  .group {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .drawer-sheet[b-ckauqpps7p]  .group > .legend {
        font-weight: 600;
        margin: 0 0 6px;
        opacity: .75;
    }

/* Field frame */
.drawer-sheet[b-ckauqpps7p]  .ff {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

    .drawer-sheet[b-ckauqpps7p]  .ff > label {
        font-size: .78rem;
        line-height: 14px;
        height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    /* Inputs */
    .drawer-sheet[b-ckauqpps7p]  .ff > input,
    .drawer-sheet[b-ckauqpps7p]  .ff > select,
    .drawer-sheet[b-ckauqpps7p]  .ff > textarea {
        width: 100% !important;
        max-width: none !important;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 6px 8px;
        font: inherit;
        background: #fff;
    }

    .drawer-sheet[b-ckauqpps7p]  .ff > input,
    .drawer-sheet[b-ckauqpps7p]  .ff > select {
        height: 34px;
    }

    .drawer-sheet[b-ckauqpps7p]  .ff input[type="date"] {
        height: 34px;
    }

    .drawer-sheet[b-ckauqpps7p]  .ff input[type="checkbox"] {
        height: auto;
        width: auto;
        align-self: start;
        margin-top: 2px;
    }

    .drawer-sheet[b-ckauqpps7p]  .ff > textarea {
        min-height: 100px;
        resize: vertical;
    }

/* Column spans */
.drawer-sheet[b-ckauqpps7p]  .col-12 {
    grid-column: 1 / -1;
}

.drawer-sheet[b-ckauqpps7p]  .col-8 {
    grid-column: span 8;
}

.drawer-sheet[b-ckauqpps7p]  .col-6 {
    grid-column: span 6;
}

.drawer-sheet[b-ckauqpps7p]  .col-4 {
    grid-column: span 4;
}

.drawer-sheet[b-ckauqpps7p]  .col-3 {
    grid-column: span 3;
}

.drawer-sheet[b-ckauqpps7p]  .col-2 {
    grid-column: span 2;
}

/* Responsive collapse */
@media (max-width: 980px) {
    .drawer-sheet[b-ckauqpps7p]  .col-8,
    .drawer-sheet[b-ckauqpps7p]  .col-6,
    .drawer-sheet[b-ckauqpps7p]  .col-4,
    .drawer-sheet[b-ckauqpps7p]  .col-3,
    .drawer-sheet[b-ckauqpps7p]  .col-2 {
        grid-column: 1 / -1;
    }
}

/* Optional: subtle validation/error text in footer */
.drawer-sheet[b-ckauqpps7p]  .form-error {
    font-size: .9rem;
    color: #b91c1c;
}
/* _content/HHCRM_Web/Components/ProductAutocomplete.razor.rz.scp.css */
.autocomplete-list[b-a3a9jejkzf] {
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
    border: 1px solid #ccc;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    z-index: 1000;
    width: 100%;
    border-radius: 6px;
}

    .autocomplete-list li[b-a3a9jejkzf] {
        padding: 6px 10px;
        cursor: pointer;
    }

        .autocomplete-list li:hover[b-a3a9jejkzf] {
            background: #f0f0f0;
        }


/* container creates a positioning context */
.autocomplete[b-a3a9jejkzf] {
    position: relative;
}

    /* the dropdown/popup itself */
    .autocomplete .autocomplete-list[b-a3a9jejkzf] {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 5000; /* higher than card/grid but below modal overlays */
        max-height: 240px;
        overflow: auto;
        padding: 6px 0;
        margin: 0;
        list-style: none;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }

        .autocomplete .autocomplete-list li[b-a3a9jejkzf] {
            padding: 8px 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .autocomplete .autocomplete-list li:hover[b-a3a9jejkzf] {
                background: #f3f4f6;
            }
/* _content/HHCRM_Web/Components/ProductEdit.razor.rz.scp.css */
/* Full-screen overlay pinned to the viewport */
.pe-overlay[b-pfx4sw4nhz] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
}

/* Sheet */
.pe-sheet[b-pfx4sw4nhz] {
    background: #fff;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
}

    /* Modes */
    .pe-sheet.right[b-pfx4sw4nhz] {
        width: min(920px, 96vw);
        border-left: 1px solid #e5e7eb;
    }

    .pe-sheet.left[b-pfx4sw4nhz] {
        width: min(920px, 96vw);
        border-right: 1px solid #e5e7eb;
        justify-self: flex-start;
    }

    .pe-sheet.center[b-pfx4sw4nhz] {
        width: min(860px, 96vw);
        height: min(90vh, 760px);
        margin: auto;
        border-radius: 14px;
        overflow: hidden;
    }

/* Header / Footer / Body */
.pe-header[b-pfx4sw4nhz], .pe-footer[b-pfx4sw4nhz] {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.pe-footer[b-pfx4sw4nhz] {
    border-bottom: none;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
}

.pe-title[b-pfx4sw4nhz] {
    font-weight: 600;
}

.pe-x[b-pfx4sw4nhz] {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
}

    .pe-x:hover[b-pfx4sw4nhz] {
        background: #f3f4f6;
    }

.pe-body[b-pfx4sw4nhz] {
    overflow: auto;
    padding: 12px 14px 16px;
}

.pe-group[b-pfx4sw4nhz] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.pe-legend[b-pfx4sw4nhz] {
    font-weight: 600;
    opacity: .75;
    margin-bottom: 8px;
}

label[b-pfx4sw4nhz] {
    font-size: .8rem;
    opacity: .9;
    display: block;
    margin: 6px 0 4px;
}

.pe-input[b-pfx4sw4nhz] {
    width: 100%;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 8px;
}

.pe-row[b-pfx4sw4nhz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.pe-col[b-pfx4sw4nhz] {
    display: flex;
    flex-direction: column;
}

.pe-btn[b-pfx4sw4nhz] {
    background: #e5e7eb;
    border: 0;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

    .pe-btn.primary[b-pfx4sw4nhz] {
        background: #0b5bd3;
        color: #fff;
    }

.pe-error[b-pfx4sw4nhz] {
    color: #b91c1c;
    margin-right: auto;
}

/* Small screens */
@media (max-width: 980px) {
    .pe-row[b-pfx4sw4nhz] {
        grid-template-columns: 1fr;
    }
}
/* _content/HHCRM_Web/Components/ServiceTypeAutocomplete - Copy.razor.rz.scp.css */
.autocomplete[b-y87c3i66ao] {
    position: relative;
}

.autocomplete-list[b-y87c3i66ao] {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    max-height: 280px;
    overflow: auto;
}

    .autocomplete-list li[b-y87c3i66ao] {
        padding: 6px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-y87c3i66ao] {
            background: #f3f4f6;
        }

.autocomplete-list[b-y87c3i66ao] {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-y87c3i66ao] {
        padding: 8px 10px;
        cursor: pointer;
    }

        .autocomplete-list li:hover[b-y87c3i66ao] {
            background: #f6f9ff;
        }

.autocomplete-empty[b-y87c3i66ao] {
    margin-top: 6px;
    padding: 10px;
    border: 1px dashed #d6dbe6;
    border-radius: 8px;
    background: #fff;
    display: grid;
    gap: 8px;
}

.create-btn[b-y87c3i66ao] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-y87c3i66ao] {
        background: #f8fbff;
    }

.autocomplete-status[b-y87c3i66ao] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Components/ServiceTypeAutocomplete.razor.rz.scp.css */
.autocomplete[b-bv9yhj33d2] {
    position: relative;
}

.autocomplete-list[b-bv9yhj33d2] {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 0;
    right: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 260px;
    overflow: auto;
}

    .autocomplete-list li[b-bv9yhj33d2] {
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .autocomplete-list li:hover[b-bv9yhj33d2] {
            background: #f6f9ff;
        }

    .autocomplete-empty div[b-bv9yhj33d2] {
        padding: 8px 10px;
        cursor: not-allowed;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.create-btn[b-bv9yhj33d2] {
    align-self: start;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

    .create-btn:hover[b-bv9yhj33d2] {
        background: #f8fbff;
    }

.autocomplete-status[b-bv9yhj33d2] {
    margin-top: 6px;
    font-size: .9rem;
    color: #667085;
}
/* _content/HHCRM_Web/Layout/MainLayout.razor.rz.scp.css */
/* -------- Sidebar variables so everything matches -------- */
:root[b-7o6e68yg3e] {
    --pill-h: 54px;
    --pill-radius: 14px;
    --pill-pad-x: 14px;
}

/* Shell: left rail + content */
.nav-shell[b-7o6e68yg3e] {
    display:flex;
    height: 100vh;
    background: #f5f6f9;
}

/* Sidebar */
.nav-rail[b-7o6e68yg3e] {
    max-width:280px;
    height:100vh;
    background: #0d3a78;
    border-right: none;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}
    /*Deep so that the recent and favorite components can use it as well*/
    .nav-rail[b-7o6e68yg3e]  .nav-pill {  
        display: flex;
        align-items: center;
        height: 28px; /* match your Recent/Favourite height */
        min-height: 28px;
        max-height: 28px;
        padding: 0 14px;
        border-radius: 14px;
        background: #ffffff !important;
        color: #1f2937 !important;
        text-decoration: none !important;
        box-shadow: 0 1px 1px rgba(0,0,0,.03);
        transition: background .15s ease, box-shadow .15s ease;
        border: 0;

        justify-content: center; /* center horizontally */
        text-align: center; /* also center text inside */
        font-size: 18px; /* match your Recent/Favourite header font */
        font-weight: 700;
        line-height: 1; /* prevents extra vertical �air� */
    }

        .nav-rail[b-7o6e68yg3e]  .nav-pill:hover {
            background: #e9eef8 !important;
        }

        .nav-rail[b-7o6e68yg3e]  .nav-pill.active {
            background: #e9f0ff !important;
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.18);
        }

.brand[b-7o6e68yg3e] {
    margin: 0 6px 10px;
}

    .brand .title[b-7o6e68yg3e] {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.1;
        color: #fff;
    }

    .brand .sub[b-7o6e68yg3e] {
        font-size: 13px;
        color: #cfe0ff;
    }

.menu[b-7o6e68yg3e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#pills[b-7o6e68yg3e] {
    min-height:180px;
    max-height:180px;
    margin-bottom:10px;
}

#recents[b-7o6e68yg3e] {
    margin-bottom: 20px;
}

#favourites[b-7o6e68yg3e] { 

}

/* Small cards under sections */
.nav-rail[b-7o6e68yg3e]  .nav-mini {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    width:100%;
}

.nav-rail[b-7o6e68yg3e]  .nav-mini__row a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    align-items: center;
    text-decoration: none;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    color: #ffffff;
}

    .nav-rail[b-7o6e68yg3e]  .nav-mini__row a:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.16);
    }

/* Titles/subtitles */
.nav-rail[b-7o6e68yg3e]  .nav-mini__title {
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rail[b-7o6e68yg3e]  .nav-mini__sub {
    grid-column: 1 / 2;
    font-size: .82rem;
    opacity: .8;
    color: #cdd6e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content[b-7o6e68yg3e] {
    height: 100vh;
    width:100%;
    overflow: auto;
    padding: 16px;

}

/* The part that should scroll (everything after the brand) */
.menu[b-7o6e68yg3e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto; /* <� take remaining space */
    min-height: 0; /* <� critical so flex child can scroll */
    overflow: auto; /* <� scrollbar lives here */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* prettier sidebar scrollbar */
.nav-rail .menu[b-7o6e68yg3e] {
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255,255,255,.35) transparent; /* Firefox */
}



/* _content/HHCRM_Web/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-d66wtp0vki] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-d66wtp0vki] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-d66wtp0vki] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-d66wtp0vki] {
    font-size: 1.1rem;
}

.bi[b-d66wtp0vki] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-d66wtp0vki] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-d66wtp0vki] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-d66wtp0vki] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-d66wtp0vki] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-d66wtp0vki] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-d66wtp0vki] {
        padding-bottom: 1rem;
    }

    .nav-item[b-d66wtp0vki]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-d66wtp0vki]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-d66wtp0vki]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-d66wtp0vki] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-d66wtp0vki] {
    display: block;
}

.HamburgerIcon[b-d66wtp0vki] {
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
}

.HamburgerLine[b-d66wtp0vki] {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
}

.HamburgerMenuHidden[b-d66wtp0vki] {
    display: none;
    width: 0px;
}

.HamburgerMenuVisible[b-d66wtp0vki] {
    display: block;
    width: 250px;
}

@media (min-width: 641px) {
    .navbar-toggler[b-d66wtp0vki] {
        display: none;
    }

    .nav-scrollable[b-d66wtp0vki] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/HHCRM_Web/Pages/AidTypes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-z82ru9py02] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-z82ru9py02] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-z82ru9py02] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-z82ru9py02] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-z82ru9py02] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-z82ru9py02] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-z82ru9py02] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-z82ru9py02] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-z82ru9py02] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-z82ru9py02] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-z82ru9py02] {
    flex: 1;
}

.primary[b-z82ru9py02] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-z82ru9py02] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-z82ru9py02] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-z82ru9py02], .grid td[b-z82ru9py02] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-z82ru9py02] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-z82ru9py02] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-z82ru9py02] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-z82ru9py02], .grid th.num[b-z82ru9py02] {
        text-align: right;
    }

    .grid td.mono[b-z82ru9py02] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-z82ru9py02], .grid td.col-id[b-z82ru9py02] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-z82ru9py02], .grid td.col-price[b-z82ru9py02] {
        width: 140px;
    }

    .grid th.col-cost[b-z82ru9py02], .grid td.col-cost[b-z82ru9py02] {
        width: 160px;
    }

.col-id[b-z82ru9py02] {
    text-align: right;
}

    .col-id[b-z82ru9py02]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-z82ru9py02] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-z82ru9py02] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-z82ru9py02] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-z82ru9py02] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-z82ru9py02] {
        background: #f2f6ff;
    }

.qi-name[b-z82ru9py02] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-z82ru9py02] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-z82ru9py02] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-z82ru9py02] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-z82ru9py02] {
    outline: none;
}

    .th-sort:focus-visible[b-z82ru9py02] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-z82ru9py02] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-z82ru9py02] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/BatterySizes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-mr8iwwq4v5] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-mr8iwwq4v5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-mr8iwwq4v5] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-mr8iwwq4v5] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-mr8iwwq4v5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-mr8iwwq4v5] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-mr8iwwq4v5] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-mr8iwwq4v5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-mr8iwwq4v5] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-mr8iwwq4v5] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-mr8iwwq4v5] {
    flex: 1;
}

.primary[b-mr8iwwq4v5] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-mr8iwwq4v5] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-mr8iwwq4v5] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-mr8iwwq4v5], .grid td[b-mr8iwwq4v5] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-mr8iwwq4v5] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-mr8iwwq4v5] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-mr8iwwq4v5] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-mr8iwwq4v5], .grid th.num[b-mr8iwwq4v5] {
        text-align: right;
    }

    .grid td.mono[b-mr8iwwq4v5] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-mr8iwwq4v5], .grid td.col-id[b-mr8iwwq4v5] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-mr8iwwq4v5], .grid td.col-price[b-mr8iwwq4v5] {
        width: 140px;
    }

    .grid th.col-cost[b-mr8iwwq4v5], .grid td.col-cost[b-mr8iwwq4v5] {
        width: 160px;
    }

.col-id[b-mr8iwwq4v5] {
    text-align: right;
}

    .col-id[b-mr8iwwq4v5]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-mr8iwwq4v5] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-mr8iwwq4v5] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-mr8iwwq4v5] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-mr8iwwq4v5] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-mr8iwwq4v5] {
        background: #f2f6ff;
    }

.qi-name[b-mr8iwwq4v5] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-mr8iwwq4v5] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-mr8iwwq4v5] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-mr8iwwq4v5] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-mr8iwwq4v5] {
    outline: none;
}

    .th-sort:focus-visible[b-mr8iwwq4v5] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-mr8iwwq4v5] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-mr8iwwq4v5] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/ClinicsPage.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-c848mw90er] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-c848mw90er] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-c848mw90er] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-c848mw90er] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-c848mw90er] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-c848mw90er] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-c848mw90er] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-c848mw90er] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-c848mw90er] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-c848mw90er] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-c848mw90er] {
    flex: 1;
}

.primary[b-c848mw90er] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-c848mw90er] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-c848mw90er] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-c848mw90er], .grid td[b-c848mw90er] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-c848mw90er] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-c848mw90er] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-c848mw90er] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-c848mw90er], .grid th.num[b-c848mw90er] {
        text-align: right;
    }

    .grid td.mono[b-c848mw90er] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-c848mw90er], .grid td.col-id[b-c848mw90er] {
        width: 120px;
        white-space: nowrap;
    }

    .grid th.col-price[b-c848mw90er], .grid td.col-price[b-c848mw90er] {
        width: 140px;
    }

    .grid th.col-cost[b-c848mw90er], .grid td.col-cost[b-c848mw90er] {
        width: 160px;
    }

.pager[b-c848mw90er] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-c848mw90er] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-c848mw90er] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-c848mw90er] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-c848mw90er] {
        background: #f2f6ff;
    }

.qi-name[b-c848mw90er] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-c848mw90er] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-c848mw90er] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-c848mw90er] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-c848mw90er] {
    outline: none;
}

    .th-sort:focus-visible[b-c848mw90er] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-c848mw90er] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-c848mw90er] {
    background: #eef3ff;
    border-radius: 6px;
}

/* =========================================================
   FORCE BLOCK — override globally, in case scoped CSS misses
   Requires: add class="page products-page" on the root div.
   ========================================================= */
:global(.products-page .topbar)[b-c848mw90er] {
    background: #0d3a78 !important;
    color: #fff !important;
    border-radius: 10px !important;
}

:global(.products-page .pill)[b-c848mw90er] {
    padding: 8px 12px !important;
    border: 1px solid #d0d7e2 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

:global(.products-page .pill[aria-pressed="true"])[b-c848mw90er] {
    background: #e7f0ff !important;
    border-color: #9db7ff !important;
}

:global(.products-page .card)[b-c848mw90er] {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

:global(.products-page .grid)[b-c848mw90er] {
    width: 100% !important;
    border-collapse: collapse !important;
}

:global(.products-page .grid th)[b-c848mw90er],
:global(.products-page .grid td)[b-c848mw90er] {
    padding: 10px !important;
    border-bottom: 1px solid #eef1f5 !important;
}

:global(.products-page .grid th)[b-c848mw90er] {
    text-align: left !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

:global(.products-page .grid a)[b-c848mw90er] {
    color: #0b5bd3 !important;
    text-decoration: none !important;
}

:global(.products-page .grid tr:hover)[b-c848mw90er] {
    background: #fafbfe !important;
}

:global(.products-page .num)[b-c848mw90er] {
    text-align: right !important;
}

:global(.products-page .mono)[b-c848mw90er] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}

:global(.products-page .quick-panel)[b-c848mw90er] {
    background: #f6f9ff !important;
    border: 1px solid #cfd7e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12) !important;
}

:global(.products-page .quick-item:hover)[b-c848mw90er] {
    background: #f2f6ff !important;
}
/* _content/HHCRM_Web/Pages/CNPReasons.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-7g6enpq5x5] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-7g6enpq5x5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-7g6enpq5x5] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-7g6enpq5x5] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-7g6enpq5x5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-7g6enpq5x5] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-7g6enpq5x5] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-7g6enpq5x5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-7g6enpq5x5] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-7g6enpq5x5] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-7g6enpq5x5] {
    flex: 1;
}

.primary[b-7g6enpq5x5] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-7g6enpq5x5] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-7g6enpq5x5] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-7g6enpq5x5], .grid td[b-7g6enpq5x5] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-7g6enpq5x5] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-7g6enpq5x5] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-7g6enpq5x5] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-7g6enpq5x5], .grid th.num[b-7g6enpq5x5] {
        text-align: right;
    }

    .grid td.mono[b-7g6enpq5x5] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-7g6enpq5x5], .grid td.col-id[b-7g6enpq5x5] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-7g6enpq5x5], .grid td.col-price[b-7g6enpq5x5] {
        width: 140px;
    }

    .grid th.col-cost[b-7g6enpq5x5], .grid td.col-cost[b-7g6enpq5x5] {
        width: 160px;
    }

.col-id[b-7g6enpq5x5] {
    text-align: right;
}

    .col-id[b-7g6enpq5x5]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-7g6enpq5x5] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-7g6enpq5x5] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-7g6enpq5x5] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-7g6enpq5x5] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-7g6enpq5x5] {
        background: #f2f6ff;
    }

.qi-name[b-7g6enpq5x5] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-7g6enpq5x5] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-7g6enpq5x5] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-7g6enpq5x5] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-7g6enpq5x5] {
    outline: none;
}

    .th-sort:focus-visible[b-7g6enpq5x5] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-7g6enpq5x5] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-7g6enpq5x5] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/CompletionReasons.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-s7v3f46m77] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-s7v3f46m77] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-s7v3f46m77] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-s7v3f46m77] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-s7v3f46m77] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-s7v3f46m77] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-s7v3f46m77] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-s7v3f46m77] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-s7v3f46m77] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-s7v3f46m77] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-s7v3f46m77] {
    flex: 1;
}

.primary[b-s7v3f46m77] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-s7v3f46m77] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-s7v3f46m77] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-s7v3f46m77], .grid td[b-s7v3f46m77] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-s7v3f46m77] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-s7v3f46m77] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-s7v3f46m77] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-s7v3f46m77], .grid th.num[b-s7v3f46m77] {
        text-align: right;
    }

    .grid td.mono[b-s7v3f46m77] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-s7v3f46m77], .grid td.col-id[b-s7v3f46m77] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-s7v3f46m77], .grid td.col-price[b-s7v3f46m77] {
        width: 140px;
    }

    .grid th.col-cost[b-s7v3f46m77], .grid td.col-cost[b-s7v3f46m77] {
        width: 160px;
    }

.col-id[b-s7v3f46m77] {
    text-align: right;
}

    .col-id[b-s7v3f46m77]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-s7v3f46m77] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-s7v3f46m77] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-s7v3f46m77] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-s7v3f46m77] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-s7v3f46m77] {
        background: #f2f6ff;
    }

.qi-name[b-s7v3f46m77] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-s7v3f46m77] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-s7v3f46m77] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-s7v3f46m77] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-s7v3f46m77] {
    outline: none;
}

    .th-sort:focus-visible[b-s7v3f46m77] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-s7v3f46m77] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-s7v3f46m77] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/CustomerAppointments.razor.rz.scp.css */
/* CustomerAppointments.razor.css */

/* ---------- Layout ---------- */
.customer-appointments-page[b-x5ll1xinmz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* ---------- Tabs ---------- */
    .customer-appointments-page .tabs[b-x5ll1xinmz] {
        display: flex;
        gap: 16px;
        align-items: flex-end;
    }

    .customer-appointments-page .tab[b-x5ll1xinmz] {
        color: #1f2d4d;
        text-decoration: none;
        padding: 8px 6px;
        font-weight: 600;
        border-bottom: 3px solid transparent;
        border-radius: 4px 4px 0 0;
    }

        .customer-appointments-page .tab:hover[b-x5ll1xinmz] {
            background: #eef3ff;
        }

        .customer-appointments-page .tab.active[b-x5ll1xinmz] {
            border-color: #2b6fdc;
        }

    /* ---------- Topbar ---------- */
    .customer-appointments-page .topbar[b-x5ll1xinmz] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .customer-appointments-page .search-wrap[b-x5ll1xinmz] {
        flex: 1;
        max-width: 520px;
    }

    .customer-appointments-page input.search[b-x5ll1xinmz] {
        width: 100%;
        height: 34px;
        padding: 6px 8px;
        border: 1px solid #cfd7e6;
        border-radius: 8px;
    }

    /* ---------- Buttons (local safety so it matches Notes) ---------- */
    .customer-appointments-page[b-x5ll1xinmz]  .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 34px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #cfd7e6;
        background: #fff;
        color: #1f2d4d;
        cursor: pointer;
        font: inherit;
        text-decoration: none;
        white-space: nowrap;
    }

        .customer-appointments-page[b-x5ll1xinmz]  .btn:hover {
            background: #f3f6fd;
        }

        .customer-appointments-page[b-x5ll1xinmz]  .btn:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

        .customer-appointments-page[b-x5ll1xinmz]  .btn.primary {
            background: #2b6fdc;
            border-color: #2b6fdc;
            color: #fff;
        }

            .customer-appointments-page[b-x5ll1xinmz]  .btn.primary:hover {
                filter: brightness(0.97);
            }

        .customer-appointments-page[b-x5ll1xinmz]  .btn.outline {
            background: #fff;
            border-color: #2b6fdc;
            color: #2b6fdc;
        }

            .customer-appointments-page[b-x5ll1xinmz]  .btn.outline:hover {
                background: #eef3ff;
            }

    /* small button */
    .customer-appointments-page[b-x5ll1xinmz]  .btn-xs {
        height: 30px;
        padding: 0 10px;
        font-size: .85rem;
        border-radius: 9px;
    }

    /* toggle state (like Notes pills) */
    .customer-appointments-page[b-x5ll1xinmz]  .btn.outline.is-on {
        box-shadow: inset 0 0 0 2px rgba(59,130,246,.35);
    }

    /* ---------- "Pills" row (use same style as Notes) ---------- */
    .customer-appointments-page .pills[b-x5ll1xinmz] {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .customer-appointments-page .pill[b-x5ll1xinmz] {
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #cfd7e6;
        background: #fff;
        cursor: pointer;
        font: inherit;
    }

        .customer-appointments-page .pill:hover[b-x5ll1xinmz] {
            background: #f3f6fd;
        }

    .customer-appointments-page .pill--active[b-x5ll1xinmz] {
        border-color: #2b6fdc;
        color: #2b6fdc;
        background: #eef3ff;
    }

    /* ---------- Card + Table ---------- */
    .customer-appointments-page .card[b-x5ll1xinmz] {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        border: 1px solid #e9edf3;
    }

    .customer-appointments-page .card-head[b-x5ll1xinmz] {
        padding: 10px 12px;
        border-bottom: 1px solid #edf1f7;
    }

    .customer-appointments-page .card-body[b-x5ll1xinmz] {
        padding: 10px 12px;
    }

    .customer-appointments-page .table-scroll[b-x5ll1xinmz] {
        overflow: auto;
    }

    /* match Notes grid table look */
    .customer-appointments-page table.grid[b-x5ll1xinmz] {
        width: 100%;
        border-collapse: collapse;
    }

    /* stop weird stretched columns */
    .customer-appointments-page table.grid[b-x5ll1xinmz] {
        table-layout: fixed;
    }

    .customer-appointments-page .grid th[b-x5ll1xinmz],
    .customer-appointments-page .grid td[b-x5ll1xinmz] {
        border-bottom: 1px solid #edf1f7;
        padding: 8px 10px;
        vertical-align: top;
    }

    .customer-appointments-page .grid th[b-x5ll1xinmz] {
        font-weight: 600;
        color: #20314f;
        background: #fafcff;
    }

    /* ---------- Column sizing (keeps it like your screenshot but tidy) ---------- */
    .customer-appointments-page .col-start[b-x5ll1xinmz] {
        width: 160px;
    }

    .customer-appointments-page .col-duration[b-x5ll1xinmz] {
        width: 90px;
    }

    .customer-appointments-page .col-status[b-x5ll1xinmz] {
        width: 110px;
    }

    .customer-appointments-page .col-employee[b-x5ll1xinmz] {
        width: 170px;
    }

    .customer-appointments-page .col-service[b-x5ll1xinmz] {
        width: 140px;
    }

    .customer-appointments-page .col-location[b-x5ll1xinmz] {
        width: 130px;
    }

    .customer-appointments-page .col-links[b-x5ll1xinmz] {
        width: 140px;
    }

    /* ---------- Title cell layout ---------- */
    .customer-appointments-page .title-wrap[b-x5ll1xinmz] {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    .customer-appointments-page .title-text[b-x5ll1xinmz] {
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* remove the ugly extra line spacing below title */
    .customer-appointments-page .title-sub[b-x5ll1xinmz] {
        display: none; /* this hides "Diary: X · Type: Y" line */
    }

    /* ---------- Notes cell ---------- */
    .customer-appointments-page .notes-cell[b-x5ll1xinmz] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Deleted row ---------- */
    .customer-appointments-page .row-deleted[b-x5ll1xinmz] {
        opacity: .6;
        text-decoration: line-through;
    }

    /* ---------- Dot + badges ---------- */
    .customer-appointments-page .dot[b-x5ll1xinmz] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
        border: 1px solid rgba(0,0,0,.1);
        flex: 0 0 auto;
    }

    .customer-appointments-page .badge[b-x5ll1xinmz] {
        font-size: .72rem;
        padding: .12rem .45rem;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.12);
        opacity: .85;
        flex: 0 0 auto;
    }

        .customer-appointments-page .badge.danger[b-x5ll1xinmz] {
            border-color: rgba(185,28,28,.35);
            color: #b91c1c;
        }

    /* ---------- Links cell ---------- */
    .customer-appointments-page .links-wrap[b-x5ll1xinmz] {
        display: flex;
        gap: .35rem;
        flex-wrap: wrap;
        align-items: center;
    }
    /* Ensure appointment badges are always visible */
    .customer-appointments-page[b-x5ll1xinmz]  .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .72rem;
        font-weight: 600;
        padding: .14rem .55rem;
        border-radius: 999px;
        border: 1px solid #cfd7e6;
        background: #eef3ff;
        color: #1f2d4d;
        line-height: 1.2;
        white-space: nowrap;
    }

        /* Optional variants */
        .customer-appointments-page[b-x5ll1xinmz]  .badge.danger {
            background: #fff5f5;
            border-color: rgba(185, 28, 28, .35);
            color: #b91c1c;
        }

        /* If you use "Reserved" too and want it different */
        .customer-appointments-page[b-x5ll1xinmz]  .badge.reserved {
            background: #f3f6fd;
            border-color: #cfd7e6;
            color: #1f2d4d;
        }
    .customer-appointments-page .notes-preview[b-x5ll1xinmz] {
        max-width: 520px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .customer-appointments-page .notes-full[b-x5ll1xinmz] {
        white-space: pre-wrap; /* keeps new lines */
        overflow-wrap: anywhere; /* long words won't break layout */
        margin-bottom: 6px;
    }

    /* optional: keep the button tight */
    .customer-appointments-page[b-x5ll1xinmz]  .btn.btn-xs {
        height: 28px;
        padding: 0 10px;
        font-size: .8rem;
        border-radius: 8px;
    }
/* _content/HHCRM_Web/Pages/CustomerCodes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-zvjaburked] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-zvjaburked] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-zvjaburked] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-zvjaburked] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-zvjaburked] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-zvjaburked] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-zvjaburked] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-zvjaburked] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-zvjaburked] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-zvjaburked] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-zvjaburked] {
    flex: 1;
}

.primary[b-zvjaburked] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-zvjaburked] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-zvjaburked] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-zvjaburked], .grid td[b-zvjaburked] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-zvjaburked] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-zvjaburked] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-zvjaburked] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-zvjaburked], .grid th.num[b-zvjaburked] {
        text-align: right;
    }

    .grid td.mono[b-zvjaburked] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-zvjaburked], .grid td.col-id[b-zvjaburked] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-zvjaburked], .grid td.col-price[b-zvjaburked] {
        width: 140px;
    }

    .grid th.col-cost[b-zvjaburked], .grid td.col-cost[b-zvjaburked] {
        width: 160px;
    }

.col-id[b-zvjaburked] {
    text-align: right;
}

    .col-id[b-zvjaburked]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-zvjaburked] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-zvjaburked] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-zvjaburked] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-zvjaburked] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-zvjaburked] {
        background: #f2f6ff;
    }

.qi-name[b-zvjaburked] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-zvjaburked] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-zvjaburked] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-zvjaburked] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-zvjaburked] {
    outline: none;
}

    .th-sort:focus-visible[b-zvjaburked] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-zvjaburked] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-zvjaburked] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/CustomerDetails.razor.rz.scp.css */
/* ===== page wrapper ===== */
.detail-page[b-3qz2pjxf69] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===========================================================
   CRITICAL: make labels bold (handle ALL scoping permutations)
   =========================================================== */

/* A) host + deep: inner children may not get the scope hash */
:host[b-3qz2pjxf69] (.f .label),
:host[b-3qz2pjxf69] (dt) {
    font-weight: 700 !important;
    color: #2b3648 !important;
}

:host[b-3qz2pjxf69] (.f .value),
:host[b-3qz2pjxf69] (dd) {
    color: #1f2937 !important;
}

/* B) host + regular (if children DO get the scope hash) */
:host .f .label[b-3qz2pjxf69],
:host dt[b-3qz2pjxf69] {
    font-weight: 700 !important;
    color: #2b3648 !important;
}

:host .f .value[b-3qz2pjxf69],
:host dd[b-3qz2pjxf69] {
    color: #1f2937 !important;
}

/* C) last-resort global, but still constrained to your root class */
:global(.customer-details-view .f .label)[b-3qz2pjxf69],
:global(.customer-details-view dt)[b-3qz2pjxf69] {
    font-weight: 700 !important;
    color: #2b3648 !important;
}

:global(.customer-details-view .f .value)[b-3qz2pjxf69],
:global(.customer-details-view dd)[b-3qz2pjxf69] {
    color: #1f2937 !important;
}

/* ===== tabs ===== */
.tabs[b-3qz2pjxf69] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.tab[b-3qz2pjxf69] {
    color: #1f2d4d;
    text-decoration: none;
    padding: 8px 6px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
}

    .tab:hover[b-3qz2pjxf69] {
        background: #eef3ff;
    }

    .tab.active[b-3qz2pjxf69] {
        border-color: #2b6fdc;
    }

/* ===== columns ===== */
.cols[b-3qz2pjxf69] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width:1100px) {
    .cols[b-3qz2pjxf69] {
        grid-template-columns: 1fr;
    }
}

/* ===== cards ===== */
.card[b-3qz2pjxf69] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid #e9edf3;
}

.card-head[b-3qz2pjxf69] {
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card-head h3[b-3qz2pjxf69] {
        margin: 0;
        font-size: 1.05rem;
        color: #20314f;
        font-weight: 400;
    }

.card-body[b-3qz2pjxf69] {
    padding: 12px;
}

/* ===== field rows ===== */
.fields[b-3qz2pjxf69] {
    margin: 0;
}

    .fields .row[b-3qz2pjxf69], .f[b-3qz2pjxf69] {
        display: grid;
        grid-template-columns: 180px 1fr;
        align-items: start;
        gap: 10px;
        padding: 6px 0;
    }

/* ===== two-col in card ===== */
.two-col[b-3qz2pjxf69] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width:900px) {
    .two-col[b-3qz2pjxf69] {
        grid-template-columns: 1fr;
    }
}

/* ===== inputs ===== */
input.text[b-3qz2pjxf69] {
    width: 100%;
    height: 34px;
    padding: 6px 8px;
    border: 1px solid #cfd7e6;
    border-radius: 8px;
}

/* ===== buttons ===== */
.btn[b-3qz2pjxf69] {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cfd7e6;
    background: #fff;
    cursor: pointer;
}

    .btn:hover[b-3qz2pjxf69] {
        background: #f3f6fd;
    }

    .btn.primary[b-3qz2pjxf69] {
        background: #2b6fdc;
        color: #fff;
        border-color: #2b6fdc;
    }

    .btn.outline[b-3qz2pjxf69] {
        background: #fff;
        border-color: #2b6fdc;
        color: #2b6fdc;
    }

/* ===== map ===== */
.map[b-3qz2pjxf69] {
    margin-top: 12px;
    height: 280px;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(135deg,#f6f4f2 0%, #efeceb 100%);
    overflow: hidden;
    border: 1px dashed #d7dbe4;
}

    .map .pin[b-3qz2pjxf69] {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #556;
        opacity: .8;
    }

/* ===== table header sort ===== */
.grid th .th-sort[b-3qz2pjxf69] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
}

    .grid th .th-sort:hover[b-3qz2pjxf69] {
        background: #eef3ff;
    }

    .grid th .th-sort:focus[b-3qz2pjxf69] {
        outline: none;
    }

    .grid th .th-sort:focus-visible[b-3qz2pjxf69] {
        outline: 2px solid #2b6fdc;
        outline-offset: 2px;
    }

.grid th[b-3qz2pjxf69] {
    border: 0;
}

/* ===== group titles ===== */
.group-title[b-3qz2pjxf69] {
    margin: 12px 0 6px;
    font-size: .95rem;
    font-weight: 700;
    color: #2b3648;
    opacity: .85;
}

.card-body hr[b-3qz2pjxf69] {
    border: 0;
    border-top: 1px solid #edf1f7;
    margin: 14px 0;
}

/* ===== favourite icon ===== */
.icon-btn[b-3qz2pjxf69] {
    --fav-on: #f59e0b;
    --fav-off: #94a3b8;
    height: 34px;
    width: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid #cfd7e6;
    background: #fff;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
    padding: 0;
    line-height: 1;
}

    .icon-btn .star[b-3qz2pjxf69] {
        font-size: 18px;
        line-height: 1;
        color: var(--fav-off);
        transition: color .2s, text-shadow .2s, filter .2s;
    }

    .icon-btn:hover[b-3qz2pjxf69] {
        background: #f3f6fd;
    }

    .icon-btn:focus-visible[b-3qz2pjxf69] {
        outline: 2px solid #2b6fdc;
        outline-offset: 2px;
    }

    .icon-btn:active[b-3qz2pjxf69] {
        transform: scale(0.96);
    }

.card-head .header-actions[b-3qz2pjxf69] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn.is-fav[b-3qz2pjxf69] {
    border-color: rgba(245,158,11,.35);
    background: linear-gradient(180deg,#fff 0%, #fff7e6 100%);
}

    .icon-btn.is-fav .star[b-3qz2pjxf69] {
        color: #f59e0b;
    }

.customer-details-view .notes-inline[b-3qz2pjxf69] {
    margin-top: .75rem;
    padding: .75rem 1rem 1rem;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: transparent;
}

.customer-details-view .notes-inline-head[b-3qz2pjxf69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .5rem;
}

.customer-details-view .notes-inline-title[b-3qz2pjxf69] {
    font-size: .9rem;
    font-weight: 600;
}

.customer-details-view .notes-inline .notes-list[b-3qz2pjxf69] {
    max-height: 280px;
    overflow: auto;
    border-top: 1px solid #edf1f7;
    margin-top: 10px;
    padding-top: 8px;
}

.customer-details-view .notes-inline .note-row[b-3qz2pjxf69] {
    padding: 8px 0;
    border-bottom: 1px solid #edf1f7;
}

.customer-details-view .notes-inline .note-row-top[b-3qz2pjxf69] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.customer-details-view .notes-inline .note-meta[b-3qz2pjxf69] {
    font-size: .9rem;
    color: #556;
    opacity: .8;
}

.customer-details-view .notes-inline .note-text[b-3qz2pjxf69] {
    white-space: pre-wrap;
    margin-top: 6px;
}

.customer-details-view .notes-inline .note-actions[b-3qz2pjxf69],
.customer-details-view .notes-inline .note-actions-inline[b-3qz2pjxf69] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* Inline notes panel inside Client Details */
.customer-details-view .notes-inline[b-3qz2pjxf69] {
    margin-top: .75rem;
    padding: .75rem .9rem;
    border: 1px solid #d6dbe6;
    border-radius: 10px;
    background: #fbfcff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.customer-details-view .notes-inline-head[b-3qz2pjxf69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: .5rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid #e7ebf3;
}

.customer-details-view .notes-inline-title[b-3qz2pjxf69] {
    font-size: .95rem;
    font-weight: 700;
    color: #1f2d4d;
}

.customer-details-view .notes-inline-actions[b-3qz2pjxf69] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.customer-details-view .notes-inline .notes-list[b-3qz2pjxf69] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.customer-details-view .notes-inline .note-row[b-3qz2pjxf69] {
    padding: .55rem .65rem;
    border: 1px solid #edf1f7;
    border-radius: 10px;
    background: #fff;
}

.customer-details-view .notes-inline .note-row-top[b-3qz2pjxf69] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.customer-details-view .notes-inline .note-meta[b-3qz2pjxf69] {
    font-size: .85rem;
    color: #556;
    opacity: .85;
}

.customer-details-view .notes-inline .note-text[b-3qz2pjxf69] {
    white-space: pre-wrap;
    margin-top: 6px;
}

.customer-details-view .notes-inline .note-actions-inline[b-3qz2pjxf69] {
    display: flex;
    gap: 6px;
}

.customer-details-view .notes-inline .notes-footer[b-3qz2pjxf69] {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid #e7ebf3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-details-view .notes-inline .link-btn[b-3qz2pjxf69] {
    border: none;
    background: transparent;
    color: #2b6fdc;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

    .customer-details-view .notes-inline .link-btn:hover[b-3qz2pjxf69] {
        text-decoration: underline;
    }

.customer-details-view .pin-badge[b-3qz2pjxf69] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #f2d38a;
    background: #fff7e6;
    color: #7a4a00;
    margin-left: 8px;
}
.customer-details-view .notes-inline-actions .btn[b-3qz2pjxf69] {
    white-space: normal;
    line-height: 1.1;
}
/* Notes header: allow wrapping so buttons don't force overflow */
.customer-details-view .notes-inline-head[b-3qz2pjxf69] {
    flex-wrap: wrap;
}

/* Let the action buttons wrap onto a new line if needed */
.customer-details-view .notes-inline-actions[b-3qz2pjxf69] {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

    /* Keep button text on one line (prevents "Show" / "latest" stacking weirdly) */
    .customer-details-view .notes-inline-actions .btn[b-3qz2pjxf69] {
        white-space: nowrap;
    }

/* On smaller screens, stack title + buttons and make buttons fit */
@media (max-width: 520px) {
    .customer-details-view .notes-inline-head[b-3qz2pjxf69] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .customer-details-view .notes-inline-actions[b-3qz2pjxf69] {
        width: 100%;
    }

        /* Make buttons share the row nicely instead of pushing off-screen */
        .customer-details-view .notes-inline-actions .btn[b-3qz2pjxf69] {
            flex: 1 1 auto;
            text-align: center;
            min-width: 0;
        }
}
/* _content/HHCRM_Web/Pages/CustomerNotes.razor.rz.scp.css */
/* CustomerNotes.razor.css */

/* ---------- Layout ---------- */
.customer-notes-page[b-fh1g324hgc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* ---------- Tabs ---------- */
    .customer-notes-page .tabs[b-fh1g324hgc] {
        display: flex;
        gap: 16px;
        align-items: flex-end;
    }

    .customer-notes-page .tab[b-fh1g324hgc] {
        color: #1f2d4d;
        text-decoration: none;
        padding: 8px 6px;
        font-weight: 600;
        border-bottom: 3px solid transparent;
        border-radius: 4px 4px 0 0;
    }

        .customer-notes-page .tab:hover[b-fh1g324hgc] {
            background: #eef3ff;
        }

        .customer-notes-page .tab.active[b-fh1g324hgc] {
            border-color: #2b6fdc;
        }

    /* ---------- Topbar ---------- */
    .customer-notes-page .topbar[b-fh1g324hgc] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .customer-notes-page .search-wrap[b-fh1g324hgc] {
        flex: 1;
        max-width: 520px;
    }

    .customer-notes-page input.search[b-fh1g324hgc] {
        width: 100%;
        height: 34px;
        padding: 6px 8px;
        border: 1px solid #cfd7e6;
        border-radius: 8px;
    }

    /* ---------- Buttons (local safety so Notes matches Customer Details) ---------- */
    /* Use ::deep so it also styles buttons rendered by child components if needed */
    .customer-notes-page[b-fh1g324hgc]  .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 34px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #cfd7e6;
        background: #fff;
        color: #1f2d4d;
        cursor: pointer;
        font: inherit;
        text-decoration: none;
        white-space: nowrap;
    }

        .customer-notes-page[b-fh1g324hgc]  .btn:hover {
            background: #f3f6fd;
        }

        .customer-notes-page[b-fh1g324hgc]  .btn:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

        .customer-notes-page[b-fh1g324hgc]  .btn.primary {
            background: #2b6fdc;
            border-color: #2b6fdc;
            color: #fff;
        }

            .customer-notes-page[b-fh1g324hgc]  .btn.primary:hover {
                filter: brightness(0.97);
            }

        .customer-notes-page[b-fh1g324hgc]  .btn.outline {
            background: #fff;
            border-color: #2b6fdc;
            color: #2b6fdc;
        }

            .customer-notes-page[b-fh1g324hgc]  .btn.outline:hover {
                background: #eef3ff;
            }

    /* small icon button used in drawer header */
    .customer-notes-page[b-fh1g324hgc]  .icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid #cfd7e6;
        background: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: inherit;
    }

        .customer-notes-page[b-fh1g324hgc]  .icon-btn:hover {
            background: #f3f6fd;
        }

    /* ---------- Pills ---------- */
    .customer-notes-page .pills[b-fh1g324hgc] {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .customer-notes-page .pill[b-fh1g324hgc] {
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #cfd7e6;
        background: #fff;
        cursor: pointer;
        font: inherit;
    }

        .customer-notes-page .pill:hover[b-fh1g324hgc] {
            background: #f3f6fd;
        }

    .customer-notes-page .pill--active[b-fh1g324hgc] {
        border-color: #2b6fdc;
        color: #2b6fdc;
        background: #eef3ff;
    }

    .customer-notes-page .spacer[b-fh1g324hgc] {
        flex: 1;
    }

    /* ---------- Card + Table ---------- */
    .customer-notes-page .card[b-fh1g324hgc] {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        border: 1px solid #e9edf3;
    }

    .customer-notes-page .table-scroll[b-fh1g324hgc] {
        overflow: auto;
    }

    .customer-notes-page table.grid[b-fh1g324hgc] {
        width: 100%;
        border-collapse: collapse;
    }

    .customer-notes-page .grid th[b-fh1g324hgc],
    .customer-notes-page .grid td[b-fh1g324hgc] {
        border-bottom: 1px solid #edf1f7;
        padding: 8px 10px;
        vertical-align: top;
    }

    .customer-notes-page .grid th[b-fh1g324hgc] {
        font-weight: 600;
        color: #20314f;
        background: #fafcff;
    }

    /* ---------- Pager ---------- */
    .customer-notes-page .pager[b-fh1g324hgc] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }

        .customer-notes-page .pager button[b-fh1g324hgc] {
            height: 30px;
            width: 34px;
            border-radius: 8px;
            border: 1px solid #cfd7e6;
            background: #fff;
            cursor: pointer;
        }

            .customer-notes-page .pager button:disabled[b-fh1g324hgc] {
                opacity: .45;
                cursor: not-allowed;
            }

    /* ---------- File rows (single definition; duplicates removed) ---------- */
    .customer-notes-page .file-note-row[b-fh1g324hgc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: 2px;
    }

    .customer-notes-page .file-note-label[b-fh1g324hgc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* keep download button compact */
    .customer-notes-page[b-fh1g324hgc]  .file-download-btn {
        height: 32px;
        padding: 0 12px;
        font-size: 0.9rem;
    }

    /* ---------- Drawer styles (use ::deep so it still works even if moved/ported) ---------- */
    .customer-notes-page[b-fh1g324hgc]  .drawer-sheet,
    .customer-notes-page[b-fh1g324hgc]  .drawer-sheet * {
        box-sizing: border-box;
    }

    .customer-notes-page[b-fh1g324hgc]  .drawer-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        background: rgba(0,0,0,.35);
        backdrop-filter: blur(2px);
        z-index: 9999;
    }

    .customer-notes-page[b-fh1g324hgc]  .drawer-sheet {
        width: min(920px, 96vw);
        height: 100dvh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        background: #fff;
        border-left: 1px solid #e5e7eb;
        box-shadow: -24px 0 48px rgba(0,0,0,.25);
        animation: slideIn-b-fh1g324hgc .22s ease-out;
        overflow: hidden;
    }

    .customer-notes-page[b-fh1g324hgc]  .sheet-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        padding: 10px 14px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .customer-notes-page[b-fh1g324hgc]  .sheet-title {
        font-weight: 600;
    }

    .customer-notes-page[b-fh1g324hgc]  .sheet-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: #fff;
        padding: 10px 14px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .customer-notes-page[b-fh1g324hgc]  .sheet-body {
        min-height: 0;
        overflow: auto;
        padding: 10px 12px 16px;
    }

    .customer-notes-page[b-fh1g324hgc]  .form-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 6px 10px;
    }

    .customer-notes-page[b-fh1g324hgc]  .group {
        grid-column: 1 / -1;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 10px;
        background: #fff;
    }

        .customer-notes-page[b-fh1g324hgc]  .group > .legend {
            font-weight: 600;
            margin: 0 0 6px;
            opacity: .75;
        }

    .customer-notes-page[b-fh1g324hgc]  .ff {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        width: 100%;
    }

        .customer-notes-page[b-fh1g324hgc]  .ff > label {
            font-size: .78rem;
            line-height: 14px;
            height: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        /* IMPORTANT: ::deep so inputs rendered by Blazor components (InputDate/InputText etc)
   still receive the styling inside the drawer */
        .customer-notes-page[b-fh1g324hgc]  .ff input,
        .customer-notes-page[b-fh1g324hgc]  .ff select,
        .customer-notes-page[b-fh1g324hgc]  .ff textarea {
            display: block;
            width: 100% !important;
            max-width: none !important;
            min-width: 0;
            flex: 1 1 auto;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 6px 8px;
            font: inherit;
            background: #fff;
            box-sizing: border-box;
        }

            .customer-notes-page[b-fh1g324hgc]  .ff input[type="date"],
            .customer-notes-page[b-fh1g324hgc]  .ff input[type="time"] {
                min-width: 9.5rem;
                font-variant-numeric: tabular-nums;
            }

        .customer-notes-page[b-fh1g324hgc]  .ff input,
        .customer-notes-page[b-fh1g324hgc]  .ff select {
            height: 34px;
        }

    .customer-notes-page[b-fh1g324hgc]  .col-12 {
        grid-column: 1 / -1;
    }

    .customer-notes-page[b-fh1g324hgc]  .col-6 {
        grid-column: span 6;
    }

    .customer-notes-page[b-fh1g324hgc]  .col-4 {
        grid-column: span 4;
    }

@keyframes slideIn-b-fh1g324hgc {
    from {
        transform: translateX(12px);
        opacity: .8;
    }

    to {
        transform: none;
        opacity: 1;
    }
}
/* _content/HHCRM_Web/Pages/CustomerOrders.razor.rz.scp.css */
/* Layout skeleton */
.detail-page[b-0ggcvk47e9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tabs */
.tabs[b-0ggcvk47e9] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.tab[b-0ggcvk47e9] {
    color: #1f2d4d;
    text-decoration: none;
    padding: 8px 6px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
}

    .tab:hover[b-0ggcvk47e9] {
        background: #eef3ff;
    }

    .tab.active[b-0ggcvk47e9] {
        border-color: #2b6fdc;
    }

/* Columns */
.cols[b-0ggcvk47e9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1100px) {
    .cols[b-0ggcvk47e9] {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.card[b-0ggcvk47e9] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid #e9edf3;
}

.card-head[b-0ggcvk47e9] {
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card-head h3[b-0ggcvk47e9] {
        margin: 0;
        font-size: 1.05rem;
        color: #20314f;
    }

.card-body[b-0ggcvk47e9] {
    padding: 12px;
}

/* Field lists */
.fields[b-0ggcvk47e9] {
    margin: 0;
}

    .fields .row[b-0ggcvk47e9],
    .f[b-0ggcvk47e9] {
        display: grid;
        grid-template-columns: 180px 1fr;
        align-items: start;
        gap: 10px;
        padding: 6px 0;
    }

/* Two-column area inside a card */
.two-col[b-0ggcvk47e9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .two-col[b-0ggcvk47e9] {
        grid-template-columns: 1fr;
    }
}

/* Inputs */
input.text[b-0ggcvk47e9] {
    width: 100%;
    height: 34px;
    padding: 6px 8px;
    border: 1px solid #cfd7e6;
    border-radius: 8px;
}

/* Buttons */
.btn[b-0ggcvk47e9] {
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #cfd6e4;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-weight: 600;
    line-height: 1;
}

    .btn:hover[b-0ggcvk47e9] {
        background: #f3f6fd;
    }

    .btn.primary[b-0ggcvk47e9] {
        background: #2b6fdc;
        color: #fff;
        border-color: #2b6fdc;
    }

    .btn.outline[b-0ggcvk47e9] {
        background: #fff;
        border-color: #2b6fdc;
        color: #2b6fdc;
    }

/* solid primary (matches “New Customer”) */
.btn-primary[b-0ggcvk47e9] {
    background: #2f5fdb;
    border-color: #2f5fdb;
    color: #fff;
}

    .btn-primary:hover[b-0ggcvk47e9] {
        filter: brightness(.95);
    }

    .btn-primary:active[b-0ggcvk47e9] {
        transform: translateY(1px);
    }

    .btn-primary:disabled[b-0ggcvk47e9] {
        opacity: .6;
        cursor: not-allowed;
    }

/* Alerts */
.alert.success[b-0ggcvk47e9] {
    background-color: #e6ffed;
    color: #065f46;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #10b981;
    border-radius: 6px;
}

.alert.error[b-0ggcvk47e9] {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #dc2626;
    border-radius: 6px;
}

/* Table look */
.grid[b-0ggcvk47e9] {
    width: 100%;
    border-collapse: collapse;
}

    .grid thead th[b-0ggcvk47e9] {
        background: #f9fafc;
        color: #20314f;
        font-weight: 700;
    }

    .grid th[b-0ggcvk47e9],
    .grid td[b-0ggcvk47e9] {
        padding: 8px 10px;
        border-bottom: 1px solid #edf1f7;
        text-align: left;
    }

    .grid tbody tr:hover[b-0ggcvk47e9] {
        background: #fafcff;
    }

    .grid tfoot td[b-0ggcvk47e9] {
        border-top: 1px solid #edf1f7;
    }

    /* clickable rows */
    .grid tbody tr.click-row[b-0ggcvk47e9] {
        cursor: pointer;
        transition: background .12s ease;
    }

        .grid tbody tr.click-row:hover[b-0ggcvk47e9] {
            background: #f9fafb;
        }

    /* selected row */
    .grid tbody tr.is-selected[b-0ggcvk47e9] {
        background: #eaf1ff !important;
    }

        .grid tbody tr.is-selected td:first-child[b-0ggcvk47e9] {
            position: relative;
        }

            .grid tbody tr.is-selected td:first-child[b-0ggcvk47e9]::before {
                content: "";
                position: absolute;
                left: -8px;
                top: 0;
                bottom: 0;
                width: 4px;
                background: #2563eb;
                border-radius: 2px;
            }

/* Header area */
.header-right[b-0ggcvk47e9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-stamp[b-0ggcvk47e9] {
    font-size: .875rem;
    opacity: .85;
}

/* ===== THIS IS THE IMPORTANT BIT FOR LABELS / VALUES ===== */

/* Summary labels (left column) */
.order-detail-page dl.fields .row > dt[b-0ggcvk47e9],
.order-detail-page dl.fields .row > dt.field-label[b-0ggcvk47e9] {
    font-weight: 400 !important;
    color: #2b3648 !important;
}

/* Summary values (right column) */
.order-detail-page dl.fields .row > dd[b-0ggcvk47e9],
.order-detail-page dl.fields .row > dd.field-value[b-0ggcvk47e9] {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Payments bar "Order Total / Paid / Remaining" */
.order-detail-page .f .label[b-0ggcvk47e9] {
    font-weight: 400 !important;
    color: #2b3648 !important;
}

.order-detail-page .f .value[b-0ggcvk47e9] {
    font-weight: 600 !important;
    color: #1f2937 !important;
}
/* _content/HHCRM_Web/Pages/Customers.razor.rz.scp.css */
.page[b-lhb1pbs0qa] {
    /* switched back to flex layout like Orders and made it full-height */
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    /* grid-template-rows: 50px 50px 1fr;  <-- no longer needed */
}

/* top blue bar like screenshot */
.topbar[b-lhb1pbs0qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

/* wrap the input so the quick panel can be absolutely positioned under it */
.search-wrap[b-lhb1pbs0qa] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-lhb1pbs0qa] {
    flex: 1;
    max-width: 700px;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-lhb1pbs0qa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-lhb1pbs0qa] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-lhb1pbs0qa] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* filter pills */
.pills[b-lhb1pbs0qa] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
}

/* Base pill styles (consolidated) */
.pill[b-lhb1pbs0qa] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    color: var(--text-color, #333);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    .pill:hover[b-lhb1pbs0qa] {
        background: #f3f3f3;
    }

/* spacer & primary button */
.spacer[b-lhb1pbs0qa] {
    flex: 1;
}

.primary[b-lhb1pbs0qa] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* ===== Cards ===== */

/* base look for top-level cards on the page (column picker + grid card) */
.page > .card[b-lhb1pbs0qa] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

    /* the LAST .card (the one with the table) fills the remaining height */
    .page > .card:last-of-type[b-lhb1pbs0qa] {
        height: calc(100% - 54px - 44px);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* the FIRST .card (column picker) stays auto-height and just sits above the grid */
    .page > .card:first-of-type[b-lhb1pbs0qa] {
        height: auto;
        display: block;
    }

#dataTable[b-lhb1pbs0qa] {
    height: 100%;
    overflow: auto;
}

table[b-lhb1pbs0qa] {
    /*border: 1px solid black;*/
    width: 100%;
}

th[b-lhb1pbs0qa],
td[b-lhb1pbs0qa] {
    /*    width: 100px;
    border: 1px solid black;*/
}

/* old tbody hack removed so it doesn’t force extra whitespace */
/*thead > tr {
    position: relative;
    display: block;
}

tbody {
    display: block;
    height: calc(80vh - 100px);
    overflow: auto;
}*/

.grid[b-lhb1pbs0qa] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-lhb1pbs0qa], .grid td[b-lhb1pbs0qa] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-lhb1pbs0qa] {
        text-align: left;
        font-weight: 600;
        color: #334155;
    }

    .grid a[b-lhb1pbs0qa] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-lhb1pbs0qa] {
        background: #fafbfe;
    }

.pager[b-lhb1pbs0qa] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* ---------- Quick search dropdown ---------- */
.quick-panel[b-lhb1pbs0qa] {
    position: absolute;
    top: 42px; /* sits just below the input */
    left: 0;
    right: 0;
    background: #f6f9ff; /* subtle blue-tinted white so it pops */
    border: 1px solid #cfd7e6; /* slightly darker border */
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(17,24,39,.18), 0 6px 10px rgba(17,24,39,.12);
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-lhb1pbs0qa] {
    position: sticky;
    top: 0; /* keeps the section header visible while scrolling */
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-lhb1pbs0qa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-lhb1pbs0qa] {
        background: #f2f6ff;
    }

.qi-name[b-lhb1pbs0qa] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-lhb1pbs0qa] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-lhb1pbs0qa] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-lhb1pbs0qa] {
    padding: 12px;
    color: #7a8698;
}

/* ===== Drawer / Popout styling (isolation) ===== */
.drawer-overlay[b-lhb1pbs0qa] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}

.drawer-sheet[b-lhb1pbs0qa] {
    position: relative;
    width: min(920px, 96vw);
    height: 100vh;
    max-height: 100vh;
    overflow: hidden; /* body scrolls, not the sheet */
    background: var(--card-bg, #fff);
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
    border-left: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    animation: slideIn-b-lhb1pbs0qa .22s ease-out;
    will-change: transform, opacity;
}

/* Header/footer fixed, body scrolls */
.sheet-header[b-lhb1pbs0qa], .sheet-footer[b-lhb1pbs0qa] {
    flex: 0 0 auto;
}

.sheet-body[b-lhb1pbs0qa] {
    flex: 1 1 auto;
    min-height: 0; /* critical for overflow in flex */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.sheet-header[b-lhb1pbs0qa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sheet-title[b-lhb1pbs0qa] {
    font-size: 1.125rem;
    font-weight: 600;
}

.sheet-footer[b-lhb1pbs0qa] {
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Form inside drawer */
.form-grid[b-lhb1pbs0qa] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px 16px;
}

.group[b-lhb1pbs0qa] {
    grid-column: 1 / -1;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 12px;
    background: var(--card-bg, #fff);
}

    .group > .legend[b-lhb1pbs0qa] {
        font-weight: 600;
        margin-bottom: 8px;
        opacity: .75;
    }

.ff[b-lhb1pbs0qa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ff > label[b-lhb1pbs0qa] {
        font-size: .875rem;
        opacity: .8;
    }

    /* make inputs fill their grid column */
    .ff > input[b-lhb1pbs0qa],
    .ff > select[b-lhb1pbs0qa],
    .ff > textarea[b-lhb1pbs0qa] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 10px;
        padding: 8px 10px;
        font: inherit;
        background: #fff;
    }

    .ff > textarea[b-lhb1pbs0qa] {
        min-height: 84px;
        resize: vertical;
    }

/* ensure the drawer body actually scrolls and uses all remaining height */
.sheet-body[b-lhb1pbs0qa] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* responsive grid spans */
.col-12[b-lhb1pbs0qa] {
    grid-column: 1 / -1;
}

.col-8[b-lhb1pbs0qa] {
    grid-column: span 8;
}

.col-6[b-lhb1pbs0qa] {
    grid-column: span 6;
}

.col-4[b-lhb1pbs0qa] {
    grid-column: span 4;
}

.col-3[b-lhb1pbs0qa] {
    grid-column: span 3;
}

@media (max-width: 980px) {
    .col-8[b-lhb1pbs0qa], .col-6[b-lhb1pbs0qa], .col-4[b-lhb1pbs0qa], .col-3[b-lhb1pbs0qa] {
        grid-column: 1 / -1;
    }
}

/* Animation */
@keyframes slideIn-b-lhb1pbs0qa {
    from {
        transform: translateX(12px);
        opacity: .8;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* (Optional) global fallback in case isolation doesn’t bind for some reason) */
:global(.drawer-overlay)[b-lhb1pbs0qa] {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 9999 !important;
}

:global(.drawer-sheet)[b-lhb1pbs0qa] {
    width: min(920px,96vw);
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Stretch form controls inside the drawer grid cells */
.drawer-sheet .ff[b-lhb1pbs0qa] {
    min-width: 0;
}

    .drawer-sheet .ff input[b-lhb1pbs0qa],
    .drawer-sheet .ff select[b-lhb1pbs0qa],
    .drawer-sheet .ff textarea[b-lhb1pbs0qa] {
        width: 100% !important; /* beat any global width */
        max-width: none !important;
        box-sizing: border-box;
    }

/* WebKit/Edge date inputs can be extra narrow by default */
.drawer-sheet input[type="date"][b-lhb1pbs0qa] {
    width: 100% !important;
}

/* compact filter controls for header */
.grid thead .filter-row th[b-lhb1pbs0qa] {
    padding-top: 6px;
    padding-bottom: 6px;
    background: #f5f7fb;
}

.grid thead .filter-row select[b-lhb1pbs0qa],
.grid thead .filter-row .flt[b-lhb1pbs0qa] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 2px 6px;
    border: 1px solid #d6deea;
    border-radius: 6px;
    font: inherit;
    margin: 2px 0;
}

/* remove black focus outline on header buttons */
.grid th .th-sort:focus[b-lhb1pbs0qa] {
    outline: none;
}

.grid th .th-sort:focus-visible[b-lhb1pbs0qa] {
    outline: none;
    box-shadow: none;
}

/* subtle hover to indicate interactivity */
.grid th .th-sort:hover[b-lhb1pbs0qa] {
    background: #eef3ff;
    border-radius: 6px;
}

/* table headers */
.grid th[b-lhb1pbs0qa] {
    white-space: nowrap;
    vertical-align: bottom;
}

    .grid th .th-sort[b-lhb1pbs0qa] {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        padding: 4px 6px;
        font: inherit;
        color: inherit;
        cursor: pointer;
        border-radius: 6px;
    }

        .grid th .th-sort:hover[b-lhb1pbs0qa] {
            background: #eef3ff;
        }

/* highlight when pressed */
.pill[aria-pressed="true" i][b-lhb1pbs0qa],
.pill.pill--active[b-lhb1pbs0qa] {
    background: #0b5bd3 !important;
    border-color: #0b5bd3 !important;
    color: #fff !important;
    font-weight: 600;
}

/* same base styles as above… */
.pills[b-lhb1pbs0qa] (.excel-icon-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #16a34a;
    color: #fff;
    cursor: pointer;
}

/* inject the icon before the (empty) button content */
.pills[b-lhb1pbs0qa] (.excel-icon-btn::before) {
    content: "\f1c3"; /* Font Awesome 'file-excel' */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solid */
    font-size: 1.125rem; /* tweak size */
    line-height: 1;
    color: #fff;
}

/* hover/active/focus same as option A */
.pills[b-lhb1pbs0qa] (.excel-icon-btn:hover) {
    background: #15803d;
}

.pills[b-lhb1pbs0qa] (.excel-icon-btn:active) {
    background: #166534;
    transform: translateY(1px);
}

.pills[b-lhb1pbs0qa] (.excel-icon-btn:focus-visible) {
    box-shadow: 0 0 0 3px rgba(22,163,74,.35);
}

/* allow horizontal scroll when many columns are shown */
.table-scroll[b-lhb1pbs0qa] {
    /* now acts like #dataTable on Orders: fills card and scrolls */
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    /* keeps scrollbars from overlapping rounded borders */
    border-radius: 10px;
}

/* let the table grow wider than the container when needed */
.grid[b-lhb1pbs0qa] {
    min-width: 100%; /* at least fill the card */
    width: max-content; /* but expand to fit all columns */
}

    /* keep cells on one line so width grows */
    .grid th[b-lhb1pbs0qa], .grid td[b-lhb1pbs0qa] {
        white-space: nowrap; /* prevent wrapping from making rows super tall */
    }

        /* optional: allow long text cells (addresses/notes) to wrap instead */
        .grid td.wrap[b-lhb1pbs0qa] {
            white-space: normal;
        }

/* optional: sticky header when scrolling horizontally/vertically */
.table-scroll thead th[b-lhb1pbs0qa] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

/* Generic button styles for the column picker header */
.btn[b-lhb1pbs0qa] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    .btn:hover[b-lhb1pbs0qa] {
        background: #f3f3f3;
    }

.btn-outline[b-lhb1pbs0qa] {
    background: transparent;
    border-color: #c9d3e3;
    color: #2f3a4f;
}

    .btn-outline:hover[b-lhb1pbs0qa] {
        background: #eef3ff;
    }

/* Optional: keep the little count on the right consistent */
.muted[b-lhb1pbs0qa] {
    opacity: .7;
}
.topbar[b-lhb1pbs0qa] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrap[b-lhb1pbs0qa] {
    flex: 1;
}

.actions[b-lhb1pbs0qa] {
    margin-left: auto; /* pushes avatar to the far right */
    display: flex;
    align-items: center;
}
.grid th[b-lhb1pbs0qa] {
    position: relative;
}

.grid .col-wrap[b-lhb1pbs0qa] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.grid .col-resizer[b-lhb1pbs0qa] {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

    .grid .col-resizer:hover[b-lhb1pbs0qa] {
        /* optional: subtle visual cue */
        background: rgba(0,0,0,0.06);
    }
/* Put this in your site CSS (or scoped CSS for Customers.razor if you use it) */
.grid th[b-lhb1pbs0qa] {
    position: relative;
    overflow: visible;
}

.grid .col-wrap[b-lhb1pbs0qa] {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Wider handle, no negative offset, high z-index */
.grid .col-resizer[b-lhb1pbs0qa] {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 5;
}

    /* Visible grip line */
    .grid .col-resizer[b-lhb1pbs0qa]::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 20%;
        bottom: 20%;
        width: 2px;
        background: rgba(0,0,0,0.15);
    }

    .grid .col-resizer:hover[b-lhb1pbs0qa]::after {
        background: rgba(0,0,0,0.35);
    }
/* _content/HHCRM_Web/Pages/CustomerStatusCodes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-11aznwnqn1] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-11aznwnqn1] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-11aznwnqn1] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-11aznwnqn1] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-11aznwnqn1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-11aznwnqn1] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-11aznwnqn1] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-11aznwnqn1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-11aznwnqn1] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-11aznwnqn1] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-11aznwnqn1] {
    flex: 1;
}

.primary[b-11aznwnqn1] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-11aznwnqn1] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-11aznwnqn1] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-11aznwnqn1], .grid td[b-11aznwnqn1] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-11aznwnqn1] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-11aznwnqn1] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-11aznwnqn1] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-11aznwnqn1], .grid th.num[b-11aznwnqn1] {
        text-align: right;
    }

    .grid td.mono[b-11aznwnqn1] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-11aznwnqn1], .grid td.col-id[b-11aznwnqn1] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-11aznwnqn1], .grid td.col-price[b-11aznwnqn1] {
        width: 140px;
    }

    .grid th.col-cost[b-11aznwnqn1], .grid td.col-cost[b-11aznwnqn1] {
        width: 160px;
    }

.col-id[b-11aznwnqn1] {
    text-align: right;
}

    .col-id[b-11aznwnqn1]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-11aznwnqn1] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-11aznwnqn1] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-11aznwnqn1] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-11aznwnqn1] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-11aznwnqn1] {
        background: #f2f6ff;
    }

.qi-name[b-11aznwnqn1] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-11aznwnqn1] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-11aznwnqn1] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-11aznwnqn1] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-11aznwnqn1] {
    outline: none;
}

    .th-sort:focus-visible[b-11aznwnqn1] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-11aznwnqn1] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-11aznwnqn1] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/DiaryEventTypes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-v131vin1j1] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-v131vin1j1] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-v131vin1j1] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-v131vin1j1] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-v131vin1j1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-v131vin1j1] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-v131vin1j1] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-v131vin1j1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-v131vin1j1] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-v131vin1j1] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-v131vin1j1] {
    flex: 1;
}

.primary[b-v131vin1j1] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-v131vin1j1] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-v131vin1j1] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-v131vin1j1], .grid td[b-v131vin1j1] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-v131vin1j1] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-v131vin1j1] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-v131vin1j1] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-v131vin1j1], .grid th.num[b-v131vin1j1] {
        text-align: right;
    }

    .grid td.mono[b-v131vin1j1] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-v131vin1j1], .grid td.col-id[b-v131vin1j1] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-v131vin1j1], .grid td.col-price[b-v131vin1j1] {
        width: 140px;
    }

    .grid th.col-cost[b-v131vin1j1], .grid td.col-cost[b-v131vin1j1] {
        width: 160px;
    }

.col-id[b-v131vin1j1] {
    text-align: right;
}

    .col-id[b-v131vin1j1]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-v131vin1j1] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-v131vin1j1] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-v131vin1j1] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-v131vin1j1] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-v131vin1j1] {
        background: #f2f6ff;
    }

.qi-name[b-v131vin1j1] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-v131vin1j1] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-v131vin1j1] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-v131vin1j1] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-v131vin1j1] {
    outline: none;
}

    .th-sort:focus-visible[b-v131vin1j1] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-v131vin1j1] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-v131vin1j1] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/EmployeesPage.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-uygw1vqjom] {
    gap: 12px;
    display: grid;
    grid-template-rows: 50px 50px 75ch 50px;
}

/* Top bar */
.topbar[b-uygw1vqjom] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-uygw1vqjom] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-uygw1vqjom] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-uygw1vqjom] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-uygw1vqjom] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-uygw1vqjom] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-uygw1vqjom] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-uygw1vqjom] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-uygw1vqjom] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-uygw1vqjom] {
    flex: 1;
}

.primary[b-uygw1vqjom] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-uygw1vqjom] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.table-scroll[b-uygw1vqjom] {
    overflow-x: auto;
    overflow-y: hidden;
    /* keeps scrollbars from overlapping rounded borders */
    border-radius: 10px;
}

    /* optional: sticky header when scrolling horizontally/vertically */
    .table-scroll thead th[b-uygw1vqjom] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        overflow-wrap: break-word;
        white-space: normal;
    }

.grid[b-uygw1vqjom] {
    width: 99%;
    border-collapse: collapse;
}

    .grid th[b-uygw1vqjom], .grid td[b-uygw1vqjom] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-uygw1vqjom] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-uygw1vqjom] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-uygw1vqjom] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-uygw1vqjom], .grid th.num[b-uygw1vqjom] {
        text-align: right;
    }

        /*This adds some space where the sort direction icon is on the header so header text lines up*/
        .grid td.num div[b-uygw1vqjom]::after {
            content: "";
            margin-right: 1.2em;
        }

    .grid td.mono[b-uygw1vqjom] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-uygw1vqjom], .grid td.col-id[b-uygw1vqjom] {
        width: 120px;
        white-space: nowrap;
    }

    .grid th.col-price[b-uygw1vqjom], .grid td.col-price[b-uygw1vqjom] {
        width: 140px;
    }

    .grid th.col-cost[b-uygw1vqjom], .grid td.col-cost[b-uygw1vqjom] {
        width: 160px;
    }

.pager[b-uygw1vqjom] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-uygw1vqjom] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-uygw1vqjom] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-uygw1vqjom] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-uygw1vqjom] {
        background: #f2f6ff;
    }

.qi-name[b-uygw1vqjom] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-uygw1vqjom] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-uygw1vqjom] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-uygw1vqjom] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-uygw1vqjom] {
    outline: none;
}

    .th-sort:focus-visible[b-uygw1vqjom] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-uygw1vqjom] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-uygw1vqjom] {
    background: #eef3ff;
    border-radius: 6px;
}

/* =========================================================
   FORCE BLOCK — override globally, in case scoped CSS misses
   Requires: add class="page products-page" on the root div.
   ========================================================= */
:global(.products-page .topbar)[b-uygw1vqjom] {
    background: #0d3a78 !important;
    color: #fff !important;
    border-radius: 10px !important;
}

:global(.products-page .pill)[b-uygw1vqjom] {
    padding: 8px 12px !important;
    border: 1px solid #d0d7e2 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

:global(.products-page .pill[aria-pressed="true"])[b-uygw1vqjom] {
    background: #e7f0ff !important;
    border-color: #9db7ff !important;
}

:global(.products-page .card)[b-uygw1vqjom] {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

:global(.products-page .grid)[b-uygw1vqjom] {
    width: 100% !important;
    border-collapse: collapse !important;
}

:global(.products-page .grid th)[b-uygw1vqjom],
:global(.products-page .grid td)[b-uygw1vqjom] {
    padding: 10px !important;
    border-bottom: 1px solid #eef1f5 !important;
}

:global(.products-page .grid th)[b-uygw1vqjom] {
    text-align: left !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

:global(.products-page .grid a)[b-uygw1vqjom] {
    color: #0b5bd3 !important;
    text-decoration: none !important;
}

:global(.products-page .grid tr:hover)[b-uygw1vqjom] {
    background: #fafbfe !important;
}

:global(.products-page .num)[b-uygw1vqjom] {
    text-align: right !important;
}

:global(.products-page .mono)[b-uygw1vqjom] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}

:global(.products-page .quick-panel)[b-uygw1vqjom] {
    background: #f6f9ff !important;
    border: 1px solid #cfd7e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12) !important;
}

:global(.products-page .quick-item:hover)[b-uygw1vqjom] {
    background: #f2f6ff !important;
}


.pill.pill--active[b-uygw1vqjom],
.pills .pill.pill--active[b-uygw1vqjom] {
    background: #2563eb; /* same “blue” vibe as your Active pill */
    color: #fff;
    border-color: #2563eb;
}

    .pill.pill--active:hover[b-uygw1vqjom],
    .pills .pill.pill--active:hover[b-uygw1vqjom] {
        filter: brightness(0.95);
    }
.topbar[b-uygw1vqjom] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrap[b-uygw1vqjom] {
    flex: 1;
}

.actions[b-uygw1vqjom] {
    margin-left: auto; /* pushes avatar to the far right */
    display: flex;
    align-items: center;
}
/* _content/HHCRM_Web/Pages/HearingEventsPage.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-0bq1frutnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Top bar */
.topbar[b-0bq1frutnh] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-0bq1frutnh] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-0bq1frutnh] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-0bq1frutnh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-0bq1frutnh] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-0bq1frutnh] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-0bq1frutnh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-0bq1frutnh] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-0bq1frutnh] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-0bq1frutnh] {
    flex: 1;
}

.primary[b-0bq1frutnh] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-0bq1frutnh] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.grid[b-0bq1frutnh] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-0bq1frutnh], .grid td[b-0bq1frutnh] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-0bq1frutnh] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-0bq1frutnh] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-0bq1frutnh] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-0bq1frutnh], .grid th.num[b-0bq1frutnh] {
        text-align: right;
    }

    .grid td.mono[b-0bq1frutnh] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-0bq1frutnh], .grid td.col-id[b-0bq1frutnh] {
        width: 120px;
        white-space: nowrap;
    }

    .grid th.col-price[b-0bq1frutnh], .grid td.col-price[b-0bq1frutnh] {
        width: 140px;
    }

    .grid th.col-cost[b-0bq1frutnh], .grid td.col-cost[b-0bq1frutnh] {
        width: 160px;
    }

.pager[b-0bq1frutnh] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-0bq1frutnh] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-0bq1frutnh] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-0bq1frutnh] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-0bq1frutnh] {
        background: #f2f6ff;
    }

.qi-name[b-0bq1frutnh] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-0bq1frutnh] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-0bq1frutnh] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-0bq1frutnh] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-0bq1frutnh] {
    outline: none;
}

    .th-sort:focus-visible[b-0bq1frutnh] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-0bq1frutnh] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-0bq1frutnh] {
    background: #eef3ff;
    border-radius: 6px;
}

/* =========================================================
   FORCE BLOCK — override globally, in case scoped CSS misses
   Requires: add class="page products-page" on the root div.
   ========================================================= */
:global(.products-page .topbar)[b-0bq1frutnh] {
    background: #0d3a78 !important;
    color: #fff !important;
    border-radius: 10px !important;
}

:global(.products-page .pill)[b-0bq1frutnh] {
    padding: 8px 12px !important;
    border: 1px solid #d0d7e2 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

:global(.products-page .pill[aria-pressed="true"])[b-0bq1frutnh] {
    background: #e7f0ff !important;
    border-color: #9db7ff !important;
}

:global(.products-page .card)[b-0bq1frutnh] {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

:global(.products-page .grid)[b-0bq1frutnh] {
    width: 100% !important;
    border-collapse: collapse !important;
}

:global(.products-page .grid th)[b-0bq1frutnh],
:global(.products-page .grid td)[b-0bq1frutnh] {
    padding: 10px !important;
    border-bottom: 1px solid #eef1f5 !important;
}

:global(.products-page .grid th)[b-0bq1frutnh] {
    text-align: left !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

:global(.products-page .grid a)[b-0bq1frutnh] {
    color: #0b5bd3 !important;
    text-decoration: none !important;
}

:global(.products-page .grid tr:hover)[b-0bq1frutnh] {
    background: #fafbfe !important;
}

:global(.products-page .num)[b-0bq1frutnh] {
    text-align: right !important;
}

:global(.products-page .mono)[b-0bq1frutnh] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}

:global(.products-page .quick-panel)[b-0bq1frutnh] {
    background: #f6f9ff !important;
    border: 1px solid #cfd7e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12) !important;
}

:global(.products-page .quick-item:hover)[b-0bq1frutnh] {
    background: #f2f6ff !important;
}
/* _content/HHCRM_Web/Pages/LossTypes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-dp5g4uofqk] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-dp5g4uofqk] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-dp5g4uofqk] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-dp5g4uofqk] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-dp5g4uofqk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-dp5g4uofqk] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-dp5g4uofqk] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-dp5g4uofqk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-dp5g4uofqk] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-dp5g4uofqk] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-dp5g4uofqk] {
    flex: 1;
}

.primary[b-dp5g4uofqk] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-dp5g4uofqk] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-dp5g4uofqk] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-dp5g4uofqk], .grid td[b-dp5g4uofqk] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-dp5g4uofqk] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-dp5g4uofqk] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-dp5g4uofqk] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-dp5g4uofqk], .grid th.num[b-dp5g4uofqk] {
        text-align: right;
    }

    .grid td.mono[b-dp5g4uofqk] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-dp5g4uofqk], .grid td.col-id[b-dp5g4uofqk] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-dp5g4uofqk], .grid td.col-price[b-dp5g4uofqk] {
        width: 140px;
    }

    .grid th.col-cost[b-dp5g4uofqk], .grid td.col-cost[b-dp5g4uofqk] {
        width: 160px;
    }

.col-id[b-dp5g4uofqk] {
    text-align: right;
}

    .col-id[b-dp5g4uofqk]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-dp5g4uofqk] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-dp5g4uofqk] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-dp5g4uofqk] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-dp5g4uofqk] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-dp5g4uofqk] {
        background: #f2f6ff;
    }

.qi-name[b-dp5g4uofqk] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-dp5g4uofqk] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-dp5g4uofqk] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-dp5g4uofqk] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-dp5g4uofqk] {
    outline: none;
}

    .th-sort:focus-visible[b-dp5g4uofqk] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-dp5g4uofqk] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-dp5g4uofqk] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/Maintenance.razor.rz.scp.css */
/* Full-width page */
.page.maintenance-page[b-c6hne7c3be] {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
}

    /* Header bar */
    .page.maintenance-page .topbar[b-c6hne7c3be] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }

.topbar-left[b-c6hne7c3be] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page.maintenance-page .title[b-c6hne7c3be] {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Two-column layout: sidebar + content */
.admin-layout[b-c6hne7c3be] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    min-height: 0;
    width: 100%;
    align-items: flex-start;
}

    /* When areas are collapsed, hide sidebar and let content fill */
    .admin-layout.areas-collapsed[b-c6hne7c3be] {
        grid-template-columns: minmax(0, 1fr);
    }

        .admin-layout.areas-collapsed .admin-nav[b-c6hne7c3be] {
            display: none;
        }

/* Areas card */
.admin-nav.card[b-c6hne7c3be] {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.admin-nav-head[b-c6hne7c3be] {
    font-weight: 600;
    margin-bottom: 4px;
}

.admin-nav-list[b-c6hne7c3be] {
    display: grid;
    gap: 6px;
    padding-right: 2px;
}

.admin-nav-item[b-c6hne7c3be] {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
}

    .admin-nav-item:hover[b-c6hne7c3be] {
        background: #f9fafb;
    }

    .admin-nav-item.active[b-c6hne7c3be] {
        background: #eef2ff;
        border-color: #c7d2fe;
        color: #1d4ed8;
        font-weight: 600;
    }

.admin-nav-foot[b-c6hne7c3be] {
    padding-top: 4px;
    font-size: 0.9rem;
}

/* Content column */
.admin-content[b-c6hne7c3be] {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 16px;
    align-content: start;
    height:100%;
    container-name: admincontent;
    container-type: inline-size;
}

    /* Cards in content stretch full width */
    .admin-content .card[b-c6hne7c3be] {
        xoverflow: hidden; /* surely, in general, if content overflows the container we need scroll bars to see it */
    }

/* Card header and body */
.card-head[b-c6hne7c3be] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.card-body[b-c6hne7c3be] {
    padding: 12px 14px;
}

.muted[b-c6hne7c3be] {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Icon button – shared style */
.icon-btn[b-c6hne7c3be] {
    appearance: none;
    background: #f9fafb;
    border-radius: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: none;
    outline: none;
}

    .icon-btn:hover[b-c6hne7c3be] {
        background: #e5e7eb;
    }

.sidebar-toggle[b-c6hne7c3be] {
    width: 30px;
    height: 30px;
}
/* _content/HHCRM_Web/Pages/Orders.razor.rz.scp.css */
/* ===== Orders list page — make it behave like Customers ===== */

#tblScrollOuter[b-skp34nker8] {
    position: sticky;
    overflow: scroll;
    transform: rotateX(180deg);
}

#tblScrollInner[b-skp34nker8] {
    transform: rotateX(180deg);
}

/* TOP scroller: must have height */
/*#tblScrollTop {
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: .25rem;
}*/

/* Bottom wrapper: horizontal scroll host */
/*#tblScroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}*/

/* Make the table expand to its content (like Customers) */
/*#tblScroll > table.grid {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
}*/

/* Keep cells on one line so width grows */
/*#tblScroll table.grid th,
#tblScroll table.grid td {
    white-space: nowrap;
}*/

/* Match Customers — DO NOT use sticky headers here */
/*#tblScroll thead th {
    position: static !important;
    top: auto !important;
}*/

/* Basic look & feel */

.fullHeight[b-skp34nker8] {
    height: 100%;
}

.page[b-skp34nker8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.topbar[b-skp34nker8] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    height: 52px;
}

.search-wrap[b-skp34nker8] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-skp34nker8] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-skp34nker8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-skp34nker8] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-skp34nker8] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.pills[b-skp34nker8] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
}

.pill[b-skp34nker8] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

.spacer[b-skp34nker8] {
    flex: 1;
}

.primary[b-skp34nker8] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* CARD – same height calc, but now flex so children can size correctly */
.card[b-skp34nker8] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    height: calc(100% - 54px - 44px);
    display: flex; /* NEW */
    flex-direction: column; /* NEW */
}

/* DATATABLE – no fixed 100% height; flex fills space above pager */
#dataTable[b-skp34nker8] {
    /* height: 100%;  <-- remove this */
    flex: 1 1 auto; /* NEW */
    min-height: 0; /* NEW: allows scrolling without overflow */
    overflow: auto;
}

table[b-skp34nker8] {
    /*border: 1px solid black;*/
    width: 100%;
}

th[b-skp34nker8],
td[b-skp34nker8] {
    /*    width: 100px;
    border: 1px solid black;*/
}

/* let the table behave normally; #dataTable handles scrolling */
/* Top row stays "block" so the tbody can scroll under it */
thead > tr[b-skp34nker8] {
    position: relative;
    display: block;
}

/* Inner scroll area: vertical scroll only; no extra horizontal bar */
tbody[b-skp34nker8] {
    display: block;
    height: calc(80vh - 100px); /* same idea you had before – keeps rows inside card */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Outer wrapper: single horizontal scrollbar */
#dataTable[b-skp34nker8] {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* Base table styles (no fixed width here) */
.grid[b-skp34nker8] {
    border-collapse: collapse;
}

    .grid th[b-skp34nker8], .grid td[b-skp34nker8] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-skp34nker8] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        background: #f9fafc;
    }

    .grid a[b-skp34nker8] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-skp34nker8] {
        background: #fafbfe;
    }

.pager[b-skp34nker8] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
    margin-top: 20px;
}

/* Quick search dropdown */
.quick-panel[b-skp34nker8] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(17,24,39,.18), 0 6px 10px rgba(17,24,39,.12);
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-skp34nker8] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-skp34nker8] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-skp34nker8] {
        background: #f2f6ff;
    }

.qi-name[b-skp34nker8] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-skp34nker8] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-skp34nker8] {
    color: #99a5b8;
    font-weight: 700;
}

/* prevent Customers' .table-scroll styles from making #tblScroll scroll as well */
#tblScroll.table-scroll[b-skp34nker8] {
    overflow-x: visible;
    overflow-y: visible;
}
.topbar[b-skp34nker8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrap[b-skp34nker8] {
    flex: 1;
}

.actions[b-skp34nker8] {
    margin-left: auto; /* pushes avatar to the far right */
    display: flex;
    align-items: center;
}

/* Make sure headers can position the resize grip */
.grid th[b-skp34nker8] {
    position: relative;
    overflow: visible;
}

/* Wrapper inside <th> that actually holds width */
.grid .col-wrap[b-skp34nker8] {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* The draggable grip */
.grid .col-resizer[b-skp34nker8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 9999;
}

    /* Visible line on the grip so users know it’s there */
    .grid .col-resizer[b-skp34nker8]::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 20%;
        bottom: 20%;
        width: 2px;
        background: rgba(0,0,0,.25);
    }

    .grid .col-resizer:hover[b-skp34nker8]::after {
        background: rgba(0,0,0,.45);
    }

/* Keep header content from sitting under the grip */
.grid th .col-wrap[b-skp34nker8] {
    padding-right: 14px;
}

/* Ensure cells don’t wrap while resizing (optional but recommended) */
.grid td .cell-wrap[b-skp34nker8],
.grid th .col-wrap[b-skp34nker8] {
    white-space: nowrap;
}
/* _content/HHCRM_Web/Pages/PaymentMethods.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-6ptd7ldsvg] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-6ptd7ldsvg] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-6ptd7ldsvg] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-6ptd7ldsvg] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-6ptd7ldsvg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-6ptd7ldsvg] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-6ptd7ldsvg] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-6ptd7ldsvg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-6ptd7ldsvg] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-6ptd7ldsvg] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-6ptd7ldsvg] {
    flex: 1;
}

.primary[b-6ptd7ldsvg] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-6ptd7ldsvg] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-6ptd7ldsvg] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-6ptd7ldsvg], .grid td[b-6ptd7ldsvg] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-6ptd7ldsvg] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-6ptd7ldsvg] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-6ptd7ldsvg] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-6ptd7ldsvg], .grid th.num[b-6ptd7ldsvg] {
        text-align: right;
    }

    .grid td.mono[b-6ptd7ldsvg] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-6ptd7ldsvg], .grid td.col-id[b-6ptd7ldsvg] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-6ptd7ldsvg], .grid td.col-price[b-6ptd7ldsvg] {
        width: 140px;
    }

    .grid th.col-cost[b-6ptd7ldsvg], .grid td.col-cost[b-6ptd7ldsvg] {
        width: 160px;
    }

.col-id[b-6ptd7ldsvg] {
    text-align: right;
}

    .col-id[b-6ptd7ldsvg]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-6ptd7ldsvg] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-6ptd7ldsvg] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-6ptd7ldsvg] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-6ptd7ldsvg] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-6ptd7ldsvg] {
        background: #f2f6ff;
    }

.qi-name[b-6ptd7ldsvg] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-6ptd7ldsvg] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-6ptd7ldsvg] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-6ptd7ldsvg] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-6ptd7ldsvg] {
    outline: none;
}

    .th-sort:focus-visible[b-6ptd7ldsvg] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-6ptd7ldsvg] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-6ptd7ldsvg] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/ProductsPage.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-etp9354jxk] {
    gap: 12px;
    display: grid;
    grid-template-rows: 50px 50px 1fr 50px;
}

/* Top bar */
.topbar[b-etp9354jxk] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-etp9354jxk] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-etp9354jxk] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-etp9354jxk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-etp9354jxk] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-etp9354jxk] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-etp9354jxk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-etp9354jxk] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-etp9354jxk] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-etp9354jxk] {
    flex: 1;
}

.primary[b-etp9354jxk] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-etp9354jxk] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}


.table-scroll[b-etp9354jxk] {
    overflow-x: auto;
    overflow-y: hidden;
    /* keeps scrollbars from overlapping rounded borders */
    border-radius: 10px;
}

    /* optional: sticky header when scrolling horizontally/vertically */
    .table-scroll thead th[b-etp9354jxk] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        overflow-wrap: break-word;
        white-space: normal;
    }

.grid[b-etp9354jxk] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-etp9354jxk], .grid td[b-etp9354jxk] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-etp9354jxk] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-etp9354jxk] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-etp9354jxk] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-etp9354jxk], .grid th.num[b-etp9354jxk] {
        text-align: right;
    }

    /*This adds some space where the sort direction icon is on the header so header text lines up*/
    .grid td.num div[b-etp9354jxk]::after {
        content: "";
        margin-right:1.2em;
    }

    .grid td.mono[b-etp9354jxk] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-etp9354jxk], .grid td.col-id[b-etp9354jxk] {
        width: 120px;
        white-space: nowrap;
    }

    .grid th.col-price[b-etp9354jxk], .grid td.col-price[b-etp9354jxk] {
        width: 140px;
    }

    .grid th.col-cost[b-etp9354jxk], .grid td.col-cost[b-etp9354jxk] {
        width: 160px;
    }

.pager[b-etp9354jxk] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-etp9354jxk] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-etp9354jxk] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-etp9354jxk] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-etp9354jxk] {
        background: #f2f6ff;
    }

.qi-name[b-etp9354jxk] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-etp9354jxk] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-etp9354jxk] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-etp9354jxk] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-etp9354jxk] {
    outline: none;
}

    .th-sort:focus-visible[b-etp9354jxk] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-etp9354jxk] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-etp9354jxk] {
    background: #eef3ff;
    border-radius: 6px;
}

/* =========================================================
   FORCE BLOCK — override globally, in case scoped CSS misses
   Requires: add class="page products-page" on the root div.
   ========================================================= */
:global(.products-page .topbar)[b-etp9354jxk] {
    background: #0d3a78 !important;
    color: #fff !important;
    border-radius: 10px !important;
}

:global(.products-page .pill)[b-etp9354jxk] {
    padding: 8px 12px !important;
    border: 1px solid #d0d7e2 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

:global(.products-page .pill[aria-pressed="true"])[b-etp9354jxk] {
    background: #e7f0ff !important;
    border-color: #9db7ff !important;
}

:global(.products-page .card)[b-etp9354jxk] {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

:global(.products-page .grid)[b-etp9354jxk] {
    width: 100% !important;
    border-collapse: collapse !important;
}

:global(.products-page .grid th)[b-etp9354jxk],
:global(.products-page .grid td)[b-etp9354jxk] {
    padding: 10px !important;
    border-bottom: 1px solid #eef1f5 !important;
}

:global(.products-page .grid th)[b-etp9354jxk] {
    text-align: left !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

:global(.products-page .grid a)[b-etp9354jxk] {
    color: #0b5bd3 !important;
    text-decoration: none !important;
}

:global(.products-page .grid tr:hover)[b-etp9354jxk] {
    background: #fafbfe !important;
}

:global(.products-page .num)[b-etp9354jxk] {
    text-align: right !important;
}

:global(.products-page .mono)[b-etp9354jxk] {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}

:global(.products-page .quick-panel)[b-etp9354jxk] {
    background: #f6f9ff !important;
    border: 1px solid #cfd7e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12) !important;
}

:global(.products-page .quick-item:hover)[b-etp9354jxk] {
    background: #f2f6ff !important;
}

.topbar[b-etp9354jxk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrap[b-etp9354jxk] {
    flex: 1;
}

.actions[b-etp9354jxk] {
    margin-left: auto; /* pushes avatar to the far right */
    display: flex;
    align-items: center;
}
/* _content/HHCRM_Web/Pages/ProductTypes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-a8usff8eb1] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-a8usff8eb1] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-a8usff8eb1] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-a8usff8eb1] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-a8usff8eb1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-a8usff8eb1] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-a8usff8eb1] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-a8usff8eb1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-a8usff8eb1] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-a8usff8eb1] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-a8usff8eb1] {
    flex: 1;
}

.primary[b-a8usff8eb1] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-a8usff8eb1] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-a8usff8eb1] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-a8usff8eb1], .grid td[b-a8usff8eb1] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-a8usff8eb1] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-a8usff8eb1] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-a8usff8eb1] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-a8usff8eb1], .grid th.num[b-a8usff8eb1] {
        text-align: right;
    }

    .grid td.mono[b-a8usff8eb1] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-a8usff8eb1], .grid td.col-id[b-a8usff8eb1] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-a8usff8eb1], .grid td.col-price[b-a8usff8eb1] {
        width: 140px;
    }

    .grid th.col-cost[b-a8usff8eb1], .grid td.col-cost[b-a8usff8eb1] {
        width: 160px;
    }

.col-id[b-a8usff8eb1] {
    text-align: right;
}

    .col-id[b-a8usff8eb1]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-a8usff8eb1] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-a8usff8eb1] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-a8usff8eb1] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-a8usff8eb1] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-a8usff8eb1] {
        background: #f2f6ff;
    }

.qi-name[b-a8usff8eb1] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-a8usff8eb1] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-a8usff8eb1] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-a8usff8eb1] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-a8usff8eb1] {
    outline: none;
}

    .th-sort:focus-visible[b-a8usff8eb1] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-a8usff8eb1] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-a8usff8eb1] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/Region.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-3e3rzpqva5] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-3e3rzpqva5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-3e3rzpqva5] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-3e3rzpqva5] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-3e3rzpqva5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-3e3rzpqva5] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-3e3rzpqva5] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-3e3rzpqva5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-3e3rzpqva5] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-3e3rzpqva5] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-3e3rzpqva5] {
    flex: 1;
}

.primary[b-3e3rzpqva5] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-3e3rzpqva5] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-3e3rzpqva5] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-3e3rzpqva5], .grid td[b-3e3rzpqva5] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-3e3rzpqva5] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-3e3rzpqva5] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-3e3rzpqva5] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-3e3rzpqva5], .grid th.num[b-3e3rzpqva5] {
        text-align: right;
    }

    .grid td.mono[b-3e3rzpqva5] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-3e3rzpqva5], .grid td.col-id[b-3e3rzpqva5] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-3e3rzpqva5], .grid td.col-price[b-3e3rzpqva5] {
        width: 140px;
    }

    .grid th.col-cost[b-3e3rzpqva5], .grid td.col-cost[b-3e3rzpqva5] {
        width: 160px;
    }

.col-id[b-3e3rzpqva5] {
    text-align: right;
}

    .col-id[b-3e3rzpqva5]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-3e3rzpqva5] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-3e3rzpqva5] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-3e3rzpqva5] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-3e3rzpqva5] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-3e3rzpqva5] {
        background: #f2f6ff;
    }

.qi-name[b-3e3rzpqva5] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-3e3rzpqva5] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-3e3rzpqva5] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-3e3rzpqva5] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-3e3rzpqva5] {
    outline: none;
}

    .th-sort:focus-visible[b-3e3rzpqva5] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-3e3rzpqva5] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-3e3rzpqva5] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/ServiceTypes.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-y9rhcrjygn] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-y9rhcrjygn] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-y9rhcrjygn] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-y9rhcrjygn] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-y9rhcrjygn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-y9rhcrjygn] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-y9rhcrjygn] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-y9rhcrjygn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-y9rhcrjygn] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-y9rhcrjygn] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-y9rhcrjygn] {
    flex: 1;
}

.primary[b-y9rhcrjygn] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-y9rhcrjygn] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-y9rhcrjygn] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-y9rhcrjygn], .grid td[b-y9rhcrjygn] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-y9rhcrjygn] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-y9rhcrjygn] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-y9rhcrjygn] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-y9rhcrjygn], .grid th.num[b-y9rhcrjygn] {
        text-align: right;
    }

    .grid td.mono[b-y9rhcrjygn] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-y9rhcrjygn], .grid td.col-id[b-y9rhcrjygn] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-y9rhcrjygn], .grid td.col-price[b-y9rhcrjygn] {
        width: 140px;
    }

    .grid th.col-cost[b-y9rhcrjygn], .grid td.col-cost[b-y9rhcrjygn] {
        width: 160px;
    }

.col-id[b-y9rhcrjygn] {
    text-align: right;
}

    .col-id[b-y9rhcrjygn]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-y9rhcrjygn] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-y9rhcrjygn] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-y9rhcrjygn] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-y9rhcrjygn] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-y9rhcrjygn] {
        background: #f2f6ff;
    }

.qi-name[b-y9rhcrjygn] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-y9rhcrjygn] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-y9rhcrjygn] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-y9rhcrjygn] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-y9rhcrjygn] {
    outline: none;
}

    .th-sort:focus-visible[b-y9rhcrjygn] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-y9rhcrjygn] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-y9rhcrjygn] {
    background: #eef3ff;
    border-radius: 6px;
}
/* _content/HHCRM_Web/Pages/Users.razor.rz.scp.css */
/* ===== Products list styles ===== */
.page[b-bnd9lxrzvo] {
    xdisplay: flex;
    xflex-direction: column;
    display:grid;
    grid-template-rows: 55px 55px minmax(0,1fr) 55px;
    gap: 12px;
    height:100%;
}

/* Top bar */
.topbar[b-bnd9lxrzvo] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d3a78;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
}

.search-wrap[b-bnd9lxrzvo] {
    position: relative;
    flex: 1;
    max-width: 700px;
}

.search[b-bnd9lxrzvo] {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: none;
    padding: 0 12px;
    background: #fff;
    color: #111;
}

.actions[b-bnd9lxrzvo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn[b-bnd9lxrzvo] {
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar[b-bnd9lxrzvo] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Pills */
.pills[b-bnd9lxrzvo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill[b-bnd9lxrzvo] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
}

    .pill[aria-pressed="true"][b-bnd9lxrzvo] {
        background: #e7f0ff;
        border-color: #9db7ff;
    }

.spacer[b-bnd9lxrzvo] {
    flex: 1;
}

.primary[b-bnd9lxrzvo] {
    background: #0b5bd3;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* Card + grid */
.card[b-bnd9lxrzvo] {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    min-width:1000px;
}

.grid[b-bnd9lxrzvo] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-bnd9lxrzvo], .grid td[b-bnd9lxrzvo] {
        padding: 10px;
        border-bottom: 1px solid #eef1f5;
    }

    .grid th[b-bnd9lxrzvo] {
        text-align: left;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .grid a[b-bnd9lxrzvo] {
        color: #0b5bd3;
        text-decoration: none;
    }

    .grid tr:hover[b-bnd9lxrzvo] {
        background: #fafbfe;
    }

    /* numeric helpers */
    .grid td.num[b-bnd9lxrzvo], .grid th.num[b-bnd9lxrzvo] {
        text-align: right;
    }

    .grid td.mono[b-bnd9lxrzvo] {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .grid th.col-id[b-bnd9lxrzvo], .grid td.col-id[b-bnd9lxrzvo] {
        width: 120px;
        white-space: nowrap;
        text-align: right;
    }

    .grid th.col-price[b-bnd9lxrzvo], .grid td.col-price[b-bnd9lxrzvo] {
        width: 140px;
    }

    .grid th.col-cost[b-bnd9lxrzvo], .grid td.col-cost[b-bnd9lxrzvo] {
        width: 160px;
    }

.col-id[b-bnd9lxrzvo] {
    text-align: right;
}

    .col-id[b-bnd9lxrzvo]::after {
        content: "";
        margin-right: 1.2em;
    }

.pager[b-bnd9lxrzvo] {
    padding: 10px;
    font-size: .9rem;
    color: #6b7280;
}

/* Quick search dropdown (enhanced) */
.quick-panel[b-bnd9lxrzvo] {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #f6f9ff;
    border: 1px solid #cfd7e6;
    box-shadow: 0 14px 28px rgba(17,24,39,.18),0 6px 10px rgba(17,24,39,.12);
    border-radius: 12px;
    max-height: 420px;
    overflow: auto;
    z-index: 50;
}

.quick-title[b-bnd9lxrzvo] {
    position: sticky;
    top: 0;
    background: #eef4ff;
    padding: 8px 12px;
    font-weight: 700;
    color: #20314f;
    z-index: 1;
}

.quick-item[b-bnd9lxrzvo] {
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .quick-item:hover[b-bnd9lxrzvo] {
        background: #f2f6ff;
    }

.qi-name[b-bnd9lxrzvo] {
    font-weight: 600;
    color: #172038;
}

.qi-sub[b-bnd9lxrzvo] {
    font-size: .85rem;
    color: #5b6475;
}

.qi-chevron[b-bnd9lxrzvo] {
    color: #99a5b8;
    font-weight: 700;
}

.quick-empty[b-bnd9lxrzvo] {
    padding: 12px;
    color: #7a8698;
}

/* ColumnHeaderMenu helpers */
.th-sort[b-bnd9lxrzvo] {
    outline: none;
}

    .th-sort:focus-visible[b-bnd9lxrzvo] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.th-filter[b-bnd9lxrzvo] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #d6dbe6;
    border-radius: 6px;
    font: inherit;
}

.grid th .th-sort:hover[b-bnd9lxrzvo] {
    background: #eef3ff;
    border-radius: 6px;
}