@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css';
@import '_content/InfoasiaDrag/InfoasiaDrag.0g1lbj8zh2.bundle.scp.css';

/* /Components/CsAttachmentCell.razor.rz.scp.css */
.cs-attachment-cell[b-2hl2hlmw8y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    text-decoration: none;
    color: #3755c3;
    cursor: pointer;
}

.cs-attachment-cell img[b-2hl2hlmw8y] {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid #dde3ef;
    flex-shrink: 0;
}

.cs-attachment-name[b-2hl2hlmw8y] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.cs-attachment-empty[b-2hl2hlmw8y] {
    color: #9aa5b1;
    font-size: 0.82rem;
}
/* /Components/CsCheckboxCell.razor.rz.scp.css */
.cs-checkbox-cell[b-996n1l4heu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-checkbox-cell input[type="checkbox"][b-996n1l4heu] {
    width: 16px;
    height: 16px;
    cursor: default;
    accent-color: #0070f2;
}
/* /Components/CsLinkCell.razor.rz.scp.css */
.cs-link-cell[b-2vanvqq93w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #0070f2;
    text-decoration: none;
    vertical-align: middle;
}

.cs-link-cell:hover[b-2vanvqq93w] {
    color: #0058c2;
}

.cs-link-cell .material-symbols-outlined[b-2vanvqq93w] {
    font-size: 16px;
}
/* /Components/EsDateTimeObject.razor.rz.scp.css */
.es-datetime-object[b-dyabwdm6d6] {
    position: relative;
    display: inline-flex;
    width: 100%;
}

/* The real, directly interactive input -- its own value text is made invisible (not the element
   itself, and not display:none/hidden -- it must stay a normal, clickable/tappable/focusable
   control so opening the picker is a genuine user gesture the browser honors) so the overlay's
   custom-Format text shows in its place. The native calendar icon is a UA-rendered glyph, not
   text, so it stays visible through color:transparent. */
.es-datetime-native[b-dyabwdm6d6] {
    position: relative;
    z-index: 1;
    color: transparent;
    caret-color: transparent;
}

    /* Browser UA stylesheets set "input:disabled { color: graytext; }", which outweighs the plain
       class selector above (0,1,1 vs 0,1,0) and makes the real native value show through in gray,
       overlapping the overlay's formatted text. Match that specificity to keep it transparent. */
    .es-datetime-native:disabled[b-dyabwdm6d6] {
        color: transparent;
    }

    /* While actually focused/editing, show the real native value so the browser's own mm/dd/yyyy
       (or date+time) editing UI is visible -- the overlay (its next sibling) hides at the same time
       so the two don't visually double up. */
    .es-datetime-native:focus[b-dyabwdm6d6] {
        color: inherit;
    }

    .es-datetime-native:focus + .es-datetime-overlay[b-dyabwdm6d6] {
        opacity: 0;
    }

/* Same box as the native input (box-sizing/border/padding/font come from the shared CssClass, e.g.
   ibr-input, applied to both) but non-interactive -- pointer-events:none lets every click/tap pass
   straight through to the real input beneath it. */
.es-datetime-overlay[b-dyabwdm6d6] {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.675rem;
    font-size: 0.86rem;
    color: #1a202c;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* /Components/EsTableObject.razor.rz.scp.css */
.es-table-object[b-i7jvx1obm1] {
    width: 100%;
    min-width: 0;
    max-height: 16rem;
    overflow: auto;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
}

.es-table-object-table[b-i7jvx1obm1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: #191c1e;
}

    .es-table-object-table th[b-i7jvx1obm1],
    .es-table-object-table td[b-i7jvx1obm1] {
        padding: 0.35rem 0.55rem;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid #e2e5ee;
    }

    .es-table-object-table th[b-i7jvx1obm1] {
        position: sticky;
        top: 0;
        background: #f5f7fb;
        color: #4a5568;
        font-weight: 700;
        border-bottom: 1px solid #c3c6d7;
    }

    .es-table-object-table tbody tr:last-child td[b-i7jvx1obm1] {
        border-bottom: none;
    }

    .es-table-object-table tbody tr:hover[b-i7jvx1obm1] {
        background: #f8faff;
    }

.es-table-object-empty[b-i7jvx1obm1] {
    padding: 0.5rem 0;
    color: #737686;
    font-size: 0.8rem;
}
/* /Components/Layout/CustomReconnectModal.razor.rz.scp.css */
.my-reconnect-modal[b-fw6tghqtxt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
}

.my-reconnect-modal .reconnect-card[b-fw6tghqtxt] {
    background: #fff;
    color: #222;
    text-align: center;
    border-radius: 10px;
    padding: 2rem;
    width: 320px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.my-reconnect-modal .loader[b-fw6tghqtxt] {
    margin: 0 auto 1rem;
    width: 48px;
    height: 48px;
    border: 4px solid #ccc;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-fw6tghqtxt 1s linear infinite;
}

@keyframes spin-b-fw6tghqtxt {
    to {
        transform: rotate(360deg);
    }
}

.retry-btn[b-fw6tghqtxt] {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
}

.retry-btn:hover[b-fw6tghqtxt] {
    background: #2563eb;
}

.components-reconnect-hide[b-fw6tghqtxt] {
    display: none !important;
}
/* /Components/Layout/E_OfficeNestedLayout.razor.rz.scp.css */
.toggle-label[b-udrtuifsdr] {
    position: relative;
    display: block;
    width: 60px;
    height: 1.8rem;
    border: 1px solid #376682;
    border-radius:15px;
    cursor:pointer
}
.toggle-label input[type=checkbox][b-udrtuifsdr] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.toggle-label input[type=checkbox] + .back[b-udrtuifsdr] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #cccccc;
    transition: background 150ms linear;
    border-radius: 15px;
}

.toggle-label input[type=checkbox]:checked + .back[b-udrtuifsdr] {
    background: #cccccc;
}
.toggle-label input[type=checkbox] + .back .toggle[b-udrtuifsdr] {
    display: block;
    position: absolute;
    content: ' ';
    background: #5496cd;
    width: 50%;
    height: 100%;
    transition: margin 150ms linear;
    border: 1px solid #418ac7;
    border-radius: 15px;
    /*opacity: 1;*/
}
.toggle-label input[type=checkbox]:checked + .back .toggle[b-udrtuifsdr] {
    margin-left: 29px;
}
.toggle-label .label[b-udrtuifsdr] {
    display: block;
    position: absolute;
    width: 50%;
    text-align: center;
}
.toggle-label .label.on[b-udrtuifsdr] {
    left: 0px;
    top: 3px
}
.toggle-label .label.off[b-udrtuifsdr] {
    right: 0px;
    top: 3px
}
disabled[b-udrtuifsdr] {
    background-color: #111418;
    opacity: 0.4;
    color: white;
}
.cursor-pointer[b-udrtuifsdr] {
    cursor: pointer
}

.d-none[b-udrtuifsdr] {
    display: none;
}

.opacity-hidden[b-udrtuifsdr] {
    opacity: 0;
    transition: opacity 0.5s;
}

.opacity-visible[b-udrtuifsdr] {
    opacity: 1;
    transition: opacity 0.5s;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/*.page {
    display: flex;
    align-items: stretch;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.page-cover {
    flex: 1;
}

.page-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-cover-logo {
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: 207px;
    height: auto;
}

.page-content {
    width: 30rem;
    overflow: auto;
}

.page-content-forms {
    margin: 5rem auto 0;
    max-width: 21.5rem;
}

.floater {
    float: left;
    height: 50%;
    width: 1px;
    margin-bottom: -10rem;
}

.center_box {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

.hide {
    display: none;
}

.selected {
    background: #fceecc;
}

.remember {
    margin-bottom: .825rem;
    font-size: .75rem;
}

.tab-item {
    color: #666;
    cursor: pointer;
    display: inline-block;
    height: 3rem;
    margin: 0 1rem;
    line-height: 3rem;
}

    .tab-item.selected {
        background-color: transparent;
        border-bottom: 3px solid #f1b41e;
        color: #f0ab00;
        font-family: "72-Bold";
    }

.tab {
    margin-bottom: 2.25rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-bottom: 1px solid #fbda85;
}

.tab.hide {
    display: none;
}*/

/* Select with filterable list --- end*/
/*.select {
    margin-bottom: 2.25rem;
    position: relative;
}

.select-value {
    display: flex;
    position: relative;
}

    .select-value input {
        cursor: pointer;
        margin-bottom: 0;
        padding-right: 2.125rem;
    }

.select-value-icon {
    cursor: pointer;
    font-size: 1.375rem;
    height: 3rem;
    padding: 0.25rem 0.75rem;
    position: absolute;
    right: 0;
}

.filterable-list {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(59,59,59,0.75);
    -moz-box-shadow: 0px 0px 4px 0px rgba(59,59,59,0.75);
    box-shadow: 0px 0px 4px 0px rgba(59,59,59,0.75);
    background: #fff;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.filterable-list-search {
    position: relative;
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid #d8d8d8;
    height: 3rem;
}

input.filterable-list-search-input {
    border-color: #d8d8d8;
    font-size: 0.875rem;
    height: 2.375rem;
    margin-bottom: 0;
}

.filterable-list-search-icon {
    position: absolute;
    right: 10px;
    top: 6px;
    padding: 0.625rem;
    color: #f0ab00;
    font-size: 0.875rem;
    cursor: pointer;
}

.filterable-list-list {
    margin: 0;
    margin-top: -1px;
    padding-left: 0;
    max-height: 15rem;
    overflow: auto;
    list-style-type: none;
}

.filterable-list-list-item {
    padding: 1rem;
    height: 3rem;
    border-top: 1px solid #d8d8d8;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filterable-list-list-item-company {
    height: 4.5rem;
}

.filterable-list-list-item:hover {
    background-color: #f3f3f2;
}

.filterable-list-list-item > span {
    display: block;
}

.filterable-list-list-item > span.belong {
    color: gray;
    font-size: 1rem;
}*/

/* Select with filterable list --- end*/

/*.error-message {
    background-color: #ffe2e1;
    border: 1px solid #fd514d;
    border-radius: 3px;
    display: flex;
    line-height: 1.25rem;
    margin-bottom: 2.25rem;
    min-height: 3rem;
    padding: 0.75rem;
}

.error-message.hide {
    display: none;
}

.error-message .notification-icon {
    color: #b90000;
    font-size: 0.875rem;
    margin-right: 0.75rem;
}

.error-message .error-message-content {
    color: #434343;
    font-size: 0.875rem;
}

.succeed-message .succeed-message-content {
    background-color: #71eeb2;
    border: 1px solid #82cbae;
    border-radius: 3px;
    display: flex;
    line-height: 1.25rem;
    margin-bottom: 2.25rem;
    min-height: 3rem;
    padding: 0.75rem;
}

.field-input {
    margin-bottom: 2.25rem;
}

.field-input input {
    margin-bottom: 0;
}

.show-tip {
    position: relative;
}

.error-tip {
    display: none;
}

.show-tip .error-tip {
    color: #b90000;
    display: inline-block;
    font-size: 0.625rem;
    padding-left: 0.75rem;
    position: absolute;
    top: 50px;
}

.show-tip > input,
.show-tip.select .select-value-input {
    border: 1px solid #b90000;
}

@media (max-width: 1130px) {
    .tab-item {
        margin: 0 0.5rem;
    }
}

@media (max-width: 950px) {
    .page {
        flex-direction: column;
        height: auto;
        overflow: initial;
    }

    .page-cover {
        height: 30vw;
    }

    .page-cover-logo {
        top: 7vw;
        left: 5vw;
        width: 207px;
    }

    .page-content {
        width: auto;
    }

    .floater {
        float: none;
        height: 2.25rem;
        width: auto;
        margin-bottom: 0px;
    }

    .tab-item {
        margin: 0 1.5rem;
    }

    .page-content-forms {
        margin: 2rem auto 0;
    }

    html {
        font-size: 75%;
    }
}*/
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

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

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}*/

#blazor-error-ui[b-r215xwi2mi] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss[b-r215xwi2mi] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
nav[b-ajqwrrfjf8] {
    background-color: #2c4a65;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    isolation: isolate;
    /* Must stay above any page's own sticky header (e.g. payment_request_detail.css's .prd-header at
       z-index:50) so the Menu button never gets covered, but below modal/overlay tiers (999+) so those
       still render on top of it as expected. */
    z-index: 500;
    opacity: 1;
    padding: 0 2.75rem;
    height: 2.75rem;
    line-height: 2.25rem;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.btnCustum[b-ajqwrrfjf8] {
    display: block !important;
    position: unset !important;
}

.custumBT[b-ajqwrrfjf8] {
    border: none;
    margin: 0;
    padding: 0;
    position: unset !important;
    background: none !important;
}

.custumBTUS[b-ajqwrrfjf8] {
    border: 2px solid white;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    margin: 0;
    padding: 0;
    background: none;
    position: unset !important;
}

.searchNavBar[b-ajqwrrfjf8] {
    position: relative;
}

    .searchNavBar img[b-ajqwrrfjf8] {
        position: absolute;
        top: 25%;
        right: 4%;
    }

#offcanvasNavbar[b-ajqwrrfjf8] {
    top: 2.75rem;
    width: 18.75rem;
    border-right: 1px solid #000;
    left: 0;
}

.navbar-toggler:focus[b-ajqwrrfjf8] {
    outline: none;
    box-shadow: none;
}

.searchNav[b-ajqwrrfjf8]::placeholder {
    font-style: italic;
    padding-left: 0.25rem
}

.navbar-nav a .active[b-ajqwrrfjf8] {
    background: red;
}

.itemNavMain[b-ajqwrrfjf8] {
    background-image: linear-gradient(to right, #376682, #A2C4D7);
    height: 2.2rem
}

.dropdownSettingMain[b-ajqwrrfjf8] {
    border-top: 1px solid #bfbfbf;
    transform: translate(-100px, 5px) !important;
    z-index: 10;
    width: 6.25rem;
    background-color: #3f5161;
    border-radius: 0.25rem;
    overflow: visible
}

.arrDpSetMain[b-ajqwrrfjf8] {
    width: 0.7rem;
    height: 0.7rem;
    background-color: #3f5161;
    position: absolute;
    top: -6px;
    right: 37px;
    transform: rotate(-45deg);
    border-top: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf
}
.PieOfNotifications[b-ajqwrrfjf8] {
    width: 0.7rem;
    height: 0.7rem;
    background-color: #3f5161;
    position: absolute;
    top: -6px;
    right: 82px;
    transform: rotate(-45deg);
    border-top: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf
}
/* Preview Button */
.preview-feature-btn[b-ajqwrrfjf8] {
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    color: white;
    font-size: 0.875rem;
}

    .preview-feature-btn:hover[b-ajqwrrfjf8] {
        opacity: 0.8;
    }

    .preview-feature-btn img[b-ajqwrrfjf8] {
        width: 25px;
        height: 25px;
    }

.preview-badge[b-ajqwrrfjf8] {
    display: none;
}

/* Modal Overlay */
.preview-modal-overlay[b-ajqwrrfjf8] {
    position: fixed;
    top: 2.75rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    display: none;
    z-index: 10000;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
    pointer-events: none;
}

    .preview-modal-overlay.show[b-ajqwrrfjf8] {
        display: flex;
    }

/* Modal Wrapper */
.preview-modal-wrapper[b-ajqwrrfjf8] {
    display: flex;
    height: 100%;
    pointer-events: auto;
    animation: slideInRight-b-ajqwrrfjf8 0.3s ease;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

/* Sidebar - Cột bên trái chứa nút thu gọn */
.preview-sidebar[b-ajqwrrfjf8] {
    background: #2c4a65;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    position: relative;
    flex-shrink: 0;
}

/* Modal Content */
.preview-modal-content[b-ajqwrrfjf8] {
    background: #f8f9fa;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    width: 500px;
    max-width: 90vw;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, opacity 0.3s ease;
}

@keyframes slideInRight-b-ajqwrrfjf8 {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Modal Header */
.preview-modal-header[b-ajqwrrfjf8] {
    padding: 16px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2c4a65;
    color: white;
    flex-shrink: 0;
}

.preview-modal-title[b-ajqwrrfjf8] {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
}

    .preview-modal-title img[b-ajqwrrfjf8] {
        width: 20px;
        height: 20px;
    }

.preview-close-btn[b-ajqwrrfjf8] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 20px;
    line-height: 1;
    transition: all 0.2s;
}

    .preview-close-btn:hover[b-ajqwrrfjf8] {
        background: rgba(255, 255, 255, 0.2);
    }

/* Modal Body */
.preview-modal-body[b-ajqwrrfjf8] {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    background: white;
}

/* Info Banner */
.preview-info-banner[b-ajqwrrfjf8] {
    padding: 20px;
    background: #e7f3ff;
    border-left: 4px solid #2c4a65;
    margin: 0;
    border-bottom: 1px solid #dee2e6;
}

.preview-info-content[b-ajqwrrfjf8] {
    flex: 1;
}

    .preview-info-content p[b-ajqwrrfjf8] {
        margin: 0 0 10px 0;
        color: #495057;
        line-height: 1.6;
        font-size: 0.9rem;
    }

        .preview-info-content p:last-child[b-ajqwrrfjf8] {
            margin-bottom: 0;
        }

.preview-learn-more[b-ajqwrrfjf8] {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

    .preview-learn-more:hover[b-ajqwrrfjf8] {
        color: #0052a3;
    }

/* Feature List */
.preview-features-list[b-ajqwrrfjf8] {
    display: flex;
    flex-direction: column;
}

.preview-feature-item[b-ajqwrrfjf8] {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
    cursor: pointer;
}

    .preview-feature-item:nth-child(even)[b-ajqwrrfjf8] {
        background: #f8f9fa;
    }

    .preview-feature-item:hover[b-ajqwrrfjf8] {
        background: #e9ecef;
    }

.preview-feature-name[b-ajqwrrfjf8] {
    font-weight: 500;
    color: #212529;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.preview-feature-description[b-ajqwrrfjf8] {
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Empty State */
.preview-empty-state[b-ajqwrrfjf8] {
    padding: 60px 20px;
    text-align: center;
}

.preview-empty-title[b-ajqwrrfjf8] {
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    margin: 0 0 8px 0;
}

.preview-empty-description[b-ajqwrrfjf8] {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Scrollbar */
.preview-modal-body[b-ajqwrrfjf8]::-webkit-scrollbar {
    width: 6px;
}

.preview-modal-body[b-ajqwrrfjf8]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.preview-modal-body[b-ajqwrrfjf8]::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

    .preview-modal-body[b-ajqwrrfjf8]::-webkit-scrollbar-thumb:hover {
        background: #adb5bd;
    }

/* Collapse Button */
.preview-collapse-btn[b-ajqwrrfjf8] {
    width: 40px;
    height: 60px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .preview-collapse-btn:hover[b-ajqwrrfjf8] {
        background: none;
    }

.preview-collapse-icon[b-ajqwrrfjf8] {
    color: white;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Trạng thái modal khi bị thu gọn */
.preview-modal-wrapper.collapsed .preview-modal-content[b-ajqwrrfjf8] {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .preview-modal-content[b-ajqwrrfjf8] {
        width: 100%;
        max-width: 100%;
    }

    .preview-sidebar[b-ajqwrrfjf8] {
        width: 50px;
    }

    .preview-collapse-btn[b-ajqwrrfjf8] {
        width: 30px;
        height: 50px;
    }
}
/* /Components/Layout/PageNestedLayout.razor.rz.scp.css */
/* /Components/Modals/AdaptFilterModalBeasForEdit.razor.rz.scp.css */
.modal-body[b-ccij1wcfs5] {
    padding: 0 !important;
}

.sap-format-controls[b-ccij1wcfs5] {
    flex-shrink: 0;
}

.sap-format-style-btn[b-ccij1wcfs5],
.sap-format-colorrule-btn[b-ccij1wcfs5] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0.2rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
}

    .sap-format-style-btn .material-symbols-outlined[b-ccij1wcfs5],
    .sap-format-colorrule-btn .material-symbols-outlined[b-ccij1wcfs5] {
        font-size: 1rem;
    }

    .sap-format-style-btn:hover[b-ccij1wcfs5],
    .sap-format-style-btn.active[b-ccij1wcfs5],
    .sap-format-colorrule-btn:hover[b-ccij1wcfs5],
    .sap-format-colorrule-btn.active[b-ccij1wcfs5] {
        border-color: #0070f2;
        color: #0070f2;
    }

.sap-show-selected-btn[b-ccij1wcfs5] {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #0070f2;
}

    .sap-show-selected-btn.active[b-ccij1wcfs5] {
        background: #e8f4ff;
        border-color: #0070f2;
    }

.sap-adapt-table[b-ccij1wcfs5] {
    border-collapse: collapse;
    width: 100%;
}

    .sap-adapt-table thead th[b-ccij1wcfs5] {
        /* sticky already establishes a positioning context for the absolutely-positioned
           .sap-col-resizer child - no separate "position: relative" needed. */
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f5f6f7;
        border-bottom: 1px solid #d9d9d9;
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #555;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
    }

    .sap-adapt-table tbody td[b-ccij1wcfs5] {
        padding: 0.3rem 0.5rem;
        vertical-align: middle;
    }

    .sap-adapt-table tbody tr[b-ccij1wcfs5] {
        cursor: pointer;
    }

    /* Drag-and-drop row reorder (see _dragListId/wpdInitRowDragReorder) - same visual convention
       as management_wo.css's .wpd-table rules, scoped to this table instead of pulling in that
       class's own td/th padding overrides. */
    .sap-adapt-table tbody tr.dragging[b-ccij1wcfs5] {
        opacity: 0.4;
        background: #f5f6f7;
    }

    .sap-adapt-table tbody tr.wpd-drop-target[b-ccij1wcfs5] {
        box-shadow: inset 0 2px 0 0 #0070f2;
    }

.sap-format-colorrule-badge[b-ccij1wcfs5] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #0070f2;
    color: #fff;
    font-size: 0.6rem;
    line-height: 1;
    border-radius: 999px;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}

.sap-format-type-select[b-ccij1wcfs5] {
    font-size: 0.75rem;
    padding: 0.25rem 0.3rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
}

.sap-format-format-input[b-ccij1wcfs5] {
    width: 6rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
}

.sap-format-mapping-btn[b-ccij1wcfs5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 6rem;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

    .sap-format-mapping-btn:hover[b-ccij1wcfs5] {
        border-color: #0070f2;
        color: #0070f2;
    }

    .sap-format-mapping-btn .material-symbols-outlined[b-ccij1wcfs5] {
        font-size: 0.9rem;
    }

/* Type=Icon's Format cell - plain inert icon+label, no button/interactivity (see the .razor's own
   comment on this branch for why it stopped being clickable here). */
.sap-format-icon-label[b-ccij1wcfs5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #333;
    white-space: nowrap;
}

    .sap-format-icon-label .material-symbols-outlined[b-ccij1wcfs5] {
        font-size: 0.9rem;
        color: #888;
    }

/* Password re-confirmation gate in front of "Save Default Setting" - only ever in the DOM while
   _showSaveDefaultPasswordConfirm is true (see the @if in the .razor file), so this doesn't need
   its own show/hide visibility rules the way ModalCpn-backed modals do. */
.sap-confirm-password-backdrop[b-ccij1wcfs5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.sap-confirm-password-modal[b-ccij1wcfs5] {
    width: 22rem;
    max-width: 90vw;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.sap-confirm-password-header[b-ccij1wcfs5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #d9d9d9;
    font-weight: 600;
    color: #333;
}

.sap-confirm-password-close[b-ccij1wcfs5] {
    background: none;
    border: none;
    color: #737686;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.sap-confirm-password-body[b-ccij1wcfs5] {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .sap-confirm-password-body p[b-ccij1wcfs5] {
        margin: 0;
        font-size: 0.8125rem;
        color: #737686;
    }

.sap-confirm-password-error[b-ccij1wcfs5] {
    font-size: 0.8125rem;
    color: #d92d20;
}

.sap-confirm-password-input[b-ccij1wcfs5] {
    width: 100%;
    height: 2.2rem;
}

.sap-confirm-password-footer[b-ccij1wcfs5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid #e5e5e5;
}
/* /Components/Modals/AdaptFilterModalSAP.razor.rz.scp.css */
.modal-body[b-79h6qs0sl7] {
    padding: 0 !important;
}

.sap-format-controls[b-79h6qs0sl7] {
    flex-shrink: 0;
}

.sap-format-style-btn[b-79h6qs0sl7],
.sap-format-colorrule-btn[b-79h6qs0sl7] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0.2rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
}

    .sap-format-style-btn .material-symbols-outlined[b-79h6qs0sl7],
    .sap-format-colorrule-btn .material-symbols-outlined[b-79h6qs0sl7] {
        font-size: 1rem;
    }

    .sap-format-style-btn:hover[b-79h6qs0sl7],
    .sap-format-style-btn.active[b-79h6qs0sl7],
    .sap-format-colorrule-btn:hover[b-79h6qs0sl7],
    .sap-format-colorrule-btn.active[b-79h6qs0sl7] {
        border-color: #0070f2;
        color: #0070f2;
    }

.sap-show-selected-btn[b-79h6qs0sl7] {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #0070f2;
}

    .sap-show-selected-btn.active[b-79h6qs0sl7] {
        background: #e8f4ff;
        border-color: #0070f2;
    }

.sap-action-placeholder[b-79h6qs0sl7] {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
}

.sap-format-colorrule-badge[b-79h6qs0sl7] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #0070f2;
    color: #fff;
    font-size: 0.6rem;
    line-height: 1;
    border-radius: 999px;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}

.sap-format-type-select[b-79h6qs0sl7] {
    font-size: 0.75rem;
    padding: 0.25rem 0.3rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
}

.sap-format-format-input[b-79h6qs0sl7] {
    width: 6rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
}

.sap-format-mapping-btn[b-79h6qs0sl7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 6rem;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

    .sap-format-mapping-btn:hover[b-79h6qs0sl7] {
        border-color: #0070f2;
        color: #0070f2;
    }

    .sap-format-mapping-btn .material-symbols-outlined[b-79h6qs0sl7] {
        font-size: 0.9rem;
    }

/* Password re-confirmation gate in front of "Save Default Setting" - only ever in the DOM while
   _showSaveDefaultPasswordConfirm is true (see the @if in the .razor file), so this doesn't need
   its own show/hide visibility rules the way ModalCpn-backed modals do. */
/* Section combobox - a button (shows the current value) that toggles this open list underneath it.
   A custom dropdown rather than a native <select> because a native <option> can't offer a context
   menu of its own (browsers own right-click on <option> entirely) - see AdaptFilterModalSAP's
   OnSectionOptionContextMenu. */
.sap-section-trigger[b-79h6qs0sl7] {
    text-align: left;
    cursor: pointer;
}

/* position:fixed (not absolute/top:100%) - the dropdown is rendered as a sibling after
   .sap-list-container, positioned via _sectionDropdownX/Y (see ToggleSectionDropdown), not anchored
   under .sap-section-trigger via CSS. .sap-list-container scrolls (overflow-y:auto); an
   absolutely-positioned descendant of a scrolling container is clipped to that container's bounds
   for any row near the bottom regardless of z-index, which is exactly why this moved out. */
.sap-section-dropdown[b-79h6qs0sl7] {
    position: fixed;
    z-index: 1070;
    width: 14rem;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #babbbb;
    border-radius: 0.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.sap-section-dropdown-item[b-79h6qs0sl7] {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sap-section-dropdown-item:hover[b-79h6qs0sl7] {
        background: #f0f6ff;
    }

    .sap-section-dropdown-item.active[b-79h6qs0sl7] {
        background: #e8f4ff;
        color: #0070f2;
        font-weight: 600;
    }

.sap-section-dropdown-new[b-79h6qs0sl7] {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem;
    border-top: 1px solid #e5e5e5;
    position: sticky;
    bottom: 0;
    background: #fff;
}

.sap-section-dropdown-new .sap-format-format-input[b-79h6qs0sl7] {
    flex: 1;
    min-width: 0;
}

.sap-btn-tiny[b-79h6qs0sl7] {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.sap-btn-tiny-primary[b-79h6qs0sl7] {
    background: #0070f2;
    border-color: #0070f2;
    color: #fff;
}

/* Section combobox's right-click "Delete Section" menu - invisible full-screen backdrop just to
   catch the next click/right-click and close the menu, same idea as .sap-confirm-password-backdrop
   below but transparent (this isn't a modal, just a small positioned menu). */
.sap-context-menu-backdrop[b-79h6qs0sl7] {
    position: fixed;
    inset: 0;
    z-index: 1069;
}

.sap-context-menu[b-79h6qs0sl7] {
    position: fixed;
    z-index: 1070;
    background: #fff;
    border: 1px solid #babbbb;
    border-radius: 0.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 0.25rem;
    min-width: 10rem;
}

.sap-context-menu-item[b-79h6qs0sl7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: #dc3545;
    cursor: pointer;
    white-space: nowrap;
}

    .sap-context-menu-item:hover[b-79h6qs0sl7] {
        background: #fdecea;
    }

    .sap-context-menu-item .material-symbols-outlined[b-79h6qs0sl7] {
        font-size: 1rem;
    }

/* .sap-confirm-password-* moved to the global wwwroot/css/app.css - ColumnPickerModal and
   EntryFromSettingModal render this same markup for their own "Save Default Setting" gate, and
   Blazor's per-component CSS isolation meant a scoped copy here never applied to their markup. */
/* /Components/Modals/AppQueryModal.razor.rz.scp.css */
/* ── AppQueryModal Scoped Styles ── */

/* ── Override ModalCpn internal structure ── */

/* Make the modal content container match the design reference */
[b-zfyelzey5z] .modal-content.modalCpn {
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f7f9fb;
    box-shadow: 0 20px 40px rgba(25, 28, 30, 0.06);
}

/* Remove default modal header styling */
[b-zfyelzey5z] .modal-header.modalHeaderCustom {
    padding: 0;
    border-bottom: none;
    background: transparent;
}

/* Remove default modal footer styling */
[b-zfyelzey5z] .modal-footer.modalFooterCustom {
    padding: 0;
    border-top: none;
    background: transparent;
}

/* Remove default body centering */
[b-zfyelzey5z] .modal-body {
    text-align: left !important;
    padding: 0;
}

/* ── Custom Header ── */
.aq-modal-header[b-zfyelzey5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(194, 198, 217, 0.15);
    background: #ffffff;
    width: 100%;
}

.aq-modal-header-left[b-zfyelzey5z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.aq-modal-icon[b-zfyelzey5z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background: #2aa30d;
}

.aq-modal-title[b-zfyelzey5z] {
    font-family: 'Inter', 'Mukta', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #191c1e;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

.aq-modal-close[b-zfyelzey5z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #737687;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
}

.aq-modal-close:hover[b-zfyelzey5z] {
    background: #eceef0;
    color: #191c1e;
}

/* ── Scrollable Body ── */
.aq-modal-body[b-zfyelzey5z] {
    flex: 1;
    overflow-y: auto;
    padding: 0rem 1rem 1rem 1rem;
    max-height: 60vh;
    background: #f7f9fb;
}

/* ── Sticky Footer ── */
.aq-modal-footer[b-zfyelzey5z] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0rem 1.5rem;
    background: rgba(242, 244, 246, 0.0);
    border-top: 1px solid rgba(194, 198, 217, 0.15);
    width: 100%;
}

.aq-modal-btn-cancel[b-zfyelzey5z] {
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #737687;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 2.25rem;
}

.aq-modal-btn-cancel:hover[b-zfyelzey5z] {
    color: #191c1e;
    background: #e6e8ea;
}

.aq-modal-btn-cancel:active[b-zfyelzey5z] {
    transform: scale(0.97);
}

.aq-modal-btn-primary[b-zfyelzey5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(to bottom right, #004cca, #0062ff);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 76, 202, 0.15);
    transition: all 0.2s ease;
    min-height: 2.25rem;
}

.aq-modal-btn-primary:hover[b-zfyelzey5z] {
    box-shadow: 0 6px 20px rgba(0, 76, 202, 0.25);
}

.aq-modal-btn-primary:active[b-zfyelzey5z] {
    opacity: 0.9;
    transform: scale(0.97);
}

.aq-modal-btn-chevron[b-zfyelzey5z] {
    font-size: 1.125rem;
    line-height: 1;
}
/* /Components/Modals/BeasAttachmentPickerModal.razor.rz.scp.css */
.beas-attach-picker[b-m1ul8uutgn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.beas-attach-status[b-m1ul8uutgn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #556b81;
}

.beas-attach-spin[b-m1ul8uutgn] {
    animation: beas-attach-spin-b-m1ul8uutgn 1s linear infinite;
}

@keyframes beas-attach-spin-b-m1ul8uutgn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.beas-attach-preview[b-m1ul8uutgn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    max-height: 16rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #f5f6f7;
    overflow: hidden;
}

.beas-attach-preview-img[b-m1ul8uutgn] {
    max-width: 100%;
    max-height: 16rem;
    object-fit: contain;
}

.beas-attach-preview-nonimage[b-m1ul8uutgn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem;
    color: #556b81;
    font-size: 0.8125rem;
    text-align: center;
    word-break: break-all;
}

.beas-attach-preview-nonimage .material-symbols-outlined[b-m1ul8uutgn] {
    font-size: 2.5rem;
}

.beas-attach-preview-openbtn[b-m1ul8uutgn] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: #fff;
    border: 1px solid #babbbb;
    border-radius: 4px;
    color: #0070f2;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.beas-attach-preview-openbtn .material-symbols-outlined[b-m1ul8uutgn] {
    font-size: 1.125rem;
}

/* Thumbnail strip below the preview frame - one square tile per staged attachment, plus a
   trailing "+" tile (same size/shape) that opens the file picker. Replaces the old always-visible
   dropzone box entirely. */
.beas-attach-grid[b-m1ul8uutgn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.beas-attach-tile[b-m1ul8uutgn] {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #f5f6f7;
    cursor: pointer;
    overflow: hidden;
}

.beas-attach-tile:hover[b-m1ul8uutgn] {
    border-color: #0070f2;
}

.beas-attach-tile.active[b-m1ul8uutgn] {
    border-color: #0070f2;
    box-shadow: 0 0 0 1px #0070f2;
}

.beas-attach-tile img[b-m1ul8uutgn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beas-attach-tile .material-symbols-outlined[b-m1ul8uutgn] {
    color: #556b81;
    font-size: 1.75rem;
}

.beas-attach-tile-remove[b-m1ul8uutgn] {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #babbbb;
    border-radius: 50%;
    color: #c00;
    cursor: pointer;
    padding: 0;
}

.beas-attach-tile-remove .material-symbols-outlined[b-m1ul8uutgn] {
    font-size: 0.875rem;
    color: #c00;
}

.beas-attach-tile-add[b-m1ul8uutgn] {
    position: relative;
    border: 2px dashed #babbbb;
    background: #fff;
}

.beas-attach-tile-add:hover[b-m1ul8uutgn] {
    border-color: #0070f2;
    background: #eaf3ff;
}

.beas-attach-tile-add .material-symbols-outlined[b-m1ul8uutgn] {
    color: #0070f2;
    font-size: 1.75rem;
}

/* Shown instead of the preview frame + grid when there's nothing staged yet and the host allows
   editing - a single large click target to add the first file. Same minimal look as the small "+"
   tile (border + centered plus, nothing else), just sized like the preview frame it replaces. */
.beas-attach-empty-box[b-m1ul8uutgn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    border: 2px dashed #babbbb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.beas-attach-empty-box:hover[b-m1ul8uutgn] {
    border-color: #0070f2;
    background: #eaf3ff;
}

.beas-attach-empty-box .material-symbols-outlined[b-m1ul8uutgn] {
    color: #0070f2;
    font-size: 2.5rem;
}

/* View-only (canEdit=false) empty state - nothing to add, so no click target, just a note. */
.beas-attach-empty[b-m1ul8uutgn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    font-size: 0.8125rem;
    color: #888;
    font-style: italic;
}
/* /Components/Modals/BeasCentrals/ProductionExecutionAlertsModal.razor.rz.scp.css */
/* Production Execution Alerts modal — color tokens lifted from the source template.
   Declared on .pea-header, .pea-widget, AND the footer buttons individually because the
   footer lives in ModalCpn's own .modal-footer div — a sibling of both, not a descendant —
   so var(--pea-*) wouldn't otherwise resolve there (custom properties only inherit down the
   DOM tree from where they're declared). */
.pea-header[b-kqj7w5rds0],
.pea-widget[b-kqj7w5rds0],
.pea-btn-dismiss[b-kqj7w5rds0],
.pea-btn-primary[b-kqj7w5rds0] {
    --pea-primary: #3755c3;
    --pea-primary-dim: #2848b7;
    --pea-on-primary: #f8f7ff;
    --pea-secondary: #4a4bd7;
    --pea-tertiary: #914d00;
    --pea-tertiary-fixed: #fe932c;
    --pea-surface: #f8f9ff;
    --pea-surface-container-low: #eff4ff;
    --pea-surface-container: #e5eeff;
    --pea-surface-container-high: #dce9ff;
    --pea-surface-container-highest: #d2e4ff;
    --pea-surface-container-lowest: #ffffff;
    --pea-on-surface: #00345e;
    --pea-on-surface-variant: #26619d;
    --pea-error: #9f403d;
    --pea-error-container: #fe8983;
    --pea-error-dim: #4e0309;
}

/* Header */
.pea-header[b-kqj7w5rds0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(to right, var(--pea-primary), var(--pea-primary-dim));
    color: var(--pea-on-primary);
    border-radius: 0.5rem 0.5rem 0 0;
}

.pea-header-title[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pea-header-title h1[b-kqj7w5rds0] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pea-header-title .material-symbols-outlined[b-kqj7w5rds0] {
    font-variation-settings: 'FILL' 1;
}

.pea-header-actions[b-kqj7w5rds0] {
    display: flex;
    gap: 6px;
}

.pea-icon-btn[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--pea-on-primary);
    transition: background-color 0.15s, color 0.15s;
}

.pea-icon-btn:hover[b-kqj7w5rds0] {
    background: rgba(255, 255, 255, 0.2);
}

.pea-icon-btn .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 18px;
}

/* Body wrapper */
.pea-widget[b-kqj7w5rds0] {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    color: var(--pea-on-surface);
}

/* Date range filter bar */
.pea-filter-bar[b-kqj7w5rds0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    margin-bottom: 12px;
    background: var(--pea-surface-container-low);
    border-bottom: 1px solid var(--pea-surface-container-highest);
    border-radius: 8px 8px 0 0;
}

.pea-filter-label[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pea-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.pea-filter-label .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 18px;
}

.pea-filter-inputs[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pea-date-field[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--pea-surface-container-lowest);
    border: 1px solid var(--pea-surface-container-highest);
    border-radius: 8px;
}

.pea-date-field:focus-within[b-kqj7w5rds0] {
    box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.25);
}

.pea-date-field span[b-kqj7w5rds0] {
    font-size: 12px;
    color: var(--pea-on-surface-variant);
}

.pea-date-field input[type="date"][b-kqj7w5rds0] {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--pea-on-surface);
    padding: 0;
    outline: none;
}

.pea-arrow[b-kqj7w5rds0] {
    font-size: 16px;
    color: var(--pea-on-surface-variant);
}

.pea-btn-apply[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pea-on-primary);
    background: var(--pea-primary);
    border: none;
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

.pea-btn-apply:hover[b-kqj7w5rds0] {
    box-shadow: 0 2px 8px rgba(55, 85, 195, 0.35);
}

.pea-btn-apply .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 16px;
}

.pea-btn-reset[b-kqj7w5rds0] {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pea-on-surface-variant);
    background: transparent;
    border: none;
    border-radius: 8px;
    transition: background-color 0.15s;
}

.pea-btn-reset:hover[b-kqj7w5rds0] {
    background: var(--pea-surface-container-high);
}

.pea-range-error[b-kqj7w5rds0] {
    font-size: 12px;
    color: var(--pea-error);
    margin-left: 4px;
}

/* Content: two sections side by side */
.pea-content[b-kqj7w5rds0] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.pea-divider[b-kqj7w5rds0] {
    width: 1px;
    background: var(--pea-surface-container-highest);
    margin: 4px 4px;
}

.pea-section[b-kqj7w5rds0] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--pea-surface-container-lowest);
    border-radius: 8px;
}

.pea-section-header[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    background: var(--pea-surface-container-low);
    border-radius: 8px 8px 0 0;
}

.pea-section-header h2[b-kqj7w5rds0] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pea-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pea-icon-tertiary[b-kqj7w5rds0] {
    color: var(--pea-tertiary-fixed);
    font-variation-settings: 'FILL' 1;
}

.pea-icon-secondary[b-kqj7w5rds0] {
    color: var(--pea-secondary);
    font-variation-settings: 'FILL' 1;
}

.pea-badge[b-kqj7w5rds0] {
    font-size: 11px;
    color: var(--pea-on-surface-variant);
    background: var(--pea-surface-container-high);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.pea-list-wrap[b-kqj7w5rds0] {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
    padding: 8px;
}

.pea-list-cols[b-kqj7w5rds0] {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr 1fr;
    gap: 6px;
    padding: 0 8px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pea-on-surface-variant);
    position: sticky;
    top: 0;
    background: var(--pea-surface-container-lowest);
}

.pea-list-cols > div[b-kqj7w5rds0] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pea-list-rows[b-kqj7w5rds0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pea-list-row[b-kqj7w5rds0] {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr 1fr;
    gap: 6px;
    padding: 10px 8px;
    background: var(--pea-surface);
    border-radius: 8px;
    font-size: 13px;
    transition: background-color 0.15s;
}

.pea-list-row > div[b-kqj7w5rds0] {
    min-width: 0;
}

.pea-list-row:hover[b-kqj7w5rds0] {
    background: var(--pea-surface-container);
}

.pea-list-row--center[b-kqj7w5rds0] {
    align-items: center;
}

.pea-cell-strong[b-kqj7w5rds0] {
    font-weight: 600;
}

.pea-cell-truncate[b-kqj7w5rds0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pea-col-right[b-kqj7w5rds0] {
    text-align: right;
}

.pea-due-today[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--pea-tertiary);
}

.pea-due-today .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 16px;
}

.pea-due-normal[b-kqj7w5rds0] {
    color: var(--pea-on-surface-variant);
}

.pea-priority[b-kqj7w5rds0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.pea-priority-critical[b-kqj7w5rds0] {
    background: rgba(159, 64, 61, 0.2);
    color: var(--pea-error);
}

.pea-priority-high[b-kqj7w5rds0] {
    background: rgba(254, 147, 44, 0.2);
    color: var(--pea-tertiary);
}

.pea-priority-normal[b-kqj7w5rds0] {
    background: var(--pea-surface-container-highest);
    color: var(--pea-on-surface-variant);
}

.pea-empty[b-kqj7w5rds0] {
    padding: 16px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--pea-on-surface-variant);
}

/* Compact pager (replaces PaginationCustom, which was oversized for this panel) */
.pea-pager[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--pea-surface-container-highest);
}

.pea-pager-info[b-kqj7w5rds0] {
    font-size: 11px;
    color: var(--pea-on-surface-variant);
    white-space: nowrap;
}

.pea-pager-btns[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pea-pager-btn[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--pea-surface-container-lowest);
    border: 1px solid var(--pea-surface-container-highest);
    border-radius: 6px;
    color: var(--pea-on-surface-variant);
    transition: background-color 0.15s, color 0.15s;
}

.pea-pager-btn .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 16px;
}

.pea-pager-btn:hover:not(:disabled)[b-kqj7w5rds0] {
    background: var(--pea-surface-container-high);
    color: var(--pea-primary);
}

.pea-pager-btn:disabled[b-kqj7w5rds0] {
    opacity: 0.4;
    cursor: default;
}

.pea-pager-page[b-kqj7w5rds0] {
    font-size: 11px;
    font-weight: 600;
    color: var(--pea-on-surface);
    min-width: 36px;
    text-align: center;
}

/* Footer */
.pea-btn-dismiss[b-kqj7w5rds0] {
    height: 2.25rem;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pea-on-surface-variant);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    transition: background-color 0.15s;
}

.pea-btn-dismiss:hover[b-kqj7w5rds0] {
    background: var(--pea-surface-container-high);
}

.pea-btn-primary[b-kqj7w5rds0] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 2.25rem;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, var(--pea-primary), var(--pea-primary-dim));
    border: none;
    border-radius: 0.25rem;
    transition: box-shadow 0.15s;
}

.pea-btn-primary:hover[b-kqj7w5rds0] {
    box-shadow: 0 4px 12px rgba(55, 85, 195, 0.35);
}

.pea-btn-primary .material-symbols-outlined[b-kqj7w5rds0] {
    font-size: 16px;
}

@media (max-width: 900px) {
    .pea-content[b-kqj7w5rds0] {
        flex-direction: column;
    }

    .pea-divider[b-kqj7w5rds0] {
        display: none;
    }
}
/* /Components/Modals/BeasCentrals/ShortageAlertModal.razor.rz.scp.css */
/* .modal-content/.modal-header/.modal-body/.modal-footer are rendered by ModalCpn itself, which
   has no CSS isolation of its own - ::deep can't reach them (it only matches descendants of a
   scoped ancestor, and none of ModalCpn's own markup is scoped by anything). Styled instead via
   the inline <style> block at the top of ShortageAlertModal.razor, which Blazor leaves unscoped. */

/* Title bar */
.shortage-titlebar[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    background-color: #e5eeff;
}

.shortage-titlebar-left[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shortage-titlebar-icon[b-edbu1azs9c] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.shortage-titlebar-title[b-edbu1azs9c] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #00345e;
    letter-spacing: 0.02em;
}

.shortage-titlebar-actions[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shortage-titlebar-btn[b-edbu1azs9c] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #26619d;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.shortage-titlebar-btn:hover[b-edbu1azs9c] {
    background-color: #dce9ff;
}

.shortage-titlebar-btn-close:hover[b-edbu1azs9c] {
    background-color: #fe8983;
    color: #752121;
}

.shortage-titlebar-btn img[b-edbu1azs9c] {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.shortage-minimize-icon[b-edbu1azs9c] {
    width: 10px;
    height: 2px;
    background-color: currentColor;
    display: inline-block;
}

/* Body layout */
.shortage-body[b-edbu1azs9c] {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
    min-height: 0;
    background-color: #f8f9ff;
}

.shortage-left-pane[b-edbu1azs9c], .shortage-right-pane[b-edbu1azs9c] {
    width: 50%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid rgba(129, 181, 246, 0.2);
    overflow: hidden;
    min-height: 0;
}

/* Search */
.shortage-search-wrap[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    margin: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: #eff4ff;
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease;
}

.shortage-search-wrap:focus-within[b-edbu1azs9c] {
    box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.2);
}

.shortage-search-icon[b-edbu1azs9c] {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    opacity: 0.6;
}

.shortage-search-input[b-edbu1azs9c] {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.75rem;
    color: #00345e;
    width: 100%;
    height: 1.5rem;
}

.shortage-search-input[b-edbu1azs9c]::placeholder {
    color: #8e9eb7;
}

/* List header */
.shortage-list-header[b-edbu1azs9c] {
    display: flex;
    padding: 0.375rem 0.75rem;
    font-size: 10.5px;
    font-weight: 700;
    color: #26619d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(129, 181, 246, 0.2);
}

.shortage-col-code[b-edbu1azs9c] {
    width: 42%;
    text-align: left;
}

.shortage-col-deficit[b-edbu1azs9c] {
    width: 33%;
    text-align: right;
}

.shortage-col-status[b-edbu1azs9c] {
    width: 25%;
    text-align: center;
}

/* List body */
.shortage-list-body[b-edbu1azs9c] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem;
    min-height: 0;
}

.shortage-list-row[b-edbu1azs9c] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-radius: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.25rem;
    transition: background-color 0.15s ease;
}

.shortage-list-row:hover[b-edbu1azs9c] {
    background-color: #e5eeff;
}

.shortage-list-row-selected[b-edbu1azs9c], .shortage-list-row-selected:hover[b-edbu1azs9c] {
    background-color: #dde1ff;
}

.shortage-list-row .shortage-col-code[b-edbu1azs9c] {
    display: flex;
    flex-direction: column;
}

.shortage-list-row .shortage-col-deficit[b-edbu1azs9c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.shortage-list-row .shortage-col-status[b-edbu1azs9c] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.25rem;
}

.shortage-active-bar[b-edbu1azs9c] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background-color: #3755c3;
    border-radius: 0 3px 3px 0;
}

.shortage-item-code[b-edbu1azs9c] {
    font-size: 13px;
    font-weight: 600;
    color: #00345e;
    text-align: left;
}

.shortage-list-row-selected .shortage-item-code[b-edbu1azs9c] {
    color: #2747b6;
}

.shortage-item-name[b-edbu1azs9c] {
    font-size: 11px;
    color: #26619d;
    text-align: left;
}

.shortage-list-row-selected .shortage-item-name[b-edbu1azs9c] {
    color: #3755c3;
}

.shortage-item-deficit[b-edbu1azs9c] {
    font-size: 13px;
    font-weight: 700;
}

.shortage-item-stock[b-edbu1azs9c] {
    font-size: 11px;
    color: #26619d;
}

.shortage-status-critical[b-edbu1azs9c] {
    color: #9f403d;
}

.shortage-status-warning[b-edbu1azs9c] {
    color: #804300;
}

.shortage-status-low[b-edbu1azs9c] {
    color: #00345e;
}

.shortage-badge[b-edbu1azs9c] {
    padding: 4px 8px;
    border-radius: 0.375rem;
    font-size: 11px;
    font-weight: 500;
}

.shortage-badge-critical[b-edbu1azs9c] {
    background-color: rgba(254, 147, 44, 0.3);
    color: #804300;
}

.shortage-badge-warning[b-edbu1azs9c] {
    background-color: rgba(254, 147, 44, 0.2);
    color: #804300;
}

.shortage-badge-low[b-edbu1azs9c] {
    background-color: #dce9ff;
    color: #26619d;
}

/* Footer summary */
.shortage-footer[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-top: 1px solid rgba(129, 181, 246, 0.2);
    background-color: #eff4ff;
    font-size: 11px;
}

.shortage-footer-text[b-edbu1azs9c] {
    color: #26619d;
    font-weight: 500;
}

.shortage-export-btn[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    color: #3755c3;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.shortage-export-btn:hover[b-edbu1azs9c] {
    color: #2848b7;
}

.shortage-export-btn img[b-edbu1azs9c] {
    width: 12px;
    height: 12px;
}

/* Right pane detail header */
.shortage-detail-header[b-edbu1azs9c] {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(129, 181, 246, 0.2);
    background: linear-gradient(to right, #eff4ff, #ffffff);
}

.shortage-detail-header-top[b-edbu1azs9c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

.shortage-detail-title[b-edbu1azs9c] {
    font-size: 15px;
    font-weight: 700;
    color: #00345e;
    margin: 0;
    text-align: left;
}

.shortage-detail-subtitle[b-edbu1azs9c] {
    font-size: 11px;
    color: #26619d;
    margin: 0;
}

.shortage-critical-badge[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 11px;
    font-weight: 600;
    color: #9f403d;
    background-color: rgba(254, 137, 131, 0.2);
    border: 1px solid rgba(254, 137, 131, 0.3);
    white-space: nowrap;
}

.shortage-critical-dot[b-edbu1azs9c] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9f403d;
    animation: shortage-pulse-b-edbu1azs9c 1.5s ease-in-out infinite;
}

@keyframes shortage-pulse-b-edbu1azs9c {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.shortage-stat-row[b-edbu1azs9c] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.shortage-stat[b-edbu1azs9c] {
    display: flex;
    flex-direction: column;
}

.shortage-stat-label[b-edbu1azs9c] {
    font-size: 11px;
    color: #26619d;
    text-transform: uppercase;
}

.shortage-stat-value[b-edbu1azs9c] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #00345e;
    text-align: left;
}

.shortage-stat-value-warning[b-edbu1azs9c] {
    color: #804300;
    text-align: left;
}

/* Action bar */
.shortage-action-bar[b-edbu1azs9c] {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid rgba(129, 181, 246, 0.2);
    background-color: #e5eeff;
}

.shortage-action-btn[b-edbu1azs9c] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    font-size: 13px;
    font-weight: 500;
    padding: 0 16px;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.shortage-action-btn img[b-edbu1azs9c] {
    width: 16px;
    height: 16px;
}

.shortage-action-btn-primary[b-edbu1azs9c] {
    background: linear-gradient(to right, #3755c3, #2848b7);
    color: #f8f7ff;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.shortage-action-btn-primary:hover[b-edbu1azs9c] {
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.shortage-action-btn-secondary[b-edbu1azs9c] {
    background-color: #ffffff;
    color: #00345e;
    border: 1px solid rgba(129, 181, 246, 0.3);
}

.shortage-action-btn-secondary:hover[b-edbu1azs9c] {
    background-color: #dce9ff;
}

/* Ledger */
.shortage-ledger[b-edbu1azs9c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.shortage-ledger-header[b-edbu1azs9c] {
    padding: 0.375rem 0.75rem;
    font-size: 11px;
    font-weight: 700;
    color: #26619d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: 1px solid rgba(129, 181, 246, 0.1);
}

.shortage-ledger-body[b-edbu1azs9c] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 0;
}

.shortage-ledger-entry[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.shortage-ledger-entry:hover[b-edbu1azs9c] {
    background-color: #e5eeff;
}

.shortage-ledger-entry-left[b-edbu1azs9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shortage-ledger-icon[b-edbu1azs9c] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shortage-ledger-icon img[b-edbu1azs9c] {
    width: 12px;
    height: 12px;
}

.shortage-ledger-icon-output[b-edbu1azs9c] {
    background-color: #e1e0ff;
}

.shortage-ledger-icon-adjustment[b-edbu1azs9c] {
    background-color: #dce9ff;
}

.shortage-ledger-icon-input[b-edbu1azs9c] {
    background-color: #c4dcff;
}

.shortage-ledger-info[b-edbu1azs9c] {
    display: flex;
    flex-direction: column;
}

.shortage-ledger-type[b-edbu1azs9c] {
    font-size: 11px;
    font-weight: 500;
    text-align: left !important;
    color: #00345e;
}

.shortage-ledger-meta[b-edbu1azs9c] {
    font-size: 11px;
    text-align: left !important;
    color: #26619d;
}

.shortage-ledger-amount[b-edbu1azs9c] {
    font-size: 11px;
    font-weight: 700;
}

.shortage-amount-negative[b-edbu1azs9c] {
    color: #9f403d;
}

.shortage-amount-positive[b-edbu1azs9c] {
    color: #3755c3;
}

/* Scrollbars */
.shortage-list-body[b-edbu1azs9c]::-webkit-scrollbar,
.shortage-ledger-body[b-edbu1azs9c]::-webkit-scrollbar {
    width: 4px;
}

.shortage-list-body[b-edbu1azs9c]::-webkit-scrollbar-thumb,
.shortage-ledger-body[b-edbu1azs9c]::-webkit-scrollbar-thumb {
    background-color: #c4dcff;
    border-radius: 4px;
}

.shortage-list-body[b-edbu1azs9c]::-webkit-scrollbar-thumb:hover,
.shortage-ledger-body[b-edbu1azs9c]::-webkit-scrollbar-thumb:hover {
    background-color: #81b5f6;
}

@media (max-width: 1050px) {
    .shortage-body[b-edbu1azs9c] {
        flex-direction: column;
    }

    .shortage-left-pane[b-edbu1azs9c],
    .shortage-right-pane[b-edbu1azs9c] {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
    }

    .shortage-body[b-edbu1azs9c] {
        overflow-y: auto;
    }
}
/* /Components/Modals/BeasCentrals/SimpleCreateWorkOrderModal.razor.rz.scp.css */
.scwo-modal-title[b-wsn9rer175] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #00345e;
}
.scwo-button[b-wsn9rer175] {
    height: 2rem;
    border-radius: 0.25rem;
    background-color: #5496cd;
    border-color: #5496cd;
    color: #eeeeee;
}

.scwo-button-close[b-wsn9rer175] {
    height: 2rem;
    border-radius: 0.25rem;
    /* border: #5496cd solid 2px; */
    background-color: transparent;
    border-color: transparent;
}
/* Form layout */
.scwo-form[b-wsn9rer175] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 2px;
}

.scwo-field[b-wsn9rer175] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scwo-label[b-wsn9rer175] {
    font-size: 13px;
    font-weight: 600;
    color: #26619d;
    margin: 0;
    text-align: start;
}

.scwo-required[b-wsn9rer175] {
    color: #d32f2f;
    margin-left: 2px;
}

/* Input */
.scwo-input[b-wsn9rer175] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d2e4ff;
    border-radius: 6px;
    font-size: 14px;
    color: #00345e;
    background: #f8f9ff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.scwo-input:focus[b-wsn9rer175] {
    border-color: #3755c3;
    box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.12);
    background: #fff;
}

.scwo-input--error[b-wsn9rer175] {
    border-color: #d32f2f;
    background: #fff6f6;
}

.scwo-input--error:focus[b-wsn9rer175] {
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}

.scwo-input:read-only[b-wsn9rer175],
.scwo-input[readonly][b-wsn9rer175] {
    background: #f1f3f5;
    border-color: #dcdfe6;
    color: #6b7280;
    cursor: not-allowed;
}

/* Validation message */
.scwo-error-msg[b-wsn9rer175] {
    font-size: 11px;
    color: #d32f2f;
    margin-top: 1px;
}

/* Busy spinner inside button */
.scwo-spinner[b-wsn9rer175] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scwo-spin-b-wsn9rer175 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes scwo-spin-b-wsn9rer175 {
    to { transform: rotate(360deg); }
}
/* /Components/Modals/BeasCentrals/SimpleCreateWorkOrderV2Modal.razor.rz.scp.css */
/* SimpleCreateWorkOrderV2Modal - scoped styles
   ============================================= */

/* -- so-section: no extra bottom margin inside modal body -- */
.so-section[b-mbu2ocx358] {
    margin-bottom: 0;
}

/* -- so-table override: remove min-width constraint in modal -- */
.scwov2-table-modal[b-mbu2ocx358] {
    min-width: unset;
}

/* -- so-qty-input: fill column, no inherited min-width -- */
.scwov2-table-modal .so-qty-input[b-mbu2ocx358] {
    width: 100%;
    min-width: unset;
}

.scwov2-button[b-mbu2ocx358] {
    height: 2rem;
    border-radius: 0.25rem;
    background-color: #5496cd;
    border-color: #5496cd;
    color: #eeeeee;
}

.scwov2-button-close[b-mbu2ocx358] {
    height: 2rem;
    border-radius: 0.25rem;
    /* border: #5496cd solid 2px; */
    background-color: transparent;
    border-color: transparent;
}

/* -- Column widths -- */
.scwov2-col-num[b-mbu2ocx358]  { width: 40px;  text-align: center; }
.scwov2-col-doc[b-mbu2ocx358]  { width: 140px; }
.scwov2-col-line[b-mbu2ocx358] { width: 120px; }
.scwov2-col-qty[b-mbu2ocx358]  { width: 150px; }
.scwov2-col-date[b-mbu2ocx358] { width: 170px; }

/* -- Row number badge -- */
.scwov2-row-num[b-mbu2ocx358] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e8edf5;
    color: #5a6880;
    font-size: 10px;
    font-weight: 700;
}

/* -- Error row highlight -- */
.scwov2-table-modal tbody tr.scwov2-row-error[b-mbu2ocx358] { background: #fff6f6; }

/* -- Input error state -- */
.scwov2-table-modal .so-qty-input.scwov2-input-error[b-mbu2ocx358] {
    border-color: #d32f2f;
    background: #fff6f6;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.10);
}

/* -- Readonly cells -- */
.scwov2-readonly-input[b-mbu2ocx358] {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e0e8f0;
    border-radius: 5px;
    background: #f3f6fb;
    color: #8fa3b8;
    font-size: 12px;
    cursor: not-allowed;
    outline: none;
    box-sizing: border-box;
}

/* -- Inline error message -- */
.scwov2-err-msg[b-mbu2ocx358] {
    display: block;
    font-size: 10.5px;
    color: #d32f2f;
    margin-top: 2px;
}

/* -- Summary chips (section header) -- */
.scwov2-chip[b-mbu2ocx358] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.scwov2-chip--multiple[b-mbu2ocx358] { background: #dde8ff; color: #3755c3; }
.scwov2-chip--combine[b-mbu2ocx358]  { background: #fff1d6; color: #7a3e00; }
.scwov2-chip--qty[b-mbu2ocx358]      { background: #e8f5e9; color: #2e7d32; }

/* -- Mode pill toggle (footer) -- */
.scwov2-pill[b-mbu2ocx358] {
    display: inline-flex;
    background: #eef2f8;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    width: fit-content;
}

.scwov2-pill-btn[b-mbu2ocx358] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #5a6880;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.scwov2-pill-btn:hover:not(.active)[b-mbu2ocx358] {
    background: #dde4f0;
    color: #3755c3;
}

.scwov2-pill-btn.active[b-mbu2ocx358] {
    background: #fff;
    color: #3755c3;
    box-shadow: 0 1px 4px rgba(55, 85, 195, 0.18), 0 0 0 1px rgba(55, 85, 195, 0.10);
}

.scwov2-pill-icon[b-mbu2ocx358] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* -- Footer buttons -- */
.scwov2-btn-create[b-mbu2ocx358] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 18px;
    border-radius: 7px;
    background: #3755c3;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.scwov2-btn-create:hover:not(:disabled)[b-mbu2ocx358] {
    background: #2848b7;
    box-shadow: 0 2px 8px rgba(55, 85, 195, 0.28);
}

.scwov2-btn-create:disabled[b-mbu2ocx358] {
    opacity: 0.65;
    cursor: not-allowed;
}

.scwov2-btn-cancel[b-mbu2ocx358] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 7px;
    background: transparent;
    border: 1.5px solid #d2e4ff;
    color: #5a6880;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.scwov2-btn-cancel:hover[b-mbu2ocx358] {
    border-color: #3755c3;
    color: #3755c3;
    background: #f0f4ff;
}
/* /Components/Modals/CategorySetupModal.razor.rz.scp.css */
.btn-primary[b-4jxlnyhkjt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-secondary[b-4jxlnyhkjt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

.csm-editor[b-4jxlnyhkjt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.csm-row[b-4jxlnyhkjt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.csm-name-input[b-4jxlnyhkjt] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.csm-style-btn[b-4jxlnyhkjt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.8125rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
}

    .csm-style-btn:hover[b-4jxlnyhkjt],
    .csm-style-btn.active[b-4jxlnyhkjt] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .csm-style-btn .material-symbols-outlined[b-4jxlnyhkjt] {
        font-size: 1rem;
    }

.csm-fontsize-input[b-4jxlnyhkjt] {
    box-sizing: border-box;
    flex: 0 0 4rem;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.csm-color-input[b-4jxlnyhkjt] {
    box-sizing: border-box;
    flex: 0 0 6rem;
    min-width: 0;
    text-transform: uppercase;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.csm-move-btn[b-4jxlnyhkjt],
.csm-delete-btn[b-4jxlnyhkjt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
}

    .csm-move-btn:hover:not(:disabled)[b-4jxlnyhkjt] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .csm-move-btn:disabled[b-4jxlnyhkjt] {
        opacity: 0.4;
        cursor: default;
    }

    .csm-delete-btn:hover[b-4jxlnyhkjt] {
        border-color: #d32f2f;
        color: #d32f2f;
    }

    .csm-move-btn .material-symbols-outlined[b-4jxlnyhkjt],
    .csm-delete-btn .material-symbols-outlined[b-4jxlnyhkjt] {
        font-size: 0.95rem;
    }

.csm-add-btn[b-4jxlnyhkjt] {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
    cursor: pointer;
}

    .csm-add-btn:hover[b-4jxlnyhkjt] {
        border-color: #004ac6;
        color: #004ac6;
    }

.csm-empty[b-4jxlnyhkjt] {
    padding: 0.75rem;
    text-align: center;
    color: #737686;
    font-size: 0.85rem;
}
/* /Components/Modals/ColumnBarModal.razor.rz.scp.css */
.btn-primary[b-c3ijwfp2ny] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-c3ijwfp2ny] {
        background: #2563eb;
    }

    .btn-primary:active[b-c3ijwfp2ny] {
        transform: scale(0.96);
    }

.btn-secondary[b-c3ijwfp2ny] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-c3ijwfp2ny] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-c3ijwfp2ny] {
        transform: scale(0.96);
    }

/* Self-contained on purpose (not the shared management_wo.css) - ColumnBarModal is opened from
   ColumnPickerModal on pages (ItemBomRouting, AppQueryViewV2) that never load management_wo.css,
   so relying on its classes/CSS custom properties left this modal unstyled there. Same reasoning as
   WOBarCell.razor.css. */
.wo-bar-editor[b-c3ijwfp2ny] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.wo-bar-row[b-c3ijwfp2ny] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wo-bar-label[b-c3ijwfp2ny] {
    font-size: 0.75rem;
    color: #737686;
}

.wo-bar-input[b-c3ijwfp2ny] {
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-bar-inline[b-c3ijwfp2ny] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .wo-bar-inline .wo-bar-input[b-c3ijwfp2ny] {
        flex: 1;
    }

.wo-bar-select[b-c3ijwfp2ny] {
    font-size: 0.8125rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
    flex: 0 0 auto;
}

.wo-bar-hint[b-c3ijwfp2ny] {
    font-size: 0.7rem;
    color: #737686;
    line-height: 1.5;
}

    .wo-bar-hint code[b-c3ijwfp2ny] {
        font-family: "Consolas", "Courier New", monospace;
        background: #fff;
        border: 1px solid #d4dadf;
        border-radius: 0.15rem;
        padding: 0 0.2rem;
        color: #0b3d91;
    }

.wo-bar-checkbox-row[b-c3ijwfp2ny] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #c3c6d7;
    font-size: 0.8125rem;
    color: #191c1e;
    cursor: pointer;
}
/* /Components/Modals/ColumnPickerModal.razor.rz.scp.css */
.btn-primary[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-rqan2csx4y] {
        background: #2563eb;
    }

    .btn-primary:active[b-rqan2csx4y] {
        transform: scale(0.96);
    }

.btn-secondary[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-rqan2csx4y] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-rqan2csx4y] {
        transform: scale(0.96);
    }

.btn-outline[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #c3c6d7;
    background: #e1e2e4;
    color: #191c1e;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}

    .btn-outline:hover[b-rqan2csx4y] {
        background: rgba(195,198,215,0.25);
    }

    .btn-outline.active[b-rqan2csx4y] {
        background: #d0e1fb;
        color: #54647a;
        border-color: #004ac6;
    }

.wo-column-picker[b-rqan2csx4y] {
    text-align: left;
}

.wo-column-tabs-row[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid #c3c6d7;
    margin-bottom: 0.5rem;
}

.wo-column-tabs[b-rqan2csx4y] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

    .wo-column-tabs[b-rqan2csx4y]::-webkit-scrollbar {
        display: none;
    }

.wo-column-tabs-scroll-btn[b-rqan2csx4y] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    color: #737686;
    cursor: pointer;
    border-radius: 0.25rem;
}

    .wo-column-tabs-scroll-btn:hover[b-rqan2csx4y] {
        background: #e1e2e4;
        color: #004ac6;
    }

    .wo-column-tabs-scroll-btn .material-symbols-outlined[b-rqan2csx4y] {
        font-size: 1.1rem;
    }

.wo-column-tab[b-rqan2csx4y] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #737686;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

    .wo-column-tab.active[b-rqan2csx4y] {
        color: #004ac6;
        border-bottom-color: #004ac6;
    }

.wo-column-toolbar[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wo-column-search[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    padding: 0.3rem 0.6rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    color: #737686;
}

    .wo-column-search .material-symbols-outlined[b-rqan2csx4y] {
        font-size: 1.1rem;
    }

    .wo-column-search input[b-rqan2csx4y] {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.8125rem;
        color: #191c1e;
    }

.wo-column-custom-btn[b-rqan2csx4y] {
    flex-shrink: 0;
    white-space: nowrap;
    justify-content: center;
    min-width: 9.5rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wo-column-list[b-rqan2csx4y] {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wo-column-item[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #c3c6d7;
    font-size: 0.85rem;
    color: #191c1e;
}

    .wo-column-item:last-child[b-rqan2csx4y] {
        border-bottom: none;
    }

    .wo-column-item.dragging[b-rqan2csx4y] {
        opacity: 0.4;
        background: #e1e2e4;
    }

    .wo-column-item.drop-target-above[b-rqan2csx4y] {
        box-shadow: inset 0 2px 0 0 #004ac6;
    }

    .wo-column-item--fixed[b-rqan2csx4y] {
        background: #f4f5f8;
    }

.wo-column-drag-handle[b-rqan2csx4y] {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #737686;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
    touch-action: none;
}

    .wo-column-drag-handle:active[b-rqan2csx4y] {
        cursor: grabbing;
    }

    .wo-column-drag-handle.disabled[b-rqan2csx4y] {
        color: #c3c6d7;
        cursor: not-allowed;
    }

.wo-column-item-check[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

    .wo-column-item-check span[b-rqan2csx4y] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wo-column-item-format[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.wo-column-type-select[b-rqan2csx4y] {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-column-format-input[b-rqan2csx4y] {
    width: 6.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-column-mapping-btn[b-rqan2csx4y] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 6.5rem;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
    cursor: pointer;
    white-space: nowrap;
}

    .wo-column-mapping-btn:hover[b-rqan2csx4y] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .wo-column-mapping-btn .material-symbols-outlined[b-rqan2csx4y] {
        font-size: 1rem;
    }

.wo-column-colorrule-btn[b-rqan2csx4y] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 1.9rem;
    padding: 0.25rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
    cursor: pointer;
}

    .wo-column-colorrule-btn:hover[b-rqan2csx4y],
    .wo-column-colorrule-btn.active[b-rqan2csx4y] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .wo-column-colorrule-btn .material-symbols-outlined[b-rqan2csx4y] {
        font-size: 1rem;
    }

.wo-column-colorrule-badge[b-rqan2csx4y] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #004ac6;
    color: #ffffff;
    font-size: 0.6rem;
    line-height: 1;
    border-radius: 999px;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}

.wo-column-uid[b-rqan2csx4y] {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: #737686;
    background: #eef0f4;
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
}

.wo-virtual-tag[b-rqan2csx4y] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #004ac6;
    background: #e8effd;
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
}

.wo-virtual-settings-btn[b-rqan2csx4y] {
    width: 2rem;
    color: #d32f2f;
    border-color: #f3c9c9;
}

    .wo-virtual-settings-btn:hover[b-rqan2csx4y] {
        border-color: #d32f2f;
        color: #d32f2f;
    }

.wo-virtual-delete-btn[b-rqan2csx4y] {
    width: 2rem;
    color: #d32f2f;
    border-color: #f3c9c9;
}

    .wo-virtual-delete-btn:hover[b-rqan2csx4y] {
        border-color: #d32f2f;
        color: #d32f2f;
    }
/* /Components/Modals/CostCalculationModal/DetailPostInCostModal.razor.rz.scp.css */
/* Anchor and clip inside each td without relying on ancestor selectors */
td[b-51ihyjigla] {
    position: relative;
}

.cell-parent[b-51ihyjigla] {
    position: relative;
}

.cell-wrapper[b-51ihyjigla] {
    display: inline-block;       /* allows centering and ellipsis */
    max-width: 100%;
    padding-right: 28px;         /* avoid overlap with button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.cell-action-btn[b-51ihyjigla] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;               /* show on hover */
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* Show when hovering the cell or wrapper */
td:hover .cell-action-btn[b-51ihyjigla],
.cell-parent:hover .cell-action-btn[b-51ihyjigla] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cell-content[b-51ihyjigla] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Modals/CrossReferenceModal.razor.rz.scp.css */
/* Not defined anywhere else this component can rely on: whichever host page's Bootstrap/global
   .btn-secondary happens to be loaded wins otherwise (a dark gray button on pages without their
   own light override), instead of the light "Close" look intended here. */
.btn-secondary[b-zj93rr4xog] {
    background: #f3f4f6;
    color: #505f76;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-secondary:hover[b-zj93rr4xog] {
        background: #e7e8ea;
    }

.col-dynamic-icon[b-zj93rr4xog] {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

.cr-table-panel[b-zj93rr4xog] {
    position: relative;
}

.cr-table-gear-btn[b-zj93rr4xog] {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #c3c6d7;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    color: #505f76;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.25s ease;
}

    .cr-table-gear-btn .material-symbols-outlined[b-zj93rr4xog] {
        font-size: 14px;
        transition: transform 0.35s ease;
    }

    .cr-table-gear-btn:hover[b-zj93rr4xog] {
        border-color: #004ac6;
        color: #004ac6;
        box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
        transform: translateY(-1px);
    }

    .cr-table-gear-btn:hover .material-symbols-outlined[b-zj93rr4xog] {
        transform: rotate(60deg);
    }

    .cr-table-gear-btn:active[b-zj93rr4xog] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
    }

.cr-table-wrap[b-zj93rr4xog] {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e2e7f0;
    border-radius: 0.375rem;
}

    .cr-table-wrap[b-zj93rr4xog]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .cr-table-wrap[b-zj93rr4xog]::-webkit-scrollbar-track {
        background: transparent;
    }

    .cr-table-wrap[b-zj93rr4xog]::-webkit-scrollbar-thumb {
        background: var(--color-outline-variant);
        border-radius: 3px;
    }

        .cr-table-wrap[b-zj93rr4xog]::-webkit-scrollbar-thumb:hover {
            background: var(--color-outline);
        }

/* ModalCpn sets text-align:center inline on .modal-body, which beats any external CSS rule of
   equal specificity -- so alignment has to be set on the table itself, not the modal-body. */
.cr-table[b-zj93rr4xog] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.cr-table th[b-zj93rr4xog] {
    position: sticky;
    top: 0;
    background: #eaedff;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #434655;
    border-bottom: 1px solid #e2e7f0;
}

.cr-table td[b-zj93rr4xog] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-col-resize-handle[b-zj93rr4xog] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

.cr-col-resize-handle[b-zj93rr4xog]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: #c4cee3;
    opacity: 0.7;
}

.cr-col-resize-handle:hover[b-zj93rr4xog] {
    background: #004ac6;
    opacity: 0.35;
}

.cr-col-resize-handle:hover[b-zj93rr4xog]::after {
    background: #004ac6;
    opacity: 1;
}
/* /Components/Modals/DuplicateItemModal.razor.rz.scp.css */
.dim-row[b-rngrx47hq0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dim-label[b-rngrx47hq0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.dim-input[b-rngrx47hq0] {
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

    .dim-input:focus[b-rngrx47hq0] {
        outline: none;
        border-color: #004ac6;
    }

.btn-primary[b-rngrx47hq0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-rngrx47hq0] {
        background: #2563eb;
    }

    .btn-primary:active[b-rngrx47hq0] {
        transform: scale(0.96);
    }

    .btn-primary:disabled[b-rngrx47hq0] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-rngrx47hq0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-secondary:hover[b-rngrx47hq0] {
        background: #f3f4f6;
    }

    .btn-secondary:disabled[b-rngrx47hq0] {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* /Components/Modals/EditFormulaParamModal.razor.rz.scp.css */
/* /Components/Modals/EntryFieldMappingModal.razor.rz.scp.css */
.btn-primary[b-hilg9n24eb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-secondary[b-hilg9n24eb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

.efm-editor[b-hilg9n24eb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.efm-source-toggle[b-hilg9n24eb] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.efm-type-btn[b-hilg9n24eb] {
    padding: 0.35rem 0.75rem;
}

    .efm-type-btn.active[b-hilg9n24eb] {
        border-color: #004ac6;
        color: #004ac6;
    }

textarea.efm-sql-textarea[b-hilg9n24eb] {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    flex: none;
}

.efm-sql-hint[b-hilg9n24eb] {
    font-size: 0.7rem;
    color: #737686;
}

.efm-row[b-hilg9n24eb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.efm-input[b-hilg9n24eb] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efm-row-btn[b-hilg9n24eb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
    padding: 0.35rem;
    transition: color .2s, border-color .2s;
}

    .efm-row-btn:hover[b-hilg9n24eb] {
        border-color: #004ac6;
        color: #004ac6;
    }

.efm-add-btn[b-hilg9n24eb],
.efm-test-btn[b-hilg9n24eb] {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

    .efm-test-btn:disabled[b-hilg9n24eb] {
        opacity: 0.5;
        cursor: default;
    }

.efm-default-row[b-hilg9n24eb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #c3c6d7;
}

.efm-default-label[b-hilg9n24eb] {
    font-size: 0.75rem;
    color: #737686;
}

.efm-checkbox-row-label[b-hilg9n24eb] {
    flex-shrink: 0;
    width: 4.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
}

.efm-test-results[b-hilg9n24eb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.efm-test-summary[b-hilg9n24eb] {
    font-size: 0.75rem;
    color: #737686;
}

.efm-test-table-wrap[b-hilg9n24eb] {
    max-height: 22rem;
    overflow: auto;
    border: 1px solid #dde3ef;
    border-radius: 0.5rem;
}

.efm-test-table[b-hilg9n24eb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

    .efm-test-table th[b-hilg9n24eb],
    .efm-test-table td[b-hilg9n24eb] {
        padding: 0.5rem 0.75rem;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid #eef0f5;
    }

    .efm-test-table th[b-hilg9n24eb] {
        position: sticky;
        top: 0;
        background: #f3f4f8;
        color: #4a5568;
        font-weight: 700;
        z-index: 1;
    }

    .efm-test-table tbody tr:last-child td[b-hilg9n24eb] {
        border-bottom: none;
    }

    .efm-test-table tbody tr:hover td[b-hilg9n24eb] {
        background: #f8f9fb;
    }

.efm-test-ellipsis-row td[b-hilg9n24eb] {
    text-align: center;
    color: #a0a8bd;
    letter-spacing: 0.2rem;
    font-weight: 700;
    background: transparent !important;
}

.efm-test-empty[b-hilg9n24eb] {
    padding: 1.5rem;
    text-align: center;
    color: #737686;
    font-size: 0.85rem;
}
/* /Components/Modals/EntryFieldTableQueryModal.razor.rz.scp.css */
.btn-primary[b-6d7m5knhxn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-6d7m5knhxn] {
        background: #2563eb;
    }

    .btn-primary:active[b-6d7m5knhxn] {
        transform: scale(0.96);
    }

.btn-secondary[b-6d7m5knhxn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-6d7m5knhxn] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-6d7m5knhxn] {
        transform: scale(0.96);
    }

.eftq-editor[b-6d7m5knhxn] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.eftq-label[b-6d7m5knhxn] {
    font-size: 0.75rem;
    color: #737686;
}

.eftq-editor-wrap[b-6d7m5knhxn] {
    border-radius: 0.25rem;
    overflow: hidden;
}

.eftq-example[b-6d7m5knhxn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    background: #f5f7fb;
    border: 1px solid #e2e6ee;
    border-radius: 0.25rem;
}

.eftq-example-code[b-6d7m5knhxn] {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.75rem;
    color: #0b3d91;
    background: #fff;
    border: 1px solid #d4dadf;
    border-radius: 0.2rem;
    padding: 0.35rem 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.eftq-hint[b-6d7m5knhxn] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.7rem;
    color: #737686;
    line-height: 1.5;
}

    .eftq-hint li + li[b-6d7m5knhxn] {
        margin-top: 0.3rem;
    }

    .eftq-hint code[b-6d7m5knhxn] {
        font-family: "Consolas", "Courier New", monospace;
        background: #fff;
        border: 1px solid #d4dadf;
        border-radius: 0.15rem;
        padding: 0 0.2rem;
        color: #0b3d91;
    }
/* /Components/Modals/EntryFieldVisibilityRuleModal.razor.rz.scp.css */
.btn-primary[b-oeqoge6fsd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-secondary[b-oeqoge6fsd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

.evr-editor[b-oeqoge6fsd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.evr-mode-toggle[b-oeqoge6fsd] {
    display: flex;
    gap: 0.4rem;
}

.evr-mode-btn[b-oeqoge6fsd] {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #505f76;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

    .evr-mode-btn.active[b-oeqoge6fsd] {
        border-color: #004ac6;
        color: #004ac6;
        background: #e8effd;
    }

.evr-hint[b-oeqoge6fsd] {
    font-size: 0.75rem;
    color: #737686;
}

    .evr-hint code[b-oeqoge6fsd] {
        font-family: "Courier New", monospace;
        background: #eef0f4;
        border-radius: 0.2rem;
        padding: 0 0.25rem;
    }

.evr-row[b-oeqoge6fsd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #e2e5ee;
}

.evr-select[b-oeqoge6fsd] {
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.evr-operator-select[b-oeqoge6fsd] {
    flex: 1 1 40%;
}

.evr-row-values[b-oeqoge6fsd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 100%;
}

.evr-input[b-oeqoge6fsd] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.evr-field-input[b-oeqoge6fsd] {
    flex: 1 1 40%;
    font-family: "Courier New", monospace;
}

.evr-and[b-oeqoge6fsd] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #737686;
}

.evr-row-btn[b-oeqoge6fsd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #505f76;
    cursor: pointer;
}

    .evr-row-btn:hover[b-oeqoge6fsd] {
        border-color: #004ac6;
        color: #004ac6;
    }

.evr-add-btn[b-oeqoge6fsd] {
    width: auto;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    align-self: flex-start;
}
/* /Components/Modals/EntryFromSettingModal.razor.rz.scp.css */
.btn-primary[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-secondary[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

.efs-toolbar[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.efs-search[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    flex: 1;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    color: #737686;
}

    .efs-search .material-symbols-outlined[b-7ntnzovf5j] {
        font-size: 1.1rem;
    }

    .efs-search input[b-7ntnzovf5j] {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.8125rem;
        color: #191c1e;
    }

.efs-virtual-columns-btn[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #c3c6d7;
    background: #e1e2e4;
    color: #191c1e;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

    .efs-virtual-columns-btn:hover[b-7ntnzovf5j] {
        background: rgba(195,198,215,0.25);
    }

    .efs-virtual-columns-btn .material-symbols-outlined[b-7ntnzovf5j] {
        font-size: 1.05rem;
    }

.efs-header-row[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.25rem;
    /* Matches .efs-list's own reserved scrollbar gutter (see below) so the header's columns
       stay lined up with the rows underneath regardless of whether the list is actually
       scrolled -- without this, .efs-list's native scrollbar eats into its content width while
       .efs-header-row (never itself scrollable) stays full width, drifting every column right
       of the label out of alignment. */
    padding-right: calc(0.25rem + 8px);
    margin-bottom: 0.15rem;
    border-bottom: 2px solid #c3c6d7;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #737686;
}

    /* Every header title centered over its column -- the row controls below keep their own
       (mostly left-aligned) layout, this only affects the header text itself. */
    .efs-header-row > span[b-7ntnzovf5j] {
        text-align: center;
    }

.efs-header-drag[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-drag, 1.1rem);
}

.efs-header-visible[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-visible, 1.35rem);
}

.efs-header-label[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-field, 260px);
    min-width: 0;
}

.efs-header-type[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-type, 6.5rem);
}

.efs-header-format[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-format, 5.5rem);
}

.efs-header-style[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-style, 3.5rem);
}

.efs-header-defaultvalue[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-defaultvalue, 6rem);
}

.efs-header-condition[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-condition, 3.5rem);
}

.efs-header-linkobject[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-linkobject, 4.5rem);
}

.efs-header-visibility[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-visibility, 4.5rem);
}

.efs-header-category[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-category, 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.efs-header-category-btn[b-7ntnzovf5j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #737686;
    cursor: pointer;
}

    .efs-header-category-btn:hover[b-7ntnzovf5j] {
        color: #004ac6;
    }

    .efs-header-category-btn .material-symbols-outlined[b-7ntnzovf5j] {
        font-size: 0.95rem;
    }

.efs-header-width[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-width, 4rem);
}

.efs-header-sequence[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-sequence, 4rem);
}

.efs-header-readonly[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-readonly, 3.5rem);
    text-align: center;
}

.efs-header-required[b-7ntnzovf5j] {
    flex-shrink: 0;
    width: var(--efs-col-required, 3.5rem);
    text-align: center;
}

.efs-list[b-7ntnzovf5j] {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Fixed 8px width (matching .efs-header-row's own reserved padding-right above) instead of
       whatever the OS's native scrollbar happens to be -- native width varies enough (and is 0 on
       overlay-scrollbar platforms) that the header would drift out of alignment again otherwise. */
    scrollbar-width: thin;
    scrollbar-color: #c3c6d7 transparent;
}

    .efs-list[b-7ntnzovf5j]::-webkit-scrollbar {
        width: 8px;
    }

    .efs-list[b-7ntnzovf5j]::-webkit-scrollbar-track {
        background: transparent;
    }

    .efs-list[b-7ntnzovf5j]::-webkit-scrollbar-thumb {
        background: #c3c6d7;
        border-radius: 4px;
    }

    .efs-list[b-7ntnzovf5j]::-webkit-scrollbar-thumb:hover {
        background: #a7abc0;
    }

.efs-item[b-7ntnzovf5j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #e2e5ee;
    font-size: 0.82rem;
}

    .efs-item:last-child[b-7ntnzovf5j] {
        border-bottom: none;
    }

    /* .dragging/.drop-target-above are toggled by the shared woColumnDragInit JS (see
       columnDragReorder.js) -- CSS isolation means ColumnPickerModal.razor.css's own rules for
       these same class names don't reach this component's rows, so they need restating here. */
    .efs-item.dragging[b-7ntnzovf5j] {
        opacity: 0.4;
        background: #e1e2e4;
    }

    .efs-item.drop-target-above[b-7ntnzovf5j] {
        box-shadow: inset 0 2px 0 0 #004ac6;
    }

/* Fixed-width column wrapper (matches .efs-header-label) holding the label AND, for a virtual
   column row, its "virtual" tag + edit/delete buttons -- those used to be separate flex siblings
   of .efs-item-label, which pushed every later column (Type, Default Value, ...) further right on
   virtual rows than on plain ones, drifting them out of alignment with the header. Keeping them
   all inside one fixed-width cell (label shrinks/ellipsizes first, tag/buttons stay put) is what
   keeps every row's later columns lined up regardless of whether a row is virtual. */
.efs-field-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-field, 260px);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
}

.efs-item-label[b-7ntnzovf5j] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #191c1e;
}

.efs-item-uid[b-7ntnzovf5j] {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: #737686;
    background: #eef0f4;
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    margin-right: 0.3rem;
}

.efs-virtual-tag[b-7ntnzovf5j] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #004ac6;
    background: #e8effd;
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
}

.efs-virtual-delete-btn[b-7ntnzovf5j] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #f3c9c9;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #d32f2f;
    cursor: pointer;
}

    .efs-virtual-delete-btn:hover[b-7ntnzovf5j] {
        border-color: #d32f2f;
    }

    .efs-virtual-delete-btn .material-symbols-outlined[b-7ntnzovf5j] {
        font-size: 0.95rem;
    }

/* box-sizing: border-box on every fixed-width column control below is what keeps them lined
   up with the plain-text header spans above -- without it, each control's padding/border adds
   on top of its width and the columns drift right the further along the row you look. */
.efs-type-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-type, 6.5rem);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* flex:1 here (instead of a fixed width) is what makes the select shrink to make room for the
   mapping button -- .efs-type-cell's own fixed width is what keeps the pair aligned with the
   other dropdowns, whether or not the button is showing. */
.efs-type-select[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 0.25rem 0.3rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-mapping-btn[b-7ntnzovf5j] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
    cursor: pointer;
}

    .efs-mapping-btn:hover[b-7ntnzovf5j] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .efs-mapping-btn .material-symbols-outlined[b-7ntnzovf5j] {
        font-size: 0.95rem;
    }

    .efs-mapping-btn--active[b-7ntnzovf5j] {
        border-color: #004ac6;
        color: #004ac6;
        background: #e8effd;
    }

.efs-condition-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-condition, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efs-linkobject-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-linkobject, 4.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efs-visibility-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-visibility, 4.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Same fixed-width-wrapper trick as .efs-type-cell: the delete button (shown only when a
   category is assigned) shares the column with the select instead of pushing later columns
   out of alignment. */
.efs-category-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-category, 7rem);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.efs-category-select[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 0.25rem 0.3rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-width-input[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-width, 4rem);
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-sequence-input[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-sequence, 4rem);
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-format-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-format, 5.5rem);
    display: flex;
    align-items: center;
}

.efs-format-input[b-7ntnzovf5j] {
    box-sizing: border-box;
    width: 100%;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-style-cell[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-style, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efs-defaultvalue-input[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-defaultvalue, 6rem);
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.efs-visible-check[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-visible, 1.35rem);
    display: flex;
    align-items: center;
}

.efs-readonly-check[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-readonly, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efs-required-check[b-7ntnzovf5j] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--efs-col-required, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efs-empty[b-7ntnzovf5j] {
    padding: 1rem;
    text-align: center;
    color: #737686;
    font-size: 0.85rem;
}
/* /Components/Modals/InventoryHistoryModal.razor.rz.scp.css */
/* Generic .btn-*/.loading-cell/.col-* classes used by this component's own markup below, but
   which management_wo.css (not this file) used to be the one supplying -- ported here verbatim
   so this modal no longer silently depends on the host page defining matching copies. Colors are
   literal (copied from management_wo.css's :root, the palette this modal originally shipped with
   on MrpWorkbench) rather than var(--color-*)[b-9zun8uaj9l], since --color-* isn't declared by every host page
   and :root itself can't be targeted from scoped css (Blazor's isolation attribute never lands on
   <html>) -- literal values guarantee this modal looks identical everywhere it's opened from. */
.btn-primary[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-9zun8uaj9l] {
        background: #2563eb;
    }

    .btn-primary:active[b-9zun8uaj9l] {
        transform: scale(0.96);
    }

.btn-secondary[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-9zun8uaj9l] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-9zun8uaj9l] {
        transform: scale(0.96);
    }

.btn-outline[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #c3c6d7;
    background: #e1e2e4;
    color: #191c1e;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}

    .btn-outline:hover[b-9zun8uaj9l] {
        background: rgba(195,198,215,0.25);
    }

    .btn-outline.active[b-9zun8uaj9l] {
        background: #d0e1fb;
        color: #54647a;
        border-color: #004ac6;
    }

.loading-cell[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #505f76;
    font-size: 0.875rem;
}

@keyframes spin-b-9zun8uaj9l {
    to {
        transform: rotate(360deg);
    }
}

.spin[b-9zun8uaj9l] {
    animation: spin-b-9zun8uaj9l 1s linear infinite;
}

.col-resize-handle[b-9zun8uaj9l] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

    .col-resize-handle[b-9zun8uaj9l]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 16px;
        transform: translate(-50%, -50%);
        border-radius: 1px;
        background: #c3c6d7;
        opacity: 0.7;
    }

    .col-resize-handle:hover[b-9zun8uaj9l] {
        background: #004ac6;
        opacity: 0.35;
    }

    .col-resize-handle:hover[b-9zun8uaj9l]::after {
        background: #004ac6;
        opacity: 1;
    }

.col-dynamic-icon[b-9zun8uaj9l] {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

.ihm-tabs[b-9zun8uaj9l] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #c3c6d7;
    margin-bottom: 0.75rem;
}

.ihm-tab[b-9zun8uaj9l] {
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #737686;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .ihm-tab.active[b-9zun8uaj9l] {
        color: #004ac6;
        border-bottom-color: #004ac6;
    }

.ihm-canvas[b-9zun8uaj9l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

/* Item header */
.ihm-item-header[b-9zun8uaj9l] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ihm-breadcrumb[b-9zun8uaj9l] {
    display: flex;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #505f76;
    margin-bottom: 0.25rem;
}

.ihm-breadcrumb-sep[b-9zun8uaj9l] {
    color: #737686;
}

.ihm-item-title[b-9zun8uaj9l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #004ac6;
    margin: 0;
}

.ihm-item-actions[b-9zun8uaj9l] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ihm-btn-outline[b-9zun8uaj9l], .ihm-btn-primary[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.25rem;
    cursor: pointer;
}

    .ihm-btn-outline .material-symbols-outlined[b-9zun8uaj9l], .ihm-btn-primary .material-symbols-outlined[b-9zun8uaj9l] {
        font-size: 18px;
    }

.ihm-btn-outline[b-9zun8uaj9l] {
    border: 1px solid #c3c6d7;
    background: #ffffff;
    color: #505f76;
}

.ihm-btn-primary[b-9zun8uaj9l] {
    border: none;
    background: #004ac6;
    color: #ffffff;
    opacity: 0.9;
}

/* KPI grid */
.ihm-kpi-grid[b-9zun8uaj9l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.ihm-kpi-card[b-9zun8uaj9l] {
    border: 1px solid #c3c6d7;
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
}

    .ihm-kpi-card.dim[b-9zun8uaj9l] {
        opacity: 0.6;
    }

    .ihm-kpi-card.danger[b-9zun8uaj9l] {
        box-shadow: 0 0 0 1px #ba1a1a inset;
    }

.ihm-kpi-card-top[b-9zun8uaj9l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ihm-kpi-warning[b-9zun8uaj9l] {
    font-size: 18px;
    color: #ba1a1a;
}

.ihm-kpi-label[b-9zun8uaj9l] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #505f76;
    margin: 0 0 0.4rem;
}

.ihm-kpi-value[b-9zun8uaj9l] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.ihm-kpi-card.danger .ihm-kpi-value[b-9zun8uaj9l] {
    color: #ba1a1a;
}

/* Secondary groups */
.ihm-groups-grid[b-9zun8uaj9l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ihm-group-card[b-9zun8uaj9l] {
    border: 1px solid #c3c6d7;
    background: #ffffff;
    border-radius: 0.25rem;
    overflow: hidden;
}

.ihm-group-header[b-9zun8uaj9l] {
    background: #edeef0;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #434655;
}

.ihm-group-body[b-9zun8uaj9l] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ihm-group-body-grid[b-9zun8uaj9l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ihm-field-row[b-9zun8uaj9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8125rem;
}

    .ihm-field-row.dim[b-9zun8uaj9l] {
        opacity: 0.55;
    }

.ihm-field-value[b-9zun8uaj9l] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}

.ihm-param-label[b-9zun8uaj9l] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #737686;
    margin: 0 0 0.25rem;
}

/* Anomaly banner */
.ihm-anomaly[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    background: #ffdad6;
    border: 1px solid #ba1a1a;
}

.ihm-anomaly-icon[b-9zun8uaj9l] {
    background: #ba1a1a;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ihm-anomaly-icon .material-symbols-outlined[b-9zun8uaj9l] {
        color: #fff;
        font-size: 20px;
    }

.ihm-anomaly-text[b-9zun8uaj9l] {
    flex-grow: 1;
}

.ihm-anomaly-title[b-9zun8uaj9l] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #93000a;
    margin: 0;
}

.ihm-anomaly-sub[b-9zun8uaj9l] {
    font-size: 0.75rem;
    color: #93000a;
    opacity: 0.85;
    margin: 0.15rem 0 0;
}

.ihm-anomaly-value[b-9zun8uaj9l] {
    text-align: right;
    flex-shrink: 0;
}

.ihm-anomaly-value-label[b-9zun8uaj9l] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #93000a;
    opacity: 0.7;
    margin: 0;
}

.ihm-anomaly-value-number[b-9zun8uaj9l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ba1a1a;
    margin: 0;
}

/* Transaction history card */
.ihm-txn-card[b-9zun8uaj9l] {
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    overflow: hidden;
}

.ihm-txn-header[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #c3c6d7;
}

    .ihm-txn-header h3[b-9zun8uaj9l] {
        font-size: 0.9375rem;
        font-weight: 700;
        margin: 0;
    }

.ihm-txn-actions[b-9zun8uaj9l] {
    display: flex;
    gap: 0.5rem;
}

.ihm-txn-chip[b-9zun8uaj9l] {
    padding: 0.15rem 0.5rem;
    background: #edeef0;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #505f76;
    font-family: 'JetBrains Mono', monospace;
}

.ihm-txn-chip-btn[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: #edeef0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #505f76;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

    .ihm-txn-chip-btn .material-symbols-outlined[b-9zun8uaj9l] {
        font-size: 15px;
    }

    .ihm-txn-chip-btn:hover:not(:disabled)[b-9zun8uaj9l] {
        border-color: #004ac6;
        color: #004ac6;
        background: #ffffff;
    }

    .ihm-txn-chip-btn:disabled[b-9zun8uaj9l] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ihm-txn-chip-btn--icon[b-9zun8uaj9l] {
    padding: 0.3rem;
}

/* Expand toggle: instead of resizing the Bootstrap modal itself (which fought the library's own
   sizing/centering), the card becomes a fixed fullscreen overlay painted on top of the modal. */
.ihm-txn-card--expanded[b-9zun8uaj9l] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0;
}

    .ihm-txn-card--expanded .wo-txn-table-wrap[b-9zun8uaj9l] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

.ihm-txn-filters[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #c3c6d7;
    background: #f3f4f6;
    flex-wrap: wrap;
}

.ihm-filter-input[b-9zun8uaj9l] {
    border: 1px solid #c3c6d7;
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    color: inherit;
}

.ihm-filter-search[b-9zun8uaj9l] {
    flex-grow: 1;
    min-width: 120px;
}

.ihm-filter-search-btn[b-9zun8uaj9l] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
}

    .ihm-filter-search-btn .material-symbols-outlined[b-9zun8uaj9l] {
        font-size: 16px;
    }

.ihm-txn-badge[b-9zun8uaj9l] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.badge-receipt[b-9zun8uaj9l] {
    background: #eff6ff;
    color: #004ac6;
}

.badge-issue[b-9zun8uaj9l] {
    background: #fff7ed;
    color: #b45309;
}

.badge-adjust[b-9zun8uaj9l] {
    background: #edeef0;
    color: #434655;
}

.ihm-txn-qty-col[b-9zun8uaj9l] {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

    .ihm-txn-qty-col.positive[b-9zun8uaj9l] {
        color: #059669;
    }

    .ihm-txn-qty-col.negative[b-9zun8uaj9l] {
        color: #ba1a1a;
    }

.wo-txn-table-wrap[b-9zun8uaj9l] {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: auto;
}

.wo-txn-table[b-9zun8uaj9l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wo-txn-table th[b-9zun8uaj9l] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid #c3c6d7;
    color: #434655;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #edeef0;
}

.wo-txn-table td[b-9zun8uaj9l] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #c3c6d7;
    text-align: left;
}

/* The By Warehouse/Bin/Batch tabs aren't wrapped in .ihm-canvas, so without this they'd inherit
   ModalCpn's centered .modal-body text-align. */
[b-9zun8uaj9l] .modal-content.modalCpn {
    min-height: 600px;
}

/* Column picker + drag-resize (widths persisted via PageProperties, keyed by column key) */
.ihm-columns-btn[b-9zun8uaj9l] {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
}

/* By Warehouse/Bin/Batch tabs: the "manage columns" trigger is a small gear docked into the
   table's own header row (top-right corner) instead of a full toolbar row above it, so it sits
   flush with -- vertically centered on -- the column headers rather than floating above them. */
.ihm-table-panel[b-9zun8uaj9l] {
    position: relative;
}

.ihm-table-gear-btn[b-9zun8uaj9l] {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #c3c6d7;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    color: #505f76;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.25s ease;
}

    .ihm-table-gear-btn .material-symbols-outlined[b-9zun8uaj9l] {
        font-size: 14px;
        transition: transform 0.35s ease;
    }

    .ihm-table-gear-btn:hover[b-9zun8uaj9l] {
        border-color: #004ac6;
        color: #004ac6;
        box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
        transform: translateY(-1px);
    }

    .ihm-table-gear-btn:hover .material-symbols-outlined[b-9zun8uaj9l] {
        transform: rotate(60deg);
    }

    .ihm-table-gear-btn:active[b-9zun8uaj9l] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
    }

.ihm-resizable-table[b-9zun8uaj9l] {
    table-layout: fixed;
}

    .ihm-resizable-table th[b-9zun8uaj9l], .ihm-resizable-table td[b-9zun8uaj9l] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.75rem;
    }

/* Transaction History cells wrap onto multiple lines instead of truncating; the wrap container
   keeps its max-height scroll and sticky header (see .wo-txn-table-wrap / .wo-txn-table th above). */
.ihm-txn-wrap td[b-9zun8uaj9l] {
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
}
/* /Components/Modals/ItemBomRoutingColumnOrderModal.razor.rz.scp.css */
/* Mirrors ColumnPickerModal.razor.css's .wo-column-list/.wo-column-item look -- Blazor CSS
   isolation scopes that file to ColumnPickerModal.razor only, so identical class names here need
   their own copy. Drag states use .dragging/.wpd-drop-target (not ColumnPickerModal's own
   .dragging/.drop-target-above) because this list is driven by columnDragReorder.js's
   wpdInitRowDragReorder, the same generic helper ItemBomRoutingDetailModal's BOM/Routing row
   reorder uses -- those are the exact class names that JS expects. */
.wo-column-list[b-kfuxjr9k43] {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wo-column-item[b-kfuxjr9k43] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #c3c6d7;
    font-size: 0.85rem;
    color: #191c1e;
}

    .wo-column-item:last-child[b-kfuxjr9k43] {
        border-bottom: none;
    }

    .wo-column-item.dragging[b-kfuxjr9k43] {
        opacity: 0.4;
        background: #e1e2e4;
    }

    .wo-column-item.wpd-drop-target[b-kfuxjr9k43] {
        box-shadow: inset 0 2px 0 0 #004ac6;
    }

.wo-column-drag-handle[b-kfuxjr9k43] {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #737686;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
    touch-action: none;
}

    .wo-column-drag-handle:active[b-kfuxjr9k43] {
        cursor: grabbing;
    }

.wo-column-item-check[b-kfuxjr9k43] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

    .wo-column-item-check span[b-kfuxjr9k43] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ibr-column-order-tab-badge[b-kfuxjr9k43] {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    background: #eef2ff;
    color: #3755c3;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wo-column-item-empty[b-kfuxjr9k43] {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.84rem;
    color: #9aa5b4;
}
/* /Components/Modals/LinkObjectSetupModal.razor.rz.scp.css */
.btn-primary[b-hada365a1r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-secondary[b-hada365a1r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

.lom-editor[b-hada365a1r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.lom-label[b-hada365a1r] {
    font-size: 0.75rem;
    color: #737686;
}

.lom-select[b-hada365a1r] {
    width: 100%;
    font-size: 0.8125rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.lom-params[b-hada365a1r] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lom-param-row[b-hada365a1r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lom-param-index[b-hada365a1r] {
    flex-shrink: 0;
    width: 4.5rem;
    font-size: 0.75rem;
    color: #737686;
}

.lom-param-select[b-hada365a1r] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}
/* /Components/Modals/MappingDetailModal.razor.rz.scp.css */
.mapping-detail-body[b-y733urf612] {
    display: flex;
    flex-direction: column;
    height: 520px; /* ← Cố định chiều cao */
    padding: 0.5rem 0;
    overflow: hidden;
}


.mapping-detail-loading[b-y733urf612] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #94a3b8;
    font-size: 13px;
}

.mapping-detail-empty[b-y733urf612] {
    text-align: center;
    color: #64748b;
    padding: 2rem;
    font-size: 13px;
}

.mapping-detail-table-wrapper[b-y733urf612] {
    flex: 1;
    overflow-x: auto; /* ← Scroll ngang khi nhiều cột */
    overflow-y: auto; /* ← Scroll dọc khi nhiều hàng */
    /* Xóa max-height: 60vh cũ */
}
.mapping-detail-table[b-y733urf612] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Segoe UI', -apple-system, sans-serif;
}

    .mapping-detail-table thead th[b-y733urf612] {
        background: rgba(6, 182, 212, 0.1);
        color: #06b6d4;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(6, 182, 212, 0.2);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
        backdrop-filter: blur(12x); /* ← thêm dòng này */
        -webkit-backdrop-filter: blur(12px);
    }
    .mapping-detail-table tbody tr[b-y733urf612] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.15s;
    }

        .mapping-detail-table tbody tr:hover[b-y733urf612] {
            background: rgba(255, 255, 255, 0.04);
        }

    .mapping-detail-table tbody td[b-y733urf612] {
        padding: 7px 12px;
        white-space: nowrap;
        vertical-align: middle;
    }
.drag-card-metric-btn[b-y733urf612] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
}

    .drag-card-metric-btn:hover[b-y733urf612] {
        border-color: rgba(6, 182, 212, 0.4);
        background: rgba(6, 182, 212, 0.06);
    }

    .drag-card-metric-btn:active[b-y733urf612] {
        background: rgba(6, 182, 212, 0.12);
    }
/* Thêm vào file CSS của MappingDetailModal */

.mapping-detail-footer[b-y733urf612] {
    padding: 8px 12px;
    font-size: 11px;
    color: #475569;
    text-align: right;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .mapping-detail-footer strong[b-y733urf612] {
        color: #94a3b8;
    }

/* Cell variants */
.mapping-detail-table tbody td.cell-mono[b-y733urf612] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 0.03em;
}

.mapping-detail-table tbody td.cell-dim[b-y733urf612] {
    color: #475569;
}

.mapping-detail-table tbody td.cell-highlight[b-y733urf612] {
    color: #06b6d4;
    font-weight: 600;
}

/* Status cell coloring */
.mapping-detail-table tbody td.cell-status[b-y733urf612] {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cell-status-running[b-y733urf612] {
    color: #4ade80;
}

.cell-status-idle[b-y733urf612] {
    color: #fbbf24;
}

.cell-status-waiting[b-y733urf612] {
    color: #94a3b8;
}

.cell-status-done[b-y733urf612],
.cell-status-complete[b-y733urf612] {
    color: #4ade80;
}

.cell-status-error[b-y733urf612] {
    color: #f87171;
}
/* /Components/Modals/MrpAdvancedSearchModal.razor.rz.scp.css */
/* Matches MrpScenarioSetting.razor.css's .mss-input / .mss-lookup-group look
   (Blazor CSS isolation scopes classes per-component, so it can't be reused directly). */
.mas-input[b-kltdhn7czy] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font-size: 0.86rem;
    font-family: inherit;
    border: 1px solid #dde3ef;
    border-radius: 0.375rem;
    background: #fff;
    color: #131b2e;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mas-input:focus[b-kltdhn7czy] {
    border-color: #004ac6;
    box-shadow: 0 0 0 2px rgba(0, 74, 198, 0.12);
}

.mas-input:read-only[b-kltdhn7czy] {
    background: #f4f6fb;
    cursor: not-allowed;
}

.mas-lookup-group[b-kltdhn7czy] {
    display: flex;
    align-items: stretch;
}

.mas-lookup-group .mas-input[b-kltdhn7czy] {
    flex: 1;
    min-width: 0;
    border-radius: 0.375rem 0 0 0.375rem;
    cursor: pointer;
}

.mas-lookup-btn[b-kltdhn7czy] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #dde3ef;
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
    background: #f4f6fb;
    padding: 0 0.6rem;
    cursor: pointer;
}

.mas-lookup-btn .material-symbols-outlined[b-kltdhn7czy] {
    font-size: 1.1rem;
    color: #64748b;
}

.mas-lookup-btn:hover[b-kltdhn7czy] {
    background: #e2e7f0;
}
/* /Components/Modals/MrpBulkPreviewModal.razor.rz.scp.css */
[b-mh0vxdk4qy] .modal-body {
    text-align: left;
}

.mbp-table-wrap[b-mh0vxdk4qy] {
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e2e7f0;
    border-radius: 0.375rem;
}

.mbp-table[b-mh0vxdk4qy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.mbp-table th[b-mh0vxdk4qy] {
    position: sticky;
    top: 0;
    background: #eaedff;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #434655;
    border-bottom: 1px solid #e2e7f0;
}

.mbp-table td[b-mh0vxdk4qy] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
}

.mbp-input[b-mh0vxdk4qy] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid #dde3ef;
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.8rem;
}

.mbp-input:focus[b-mh0vxdk4qy] {
    border-color: #004ac6;
    outline: none;
}

.mbp-count[b-mh0vxdk4qy] {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
/* /Components/Modals/MrpDocumentOriginModal.razor.rz.scp.css */
.mdo-table-wrap[b-ieai9payg8] {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e2e7f0;
    border-radius: 0.375rem;
}

/* ModalCpn sets text-align:center inline on .modal-body, which beats any external CSS rule of
   equal specificity -- so alignment has to be set on the table itself, not the modal-body. */
.mdo-table[b-ieai9payg8] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.mdo-table th[b-ieai9payg8] {
    position: sticky;
    top: 0;
    background: #eaedff;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #434655;
    border-bottom: 1px solid #e2e7f0;
}

.mdo-table td[b-ieai9payg8] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
    overflow-wrap: break-word;
}

.mdo-table tbody tr:hover[b-ieai9payg8] {
    background: #f8fafc;
}

.mdo-col-resize-handle[b-ieai9payg8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

.mdo-col-resize-handle[b-ieai9payg8]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: #c4cee3;
    opacity: 0.7;
}

.mdo-col-resize-handle:hover[b-ieai9payg8] {
    background: #004ac6;
    opacity: 0.35;
}

.mdo-col-resize-handle:hover[b-ieai9payg8]::after {
    background: #004ac6;
    opacity: 1;
}

/* ── Tree guides ─────────────────────────────
   Drawn as absolutely-positioned lines spanning the full cell height (not glyphs baked into
   text), so they stay a continuous, unbroken line even on rows that wrap to multiple lines
   because of a long Description/Information value in a neighboring column. ── */
.mdo-tree-cell[b-ieai9payg8] {
    position: relative;
}

.mdo-tree-guides[b-ieai9payg8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.mdo-tree-line[b-ieai9payg8] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: #98a4bf;
}

.mdo-tree-elbow-top[b-ieai9payg8] {
    position: absolute;
    top: 0;
    height: 50%;
    width: 1.5px;
    background: #98a4bf;
}

.mdo-tree-elbow-h[b-ieai9payg8] {
    position: absolute;
    top: 50%;
    width: 11px;
    height: 1.5px;
    background: #98a4bf;
}

.mdo-tree-elbow-bottom[b-ieai9payg8] {
    position: absolute;
    top: 50%;
    bottom: 0;
    width: 1.5px;
    background: #98a4bf;
}

.mdo-tree-content[b-ieai9payg8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mdo-tree-icon[b-ieai9payg8] {
    font-size: 15px;
    flex-shrink: 0;
}

.mdo-tree-icon--root[b-ieai9payg8] {
    color: #004ac6;
}

.mdo-tree-icon--leaf[b-ieai9payg8] {
    color: #94a3b8;
}

.mdo-tree-label[b-ieai9payg8] {
    font-weight: 600;
    color: #1f2937;
}

.mdo-tree-label--root[b-ieai9payg8] {
    font-weight: 700;
    color: #004ac6;
}
/* /Components/Modals/RightSideModal.razor.rz.scp.css */
.preview-modal-content[b-ueynp3pkqk] {
    position: relative;
}

.preview-modal-title-group[b-ueynp3pkqk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

    .preview-modal-content.resizing[b-ueynp3pkqk] {
        transition: none !important;
    }

.preview-modal-resizer[b-ueynp3pkqk] {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background-color .15s ease;
}

    .preview-modal-resizer:hover[b-ueynp3pkqk] {
        background: rgba(44, 74, 101, 0.25);
    }

.preview-modal-content.resizing .preview-modal-resizer[b-ueynp3pkqk] {
    background: rgba(44, 74, 101, 0.4);
}

.preview-modal-resizer[b-ueynp3pkqk]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 36px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: background-color .15s ease, height .15s ease;
}

.preview-modal-resizer:hover[b-ueynp3pkqk]::after {
    background: #2c4a65;
    height: 48px;
}

.preview-modal-content.resizing .preview-modal-resizer[b-ueynp3pkqk]::after {
    background: #2c4a65;
    height: 48px;
}
/* /Components/Modals/SAPUI/AdaptHeaderFieldModalSAP.razor.rz.scp.css */
.hf-toolbar[b-a0tjw91shj] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.hf-input[b-a0tjw91shj] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
}

/* Shared grid so the header row and data rows line up - matches column order in the markup:
   show, field name, category, order, width. Field name gets the flexible 1fr share (with a floor
   so a normal-length field code never gets squeezed down to unreadable/truncated) - Category is
   the only other column allowed to give ground (down to its own floor) before that happens, since
   Show/Order/Width are all fixed-width controls (checkbox/number inputs) that don't benefit from
   extra room and shouldn't shrink below what they need either. */
.hf-list-header[b-a0tjw91shj],
.hf-list-row[b-a0tjw91shj] {
    display: grid;
    grid-template-columns: 3rem minmax(11rem, 1fr) minmax(6rem, 10rem) 4rem 6rem;
    align-items: center;
    gap: 0.6rem;
}

.hf-list-header[b-a0tjw91shj] {
    padding: 0 0.75rem 0.5rem;
    border-bottom: 1px solid #d9d9d9;
}

.hf-list-header-cell[b-a0tjw91shj] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #737686;
}

.hf-list-container[b-a0tjw91shj] {
    max-height: calc(90vh - 18rem);
    overflow-y: auto;
}

.hf-list-row[b-a0tjw91shj] {
    min-height: 2.4rem;
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
}

.hf-col-check input[b-a0tjw91shj] {
    width: 15px;
    height: 15px;
    accent-color: #0070f2;
    cursor: pointer;
}

.hf-col-name[b-a0tjw91shj] {
    font-size: 0.8125rem;
    font-weight: 600;
    /* Wraps instead of truncating - the field code column now has a guaranteed minimum width
       (see grid-template-columns), so this only ever wraps on an unusually long code, and
       min-height on .hf-list-row lets the row grow to fit rather than clipping it. */
    white-space: normal;
    word-break: break-word;
}

.hf-list-select[b-a0tjw91shj] {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d4dadf;
    border-radius: 0.25rem;
    min-width: 0;
}

.hf-list-number[b-a0tjw91shj] {
    width: 100%;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d4dadf;
    border-radius: 0.25rem;
}

.hf-col-width:not(:disabled)[b-a0tjw91shj] {
    border-color: #0070f2;
    color: #0070f2;
}

.hf-col-width:disabled[b-a0tjw91shj] {
    background: #f5f7fb;
    color: #b3b8c2;
}
/* /Components/Modals/SAPUI/BatchSerialNumberModal.razor.rz.scp.css */
.sap_inner-card[b-t8aeztixni]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-t8aeztixni]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-t8aeztixni]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-t8aeztixni]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-t8aeztixni]{overflow-x:auto;width:100%}
.sap-table[b-t8aeztixni]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-t8aeztixni],.sap-table td[b-t8aeztixni]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-t8aeztixni],.sap-table td:first-child[b-t8aeztixni]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-t8aeztixni],.sap-table td:nth-child(2)[b-t8aeztixni]{min-width:50px;width:50px;text-align:center}
.sap_input[b-t8aeztixni]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-t8aeztixni]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-t8aeztixni]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-t8aeztixni]{position:relative}
.sap_dropdown-menu[b-t8aeztixni]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-t8aeztixni]{display:block}
.sap_dropdown-item[b-t8aeztixni]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-t8aeztixni]{margin-top:1rem}
.sap_btn-action[b-t8aeztixni],.sap_btn[b-t8aeztixni]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-t8aeztixni]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-t8aeztixni]{display:flex;gap:.5rem;align-items:center}
.sap_btn-primary[b-t8aeztixni] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

/* Table Input Styles */
.sap_table-input[b-t8aeztixni] {
    padding: 0.4rem 0.5rem;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    font-size: 0.875rem;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sap_table-input:focus[b-t8aeztixni] {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.sap_table-input:disabled[b-t8aeztixni],
.sap_table-input[disabled][b-t8aeztixni] {
    background-color: #f5f5f5;
    color: #6c757d;
    cursor: not-allowed;
}

.sap_table-input-readonly[b-t8aeztixni] {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
}

.sap_table-input-editable[b-t8aeztixni] {
    background-color: #fff;
    border: 1px solid #d0d0d0;
}

.sap_table-input-number[b-t8aeztixni] {
    text-align: right;
    padding: 0.4rem 0.5rem;
}

.sap_table-input-text[b-t8aeztixni] {
    text-align: left;
    padding: 0.4rem 0.5rem;
}
/* /Components/Modals/SAPUI/DIApprovalRequestModal.razor.rz.scp.css */
.di-approval-user-item:hover[b-0bbi0iugdd] {
    background-color: #f0f4ff;
}
/* /Components/Modals/SmallModal/SimpleChooseOption.razor.rz.scp.css */
.simple-choose-option-modal[b-4gcqfpf31c] {
    min-width: 450px;
    max-width: 600px;
}

.simple-choose-option-header[b-4gcqfpf31c] {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    background-color: #374d61;
    padding: 0.3rem 2rem;
    height: 2.25rem;
}

.simple-choose-option-body[b-4gcqfpf31c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    min-height: 150px;
}

.simple-choose-option-list[b-4gcqfpf31c] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.custom-radio-label[b-4gcqfpf31c] {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.75rem;
    user-select: none;
    transition: opacity 0.2s ease;
}

.custom-radio-label:hover[b-4gcqfpf31c] {
    opacity: 0.8;
}

.custom-radio-input[b-4gcqfpf31c] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.custom-radio-input:checked[b-4gcqfpf31c] {
    border-color: #3b82f6;
    background: radial-gradient(circle, #3b82f6 40%, transparent 40%);
}

.custom-radio-input:hover:not(:checked)[b-4gcqfpf31c] {
    border-color: #9ca3af;
}

.custom-radio-circle[b-4gcqfpf31c] {
    display: none;
}

.custom-radio-text[b-4gcqfpf31c] {
    font-size: 0.9375rem;
    color: #4a4a4a;
    font-weight: 500;
}

.simple-choose-option-footer[b-4gcqfpf31c] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem;
}

.simple-choose-option-empty[b-4gcqfpf31c] {
    text-align: center;
    padding: 1rem;
    color: #6c757d;
    margin: 0;
}
/* /Components/Modals/SortAdaptFilterModal.razor.rz.scp.css */
.search-item.dragging[b-crle4ue2uw] {
    opacity: 0.4;
    background: #e1e2e4;
}

.search-item.wpd-drop-target[b-crle4ue2uw] {
    box-shadow: inset 0 2px 0 0 #004ac6;
}

.wo-column-drag-handle[b-crle4ue2uw] {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #737686;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
    touch-action: none;
}

    .wo-column-drag-handle:active[b-crle4ue2uw] {
        cursor: grabbing;
    }

    .wo-column-drag-handle.disabled[b-crle4ue2uw] {
        color: #c3c6d7;
        cursor: not-allowed;
    }
/* /Components/Modals/StructureReportChartNode.razor.rz.scp.css */
/* Absolutely positioned at StructureReportNode.ChartLeft/ChartTop (set server-side by
   ComputeChartLayout, in "world" px that stay constant across zoom levels -- see
   StructureReportModal.razor's srm-chart-canvas transform:scale). structureReportChartConnectors.js
   drags this by rewriting left/top directly and redraws the SVG connector on every move; the width
   and height here must stay in sync with StructureReportNode.ChartBlockWidth/ChartBlockHeight, which
   the layout math uses to space columns/rows apart. */
.srm-chart-block-wrap[b-x0xgnf1emu] {
    position: absolute;
    width: 170px;
    height: 84px;
    cursor: grab;
    z-index: 1;
    user-select: none;
}

/* Routing (OP) blocks render smaller than BOM/parent blocks, stacked vertically above the item
   they feed into -- see StructureReportNode.ChartRoutingBlockWidth/ChartRoutingBlockHeight, which
   the layout math (ComputeChartLayout) uses to space/center them and must stay in sync with this. */
.srm-chart-block-wrap[data-is-routing="1"][b-x0xgnf1emu] {
    width: 130px;
    height: 52px;
}

.srm-chart-block-wrap--dragging[b-x0xgnf1emu] {
    z-index: 10;
    cursor: grabbing;
}

    .srm-chart-block-wrap--dragging .srm-chart-block[b-x0xgnf1emu] {
        box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
    }

.srm-chart-block[b-x0xgnf1emu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    overflow: hidden;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    box-sizing: border-box;
}

.srm-chart-block--bom[b-x0xgnf1emu] {
    border-color: #86efac;
    background: #f0fdf4;
}

.srm-chart-block--routing[b-x0xgnf1emu] {
    border-color: #fde68a;
    background: #fffbeb;
    gap: 0.05rem;
    padding: 0.3rem 0.6rem;
}

.srm-chart-block-badge[b-x0xgnf1emu] {
    align-self: flex-start;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

.srm-chart-block--routing .srm-chart-block-badge[b-x0xgnf1emu] {
    font-size: 0.55rem;
    padding: 0.02rem 0.3rem;
}

.srm-chart-block--routing .srm-chart-block-label[b-x0xgnf1emu] {
    font-size: 0.72rem;
}

.srm-chart-block--routing .srm-chart-block-code[b-x0xgnf1emu],
.srm-chart-block--routing .srm-chart-block-qty[b-x0xgnf1emu] {
    font-size: 0.64rem;
}

.srm-chart-block--bom .srm-chart-block-badge[b-x0xgnf1emu] {
    background: #dcfce7;
    color: #166534;
}

.srm-chart-block--routing .srm-chart-block-badge[b-x0xgnf1emu] {
    background: #fef3c7;
    color: #92400e;
}

.srm-chart-block-label[b-x0xgnf1emu] {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.82rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srm-chart-block-code[b-x0xgnf1emu],
.srm-chart-block-qty[b-x0xgnf1emu] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #6b7280;
}

/* /Components/Modals/StructureReportModal.razor.rz.scp.css */
/* Not defined anywhere else this component can rely on -- see CrossReferenceModal.razor.css. */
.btn-secondary[b-gafa9gqcyc] {
    background: #f3f4f6;
    color: #505f76;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-secondary:hover[b-gafa9gqcyc] {
        background: #e7e8ea;
    }

/* ModalCpn sets text-align:center inline on .modal-body -- see CrossReferenceModal.razor.css. */
.srm-tabs[b-gafa9gqcyc] {
    display: flex;
    gap: 0.25rem;
    text-align: left;
    border-bottom: 1px solid #e2e7f0;
    margin-bottom: 0.75rem;
}

.srm-tab[b-gafa9gqcyc] {
    border: none;
    background: transparent;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .srm-tab:hover[b-gafa9gqcyc] {
        color: #374151;
    }

.srm-tab--active[b-gafa9gqcyc] {
    color: #004ac6;
    border-bottom-color: #004ac6;
}

.srm-fullscreen-btn[b-gafa9gqcyc] {
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #c3c6d7;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    color: #505f76;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

    .srm-fullscreen-btn .material-symbols-outlined[b-gafa9gqcyc] {
        font-size: 16px;
    }

    .srm-fullscreen-btn:hover[b-gafa9gqcyc] {
        border-color: #004ac6;
        color: #004ac6;
    }

/* Expand toggle: instead of resizing the Bootstrap modal itself (which fights the library's own
   sizing/centering -- see InventoryHistoryModal.razor.css's .ihm-txn-card--expanded), srm-panel
   becomes a fixed fullscreen overlay painted on top of the modal. srm-tabs stays its natural
   height and the active view (srm-list-panel/srm-chart-panel) grows to fill the rest. */
.srm-panel--expanded[b-gafa9gqcyc] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 1rem;
}

    .srm-panel--expanded .srm-tabs[b-gafa9gqcyc] {
        flex: 0 0 auto;
    }

    .srm-panel--expanded .srm-list-panel[b-gafa9gqcyc],
    .srm-panel--expanded .srm-chart-panel[b-gafa9gqcyc] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .srm-panel--expanded .srm-tree-wrap[b-gafa9gqcyc],
    .srm-panel--expanded .srm-chart-wrap[b-gafa9gqcyc] {
        max-height: none;
        height: 100%;
    }

.srm-list-panel[b-gafa9gqcyc] {
    position: relative;
}

.srm-gear-btn[b-gafa9gqcyc] {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #c3c6d7;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    color: #505f76;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.25s ease;
}

    .srm-gear-btn .material-symbols-outlined[b-gafa9gqcyc] {
        font-size: 16px;
        transition: transform 0.35s ease;
    }

    .srm-gear-btn:hover[b-gafa9gqcyc] {
        border-color: #004ac6;
        color: #004ac6;
    }

    .srm-gear-btn:hover .material-symbols-outlined[b-gafa9gqcyc] {
        transform: rotate(60deg);
    }

.srm-tree-wrap[b-gafa9gqcyc],
.srm-chart-wrap[b-gafa9gqcyc] {
    max-height: 78vh;
    overflow: auto;
    text-align: left;
    border: 1px solid #e2e7f0;
    border-radius: 0.375rem;
}

.srm-chart-wrap[b-gafa9gqcyc] {
    overflow-x: auto;
    padding: 0.5rem;
    cursor: grab;
}

.srm-chart-panel[b-gafa9gqcyc] {
    position: relative;
}

.srm-chart-toolbar[b-gafa9gqcyc] {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid #c3c6d7;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    padding: 0.15rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

.srm-chart-zoom-btn[b-gafa9gqcyc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #505f76;
    cursor: pointer;
}

    .srm-chart-zoom-btn .material-symbols-outlined[b-gafa9gqcyc] {
        font-size: 16px;
    }

    .srm-chart-zoom-btn:hover[b-gafa9gqcyc] {
        background: #eaedff;
        color: #004ac6;
    }

.srm-chart-zoom-btn--active[b-gafa9gqcyc] {
    background: #eaedff;
    color: #004ac6;
}

.srm-chart-zoom-reset[b-gafa9gqcyc] {
    width: auto;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Explicit width/height (from StructureReportNode.ComputeChartLayout, not width:100%) so a wide/
   tall tree pushes srm-chart-wrap into scroll instead of squashing the blocks -- position:relative
   anchors srm-chart-connectors, and transform-origin:0 0 keeps block ChartLeft/ChartTop (unscaled
   "world" px) lining up with the SVG's own coordinates at every zoom level. The dot grid is pure
   background-image (scales/pans for free along with the canvas itself, no JS needed) -- it's
   there only to help gauge spacing/alignment while dragging blocks around.*/
.srm-chart-canvas[b-gafa9gqcyc] {
    position: relative;
    transform-origin: 0 0;
    background-color: #fbfcfe;
    background-image: radial-gradient(circle, #d6dbe8 1px, transparent 1px);
    background-size: 24px 24px;
}

.srm-chart-connectors[b-gafa9gqcyc] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

/* srmChartSyncConnectors (structureReportChartConnectors.js) creates these <path> elements
   directly via document.createElementNS, so they never receive Blazor's CSS-isolation scope
   attribute -- a scoped rule here would silently never match them. Their fill/stroke are set as
   plain SVG attributes in JS instead; nothing to style from this file. */

.srm-tree-wrap[b-gafa9gqcyc]::-webkit-scrollbar,
.srm-chart-wrap[b-gafa9gqcyc]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.srm-tree-wrap[b-gafa9gqcyc]::-webkit-scrollbar-track,
.srm-chart-wrap[b-gafa9gqcyc]::-webkit-scrollbar-track {
    background: transparent;
}

.srm-tree-wrap[b-gafa9gqcyc]::-webkit-scrollbar-thumb,
.srm-chart-wrap[b-gafa9gqcyc]::-webkit-scrollbar-thumb {
    background: #c3c6d7;
    border-radius: 3px;
}

    .srm-tree-wrap[b-gafa9gqcyc]::-webkit-scrollbar-thumb:hover,
    .srm-chart-wrap[b-gafa9gqcyc]::-webkit-scrollbar-thumb:hover {
        background: #9aa0b4;
    }

/* table-layout:fixed + an explicit width (set inline from TreeTableWidth, not width:100%) so
   resizing a column never gets redistributed across the others, and the table can outgrow
   srm-tree-wrap -- that's what makes srm-tree-wrap's overflow:auto scroll horizontally. */
.srm-tree-table[b-gafa9gqcyc] {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
}

.srm-tree-table thead th[b-gafa9gqcyc] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eaedff;
    text-align: left;
    padding: 0.5rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #434655;
    border-bottom: 1px solid #e2e7f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srm-col-resize-handle[b-gafa9gqcyc] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

    .srm-col-resize-handle[b-gafa9gqcyc]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 16px;
        transform: translate(-50%, -50%);
        border-radius: 1px;
        background: #c4cee3;
        opacity: 0.7;
    }

    .srm-col-resize-handle:hover[b-gafa9gqcyc] {
        background: #004ac6;
        opacity: 0.35;
    }

    .srm-col-resize-handle:hover[b-gafa9gqcyc]::after {
        background: #004ac6;
        opacity: 1;
    }
/* /Components/Modals/StructureReportParamModal.razor.rz.scp.css */
.srp-row[b-d130ifqujr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.srp-label[b-d130ifqujr] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.srp-input[b-d130ifqujr] {
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

    .srp-input:focus[b-d130ifqujr] {
        outline: none;
        border-color: #004ac6;
    }

    .srp-input:read-only[b-d130ifqujr] {
        background: #f3f4f6;
        color: #6b7280;
    }

.btn-primary[b-d130ifqujr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-d130ifqujr] {
        background: #2563eb;
    }

    .btn-primary:active[b-d130ifqujr] {
        transform: scale(0.96);
    }

.btn-secondary[b-d130ifqujr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-secondary:hover[b-d130ifqujr] {
        background: #f3f4f6;
    }
/* /Components/Modals/StructureReportTreeNode.razor.rz.scp.css */
.srm-tree-row[b-dm151bon6h] {
    cursor: pointer;
    font-size: 0.85rem;
}

    .srm-tree-row:hover[b-dm151bon6h] {
        background: #f3f4f6;
    }

.srm-tree-cell[b-dm151bon6h] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
    font-size: 0.85rem;
}

.srm-tree-cell--step[b-dm151bon6h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.srm-tree-toggle[b-dm151bon6h] {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.75rem;
}

.srm-tree-toggle--leaf[b-dm151bon6h] {
    visibility: hidden;
}

.srm-tree-icon[b-dm151bon6h] {
    flex-shrink: 0;
}

.srm-tree-code[b-dm151bon6h] {
    font-weight: 600;
    color: #1f2937;
}
/* /Components/Modals/TrainingFaceDataModal.razor.rz.scp.css */
.spin-animation[b-msq118ky7g] {
    animation: spin-b-msq118ky7g 1s linear infinite;
}

@keyframes spin-b-msq118ky7g {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modals/ViewImageModal.razor.rz.scp.css */
/* /Components/Modals/WOColumnColorRuleModal.razor.rz.scp.css */
.btn-primary[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-n9v2s3vtx7] {
        background: #2563eb;
    }

    .btn-primary:active[b-n9v2s3vtx7] {
        transform: scale(0.96);
    }

    .btn-primary:disabled[b-n9v2s3vtx7] {
        background: #c3c6d7;
        cursor: not-allowed;
    }

        .btn-primary:disabled:active[b-n9v2s3vtx7] {
            transform: none;
        }

.btn-secondary[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-n9v2s3vtx7] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-n9v2s3vtx7] {
        transform: scale(0.96);
    }

.wo-mapping-input[b-n9v2s3vtx7] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-mapping-row-btn[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
    padding: 0.35rem;
    transition: color .2s, border-color .2s;
}

    .wo-mapping-row-btn:hover[b-n9v2s3vtx7] {
        border-color: #004ac6;
        color: #004ac6;
    }

.wo-mapping-add-btn[b-n9v2s3vtx7] {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.wo-colorrule-editor[b-n9v2s3vtx7] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.wo-colorrule-type-hint[b-n9v2s3vtx7] {
    font-size: 0.75rem;
    color: #737686;
    font-style: italic;
}

.wo-colorrule-operator-hint[b-n9v2s3vtx7] {
    font-size: 0.7rem;
    color: #737686;
    font-style: italic;
}

.wo-colorrule-row[b-n9v2s3vtx7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #c3c6d7;
}

    .wo-colorrule-row:last-of-type[b-n9v2s3vtx7] {
        border-bottom: none;
        padding-bottom: 0;
    }

.wo-colorrule-row-main[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-colorrule-label[b-n9v2s3vtx7] {
    font-size: 0.75rem;
    color: #737686;
    white-space: nowrap;
}

.wo-colorrule-operator-select[b-n9v2s3vtx7] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-colorrule-row-values[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-colorrule-and[b-n9v2s3vtx7] {
    font-size: 0.75rem;
    color: #737686;
    white-space: nowrap;
}

.wo-mapping-input.invalid[b-n9v2s3vtx7] {
    border-color: #dc3545;
    background: #fff2f2;
}

.wo-colorrule-error[b-n9v2s3vtx7] {
    font-size: 0.7rem;
    color: #dc3545;
    margin-top: -0.2rem;
}

.wo-colorrule-style-row[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-colorrule-style-btn[b-n9v2s3vtx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.8125rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
}

    .wo-colorrule-style-btn:hover[b-n9v2s3vtx7],
    .wo-colorrule-style-btn.active[b-n9v2s3vtx7] {
        border-color: #004ac6;
        color: #004ac6;
    }

.wo-colorrule-color-group[b-n9v2s3vtx7] {
    display: flex;
    flex: 1;
    min-width: 0;
}

.wo-colorrule-hex-input[b-n9v2s3vtx7] {
    flex: 0 0 5.5rem;
    min-width: 0;
    text-transform: uppercase;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wo-colorrule-code-input[b-n9v2s3vtx7] {
    flex: 1;
    min-width: 0;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wo-colorrule-color-group input:focus[b-n9v2s3vtx7] {
    position: relative;
    z-index: 1;
}
/* /Components/Modals/WOColumnConditionDefaultValueModal.razor.rz.scp.css */
.btn-primary[b-obxg5ryugh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-obxg5ryugh] {
        background: #2563eb;
    }

    .btn-primary:active[b-obxg5ryugh] {
        transform: scale(0.96);
    }

.btn-secondary[b-obxg5ryugh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-obxg5ryugh] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-obxg5ryugh] {
        transform: scale(0.96);
    }

.wo-conditiondefault-editor[b-obxg5ryugh] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.wo-conditiondefault-allowedit-row[b-obxg5ryugh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #191c1e;
    cursor: pointer;
}

.wo-conditiondefault-label[b-obxg5ryugh] {
    font-size: 0.75rem;
    color: #737686;
}

.wo-conditiondefault-editor-wrap[b-obxg5ryugh] {
    border-radius: 0.25rem;
    overflow: hidden;
}

.wo-conditiondefault-example[b-obxg5ryugh] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    background: #f5f7fb;
    border: 1px solid #e2e6ee;
    border-radius: 0.25rem;
}

.wo-conditiondefault-example-code[b-obxg5ryugh] {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.75rem;
    color: #0b3d91;
    background: #fff;
    border: 1px solid #d4dadf;
    border-radius: 0.2rem;
    padding: 0.35rem 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.wo-conditiondefault-hint[b-obxg5ryugh] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.7rem;
    color: #737686;
    line-height: 1.5;
}

    .wo-conditiondefault-hint li + li[b-obxg5ryugh] {
        margin-top: 0.3rem;
    }

    .wo-conditiondefault-hint code[b-obxg5ryugh] {
        font-family: "Consolas", "Courier New", monospace;
        background: #fff;
        border: 1px solid #d4dadf;
        border-radius: 0.15rem;
        padding: 0 0.2rem;
        color: #0b3d91;
    }
/* /Components/Modals/WOColumnIconRuleModal.razor.rz.scp.css */
.btn-primary[b-xpglpj98uj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-xpglpj98uj] {
        background: #2563eb;
    }

    .btn-primary:active[b-xpglpj98uj] {
        transform: scale(0.96);
    }

    .btn-primary:disabled[b-xpglpj98uj] {
        background: #c3c6d7;
        cursor: not-allowed;
    }

        .btn-primary:disabled:active[b-xpglpj98uj] {
            transform: none;
        }

.btn-secondary[b-xpglpj98uj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-xpglpj98uj] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-xpglpj98uj] {
        transform: scale(0.96);
    }

.wo-mapping-input[b-xpglpj98uj] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-mapping-row-btn[b-xpglpj98uj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
    padding: 0.35rem;
    transition: color .2s, border-color .2s;
}

    .wo-mapping-row-btn:hover[b-xpglpj98uj] {
        border-color: #004ac6;
        color: #004ac6;
    }

.wo-mapping-add-btn[b-xpglpj98uj] {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.wo-mapping-source-toggle[b-xpglpj98uj] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.wo-mapping-type-btn[b-xpglpj98uj] {
    padding: 0.35rem 0.75rem;
}

.wo-mapping-type-btn.active[b-xpglpj98uj] {
    border-color: #004ac6;
    color: #004ac6;
}

.wo-mapping-icon-picker[b-xpglpj98uj] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wo-mapping-icon-preview[b-xpglpj98uj] {
    height: 24px;
    width: 24px;
    object-fit: contain;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
}

.wo-colorrule-editor[b-xpglpj98uj] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.wo-colorrule-type-hint[b-xpglpj98uj] {
    font-size: 0.75rem;
    color: #737686;
    font-style: italic;
}

.wo-colorrule-operator-hint[b-xpglpj98uj] {
    font-size: 0.7rem;
    color: #737686;
    font-style: italic;
}

.wo-colorrule-row[b-xpglpj98uj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #c3c6d7;
}

    .wo-colorrule-row:last-of-type[b-xpglpj98uj] {
        border-bottom: none;
        padding-bottom: 0;
    }

.wo-colorrule-row-main[b-xpglpj98uj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-colorrule-label[b-xpglpj98uj] {
    font-size: 0.75rem;
    color: #737686;
    white-space: nowrap;
}

.wo-colorrule-operator-select[b-xpglpj98uj] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-colorrule-row-values[b-xpglpj98uj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-colorrule-and[b-xpglpj98uj] {
    font-size: 0.75rem;
    color: #737686;
    white-space: nowrap;
}

.wo-colorrule-error[b-xpglpj98uj] {
    font-size: 0.7rem;
    color: #dc3545;
    margin-top: -0.2rem;
}

.wo-iconrule-sql-textarea[b-xpglpj98uj] {
    width: 100%;
    min-height: 3.5rem;
    resize: vertical;
    font-family: inherit;
}

/* .woColumnIconRuleModal .modal-dialog/-body positioning lives in the global management_wo.css
   instead of here - see that file's own comment on why a scoped .razor.css selector can't reach
   ModalCpn's nested .modal-dialog without ::deep. */
/* /Components/Modals/WOColumnMappingModal.razor.rz.scp.css */
.btn-primary[b-fe7ivykgj1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-fe7ivykgj1] {
        background: #2563eb;
    }

    .btn-primary:active[b-fe7ivykgj1] {
        transform: scale(0.96);
    }

.btn-secondary[b-fe7ivykgj1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-fe7ivykgj1] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-fe7ivykgj1] {
        transform: scale(0.96);
    }

[b-fe7ivykgj1] #woColumnMappingModal .modal-dialog {
    position: fixed;
    top: 1.75rem;
    left: calc(50% + 300px);
    margin: 0;
    max-height: calc(100vh - 3.5rem);
}

[b-fe7ivykgj1] #woColumnMappingModal .modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

.wo-mapping-editor[b-fe7ivykgj1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.wo-mapping-source-toggle[b-fe7ivykgj1] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.wo-mapping-type-btn[b-fe7ivykgj1] {
    padding: 0.35rem 0.75rem;
}

.wo-mapping-sql-textarea[b-fe7ivykgj1] {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    font-family: inherit;
}

.wo-mapping-sql-hint[b-fe7ivykgj1] {
    font-size: 0.7rem;
    color: #737686;
}

.wo-mapping-row[b-fe7ivykgj1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-mapping-input[b-fe7ivykgj1] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-mapping-row-btn[b-fe7ivykgj1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
    padding: 0.35rem;
    transition: color .2s, border-color .2s;
}

    .wo-mapping-row-btn:hover[b-fe7ivykgj1] {
        border-color: #004ac6;
        color: #004ac6;
    }

.wo-mapping-add-btn[b-fe7ivykgj1] {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.wo-mapping-type-btn.active[b-fe7ivykgj1] {
    border-color: #004ac6;
    color: #004ac6;
}

.wo-mapping-icon-picker[b-fe7ivykgj1] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wo-mapping-icon-preview[b-fe7ivykgj1] {
    height: 24px;
    width: 24px;
    object-fit: contain;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
}

.wo-mapping-default-row[b-fe7ivykgj1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #c3c6d7;
}

.wo-mapping-default-label[b-fe7ivykgj1] {
    font-size: 0.75rem;
    color: #737686;
}

.wo-mapping-checkbox-row-label[b-fe7ivykgj1] {
    flex-shrink: 0;
    width: 4.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
}
/* /Components/Modals/WOColumnPopoverModal.razor.rz.scp.css */
.btn-primary[b-noqi9ymtxp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-noqi9ymtxp] {
        background: #2563eb;
    }

    .btn-primary:active[b-noqi9ymtxp] {
        transform: scale(0.96);
    }

.btn-secondary[b-noqi9ymtxp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-noqi9ymtxp] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-noqi9ymtxp] {
        transform: scale(0.96);
    }

.wo-popover-editor[b-noqi9ymtxp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.wo-popover-allow-row[b-noqi9ymtxp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #191c1e;
    cursor: pointer;
}

.wo-popover-label[b-noqi9ymtxp] {
    font-size: 0.75rem;
    color: #737686;
}

.wo-popover-type-select[b-noqi9ymtxp] {
    font-size: 0.8125rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d4dadf;
    border-radius: 0.25rem;
    background: #fff;
    color: #191c1e;
}

.wo-popover-hint[b-noqi9ymtxp] {
    font-size: 0.75rem;
    color: #737686;
    line-height: 1.4;
}
/* /Components/Modals/WOColumnTextStyleModal.razor.rz.scp.css */
.btn-primary[b-607mug408o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #004ac6;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-primary:hover[b-607mug408o] {
        background: #2563eb;
    }

    .btn-primary:active[b-607mug408o] {
        transform: scale(0.96);
    }

.btn-secondary[b-607mug408o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: #f3f4f6;
    color: #505f76;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .btn-secondary:hover[b-607mug408o] {
        background: #e7e8ea;
    }

    .btn-secondary:active[b-607mug408o] {
        transform: scale(0.96);
    }

[b-607mug408o] #woColumnTextStyleModal .modal-dialog {
    position: fixed;
    top: 1.75rem;
    left: calc(50% + 300px);
    margin: 0;
    max-height: calc(100vh - 3.5rem);
}

.wo-textstyle-editor[b-607mug408o] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: left;
}

.wo-textstyle-label[b-607mug408o] {
    display: block;
    font-size: 0.75rem;
    color: #737686;
    margin-bottom: 0.35rem;
}

.wo-textstyle-btn-row[b-607mug408o] {
    display: flex;
    gap: 0.4rem;
}

.wo-textstyle-btn[b-607mug408o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #737686;
    cursor: pointer;
}

    .wo-textstyle-btn:hover[b-607mug408o],
    .wo-textstyle-btn.active[b-607mug408o] {
        border-color: #004ac6;
        color: #004ac6;
    }

.wo-textstyle-color-row[b-607mug408o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wo-mapping-input[b-607mug408o] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-textstyle-color-group[b-607mug408o] {
    display: flex;
    flex: 1;
    min-width: 0;
}

.wo-textstyle-hex-input[b-607mug408o] {
    flex: 0 0 5.5rem;
    min-width: 0;
    text-transform: uppercase;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wo-textstyle-code-input[b-607mug408o] {
    flex: 1;
    min-width: 0;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wo-textstyle-color-group input:focus[b-607mug408o] {
    position: relative;
    z-index: 1;
}

.wo-textstyle-hint[b-607mug408o] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: #9096a3;
}
/* /Components/Modals/WOMaterialRequirementPanel.razor.rz.scp.css */
.wo-txn-panel[b-4wyj6fz3qk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.wo-txn-toolbar[b-4wyj6fz3qk] {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.wo-txn-toolbar-zone[b-4wyj6fz3qk] {
    display: flex;
    gap: 0.5rem;
}

.wo-txn-table-wrap[b-4wyj6fz3qk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant) transparent;
}

    .wo-txn-table-wrap[b-4wyj6fz3qk]::-webkit-scrollbar {
        width: 6px;
    }

    .wo-txn-table-wrap[b-4wyj6fz3qk]::-webkit-scrollbar-track {
        background: transparent;
    }

    .wo-txn-table-wrap[b-4wyj6fz3qk]::-webkit-scrollbar-thumb {
        background: var(--color-outline-variant);
        border-radius: 3px;
    }

        .wo-txn-table-wrap[b-4wyj6fz3qk]::-webkit-scrollbar-thumb:hover {
            background: var(--color-outline);
        }

.wo-txn-table[b-4wyj6fz3qk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: fixed;
}

.wo-txn-table th[b-4wyj6fz3qk] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-outline);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-surface, #fff);
}

.wo-txn-table td[b-4wyj6fz3qk] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-outline-variant);
}

/* :not() exclusions (rather than a color here) so this default never out-specifies
   .wo-value-positive/.wo-value-negative when FormatColorClass puts one of those directly
   on this same <td> -- the two rules are mutually exclusive by selector, not by cascade order. */
.wo-txn-table td:not(.wo-value-positive):not(.wo-value-negative)[b-4wyj6fz3qk] {
    color: #000;
}

.wo-txn-table tbody tr:hover td[b-4wyj6fz3qk] {
    background: var(--color-surface-variant, rgba(0, 0, 0, 0.04));
}

.wo-txn-table tbody tr.wo-txn-row-selected td[b-4wyj6fz3qk] {
    background: var(--color-secondary-container);
}

/* Fixed layout (above) lets long values get truncated instead of wrapping to a
   second line -- same approach as WOTransactionRightModal's --resizable table. */
.wo-txn-table th[b-4wyj6fz3qk],
.wo-txn-table td[b-4wyj6fz3qk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drag-to-resize handle at each column's right edge, drawn as two small bars that stay visible
   in the normal (non-hover) state -- unlike WOTransactionRightModal's .col-resize-handle, which
   is fully transparent until hover, this one needs to read as a grabbable grip at rest. */
.wo-txn-table .womr-col-resize-handle[b-4wyj6fz3qk] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/*    .wo-txn-table .womr-col-resize-handle::before,*/
    .wo-txn-table .womr-col-resize-handle[b-4wyj6fz3qk]::after {
        content: "";
        width: 1px;
        height: 60%;
        background: var(--color-outline-variant);
        border-radius: 1px;
    }

/*    .wo-txn-table .womr-col-resize-handle:hover::before,*/
    .wo-txn-table .womr-col-resize-handle:hover[b-4wyj6fz3qk]::after {
        background: var(--color-primary);
    }
/* /Components/Modals/WONewWorkOrderModal.razor.rz.scp.css */
.scwo-button[b-cs6fzk3w37] {
    height: 2rem;
    border-radius: 0.25rem;
    background-color: #5496cd;
    border-color: #5496cd;
    color: #eeeeee;
}

.scwo-button-close[b-cs6fzk3w37] {
    height: 2rem;
    border-radius: 0.25rem;
    background-color: transparent;
    border-color: transparent;
}
/* Form layout */
.scwo-form[b-cs6fzk3w37] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 2px;
}

.scwo-field[b-cs6fzk3w37] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scwo-label[b-cs6fzk3w37] {
    font-size: 13px;
    font-weight: 600;
    color: #26619d;
    margin: 0;
    text-align: start;
}

.scwo-required[b-cs6fzk3w37] {
    color: #d32f2f;
    margin-left: 2px;
}

/* Input */
.scwo-input[b-cs6fzk3w37] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d2e4ff;
    border-radius: 6px;
    font-size: 14px;
    color: #00345e;
    background: #f8f9ff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.scwo-input:focus[b-cs6fzk3w37] {
    border-color: #3755c3;
    box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.12);
    background: #fff;
}

.scwo-input--error[b-cs6fzk3w37] {
    border-color: #d32f2f;
    background: #fff6f6;
}

.scwo-input--error:focus[b-cs6fzk3w37] {
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}

.scwo-input:read-only[b-cs6fzk3w37],
.scwo-input[readonly][b-cs6fzk3w37] {
    background: #f1f3f5;
    border-color: #dcdfe6;
    color: #6b7280;
    cursor: not-allowed;
}

.scwo-mono[b-cs6fzk3w37] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Item lookup */
.scwo-lookup-group[b-cs6fzk3w37] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .scwo-lookup-group .scwo-input[b-cs6fzk3w37] {
        flex: 1;
        border-radius: 6px 0 0 6px;
        cursor: pointer;
    }

.scwo-lookup-btn[b-cs6fzk3w37] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    border: 1px solid #d2e4ff;
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 0 12px;
    cursor: pointer;
    transition: background 0.15s;
}

    .scwo-lookup-btn .material-symbols-outlined[b-cs6fzk3w37] {
        font-size: 18px;
        color: #6b7280;
    }

    .scwo-lookup-btn:hover[b-cs6fzk3w37] {
        background: #e6effc;
    }

/* Validation message */
.scwo-error-msg[b-cs6fzk3w37] {
    font-size: 11px;
    color: #d32f2f;
    margin-top: 1px;
}

/* Busy spinner inside button */
.scwo-spinner[b-cs6fzk3w37] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scwo-spin-b-cs6fzk3w37 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes scwo-spin-b-cs6fzk3w37 {
    to { transform: rotate(360deg); }
}
/* /Components/Modals/WOTransactionRightModal.razor.rz.scp.css */
.wo-txn-panel[b-sp0uruxwy8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.wo-txn-tabs[b-sp0uruxwy8] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-outline-variant);
    flex-shrink: 0;
}

.wo-txn-tab[b-sp0uruxwy8] {
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-outline);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .wo-txn-tab.active[b-sp0uruxwy8] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

.wo-txn-toolbar[b-sp0uruxwy8] {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.wo-txn-table-wrap[b-sp0uruxwy8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant) transparent;
}

    .wo-txn-table-wrap[b-sp0uruxwy8]::-webkit-scrollbar {
        width: 6px;
    }

    .wo-txn-table-wrap[b-sp0uruxwy8]::-webkit-scrollbar-track {
        background: transparent;
    }

    .wo-txn-table-wrap[b-sp0uruxwy8]::-webkit-scrollbar-thumb {
        background: var(--color-outline-variant);
        border-radius: 3px;
    }

        .wo-txn-table-wrap[b-sp0uruxwy8]::-webkit-scrollbar-thumb:hover {
            background: var(--color-outline);
        }

.wo-txn-table[b-sp0uruxwy8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wo-txn-table th[b-sp0uruxwy8] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-outline);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-surface, #fff);
}

.wo-txn-table td[b-sp0uruxwy8] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-outline-variant);
}

/* :not() exclusions (rather than a color here) so this default never out-specifies
   .wo-value-positive/.wo-value-negative when FormatColorClass puts one of those directly
   on this same <td> -- the two rules are mutually exclusive by selector, not by cascade order. */
.wo-txn-table td:not(.wo-value-positive):not(.wo-value-negative)[b-sp0uruxwy8] {
    color: #000;
}

.wo-txn-table tbody tr:hover td[b-sp0uruxwy8] {
    background: var(--color-surface-variant, rgba(0, 0, 0, 0.04));
}

/* Fixed layout lets the drag-resized <col> widths (see wotxnColumnResize.js) actually govern
   each column instead of the browser re-flowing them from cell content; long values are hidden
   behind an ellipsis instead of wrapping onto a second line. */
.wo-txn-table--resizable[b-sp0uruxwy8] {
    table-layout: fixed;
}

    .wo-txn-table--resizable th[b-sp0uruxwy8],
    .wo-txn-table--resizable td[b-sp0uruxwy8] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wo-txn-table .col-resize-handle[b-sp0uruxwy8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

    .wo-txn-table .col-resize-handle:hover[b-sp0uruxwy8] {
        background: var(--color-primary);
        opacity: 0.35;
    }
/* /Components/Modals/WOVirtualColumnModal.razor.rz.scp.css */
[b-9umscnge47] #woVirtualColumnModal .modal-dialog {
    position: fixed;
    top: 1.75rem;
    left: calc(50% + 300px);
    margin: 0;
    max-height: calc(100vh - 3.5rem);
}

[b-9umscnge47] #woVirtualColumnModal .modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

.wo-virtual-editor[b-9umscnge47] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.wo-mapping-default-label[b-9umscnge47] {
    font-size: 0.75rem;
    color: #737686;
}

.wo-mapping-input[b-9umscnge47] {
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-virtual-select[b-9umscnge47] {
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c6d7;
    border-radius: 0.25rem;
    background: #f8f9fb;
    color: #191c1e;
}

.wo-virtual-editor-wrap[b-9umscnge47] {
    border-radius: 0.25rem;
    overflow: hidden;
}

.wo-virtual-hint[b-9umscnge47] {
    font-size: 0.7rem;
    color: #737686;
    line-height: 1.5;
}

    .wo-virtual-hint code[b-9umscnge47] {
        font-family: "Consolas", "Courier New", monospace;
        background: #fff;
        border: 1px solid #d4dadf;
        border-radius: 0.15rem;
        padding: 0 0.2rem;
        color: #0b3d91;
    }
/* /Components/ObjectComponent/MappingObjectDrag/DragDisplay3Column.razor.rz.scp.css */
/* DragDisplay3Column Component - Machine Node Design */

/* Material Symbols Icon Font */
.material-symbols-outlined[b-ypzfx9ckc2] {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-flex;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* ==================== MACHINE NODE COMPONENT ==================== */

/* Machine Node Wrapper - Fills parent container */
.machine-node-wrapper[b-ypzfx9ckc2] {
    width: 100%;
    height: 100%;
    background-color: #131b2e;
    border: 1px solid #3d494c;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
    cursor: grab;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.machine-node-wrapper:hover[b-ypzfx9ckc2] {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
}

.square-object:active .machine-node-wrapper[b-ypzfx9ckc2] {
    cursor: grabbing;
}

.square-object.dragging .machine-node-wrapper[b-ypzfx9ckc2] {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.35);
}

/* Status Color Bar */
.machine-node-status-bar[b-ypzfx9ckc2] {
    width: 100%;
    height: 4px;
    display: block;
    flex-shrink: 0;
}

/* Node Content Container */
.machine-node-content[b-ypzfx9ckc2] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Node Header Section */
.machine-node-header[b-ypzfx9ckc2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

/* Title Section */
.machine-node-title-section[b-ypzfx9ckc2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Node Type Label */
.machine-node-type[b-ypzfx9ckc2] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Node Title */
.machine-node-title[b-ypzfx9ckc2] {
    font-size: 16px;
    font-weight: 600;
    color: #dae2fd;
    margin: 0;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Icon */
.machine-node-icon[b-ypzfx9ckc2] {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Metrics Grid Container */
.machine-node-metrics-grid[b-ypzfx9ckc2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    border-top: 1px solid rgba(61, 73, 76, 0.3);
    padding-top: 0.5rem;
    flex: 1;
    min-height: 0;
}

/* Metric Cell */
.machine-node-metric-cell[b-ypzfx9ckc2] {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Middle Metric Cell - Add borders */
.machine-node-metric-cell-middle[b-ypzfx9ckc2] {
    border-left: 1px solid rgba(61, 73, 76, 0.3);
    border-right: 1px solid rgba(61, 73, 76, 0.3);
}

/* Metric Label */
.machine-node-metric-label[b-ypzfx9ckc2] {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

/* Metric Value */
.machine-node-metric-value[b-ypzfx9ckc2] {
    font-size: 13px;
    font-weight: 500;
    color: #dae2fd;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}



/* ==================== OLD GLASS CARD STYLES (DEPRECATED) ==================== */


/* Metrics Grid Section */
.metrics-grid[b-ypzfx9ckc2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

/* Metric Column */
.metric-column[b-ypzfx9ckc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    border-right: 1px solid var(--glass-border);
    gap: 0.25rem;
}

.metric-column:last-child[b-ypzfx9ckc2] {
    border-right: none;
}

/* Metric Label */
.metric-label[b-ypzfx9ckc2] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* Metric Value */
.metric-value[b-ypzfx9ckc2] {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Metric Unit */
.metric-unit[b-ypzfx9ckc2] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--color-slate-500);
    text-transform: capitalize;
    opacity: 0.8;
}

/* Hover Effects - Disabled for drag functionality */
.glass-card-container[b-ypzfx9ckc2] {
    transition: none;
}

.glass-card-container:hover[b-ypzfx9ckc2] {
    background: var(--glass-bg);
    border-color: transparent;
    box-shadow: none;
}
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);[b-ypzfx9ckc2]
}

/* Metric Column */
.metric-column[b-ypzfx9ckc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    border-right: 1px solid var(--glass-border);
    gap: 0.25rem;
}

.metric-column:last-child[b-ypzfx9ckc2] {
    border-right: none;
}

/* Metric Label */
.metric-label[b-ypzfx9ckc2] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* Metric Value */
.metric-value[b-ypzfx9ckc2] {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Metric Unit */
.metric-unit[b-ypzfx9ckc2] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--color-slate-500);
    text-transform: capitalize;
    opacity: 0.8;
}

/* Hover Effects - Disabled for drag functionality */
.glass-card-container[b-ypzfx9ckc2] {
    transition: none;
}

.glass-card-container:hover[b-ypzfx9ckc2] {
    background: var(--glass-bg);
    border-color: transparent;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .glass-card-container[b-ypzfx9ckc2] {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }
    
    .card-title[b-ypzfx9ckc2] {
        font-size: 12px;
    }
    
    .metric-value[b-ypzfx9ckc2] {
        font-size: 18px;
    }
    
    .metric-label[b-ypzfx9ckc2] {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .glass-card-container[b-ypzfx9ckc2] {
        max-width: 100%;
        padding: 0.75rem;
    }
    
    .card-title[b-ypzfx9ckc2] {
        font-size: 11px;
    }
    
    .metric-value[b-ypzfx9ckc2] {
        font-size: 16px;
    }
}
    }
    
    .drag-display-title[b-ypzfx9ckc2] {
        font-size: 8px;
    }
    
    .drag-display-metric-label[b-ypzfx9ckc2] {
        font-size: 7px;
    }
    
    .drag-display-metric-value[b-ypzfx9ckc2] {
        font-size: 12px;
    }
    
    .drag-display-metric-unit[b-ypzfx9ckc2] {
        font-size: 7px;
    }
}
/* /Components/ObjectComponent/MappingObjectDrag/MappingObjectDragging.razor.rz.scp.css */
.square-object[b-f1elpibhru] {
    position: absolute;
    width: 300px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: inherit;
    font-weight: bold;
    font-size: 14px;
    border-radius: 0.5rem;
    cursor: grab;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    user-select: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    will-change: left, top;
    border-width: 2px;
    border-style: solid;
    z-index: 100;
    overflow: hidden;
    padding: 0;
}

.square-object:hover[b-f1elpibhru] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    cursor: grab;
}

.square-object:active[b-f1elpibhru] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    cursor: grabbing;
}

.square-object.dragging[b-f1elpibhru] {
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6);
    z-index: 2000;
    cursor: grabbing;
    will-change: left, top;
    filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.3));
    transition: none !important;
}
/* /Components/ObjectComponent/SAPUI/DropDownData/SAPButtonDropDownList.razor.rz.scp.css */
/* Styles for SAPButtonDropDownList */
.sap_dropdown-container[b-114p0pap9k]{position:relative;display:inline-block}
.sap_btn-icon[b-114p0pap9k]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:#0d6efd;transition:all .15s}
.sap_btn-icon:hover:not(:disabled)[b-114p0pap9k]{background:#e9ecef}
.sap_btn-icon:disabled[b-114p0pap9k]{opacity:.5;cursor:not-allowed}
.sap_btn-icon img[b-114p0pap9k]{vertical-align:middle;margin-left:8px}

.sap_dropdown-menu[b-114p0pap9k]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-114p0pap9k]{display:block}
.sap_dropdown-item[b-114p0pap9k]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .12s}
.sap_dropdown-item:last-child[b-114p0pap9k]{border-bottom:none}
.sap_dropdown-item:hover[b-114p0pap9k]{background:#f5f5f5}
/* /Components/ObjectComponent/SAPUI/DropDownData/SAPDropDownList.razor.rz.scp.css */
/* Styles for SAPDropDownList component */
.dropdown.sap_dropdown[b-8dvlwq23p6]{display:inline-block}
.sap_dropdown-control[b-8dvlwq23p6]{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#fff;border:1px solid #d4dadf;border-radius:3px}
.sap_dropdown-menu[b-8dvlwq23p6]{min-width:160px;background:#fff;border:1px solid #e0e0e0;border-radius:4px}
.sap_dropdown-item[b-8dvlwq23p6]{padding:8px 12px}
.sap_dropdown-item:hover[b-8dvlwq23p6]{background:#f5f5f5}
/* /Components/ObjectComponent/SAPUI/FilterData/SearchBarSAP.razor.rz.scp.css */
.sap-coa-header[b-nwjulvrxsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff !important;
}

.sap-coa-title[b-nwjulvrxsv] {
    font-size: 1.5625rem;
    font-weight: 600;
    margin: 0;
    color: #0064d9;
}
.sap-toggle-btn[b-nwjulvrxsv] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}
/*
.sap-toggle-btn {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    z-index: 10;
}
    */
/* /Components/ObjectComponent/SAPUI/HeaderDipslayClassSAP.razor.rz.scp.css */
/* Styles for HeaderDipslayClassSAP component */
.sap_label[b-btyirp5fuy]{display:grid;grid-template-columns:220px var(--sap-input-width, 1fr);align-items:center;gap:12px}
.sap_input_group[b-btyirp5fuy]{position:relative;display:flex;align-items:center}
.sap_input[b-btyirp5fuy]{width:100%;height:1.625rem;padding:6px 8px;font-size:12px;border-radius:3px;border:1px solid #d4dadf;background:#fff}
.sap_input_btn[b-btyirp5fuy]{position:absolute;right:0;top:0;border:none;background:none;padding:0 6px;height:100%;display:flex;align-items:center}
.sap_required[b-btyirp5fuy]{color:#c1292e;margin-left:4px}

/* small helper for readonly inputs */
.sap_input[readonly][b-btyirp5fuy]{background:#f5f7fb;border-color:#dde2eb;color:#333}

/* shared helpers */
.sap_dropdown-container[b-btyirp5fuy]{position:relative}
.sap_btn-action[b-btyirp5fuy]{padding:6px 12px;background:none;border:none;border-radius:4px;color:#0d6efd}
/* /Components/ObjectComponent/SAPUI/HeaderDipslaySAP.razor.rz.scp.css */
/* Styles for HeaderDipslaySAP component */
.sap_label[b-42avntplvq]{display:grid;grid-template-columns:220px var(--sap-input-width, 1fr);align-items:center;gap:12px}
.sap_input_group[b-42avntplvq]{position:relative;display:flex;align-items:center}
.sap_input[b-42avntplvq]{width:100%;height:1.625rem;padding:6px 8px;font-size:12px;border-radius:3px;border:1px solid #d4dadf;background:#fff}
.sap_input_btn[b-42avntplvq]{position:absolute;right:0;top:0;border:none;background:none;padding:0 6px;height:100%;display:flex;align-items:center}
.sap_required[b-42avntplvq]{color:#c1292e;margin-left:4px}
.sap_input[readonly][b-42avntplvq]{background:#f5f7fb;border-color:#dde2eb;color:#333}

/* helper for label with action */
.sap_label .sap_label-action[b-42avntplvq]{display:flex;gap:8px;align-items:center}
/* /Components/ObjectComponent/SAPUI/InteractDragDrop/EditModeSAPObject.razor.rz.scp.css */
/* .edit-mode-* classes moved to the global wwwroot/css/sap/sapui_custom.css - SubHeaderInputSAP
   now renders this same markup directly (no SAPObjectData-typed component to reuse there), and
   Blazor's per-component CSS isolation meant a scoped copy here never applied to that markup. */

/* /Components/ObjectComponent/SAPUI/LineData/CheckboxDropdownSelectSAP.razor.rz.scp.css */
.chk-dd-wrapper[b-gwowgeww0u] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.chk-dd-trigger[b-gwowgeww0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: #fff;
}

.chk-dd-summary[b-gwowgeww0u] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.chk-dd-caret[b-gwowgeww0u] {
    font-size: 1.125rem;
    color: #556b81;
    flex-shrink: 0;
}

.chk-dd-panel[b-gwowgeww0u] {
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #babbbb;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
}

.chk-dd-row[b-gwowgeww0u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.chk-dd-row:hover[b-gwowgeww0u] {
    background: #f0f4f8;
}

.chk-dd-empty[b-gwowgeww0u] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #888;
    font-style: italic;
}
/* /Components/ObjectComponent/SAPUI/LineData/DatetimeInputSAP.razor.rz.scp.css */
.sap_date_wrapper[b-n8fuyis4xy] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.sap_date_wrapper .sap_input[b-n8fuyis4xy] {
    width: 100%;
}

.sap_date_icon[b-n8fuyis4xy] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #6b7785;
    pointer-events: none;
}

/* Invisible except for its own calendar-picker icon (which sap_date_icon above visually
   replaces) - sized to just the icon area so clicking there opens the native date picker while
   the rest of the field is the plain text input. */
.sap_date_native[b-n8fuyis4xy] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 20px;
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
/* /Components/ObjectComponent/SAPUI/LineData/NumberInputSAP.razor.rz.scp.css */
/* Local styles for NumberInputSAP component */
/* Copied from global sapui_custom.css .sap_input block and scoped to this component */
.sap_input[b-6rn9z6fhm5] {
    width: 100%;
    height: 1.625rem;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #d4dadf;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 1px 0 0 #556b81;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.sap_input:hover:not(:disabled)[b-6rn9z6fhm5] {
    border-color: #91C0FF;
    box-shadow: 0 1px 0 0 #2882ec;
}

.sap_input:focus[b-6rn9z6fhm5] {
    border-color: #0068ff;
    box-shadow: 0 0 0 1px rgba(0, 104, 255, 0.9);
}

.sap_input:disabled[b-6rn9z6fhm5] {
    background-color: #f5f7fb;
    border-color: #dde2eb;
    color: #999;
    box-shadow: none;
}

/* Number input adjustments: hide native spinner buttons for consistent look */
input[type=number].sap_input[b-6rn9z6fhm5]::-webkit-outer-spin-button,
input[type=number].sap_input[b-6rn9z6fhm5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].sap_input[b-6rn9z6fhm5] {
    -moz-appearance: textfield; /* Firefox */
}
/* /Components/ObjectComponent/SAPUI/LineData/NumberInputWithCurrencySAP.razor.rz.scp.css */
/* Component-scoped styles for NumberInputWithCurrencySAP */
/* Uses the same .sap_input class as other SAP inputs to keep consistent styling */
.sap_input[b-lb86o3dzdb] {
    width: 100%;
    height: 1.625rem;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #d4dadf;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 1px 0 0 #556b81;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.sap_input:hover:not(:disabled)[b-lb86o3dzdb] {
    border-color: #91C0FF;
    box-shadow: 0 1px 0 0 #2882ec;
}

.sap_input:focus[b-lb86o3dzdb] {
    border-color: #0068ff;
    box-shadow: 0 0 0 1px rgba(0, 104, 255, 0.9);
}

.sap_input:disabled[b-lb86o3dzdb] {
    background-color: #f5f7fb;
    border-color: #dde2eb;
    color: #999;
    box-shadow: none;
}

/* Ensure text input shows caret and selection consistently */
input.sap_input[b-lb86o3dzdb]::placeholder {
    color: #b8c2cc;
}
/* /Components/ObjectComponent/SAPUI/LineData/NumberWithUnitSAP.razor.rz.scp.css */
/* Widen the small dropdown trigger (right button) */
.sap_inline-group button.sap_dropdown-control.dropdown-toggle[b-rp8n0sgb7m] {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0.15rem 0.45rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Widen the dropdown menu */
.sap_inline-group .dropdown-menu[b-rp8n0sgb7m] {
    min-width: 9rem !important; /* adjust to taste (e.g. 9rem = 144px) */
    max-width: 20rem;
    white-space: normal;
}

/* Ensure items don't wrap/cut unexpectedly */
.sap_inline-group .dropdown-item[b-rp8n0sgb7m] {
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
}

/* Fallback: if Bootstrap renders the menu outside the component, apply global rules */
:global(.dropdown-menu)[b-rp8n0sgb7m] {
    min-width: 9rem !important;
}

:global(.sap_dropdown-control.dropdown-toggle)[b-rp8n0sgb7m] {
    min-width: 44px !important;
    width: 44px !important;
}
/* /Components/ObjectComponent/SAPUI/LineData/TextboxLineDataNoSourceSAP.razor.rz.scp.css */
/* Styles for TextboxLineDataNoSourceSAP */
.textbox-linesimple[b-41fzi5edyn]{display:block}
.textbox-linesimple .sap_input[b-41fzi5edyn]{width:100%}
/* /Components/ObjectComponent/SAPUI/LineData/TextboxLineDataSAP.razor.rz.scp.css */
/* Styles for TextboxLineDataSAP */
.textbox-line[b-2euigdjh27]{display:flex;align-items:center}
.textbox-line .sap_input[b-2euigdjh27]{flex:1}
.sap_input_btn[b-2euigdjh27]{position:absolute;right:0;top:0;border:none;background:none;height:100%;padding:0 6px}
.sap_input_group[b-2euigdjh27]{position:relative}
/* /Components/ObjectComponent/SAPUI/SummaryDisplaySAP.razor.rz.scp.css */
.sap_summary-row[b-besau1kwxo] {
    display: grid;
    grid-template-columns: 1fr 200px 250px;
    align-items: center;
    gap: 0;
}

.sap_summary-label[b-besau1kwxo] {
    font-size: 13px;
    color: #444;
    text-align: left;
    white-space: nowrap;
    grid-column: 2;
}

.sap_summary-value[b-besau1kwxo] {
    font-size: 13px;
    font-weight: 600;
    color: #009966;
    white-space: nowrap;
    text-align: right;
    grid-column: 3;
}
/* /Components/ObjectComponent/SAPUI/TreeViewData/SAPTreeView.razor.rz.scp.css */
.sap-tree-table[b-955j6wqlxs] {
    width: 100%;
    border-collapse: collapse;
}

    .sap-tree-table thead[b-955j6wqlxs] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 1;
    }

    .sap-tree-table th[b-955j6wqlxs] {
        text-align: left;
        padding: 8px 12px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #333;
        border-bottom: 1px solid #e0e0e0;
    }

    .sap-tree-table td[b-955j6wqlxs] {
        padding: 6px 12px;
        font-size: 0.875rem;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
    }

.sap-tree-row:hover[b-955j6wqlxs] {
    background: #f9f9f9;
}

.sap-tree-root[b-955j6wqlxs] {
    font-weight: 600;
}

.sap-tree-toggle[b-955j6wqlxs] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-right: 4px;
    font-size: 0.75rem;
    color: #666;
}
/* /Components/Pages/AccountDI/EditAccountDI.razor.rz.scp.css */
/* Custom DI Fields Styling - Match Design Layout */
.custom-di-section[b-ivujso5drk] {
    padding: 20px;
    margin-top: 20px;
}

.itemRenderDIEdit[b-ivujso5drk] {
    width: 100%;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #bfbfbf;
}

    /* Container for each row of fields */
    .itemRenderDIEdit > .containerDemoDR[b-ivujso5drk] {
        min-width: 100%;
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    /* Individual field wrapper */
    .itemRenderDIEdit .d-flex.justify-content-between[b-ivujso5drk] {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    /* Labels */
    .itemRenderDIEdit .styleTextTT[b-ivujso5drk] {
        font-weight: 500;
        color: #2c3e50;
        min-width: 120px;
        text-align: left;
        white-space: nowrap;
        padding-right: 10px;
    }

    /* Input fields */
    .itemRenderDIEdit input:not([type="checkbox"])[b-ivujso5drk],
    .itemRenderDIEdit select[b-ivujso5drk],
    .itemRenderDIEdit textarea[b-ivujso5drk] {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 8px 12px;
        flex: 1;
        height: 36px;
        font-family: inherit;
    }

    .itemRenderDIEdit textarea[b-ivujso5drk] {
        height: 80px;
        resize: vertical;
    }

    /* Checkbox styling */
    .itemRenderDIEdit input[type="checkbox"][b-ivujso5drk] {
        cursor: pointer;
        accent-color: #376682;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
    }

    /* Date/Time wrapper */
    .itemRenderDIEdit .d-flex.gap-2[b-ivujso5drk] {
        display: flex;
        gap: 12px;
        flex: 1;
    }

        .itemRenderDIEdit .d-flex.gap-2 input[b-ivujso5drk] {
            flex: 1;
        }

    /* Focus states */
    .itemRenderDIEdit input:focus[b-ivujso5drk],
    .itemRenderDIEdit select:focus[b-ivujso5drk],
    .itemRenderDIEdit textarea:focus[b-ivujso5drk] {
        border-color: #376682;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(55, 102, 130, 0.25);
    }

    /* Checkbox group */
    .itemRenderDIEdit .d-flex.gap-3[b-ivujso5drk] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .itemRenderDIEdit .d-flex.gap-3 > div[b-ivujso5drk] {
            display: flex;
            align-items: center;
            gap: 8px;
        }

    /* Required asterisk */
    .itemRenderDIEdit .text-danger[b-ivujso5drk] {
        color: #dc3545;
        margin-left: 2px;
    }

/* ========================================
   ✅ Field Group Styles - SIMPLE VERSION
   ======================================== */
.field-group-container[b-ivujso5drk] {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Button collapse */
.btnFieldGroup[b-ivujso5drk] {
    background: none;
    border: none;
}

    .btnFieldGroup:hover[b-ivujso5drk] {
        background-color: #f5f5f5;
    }

    .btnFieldGroup img[b-ivujso5drk] {
        transition: transform 0.3s ease;
    }

    .btnFieldGroup[aria-expanded="false"] img[b-ivujso5drk] {
        transform: rotate(-90deg);
    }

/* Labels */
.field-group-container .styleTextTT[b-ivujso5drk] {
    color: #333;
    font-weight: 500;
}

/* ✅ INPUT - Đơn giản nhất, viền xám nhạt */
.field-group-container input[type="text"][b-ivujso5drk],
.field-group-container input[type="date"][b-ivujso5drk],
.field-group-container input[type="time"][b-ivujso5drk],
.field-group-container input[type="number"][b-ivujso5drk],
.field-group-container input.inputCustum[b-ivujso5drk],
.field-group-container input.inputCustumHD[b-ivujso5drk],
.field-group-container textarea[b-ivujso5drk],
.field-group-container select[b-ivujso5drk] {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important; /* Xám nhạt giống ảnh */
    border-radius: 4px;
    padding: 8px 12px;
    height: 36px;
    color: #333;
    outline: none !important;
    box-shadow: none !important;
}

/* Textarea */
.field-group-container textarea[b-ivujso5drk] {
    height: 80px;
}

/* Checkbox */
.field-group-container input[type="checkbox"][b-ivujso5drk] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #376682;
}

/* Xóa browser validation border */
.field-group-container input:invalid[b-ivujso5drk],
.field-group-container input:required[b-ivujso5drk],
.field-group-container input:valid[b-ivujso5drk] {
    box-shadow: none !important;
    outline: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .itemRenderDIEdit > .containerDemoDR[b-ivujso5drk] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .itemRenderDIEdit .d-flex.justify-content-between[b-ivujso5drk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .itemRenderDIEdit .styleTextTT[b-ivujso5drk] {
        min-width: 100%;
    }

    .itemRenderDIEdit input:not([type="checkbox"])[b-ivujso5drk],
    .itemRenderDIEdit select[b-ivujso5drk],
    .itemRenderDIEdit textarea[b-ivujso5drk] {
        width: 100%;
    }

    .field-group-container .d-flex.flex-column.gap-2[b-ivujso5drk] {
        min-width: 100%;
    }
}
/* /Components/Pages/AppQuery/AppQueryAdvancedFilterModal.razor.rz.scp.css */
.advfilter-header[b-eol8fwgz0x] {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 2rem;
    background: #fff;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #f1f5f9;
}

.advfilter-header-left[b-eol8fwgz0x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.advfilter-icon[b-eol8fwgz0x] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(0, 87, 194, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0057c2;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.advfilter-title[b-eol8fwgz0x] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    display: block;
}

.advfilter-subtitle[b-eol8fwgz0x] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    display: block;
}

.advfilter-close[b-eol8fwgz0x] {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0.4rem;
    border-radius: 999px;
    line-height: 1;
    font-size: 1.1rem;
}

.advfilter-close:hover[b-eol8fwgz0x] {
    color: #475569;
    background: #f8fafc;
}

.advfilter-body[b-eol8fwgz0x] {
    margin: -1rem;
    padding: 2rem;
    background: #fff;
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
}

.advfilter-body[b-eol8fwgz0x]::-webkit-scrollbar {
    width: 5px;
}

.advfilter-body[b-eol8fwgz0x]::-webkit-scrollbar-track {
    background: transparent;
}

.advfilter-body[b-eol8fwgz0x]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.advfilter-grid[b-eol8fwgz0x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem 1rem;
}

.advfilter-empty[b-eol8fwgz0x] {
    text-align: center;
    color: #94a3b8;
    padding: 2rem 0;
    font-size: 0.875rem;
    grid-column: 1 / -1;
}

.advfilter-field[b-eol8fwgz0x] {
    width: 100%;
    height: 2.5rem;
    padding: 0 2.25rem 0 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
    box-sizing: border-box;
}

.advfilter-field:hover[b-eol8fwgz0x] {
    border-color: #94a3b8;
}

.advfilter-field:focus[b-eol8fwgz0x] {
    border-color: #0057c2;
    box-shadow: 0 0 0 3px rgba(0, 87, 194, 0.1);
    outline: none;
}

.advfilter-field[b-eol8fwgz0x]::placeholder {
    color: #94a3b8;
    font-style: normal;
}

.advfilter-date-wrap[b-eol8fwgz0x]  input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b !important;
    box-sizing: border-box;
}

.advfilter-date-wrap[b-eol8fwgz0x]  input:hover {
    border-color: #94a3b8;
}

select.advfilter-field[b-eol8fwgz0x] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.advfilter-entity-wrap[b-eol8fwgz0x] {
    position: relative;
}

.advfilter-entity-icon[b-eol8fwgz0x] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}

.advfilter-toggle-row[b-eol8fwgz0x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}

.advfilter-toggle-item[b-eol8fwgz0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.advfilter-toggle-item:hover[b-eol8fwgz0x] {
    border-color: #f1f5f9;
    background: #f8fafc;
}

.advfilter-toggle-title[b-eol8fwgz0x] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.advfilter-toggle-desc[b-eol8fwgz0x] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}

.advfilter-switch[b-eol8fwgz0x] {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    border: none;
    position: relative;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease;
}

.advfilter-switch.is-on[b-eol8fwgz0x] {
    background: #0057c2;
}

.advfilter-switch-knob[b-eol8fwgz0x] {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.advfilter-switch.is-on .advfilter-switch-knob[b-eol8fwgz0x] {
    transform: translateX(1.25rem);
}

.advfilter-date-wrap[b-eol8fwgz0x]  input:focus {
    border-color: #0057c2;
    box-shadow: 0 0 0 3px rgba(0, 87, 194, 0.1);
    outline: none;
}

.advfilter-footer[b-eol8fwgz0x] {
    width: 100%;
    box-sizing: border-box;
    margin: -0.75rem;
    padding: 0.5rem 2rem 0.5rem 0rem;
    
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.advfilter-reset[b-eol8fwgz0x] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.advfilter-reset:hover[b-eol8fwgz0x] {
    color: #334155;
    text-decoration: underline;
}

.advfilter-actions[b-eol8fwgz0x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.advfilter-cancel[b-eol8fwgz0x] {
    height: 2.5rem;
    padding: 0 1.25rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.5rem;
    color: #475569;
    font-weight: 600;
    font-size: 0.875rem;
}

.advfilter-cancel:hover[b-eol8fwgz0x] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.advfilter-run[b-eol8fwgz0x] {
    height: 2.5rem;
    padding: 0 2rem;
    border: none;
    background: #0057c2;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 10px rgba(0, 87, 194, 0.25);
}

.advfilter-run:hover[b-eol8fwgz0x] {
    background: #00469c;
}
/* /Components/Pages/AppQuery/ExcelReportLinkedCpn.razor.rz.scp.css */
/* ── ExcelReportLinkedCpn Scoped Styles ── */

.aq-report-panel[b-c7xgel801s] {
    width: 100%;
    max-width: 100%;
}

/* Section header */
.aq-report-section-header[b-c7xgel801s] {
    margin-bottom: 1.5rem;
}

.aq-report-section-title[b-c7xgel801s] {
    font-family: 'Inter', 'Mukta', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #004cca;
    margin: 0 0 0.25rem 0;
}

.aq-report-section-desc[b-c7xgel801s] {
    font-size: 0.8125rem;
    color: #737687;
    margin: 0;
    line-height: 1.4;
}

/* Responsive grid for form fields */
.aq-report-form-grid[b-c7xgel801s] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 576px) {
    .aq-report-form-grid[b-c7xgel801s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .aq-report-form-grid[b-c7xgel801s] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Field container */
.aq-report-field[b-c7xgel801s] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Label styling */
.aq-report-label[b-c7xgel801s] {
    font-family: 'Inter', 'Mukta', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #424656;
    line-height: 1.3;
}

/* Input wrapper — overrides nested shared component styles */
.aq-report-input-wrap[b-c7xgel801s] {
    width: 100%;
}

/* Override shared component input styles within this scope */
.aq-report-input-wrap[b-c7xgel801s]  input[type="text"],
.aq-report-input-wrap[b-c7xgel801s]  input[type="number"],
.aq-report-input-wrap[b-c7xgel801s]  input[type="date"],
.aq-report-input-wrap[b-c7xgel801s]  .custumSearch,
.aq-report-input-wrap[b-c7xgel801s]  .inputCustumHD {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid rgba(194, 198, 217, 0.5);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #191c1e !important;
    height: auto;
    min-height: 2.375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.aq-report-input-wrap[b-c7xgel801s]  input[type="text"]:focus,
.aq-report-input-wrap[b-c7xgel801s]  input[type="number"]:focus,
.aq-report-input-wrap[b-c7xgel801s]  input[type="date"]:focus,
.aq-report-input-wrap[b-c7xgel801s]  .custumSearch:focus,
.aq-report-input-wrap[b-c7xgel801s]  .inputCustumHD:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px #0062ff;
}

.aq-report-input-wrap[b-c7xgel801s]  input::placeholder {
    color: #c2c6d9;
}

/* Hide the internal title spans from shared components since we use our own labels */
.aq-report-input-wrap[b-c7xgel801s]  .styleTextTT {
    display: none;
}

/* Style for select button/popup trigger inside InputTextSelect */
.aq-report-input-wrap[b-c7xgel801s]  .sapEmloyIdBtn {
    top: 50%;
    transform: translateY(-50%);
}

/* ── Footer (Show Report button area) ── */
.aq-report-footer[b-c7xgel801s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.aq-report-btn-primary[b-c7xgel801s] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(to bottom right, #004cca, #0062ff);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 76, 202, 0.15);
    transition: all 0.2s ease;
    min-height: 2.25rem;
}

.aq-report-btn-primary:hover:not(:disabled)[b-c7xgel801s] {
    box-shadow: 0 6px 16px rgba(0, 76, 202, 0.25);
}

.aq-report-btn-primary:active:not(:disabled)[b-c7xgel801s] {
    transform: scale(0.97);
    opacity: 0.9;
}

.aq-report-btn-primary:disabled[b-c7xgel801s] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Status messages ── */
.aq-report-status[b-c7xgel801s] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    line-height: 1.4;
}

.aq-report-status-success[b-c7xgel801s] {
    background-color: #d3e4fe;
    color: #0b1c30;
}

.aq-report-status-error[b-c7xgel801s] {
    background-color: #ffdad6;
    color: #93000a;
}

/* ── Empty state ── */
.aq-report-empty[b-c7xgel801s] {
    font-size: 0.8125rem;
    color: #737687;
    margin: 0;
}
/* /Components/Pages/BeasMasterDataUI/BeasFtPriorPage.razor.rz.scp.css */
.sap_inner-card[b-dh13zz53zt]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-dh13zz53zt]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-dh13zz53zt]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-dh13zz53zt]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-dh13zz53zt]{overflow-x:auto;width:100%}
.sap-table[b-dh13zz53zt]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-dh13zz53zt],.sap-table td[b-dh13zz53zt]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-dh13zz53zt],.sap-table td:first-child[b-dh13zz53zt]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-dh13zz53zt],.sap-table td:nth-child(2)[b-dh13zz53zt]{min-width:50px;width:50px;text-align:center}
.sap_input[b-dh13zz53zt]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-dh13zz53zt]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-dh13zz53zt]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-dh13zz53zt]{position:relative}
.sap_dropdown-menu[b-dh13zz53zt]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-dh13zz53zt]{display:block}
.sap_dropdown-item[b-dh13zz53zt]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-dh13zz53zt]{margin-top:1rem}
.sap_btn-action[b-dh13zz53zt],.sap_btn[b-dh13zz53zt],.sap_btn-primary[b-dh13zz53zt]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-dh13zz53zt]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-dh13zz53zt]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-dh13zz53zt] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-dh13zz53zt] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-dh13zz53zt] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}
.sap_btn.sap_primary[b-dh13zz53zt] {
    background: none !important;
    border: none !important;
}
.sap_btn[b-dh13zz53zt] {
    background: none !important;
    border: none !important;
}
/* center header text in actions column */
.curr-sticky-col-header[b-dh13zz53zt] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-dh13zz53zt] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-dh13zz53zt] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-dh13zz53zt] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-dh13zz53zt],
.curr-action-cell .sap_btn-primary[b-dh13zz53zt],
.curr-action-cell .curr-row-btn[b-dh13zz53zt] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-dh13zz53zt] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-dh13zz53zt]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-dh13zz53zt] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-dh13zz53zt] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/BeasMasterDataUI/BeasReasonForScrapPage.razor.rz.scp.css */
.sap_inner-card[b-qrx40zq3ym]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-qrx40zq3ym]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-qrx40zq3ym]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-qrx40zq3ym]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-qrx40zq3ym]{overflow-x:auto;width:100%}
.sap-table[b-qrx40zq3ym]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-qrx40zq3ym],.sap-table td[b-qrx40zq3ym]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-qrx40zq3ym],.sap-table td:first-child[b-qrx40zq3ym]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-qrx40zq3ym],.sap-table td:nth-child(2)[b-qrx40zq3ym]{min-width:50px;width:50px;text-align:center}
.sap_input[b-qrx40zq3ym]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-qrx40zq3ym]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-qrx40zq3ym]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-qrx40zq3ym]{position:relative}
.sap_dropdown-menu[b-qrx40zq3ym]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-qrx40zq3ym]{display:block}
.sap_dropdown-item[b-qrx40zq3ym]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-qrx40zq3ym]{margin-top:1rem}
.sap_btn-action[b-qrx40zq3ym],.sap_btn[b-qrx40zq3ym],.sap_btn-primary[b-qrx40zq3ym]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-qrx40zq3ym]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-qrx40zq3ym]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-qrx40zq3ym] {
    overflow-x: auto;
    overflow-y: visible;
}
.sap_btn.sap_primary[b-qrx40zq3ym] {
    background: none !important;
    border: none !important;
}
.sap_btn[b-qrx40zq3ym] {
    background: none !important;
    border: none !important;
}
.curr-table[b-qrx40zq3ym] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-qrx40zq3ym] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-qrx40zq3ym] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-qrx40zq3ym] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-qrx40zq3ym] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-qrx40zq3ym] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-qrx40zq3ym],
.curr-action-cell .sap_btn-primary[b-qrx40zq3ym],
.curr-action-cell .curr-row-btn[b-qrx40zq3ym] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-qrx40zq3ym] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-qrx40zq3ym]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-qrx40zq3ym] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-qrx40zq3ym] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/BeasMasterDataUI/ListType/BeasMasterDataListType.razor.rz.scp.css */
/* select.sap_input (sapui_custom.css) strips the native dropdown arrow (appearance:none) without
   drawing its own, so an edit-mode Mapping/ItemsForSelect dropdown here rendered with no visible
   arrow at all - add one back, scoped to just this component's selects. It also sets padding:8px
   on all sides while height stays a fixed 1.625rem (26px, border-box) - 16px of vertical padding
   plus the 2px border leaves only 8px for a 14px-tall line of text, clipping the selected option
   down to its descenders ("Yes" rendering as a sliver). Cut the vertical padding instead so the
   selected value shows in full.
*/
.sap_input--select[b-z4i6jyk33l] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23556b82'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding: 3px 24px 3px 8px !important;
    line-height: 1.3 !important;
}
.sap_btn.sap_primary[b-z4i6jyk33l] {
    background: none !important;
    border: none !important;
}
.sap_btn[b-z4i6jyk33l] {
    background: none !important;
    border: none !important;
}
.sap_checkbox_label[b-z4i6jyk33l] {
    margin-left: 0.4rem;
    vertical-align: middle;
}
.beas-attach-cell-btn[b-z4i6jyk33l] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    color: #0070f2;
    font-size: 0.8125rem;
    cursor: pointer;
}
.beas-attach-cell-btn .material-symbols-outlined[b-z4i6jyk33l] {
    font-size: 1rem;
}
.beas-attach-cell-btn:disabled[b-z4i6jyk33l] {
    color: #999;
    border-color: #ddd;
    cursor: not-allowed;
}
.beas-icon-edit-cell[b-z4i6jyk33l] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.beas-icon-edit-stack[b-z4i6jyk33l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
}
.beas-icon-edit-preview[b-z4i6jyk33l] {
    height: 22px;
    width: 22px;
    object-fit: contain;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    flex-shrink: 0;
    cursor: pointer;
}
.beas-icon-edit-placeholder[b-z4i6jyk33l] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 22px;
    font-size: 1.1rem;
    color: #999;
    border: 1px dashed #babbbb;
    border-radius: 0.25rem;
    flex-shrink: 0;
    cursor: pointer;
}
.beas-icon-edit-delete-btn[b-z4i6jyk33l] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 1px solid #babbbb;
    border-radius: 0.25rem;
    background: #fff;
    color: #888;
    cursor: pointer;
}
.beas-icon-edit-delete-btn:hover[b-z4i6jyk33l] {
    border-color: #dc3545;
    color: #dc3545;
}
.beas-icon-edit-delete-btn .material-symbols-outlined[b-z4i6jyk33l] {
    font-size: 0.9rem;
}
/* /Components/Pages/ChatbotAI/ChatWeb.razor.rz.scp.css */

<style >
.chatbot-container[b-0ww4utmf20] {
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    animation: slideUp-b-0ww4utmf20 0.5s ease-out;
}

@keyframes slideUp-b-0ww4utmf20 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-header[b-0ww4utmf20] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 120px;
}

.language-selector[b-0ww4utmf20] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

    .language-selector select[b-0ww4utmf20] {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.5);
        text-align: center;
        text-align-last: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 8px;
        padding: 8px 12px;
        color: #333;
        font-size: 0.9rem;
        font-weight: 500;
        min-width: 80px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
.gantt-button[b-0ww4utmf20] {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: all 0.3s ease;
}

    .gantt-button:hover[b-0ww4utmf20] {
        background: #218838;
        transform: scale(1.1);
    }

    .gantt-button:disabled[b-0ww4utmf20] {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
    }

.gantt-mode[b-0ww4utmf20] {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
}

.language-label[b-0ww4utmf20] {
    color: white;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.language-section[b-0ww4utmf20] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.apply-button[b-0ww4utmf20], .extract-button[b-0ww4utmf20] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.header-logo[b-0ww4utmf20] {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 8px;
    padding: 5px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

    .header-logo.sap-logo[b-0ww4utmf20] {
        width: 180px;
        height: 100px;
    }

.header-center[b-0ww4utmf20] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.chat-status[b-0ww4utmf20] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    font-size: 0.9rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.status-dot[b-0ww4utmf20] {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-b-0ww4utmf20 2s infinite;
}

.language-display[b-0ww4utmf20] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 2px;
    color: white;
}

.chat-messages[b-0ww4utmf20] {
    height: 400px;
    padding: 20px;
    overflow-y: auto;
    background: #f8fafc;
    background-image: radial-gradient(circle at 25px 25px, rgba(255,255,255,0.8) 2px, transparent 0), radial-gradient(circle at 75px 75px, rgba(255,255,255,0.8) 2px, transparent 0);
    background-size: 100px 100px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.message[b-0ww4utmf20] {
    margin-bottom: 15px;
    animation: messageSlide-b-0ww4utmf20 0.3s ease-out;
}

.user-message[b-0ww4utmf20] {
    text-align: right;
}

    .user-message .message-bubble[b-0ww4utmf20] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 16px;
        border-radius: 18px 18px 5px 18px;
        display: inline-block;
        max-width: 80%;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        position: relative;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

.bot-message .message-bubble[b-0ww4utmf20] {
    background: white;
    color: #334155;
    padding: 12px 16px;
    border-radius: 18px 18px 18px 5px;
    display: inline-block;
    max-width: 80%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-time[b-0ww4utmf20] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 5px;
}

.typing-indicator[b-0ww4utmf20] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 18px 18px 18px 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    max-width: 80px;
}

.typing-dots[b-0ww4utmf20] {
    display: flex;
    gap: 4px;
}

.typing-dot[b-0ww4utmf20] {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-b-0ww4utmf20 1.4s infinite ease-in-out;
}

    .typing-dot:nth-child(1)[b-0ww4utmf20] {
        animation-delay: -0.32s;
    }

    .typing-dot:nth-child(2)[b-0ww4utmf20] {
        animation-delay: -0.16s;
    }

@keyframes typing-b-0ww4utmf20 {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.chat-input-container[b-0ww4utmf20] {
    padding: 20px;
    background: #eef2ff;
    border-top: 1px solid #e2e8f0;
}

.file-upload-container[b-0ww4utmf20] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.file-preview[b-0ww4utmf20] {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    max-width: 150px;
}

.remove-file-btn[b-0ww4utmf20] {
    background: #e5e7eb;
    color: #6b7280;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: absolute;
    top: -5px;
    right: -5px;
}

.input-wrapper[b-0ww4utmf20] {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 25px;
    padding: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .input-wrapper:focus-within[b-0ww4utmf20] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.chat-input[b-0ww4utmf20] {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 1rem;
    background: transparent;
    color: #334155;
    font-family: inherit;
}

.file-button[b-0ww4utmf20], .send-button[b-0ww4utmf20] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.welcome-message[b-0ww4utmf20] {
    text-align: center;
    color: #64748b;
    padding: 40px 20px;
    font-style: italic;
}

    .welcome-message i[b-0ww4utmf20] {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 15px;
        display: block;
    }

.quick-actions[b-0ww4utmf20] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.quick-action[b-0ww4utmf20] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .quick-action:hover[b-0ww4utmf20] {
        background: #667eea;
        color: white;
        transform: translateY(-1px);
    }

.new-chat-button[b-0ww4utmf20] {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8rem;
    margin: 10px auto;
    display: block;
    transition: all 0.2s ease;
}

    .new-chat-button:hover[b-0ww4utmf20] {
        background: #d97706;
        transform: translateY(-1px);
    }

.session-info[b-0ww4utmf20] {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    color: #0369a1;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes pulse-b-0ww4utmf20 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes messageSlide-b-0ww4utmf20 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .chat-header[b-0ww4utmf20] {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }

    .header-logo[b-0ww4utmf20] {
        width: 80px;
        height: 80px;
    }

        .header-logo.sap-logo[b-0ww4utmf20] {
            width: 140px;
            height: 80px;
        }

    .language-selector[b-0ww4utmf20] {
        order: -1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .chatbot-container[b-0ww4utmf20] {
        margin: 20px 10px;
        max-width: none;
    }

    .chat-messages[b-0ww4utmf20] {
        height: 300px;
    }

    .chat-header[b-0ww4utmf20] {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .header-logo[b-0ww4utmf20] {
        width: 60px;
        height: 60px;
    }

        .header-logo.sap-logo[b-0ww4utmf20] {
            width: 120px;
            height: 60px;
        }

    .chat-header h3[b-0ww4utmf20] {
        font-size: 1.2rem;
    }

    .language-selector select[b-0ww4utmf20] {
        min-width: 70px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .apply-button[b-0ww4utmf20] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

</style[b-0ww4utmf20] >
/* /Components/Pages/CostCalculation/CostCalculateManage.razor.rz.scp.css */
/* Keep selectors local to this component so CSS isolation applies correctly */
/* Anchor and clip inside each td without relying on ancestor selectors */
td[b-woew1cdcd1] {
    position: relative;
}

.cell-parent[b-woew1cdcd1] {
    position: relative;
}

.cell-wrapper[b-woew1cdcd1] {
    display: inline-block;       /* allows centering and ellipsis */
    max-width: 100%;
    padding-right: 28px;         /* avoid overlap with button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.cell-action-btn[b-woew1cdcd1] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;               /* show on hover */
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* Show when hovering the cell or wrapper */
td:hover .cell-action-btn[b-woew1cdcd1],
.cell-parent:hover .cell-action-btn[b-woew1cdcd1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cell-content[b-woew1cdcd1] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center all string content and anchor action buttons to top-right in cells */

/* Apply to this table only to avoid global side effects */
.tableCustom th[b-woew1cdcd1],
.tableCustom td[b-woew1cdcd1] {
    text-align: center;
    vertical-align: middle;
    position: relative; /* anchor for absolute buttons */
}

/* Header title centered, button absolutely positioned */
.header-cell-title[b-woew1cdcd1] {
    display: inline-block;       /* center within th */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px; /* make room for the absolute button */
}

/* Move header edit button to the top-right of the th */
.header-cell-action[b-woew1cdcd1] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 6px;
    line-height: 1;
/*    background: transparent;
*/    border: none;
}
/* /Components/Pages/CostCalculation/SubCpn/AccountSettingCalculation.razor.rz.scp.css */
/* Keep selectors local to this component so CSS isolation applies correctly */
/* Anchor and clip inside each td without relying on ancestor selectors */
td[b-wvi5nrf7co] {
    position: relative;
}

.cell-parent[b-wvi5nrf7co] {
    position: relative;
}

.cell-wrapper[b-wvi5nrf7co] {
    display: inline-block; /* allows centering and ellipsis */
    max-width: 100%;
    padding-right: 28px; /* avoid overlap with button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.cell-action-btn[b-wvi5nrf7co] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none; /* show on hover */
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* Show when hovering the cell or wrapper */
td:hover .cell-action-btn[b-wvi5nrf7co],
.cell-parent:hover .cell-action-btn[b-wvi5nrf7co] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cell-content[b-wvi5nrf7co] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center all string content and anchor action buttons to top-right in cells */

/* Apply to this table only to avoid global side effects */
.tableCustom th[b-wvi5nrf7co],
.tableCustom td[b-wvi5nrf7co] {
    text-align: center;
    vertical-align: middle;
    position: relative; /* anchor for absolute buttons */
}

/* Header title centered, button absolutely positioned */
.header-cell-title[b-wvi5nrf7co] {
    display: inline-block; /* center within th */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px; /* make room for the absolute button */
}

/* Move header edit button to the top-right of the th */
.header-cell-action[b-wvi5nrf7co] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 6px;
    line-height: 1;
    /*    background: transparent;
*/ border: none;
}
/* /Components/Pages/CostCalculation/SubCpn/InventoryCalculation.razor.rz.scp.css */
/* Keep selectors local to this component so CSS isolation applies correctly */
/* Anchor and clip inside each td without relying on ancestor selectors */
td[b-oayuerf8yx] {
    position: relative;
}

.cell-parent[b-oayuerf8yx] {
    position: relative;
}

.cell-wrapper[b-oayuerf8yx] {
    display: inline-block;       /* allows centering and ellipsis */
    max-width: 100%;
    padding-right: 28px;         /* avoid overlap with button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.cell-action-btn[b-oayuerf8yx] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;               /* show on hover */
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* Show when hovering the cell or wrapper */
td:hover .cell-action-btn[b-oayuerf8yx],
.cell-parent:hover .cell-action-btn[b-oayuerf8yx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cell-content[b-oayuerf8yx] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center all string content and anchor action buttons to top-right in cells */

/* Apply to this table only to avoid global side effects */
.tableCustom th[b-oayuerf8yx],
.tableCustom td[b-oayuerf8yx] {
    text-align: center;
    vertical-align: middle;
    position: relative; /* anchor for absolute buttons */
}

/* Header title centered, button absolutely positioned */
.header-cell-title[b-oayuerf8yx] {
    display: inline-block;       /* center within th */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px; /* make room for the absolute button */
}

/* Move header edit button to the top-right of the th */
.header-cell-action[b-oayuerf8yx] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 6px;
    line-height: 1;
/*    background: transparent;
*/    border: none;
}
/* /Components/Pages/CostCalculation/SubCpn/InventoryReport.razor.rz.scp.css */
/* Keep selectors local to this component so CSS isolation applies correctly */
/* Anchor and clip inside each td without relying on ancestor selectors */
td[b-22vco5uy55] {
    position: relative;
}

.cell-parent[b-22vco5uy55] {
    position: relative;
}

.cell-wrapper[b-22vco5uy55] {
    display: inline-block;       /* allows centering and ellipsis */
    max-width: 100%;
    padding-right: 28px;         /* avoid overlap with button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.cell-action-btn[b-22vco5uy55] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;               /* show on hover */
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* Show when hovering the cell or wrapper */
td:hover .cell-action-btn[b-22vco5uy55],
.cell-parent:hover .cell-action-btn[b-22vco5uy55] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cell-content[b-22vco5uy55] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center all string content and anchor action buttons to top-right in cells */

/* Apply to this table only to avoid global side effects */
.tableCustom th[b-22vco5uy55],
.tableCustom td[b-22vco5uy55] {
    text-align: center;
    vertical-align: middle;
    position: relative; /* anchor for absolute buttons */
}

/* Header title centered, button absolutely positioned */
.header-cell-title[b-22vco5uy55] {
    display: inline-block;       /* center within th */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px; /* make room for the absolute button */
}

/* Move header edit button to the top-right of the th */
.header-cell-action[b-22vco5uy55] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 6px;
    line-height: 1;
/*    background: transparent;
*/    border: none;
}
/* /Components/Pages/CustomerAging/CustomerAging.razor.rz.scp.css */
/* Main Page Container */
.customer-aging-main[b-20owoaeqpl] {
    margin-left: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.content-wrapper[b-20owoaeqpl] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Page Sections */
.page-section[b-20owoaeqpl] {
    margin-bottom: 24px;
}

/* Typography */
.page-title[b-20owoaeqpl] {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #00345e;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.page-subtitle[b-20owoaeqpl] {
    font-size: 14px;
    color: #26619d;
    margin: 8px 0 0 0;
}

/* Spacing Utilities */
.spacing-small[b-20owoaeqpl] {
    margin-bottom: 12px;
}

.spacing-medium[b-20owoaeqpl] {
    margin-bottom: 24px;
}

.spacing-large[b-20owoaeqpl] {
    margin-bottom: 40px;
}

/* Transitions */
.smooth-transition[b-20owoaeqpl] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading State */
.loading-container[b-20owoaeqpl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #26619d;
}

.loading-spinner[b-20owoaeqpl] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(55, 85, 195, 0.1);
    border-top-color: #3755c3;
    border-radius: 50%;
    animation: spin-b-20owoaeqpl 0.8s linear infinite;
}

@keyframes spin-b-20owoaeqpl {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
.error-container[b-20owoaeqpl] {
    background-color: rgba(159, 64, 61, 0.1);
    border: 1px solid #9f403d;
    border-radius: 8px;
    padding: 16px;
    color: #fff7f6;
    text-align: center;
    margin: 16px 0;
}

.error-icon[b-20owoaeqpl] {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.error-message[b-20owoaeqpl] {
    font-size: 14px;
    font-weight: 500;
}

/* Empty State */
.empty-state[b-20owoaeqpl] {
    background-color: #eff4ff;
    border-radius: 12px;
    padding: 60px 24px;
    text-align: center;
    color: #26619d;
}

.empty-icon[b-20owoaeqpl] {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 16px;
    display: block;
}

.empty-message[b-20owoaeqpl] {
    font-size: 16px;
    font-weight: 500;
    color: #00345e;
    margin: 8px 0;
}

.empty-description[b-20owoaeqpl] {
    font-size: 13px;
    color: #26619d;
    margin-top: 8px;
}

/* Card-like Container */
.card-container[b-20owoaeqpl] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 52, 94, 0.06);
    transition: all 0.3s ease;
}

.card-container:hover[b-20owoaeqpl] {
    box-shadow: 0 4px 16px rgba(0, 52, 94, 0.1);
}

/* Grid Layout */
.grid-2-col[b-20owoaeqpl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.grid-3-col[b-20owoaeqpl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Flex Utilities */
.flex-center[b-20owoaeqpl] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between[b-20owoaeqpl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col[b-20owoaeqpl] {
    display: flex;
    flex-direction: column;
}

.flex-gap-sm[b-20owoaeqpl] {
    gap: 8px;
}

.flex-gap-md[b-20owoaeqpl] {
    gap: 16px;
}

.flex-gap-lg[b-20owoaeqpl] {
    gap: 24px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .customer-aging-main[b-20owoaeqpl] {
        padding: 0;
    }

    .content-wrapper[b-20owoaeqpl] {
        padding: 20px;
    }

    .page-title[b-20owoaeqpl] {
        font-size: 28px;
    }

    .grid-2-col[b-20owoaeqpl],
    .grid-3-col[b-20owoaeqpl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .content-wrapper[b-20owoaeqpl] {
        padding: 20px 12px;
    }

    .page-title[b-20owoaeqpl] {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .spacing-small[b-20owoaeqpl] {
        margin-bottom: 8px;
    }

    .spacing-medium[b-20owoaeqpl] {
        margin-bottom: 16px;
    }

    .spacing-large[b-20owoaeqpl] {
        margin-bottom: 24px;
    }

    .card-container[b-20owoaeqpl] {
        padding: 16px;
    }

    .empty-state[b-20owoaeqpl] {
        padding: 40px 16px;
    }

    .empty-icon[b-20owoaeqpl] {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .content-wrapper[b-20owoaeqpl] {
        padding: 20px 8px;
    }

    .page-title[b-20owoaeqpl] {
        font-size: 20px;
    }

    .page-subtitle[b-20owoaeqpl] {
        font-size: 12px;
    }

    .card-container[b-20owoaeqpl] {
        padding: 12px;
        border-radius: 8px;
    }

    .empty-state[b-20owoaeqpl] {
        padding: 30px 12px;
    }

    .empty-icon[b-20owoaeqpl] {
        font-size: 40px;
    }

    .empty-message[b-20owoaeqpl] {
        font-size: 14px;
    }

    .empty-description[b-20owoaeqpl] {
        font-size: 12px;
    }

    .loading-spinner[b-20owoaeqpl] {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }
}

/* Print Styles */
@media print {
    .customer-aging-main[b-20owoaeqpl] {
        margin-left: 0;
        padding: 0;
    }

    .card-container[b-20owoaeqpl] {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
}

/* Accessibility */
.sr-only[b-20owoaeqpl] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Visible for Keyboard Navigation */
:focus-visible[b-20owoaeqpl] {
    outline: 2px solid #3755c3;
    outline-offset: 2px;
}

button:focus-visible[b-20owoaeqpl] {
    outline-offset: 2px;
}
/* /Components/Pages/CustomerAging/CustomerNavigationBar.razor.rz.scp.css */
.customer-navigation-bar[b-l84y4xgppk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    background-color: #dce9ff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(129, 181, 246, 0.1);
    gap: 16px;
}

.nav-button[b-l84y4xgppk] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3755c3;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: "Be Vietnam Pro", sans-serif;
    white-space: nowrap;
}

.nav-button:hover[b-l84y4xgppk] {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateX(0.25rem);
}

.nav-button:active[b-l84y4xgppk] {
    transform: scale(0.98);
}

.nav-button:disabled[b-l84y4xgppk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.customer-info[b-l84y4xgppk] {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.customer-name[b-l84y4xgppk] {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #00345e;
    margin: 0;
    letter-spacing: -0.5px;
}

.customer-id[b-l84y4xgppk] {
    font-family: monospace;
    font-size: 11px;
    color: #26619d;
    font-weight: 700;
    margin: 4px 0 0 0;
}

.nav-icon[b-l84y4xgppk] {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

@media (max-width: 1024px) {
    .customer-navigation-bar[b-l84y4xgppk] {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .customer-info[b-l84y4xgppk] {
        order: -1;
        margin-bottom: 8px;
    }

    .customer-name[b-l84y4xgppk] {
        font-size: 20px;
    }

    .nav-button[b-l84y4xgppk] {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .customer-navigation-bar[b-l84y4xgppk] {
        padding: 12px;
        gap: 8px;
    }

    .customer-name[b-l84y4xgppk] {
        font-size: 18px;
    }

    .customer-id[b-l84y4xgppk] {
        font-size: 10px;
    }

    .nav-button[b-l84y4xgppk] {
        font-size: 12px;
        padding: 6px 10px;
    }

    .nav-icon[b-l84y4xgppk] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .customer-navigation-bar[b-l84y4xgppk] {
        padding: 8px;
        gap: 4px;
    }

    .customer-name[b-l84y4xgppk] {
        font-size: 16px;
    }

    .customer-id[b-l84y4xgppk] {
        font-size: 9px;
    }

    .nav-button[b-l84y4xgppk] {
        font-size: 11px;
        padding: 4px 6px;
        gap: 4px;
    }

    .nav-icon[b-l84y4xgppk] {
        font-size: 16px;
    }
}
/* /Components/Pages/CustomerAging/InvoiceRow.razor.rz.scp.css */
.invoice-row[b-w9j8scutzz] {
    transition: all 0.2s ease;
}

.invoice-row:hover[b-w9j8scutzz] {
    background-color: #eff4ff;
}

.table-cell[b-w9j8scutzz] {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 13px;
    text-align: left;
    word-wrap: break-word;
    height: 44px;
}

.text-right[b-w9j8scutzz] {
    text-align: right;
}

.invoice-id[b-w9j8scutzz] {
    font-weight: 600;
    color: #3755c3;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.date-cell[b-w9j8scutzz] {
    font-size: 12px;
    color: rgba(0, 52, 94, 0.8);
    white-space: nowrap;
}

.amount-cell[b-w9j8scutzz] {
    font-weight: 500;
    font-size: 12px;
    color: #00345e;
    white-space: nowrap;
}

.balance-cell[b-w9j8scutzz] {
    font-weight: 700;
    font-size: 12px;
    color: #914d00;
    white-space: nowrap;
}

.status-cell[b-w9j8scutzz] {
    padding: 12px 16px;
}

.status-badge[b-w9j8scutzz] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-overdue[b-w9j8scutzz] {
    background-color: rgba(241, 147, 44, 0.2);
    color: #4a2500;
}

.status-pending[b-w9j8scutzz] {
    background-color: #d2e4ff;
    color: #26619d;
}

.actions-cell[b-w9j8scutzz] {
    padding: 10px 12px;
    min-width: 350px;
    vertical-align: middle;
}

.actions-wrapper[b-w9j8scutzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-section[b-w9j8scutzz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
    gap: 2px;
}

.contact-email[b-w9j8scutzz] {
    font-size: 11px;
    color: #26619d;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.3px;
}

.contact-history[b-w9j8scutzz] {
    font-size: 10px;
    color: #3755c3;
    text-decoration: none;
    font-weight: 700;
    margin-top: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-history:hover[b-w9j8scutzz] {
    text-decoration: underline;
    opacity: 0.8;
}

.send-btn[b-w9j8scutzz] {
    background-color: #3755c3;
    color: white;
    border: none;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(55, 85, 195, 0.2);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    height: fit-content;
}

.send-btn:hover[b-w9j8scutzz] {
    background-color: #2848b7;
    box-shadow: 0 2px 6px rgba(55, 85, 195, 0.3);
}

.send-btn:active[b-w9j8scutzz] {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(55, 85, 195, 0.2);
}

.send-btn:disabled[b-w9j8scutzz] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .actions-wrapper[b-w9j8scutzz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .send-btn[b-w9j8scutzz] {
        width: 100%;
        text-align: center;
    }

    .table-cell[b-w9j8scutzz] {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .table-cell[b-w9j8scutzz] {
        padding: 8px 10px;
        font-size: 11px;
    }

    .invoice-id[b-w9j8scutzz] {
        font-size: 11px;
    }

    .amount-cell[b-w9j8scutzz],
    .balance-cell[b-w9j8scutzz] {
        font-size: 11px;
    }

    .date-cell[b-w9j8scutzz] {
        font-size: 11px;
    }

    .status-badge[b-w9j8scutzz] {
        font-size: 9px;
        padding: 3px 6px;
    }

    .contact-email[b-w9j8scutzz] {
        font-size: 10px;
    }

    .contact-history[b-w9j8scutzz] {
        font-size: 9px;
    }

    .send-btn[b-w9j8scutzz] {
        font-size: 10px;
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    .table-cell[b-w9j8scutzz] {
        padding: 6px 8px;
        font-size: 10px;
    }

    .invoice-id[b-w9j8scutzz] {
        font-size: 10px;
    }

    .send-btn[b-w9j8scutzz] {
        font-size: 9px;
        padding: 4px 8px;
    }

    .status-badge[b-w9j8scutzz] {
        font-size: 8px;
        padding: 2px 4px;
    }

    .contact-email[b-w9j8scutzz] {
        font-size: 9px;
    }

    .contact-history[b-w9j8scutzz] {
        margin-top: 2px;
    }

    .actions-wrapper[b-w9j8scutzz] {
        gap: 6px;
    }
}
/* /Components/Pages/CustomerAging/InvoiceTable.razor.rz.scp.css */
.invoice-table-container[b-ycxkogk7bp] {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 52, 94, 0.04);
    margin-bottom: 24px;
}

.invoice-table-scroll[b-ycxkogk7bp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.invoice-table[b-ycxkogk7bp] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-header[b-ycxkogk7bp] {
    background-color: #e5eeff;
    color: #26619d;
}

.table-header-cell[b-ycxkogk7bp] {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: middle;
    text-align: left;
    word-wrap: break-word;
    height: 44px;
}

.table-body[b-ycxkogk7bp] {
    border-top: 1px solid rgba(129, 181, 246, 0.1);
}

.table-row[b-ycxkogk7bp] {
    border-bottom: 1px solid rgba(129, 181, 246, 0.1);
    transition: all 0.2s ease;
}

.table-row:hover[b-ycxkogk7bp] {
    background-color: #eff4ff;
}

.table-row:last-child[b-ycxkogk7bp] {
    border-bottom: none;
}

.table-cell[b-ycxkogk7bp] {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 13px;
    text-align: left;
    word-wrap: break-word;
}

.table-cell-right[b-ycxkogk7bp] {
    text-align: right;
}

.text-right[b-ycxkogk7bp] {
    text-align: right;
}

.invoice-id[b-ycxkogk7bp] {
    font-weight: 600;
    color: #3755c3;
    font-family: monospace;
    font-size: 12px;
}

.date-cell[b-ycxkogk7bp] {
    font-size: 12px;
    color: rgba(0, 52, 94, 0.8);
    white-space: nowrap;
}

.amount-cell[b-ycxkogk7bp] {
    font-weight: 500;
    color: #00345e;
    font-size: 12px;
    white-space: nowrap;
}

.balance-cell[b-ycxkogk7bp] {
    font-weight: 700;
    color: #914d00;
    font-size: 12px;
    white-space: nowrap;
}

.status-badge[b-ycxkogk7bp] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-overdue[b-ycxkogk7bp] {
    background-color: rgba(241, 147, 44, 0.2);
    color: #4a2500;
}

.status-pending[b-ycxkogk7bp] {
    background-color: #d2e4ff;
    color: #26619d;
}

.actions-cell[b-ycxkogk7bp] {
    min-width: 350px;
}

.actions-wrapper[b-ycxkogk7bp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-info[b-ycxkogk7bp] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

.contact-email[b-ycxkogk7bp] {
    font-size: 11px;
    color: #26619d;
    font-weight: 500;
    margin: 0;
}

.contact-history-link[b-ycxkogk7bp] {
    font-size: 10px;
    color: #3755c3;
    text-decoration: none;
    font-weight: 700;
    margin-top: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.contact-history-link:hover[b-ycxkogk7bp] {
    text-decoration: underline;
}

.send-statement-btn[b-ycxkogk7bp] {
    background-color: #3755c3;
    color: white;
    border: none;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(55, 85, 195, 0.3);
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
}

.send-statement-btn:hover[b-ycxkogk7bp] {
    background-color: #2848b7;
    box-shadow: 0 4px 10px rgba(55, 85, 195, 0.4);
}

.send-statement-btn:active[b-ycxkogk7bp] {
    transform: scale(0.95);
}

.send-statement-btn:disabled[b-ycxkogk7bp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-loading[b-ycxkogk7bp] {
    text-align: center;
    padding: 40px 24px;
    color: #26619d;
}

.table-empty[b-ycxkogk7bp] {
    text-align: center;
    padding: 60px 24px;
}

.empty-icon[b-ycxkogk7bp] {
    font-size: 48px;
    color: #81b5f6;
    margin-bottom: 16px;
}

.empty-message[b-ycxkogk7bp] {
    font-size: 16px;
    font-weight: 500;
    color: #00345e;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .actions-wrapper[b-ycxkogk7bp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .send-statement-btn[b-ycxkogk7bp] {
        width: 100%;
    }

    .table-header-cell[b-ycxkogk7bp] {
        padding: 10px 12px;
        font-size: 10px;
    }

    .table-cell[b-ycxkogk7bp] {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .invoice-table[b-ycxkogk7bp] {
        font-size: 12px;
    }

    .table-header-cell[b-ycxkogk7bp] {
        padding: 8px 10px;
        font-size: 9px;
    }

    .table-cell[b-ycxkogk7bp] {
        padding: 8px 10px;
        font-size: 11px;
    }

    .invoice-id[b-ycxkogk7bp] {
        font-size: 11px;
    }

    .date-cell[b-ycxkogk7bp] {
        font-size: 11px;
    }

    .amount-cell[b-ycxkogk7bp] {
        font-size: 11px;
    }

    .balance-cell[b-ycxkogk7bp] {
        font-size: 11px;
    }

    .status-badge[b-ycxkogk7bp] {
        font-size: 9px;
        padding: 3px 6px;
    }

    .actions-cell[b-ycxkogk7bp] {
        min-width: 300px;
    }

    .send-statement-btn[b-ycxkogk7bp] {
        font-size: 10px;
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    .invoice-table[b-ycxkogk7bp] {
        font-size: 11px;
    }

    .table-header-cell[b-ycxkogk7bp] {
        padding: 6px 8px;
        font-size: 8px;
        letter-spacing: 0px;
    }

    .table-cell[b-ycxkogk7bp] {
        padding: 6px 8px;
        font-size: 10px;
    }

    .invoice-id[b-ycxkogk7bp] {
        font-size: 10px;
    }

    .date-cell[b-ycxkogk7bp],
    .amount-cell[b-ycxkogk7bp],
    .balance-cell[b-ycxkogk7bp] {
        font-size: 10px;
    }

    .contact-email[b-ycxkogk7bp] {
        font-size: 9px;
    }

    .contact-history-link[b-ycxkogk7bp] {
        font-size: 8px;
    }

    .send-statement-btn[b-ycxkogk7bp] {
        font-size: 9px;
        padding: 4px 8px;
    }

    .actions-cell[b-ycxkogk7bp] {
        min-width: 250px;
    }
}

.actions-cell[b-ycxkogk7bp] {
    min-width: 400px;
}

.actions-container[b-ycxkogk7bp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.contact-info[b-ycxkogk7bp] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contact-email[b-ycxkogk7bp] {
    font-size: 11px;
    color: #26619d;
    font-weight: 500;
    margin: 0;
}

.contact-history-link[b-ycxkogk7bp] {
    font-size: 10px;
    color: #3755c3;
    text-decoration: none;
    font-weight: 700;
    margin-top: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.contact-history-link:hover[b-ycxkogk7bp] {
    text-decoration: underline;
}

.send-statement-btn[b-ycxkogk7bp] {
    background-color: #3755c3;
    color: white;
    border: none;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(55, 85, 195, 0.3);
    white-space: nowrap;
    text-transform: uppercase;
}

.send-statement-btn:hover[b-ycxkogk7bp] {
    background-color: #2848b7;
    box-shadow: 0 4px 10px rgba(55, 85, 195, 0.4);
}

.send-statement-btn:active[b-ycxkogk7bp] {
    transform: scale(0.95);
}

.send-statement-btn:disabled[b-ycxkogk7bp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-loading[b-ycxkogk7bp] {
    text-align: center;
    padding: 40px 24px;
    color: #26619d;
}

.table-empty[b-ycxkogk7bp] {
    text-align: center;
    padding: 60px 24px;
}

.empty-icon[b-ycxkogk7bp] {
    font-size: 48px;
    color: #81b5f6;
    margin-bottom: 16px;
}

.empty-message[b-ycxkogk7bp] {
    font-size: 16px;
    font-weight: 500;
    color: #00345e;
    margin: 0;
}

@media (max-width: 1024px) {
    .actions-container[b-ycxkogk7bp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .send-statement-btn[b-ycxkogk7bp] {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .invoice-table-scroll[b-ycxkogk7bp] {
        -webkit-overflow-scrolling: touch;
    }

    .table-cell[b-ycxkogk7bp] {
        padding: 12px 16px;
        font-size: 13px;
    }

    .table-header-cell[b-ycxkogk7bp] {
        padding: 12px 16px;
        font-size: 10px;
    }

    .actions-cell[b-ycxkogk7bp] {
        min-width: 300px;
    }
}

@media (max-width: 480px) {
    .table-cell[b-ycxkogk7bp] {
        padding: 10px 12px;
        font-size: 12px;
    }

    .table-header-cell[b-ycxkogk7bp] {
        padding: 10px 12px;
        font-size: 9px;
    }

    .actions-cell[b-ycxkogk7bp] {
        min-width: 250px;
    }
}
/* /Components/Pages/CustomerAging/QueryFiltersSection.razor.rz.scp.css */
.query-filters-section[b-gvyirm3d0c] {
    background-color: #eff4ff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px;
    box-shadow: 0 1px 3px rgba(0, 52, 94, 0.06);
}

.filter-group[b-gvyirm3d0c] {
    flex: 1;
    min-width: 200px;
}

.filter-label[b-gvyirm3d0c] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #26619d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.filter-input-wrapper[b-gvyirm3d0c] {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-input[b-gvyirm3d0c] {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 40px 12px 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    font-family: "Be Vietnam Pro", sans-serif;
}

.filter-input:focus[b-gvyirm3d0c] {
    outline: none;
    border-color: #3755c3;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(55, 85, 195, 0.2);
}

.filter-input:readonly[b-gvyirm3d0c] {
    cursor: pointer;
    background-color: #ffffff;
}

.filter-icon[b-gvyirm3d0c] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #477dbb;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.run-query-btn[b-gvyirm3d0c] {
    background-color: #3755c3;
    color: white;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(55, 85, 195, 0.3);
    white-space: nowrap;
    font-family: "Be Vietnam Pro", sans-serif;
}

.run-query-btn:hover[b-gvyirm3d0c] {
    background-color: #2848b7;
    box-shadow: 0 4px 12px rgba(55, 85, 195, 0.4);
    transform: translateY(-2px);
}

.run-query-btn:active[b-gvyirm3d0c] {
    transform: scale(0.95);
}

.run-query-btn:disabled[b-gvyirm3d0c] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 1024px) {
    .query-filters-section[b-gvyirm3d0c] {
        flex-direction: column;
        gap: 16px;
    }

    .filter-group[b-gvyirm3d0c] {
        width: 100%;
    }

    .run-query-btn[b-gvyirm3d0c] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .query-filters-section[b-gvyirm3d0c] {
        padding: 16px;
        gap: 12px;
    }

    .filter-group[b-gvyirm3d0c] {
        width: 100%;
    }

    .filter-input[b-gvyirm3d0c] {
        padding: 10px 36px 10px 10px;
        font-size: 13px;
    }

    .filter-icon[b-gvyirm3d0c] {
        font-size: 18px;
        right: 8px;
    }

    .filter-label[b-gvyirm3d0c] {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .run-query-btn[b-gvyirm3d0c] {
        width: 100%;
        font-size: 13px;
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .query-filters-section[b-gvyirm3d0c] {
        padding: 12px;
        gap: 8px;
    }

    .filter-input[b-gvyirm3d0c] {
        padding: 8px 32px 8px 8px;
        font-size: 12px;
    }

    .filter-icon[b-gvyirm3d0c] {
        font-size: 16px;
    }

    .filter-label[b-gvyirm3d0c] {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    .run-query-btn[b-gvyirm3d0c] {
        font-size: 11px;
        padding: 8px 12px;
    }
}
/* /Components/Pages/CustomerAging/SummaryFooter.razor.rz.scp.css */
.summary-footer[b-0pd07tenmj] {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    background-color: #00345e;
    color: #ffffff;
    border-radius: 0;
    padding: 32px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 12px rgba(0, 52, 94, 0.15);
    gap: 24px;
    width: 100%;
}

.balance-section[b-0pd07tenmj] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.balance-icon-wrapper[b-0pd07tenmj] {
    background-color: rgba(55, 85, 195, 0.2);
    padding: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.balance-icon[b-0pd07tenmj] {
    color: #cad2ff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-content[b-0pd07tenmj] {
    display: flex;
    flex-direction: column;
}

.balance-label[b-0pd07tenmj] {
    color: #c4dcff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.balance-amount[b-0pd07tenmj] {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin: 4px 0 0 0;
    letter-spacing: -0.5px;
}

.actions-section[b-0pd07tenmj] {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.footer-btn[b-0pd07tenmj] {
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    font-family: "Be Vietnam Pro", sans-serif;
}

.btn-download[b-0pd07tenmj] {
    background-color: #ffffff;
    color: #00345e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-download:hover[b-0pd07tenmj] {
    background-color: #d2e4ff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.btn-download:active[b-0pd07tenmj] {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-send-all[b-0pd07tenmj] {
    background-color: #4a4bd7;
    color: white;
    box-shadow: 0 2px 6px rgba(74, 75, 215, 0.3);
}

.btn-send-all:hover[b-0pd07tenmj] {
    background-color: #3d3dcb;
    box-shadow: 0 4px 10px rgba(74, 75, 215, 0.4);
    transform: translateY(-2px);
}

.btn-send-all:active[b-0pd07tenmj] {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(74, 75, 215, 0.2);
}

.btn-icon[b-0pd07tenmj] {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-disabled[b-0pd07tenmj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

@media (max-width: 768px) {
    .summary-footer[b-0pd07tenmj] {
        padding: 20px 12px;
        gap: 16px;
        flex-direction: column;
    }

    .balance-icon-wrapper[b-0pd07tenmj] {
        min-width: 48px;
        height: 48px;
        padding: 10px;
    }

    .balance-icon[b-0pd07tenmj] {
        font-size: 28px;
    }

    .balance-section[b-0pd07tenmj] {
        gap: 16px;
        width: 100%;
    }

    .balance-amount[b-0pd07tenmj] {
        font-size: 24px;
    }

    .balance-label[b-0pd07tenmj] {
        font-size: 10px;
    }

    .actions-section[b-0pd07tenmj] {
        gap: 12px;
        width: 100%;
        flex-direction: column;
    }

    .footer-btn[b-0pd07tenmj] {
        width: 100%;
        padding: 12px 16px;
        font-size: 12px;
    }

    .btn-icon[b-0pd07tenmj] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .summary-footer[b-0pd07tenmj] {
        padding: 16px 8px;
        flex-direction: column;
    }

    .balance-section[b-0pd07tenmj] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .balance-icon-wrapper[b-0pd07tenmj] {
        margin: 0 auto;
    }

    .balance-amount[b-0pd07tenmj] {
        font-size: 20px;
    }

    .balance-label[b-0pd07tenmj] {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    .actions-section[b-0pd07tenmj] {
        width: 100%;
        gap: 8px;
    }

    .footer-btn[b-0pd07tenmj] {
        font-size: 11px;
        padding: 10px 12px;
        gap: 6px;
    }

    .btn-icon[b-0pd07tenmj] {
        font-size: 14px;
    }
}
/* /Components/Pages/DashboardTicketPage.razor.rz.scp.css */
#chartRenderPercent[b-jt4xapqp8e] {
    background-color: rgba(217, 217, 217, 0.3);
    border-radius: 50%;
}
/* /Components/Pages/HomePage.razor.rz.scp.css */
.contentHomePG .nav-link[b-y4esj77aty] {
    color: white;
    font-size: 25px;
    padding: 0;
    transition: border-bottom 0.2s ease, color 0.2s ease;
}
.navHomePage2[b-y4esj77aty] {
    position: sticky;
    top: 2.75rem;
    z-index: 9;
    background-color: #2c4a65;
    padding: 0 3rem;
    height: 3.25rem;
    transition: padding-left 0.3s ease;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15);
}
.nav-back-btn[b-y4esj77aty] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: bold;
    line-height: 2.875rem;
    height: 2.75rem;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.nav-back-btn:hover[b-y4esj77aty] {
    opacity: 1;
}
.nav-subject-title[b-y4esj77aty] {
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 2.875rem;
    height: 2.75rem;
    position: relative;
    padding-left: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
}
.nav-subject-title[b-y4esj77aty]::after {
    content: "";
    position: absolute;
    right: -0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1rem;
    background: rgba(255, 255, 255, 0.35);
}
[data-theme="light"] .nav-back-btn[b-y4esj77aty],
[data-theme="light"] .nav-subject-title[b-y4esj77aty] {
    color: #212529 !important;
}
[data-theme="light"] .nav-subject-title[b-y4esj77aty]::after {
    background: #212529;
}
[data-theme="light"] .nav-back-btn:hover[b-y4esj77aty],
[data-theme="light"] .nav-subject-title:hover[b-y4esj77aty] {
    color: #0d6efd !important;
}
.nav-jumpto-dropdown[b-y4esj77aty] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    position: relative;
}
.nav-jumpto-arrow[b-y4esj77aty] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: white;
    font-size: 0.8125rem;
    font-weight: bold;
    height: 2.75rem;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-jumpto-arrow:hover[b-y4esj77aty] {
    opacity: 1;
}
.nav-jumpto-arrow[aria-expanded="true"][b-y4esj77aty] {
    transform: rotate(-90deg);
}
.nav-jumpto-menu[b-y4esj77aty] {
    min-width: 10rem;
    background-color: #2c4a65;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.5rem 0;
}
.nav-jumpto-item[b-y4esj77aty] {
    display: block;
    width: 100%;
    color: white;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 2.25rem;
    padding: 0 1rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: border-bottom 0.2s ease, background-color 0.2s ease;
}
.nav-jumpto-item:hover[b-y4esj77aty] {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}
.nav-jumpto-item.active[b-y4esj77aty] {
    border-bottom-color: white;
}
[data-theme="light"] .nav-jumpto-arrow[b-y4esj77aty] {
    color: #212529 !important;
}
[data-theme="light"] .nav-jumpto-arrow:hover[b-y4esj77aty] {
    color: #0d6efd !important;
}
[data-theme="light"] .nav-jumpto-menu[b-y4esj77aty] {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .nav-jumpto-item[b-y4esj77aty] {
    color: #212529 !important;
}
[data-theme="light"] .nav-jumpto-item:hover[b-y4esj77aty] {
    background-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .nav-jumpto-item.active[b-y4esj77aty] {
    border-bottom-color: #212529;
}
.contentHomePG .nav-link.active[b-y4esj77aty], .contentHomePG .nav-link:hover[b-y4esj77aty] {
    background-color: transparent !important;
    color: white !important;
    border-radius: 0 !important;
}
.contentHomePG .nav-link.active[b-y4esj77aty] {
    border-bottom: 3px solid white;
    color: white !important;
    border-radius: 0 !important;
}
.nav-group[b-y4esj77aty] {
    align-items: center;
}
.nav-group-subjects[b-y4esj77aty] {
    animation: navGroupSlideInRight-b-y4esj77aty 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-group-categories[b-y4esj77aty] {
    animation: navGroupSlideInLeft-b-y4esj77aty 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes navGroupSlideInRight-b-y4esj77aty {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes navGroupSlideInLeft-b-y4esj77aty {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.contentHomePG .content-item[b-y4esj77aty] {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
}
.contentHomePG .content-item.show[b-y4esj77aty] {
    display: block;
    opacity: 1;
    transform: scale(1);
}
.grid-item[b-y4esj77aty] {
    border-radius:0.25rem;
}
.contentHomePage[b-y4esj77aty] {
    background-image: linear-gradient(180deg, #2b4964 0%, #2b4964 15%, #96b9d7 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 0 3rem;
    position: relative;
    transition: padding-left 0.3s ease;
    padding-bottom: 0 !important;
    /* overflow: hidden; */ 
    margin-bottom: 0;
}
html[b-y4esj77aty], body[b-y4esj77aty] {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* Hiệu ứng hover cho ảnh trong video-container */
#video-container img[b-y4esj77aty] {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

    #video-container img:hover[b-y4esj77aty] {
        border: 1px solid #3b82f6;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
    }

/* Hiệu ứng cho container bọc ảnh */

/*
#SettingLink .resIconItem {
    width: 70px !important;
    height: 70px !important;
}
/* /Components/Pages/HrCentrals/ShiftAssignPageV2.razor.rz.scp.css */
.sticky-col[b-9g296xakmu] {
    position: sticky;
}
/* /Components/Pages/IOTDashboard/IOTAddDevice.razor.rz.scp.css */
.iot-layout[b-y1on1zna1v] {
    display: flex;
    min-height: calc(100vh - 2.75rem);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.iot-main[b-y1on1zna1v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.add-content[b-y1on1zna1v] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 3rem;
    background-color: #faf8ff;
    box-sizing: border-box;
}

.custom-scrollbar[b-y1on1zna1v]::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar[b-y1on1zna1v]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar[b-y1on1zna1v]::-webkit-scrollbar-thumb {
    background: #bcc9cd;
    border-radius: 10px;
}

.add-grid[b-y1on1zna1v] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    min-width: 0;
}

/* Card */
.card[b-y1on1zna1v] {
    background: white;
    border: 1px solid #bcc9cd;
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    min-width: 0;
}

.card-h3[b-y1on1zna1v] {
    font-family: Manrope, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #131b2e;
    margin: 0;
}

.card-header-row[b-y1on1zna1v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.icon-btn-sm[b-y1on1zna1v] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .icon-btn-sm:hover[b-y1on1zna1v] {
        background-color: #eaedff;
    }

    .icon-btn-sm.primary .material-symbols-outlined[b-y1on1zna1v] {
        color: #00687a;
        font-size: 20px !important;
    }

/* Category Items */
.category-list[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-item[b-y1on1zna1v] {
    padding: 8px;
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .category-item:hover[b-y1on1zna1v] {
        border-color: #00687a;
    }

.cat-icon[b-y1on1zna1v] {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cat-icon .material-symbols-outlined[b-y1on1zna1v] {
        font-size: 18px !important;
    }

.secondary-cont-bg[b-y1on1zna1v] {
    background-color: #6cf8bb;
    color: #00714d;
}

.primary-fixed-bg[b-y1on1zna1v] {
    background-color: #acedff;
    color: #001f26;
}

.tertiary-fixed-bg[b-y1on1zna1v] {
    background-color: #ffddb8;
    color: #2a1700;
}

.cat-info[b-y1on1zna1v] {
    flex: 1;
    min-width: 0;
}

.cat-name[b-y1on1zna1v] {
    font-size: 14px;
    font-weight: 700;
    color: #131b2e;
    margin: 0;
}

.cat-sub[b-y1on1zna1v] {
    font-size: 12px;
    color: #3d494c;
    margin: 0;
}

.cat-chevron[b-y1on1zna1v] {
    color: #6d797d;
    transition: color 0.2s;
    font-size: 18px !important;
    flex-shrink: 0;
}

.category-item:hover .cat-chevron[b-y1on1zna1v] {
    color: #00687a;
}

/* Distribution */
.dist-section[b-y1on1zna1v] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #bcc9cd;
}

.dist-label[b-y1on1zna1v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #3d494c;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.dist-bar[b-y1on1zna1v] {
    display: flex;
    height: 10px;
    width: 100%;
    background-color: #eaedff;
    border-radius: 9999px;
    overflow: hidden;
}

.dist-segment[b-y1on1zna1v] {
    height: 100%;
}

.dist-legend[b-y1on1zna1v] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
}

.legend-item[b-y1on1zna1v] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot[b-y1on1zna1v] {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
}

/* Health */
.left-pane[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.health-list[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.health-item[b-y1on1zna1v] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.timeline-dot[b-y1on1zna1v] {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.secondary-dot-sm[b-y1on1zna1v] {
    background-color: #006c49;
}

.tertiary-dot-sm[b-y1on1zna1v] {
    background-color: #855300;
}

.tiny-icon[b-y1on1zna1v] {
    font-size: 10px !important;
    color: white;
}

.health-title[b-y1on1zna1v] {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.health-sub[b-y1on1zna1v] {
    font-size: 12px;
    color: #3d494c;
    opacity: 0.7;
    margin: 0;
}

/* Wizard */
.right-pane[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.wizard-card[b-y1on1zna1v] {
    background: white;
    border: 1px solid #bcc9cd;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.connection-line-top[b-y1on1zna1v] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
    background-size: 200% 100%;
    animation: moveGradient-b-y1on1zna1v 3s linear infinite;
}

@keyframes moveGradient-b-y1on1zna1v {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.wizard-header[b-y1on1zna1v] {
    margin-bottom: 24px;
}

.wizard-title[b-y1on1zna1v] {
    font-family: Manrope, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #00687a;
    margin: 0 0 4px 0;
}

.wizard-sub[b-y1on1zna1v] {
    font-size: 15px;
    color: #3d494c;
    margin: 0;
}

/* Stepper */
.stepper[b-y1on1zna1v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
}

.stepper-line[b-y1on1zna1v] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #eaedff;
    transform: translateY(-50%);
    z-index: 0;
}

.step[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.step-circle[b-y1on1zna1v] {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background-color: #eaedff;
    color: #3d494c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 0 0 4px white;
}

.active-circle[b-y1on1zna1v] {
    background-color: #00687a;
    color: white;
}

.step-label[b-y1on1zna1v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #3d494c;
}

.active-label[b-y1on1zna1v] {
    color: #00687a;
}

/* Form */
.form-grid[b-y1on1zna1v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

.form-col[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-label[b-y1on1zna1v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label-text[b-y1on1zna1v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #3d494c;
    text-transform: uppercase;
}

.form-input[b-y1on1zna1v], .form-select[b-y1on1zna1v] {
    width: 100%;
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .form-input:focus[b-y1on1zna1v], .form-select:focus[b-y1on1zna1v] {
        outline: none;
        border-color: #06b6d4;
        box-shadow: 0 0 0 1px #06b6d4;
    }

.readonly-input[b-y1on1zna1v] {
    background-color: #d2d9f4;
    opacity: 0.7;
}

.input-with-btn[b-y1on1zna1v] {
    display: flex;
    gap: 8px;
}

    .input-with-btn .form-input[b-y1on1zna1v] {
        flex: 1;
        min-width: 0;
    }

.btn-refresh[b-y1on1zna1v] {
    background-color: #e2e7ff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

    .btn-refresh:hover[b-y1on1zna1v] {
        background-color: #dae2fd;
    }

    .btn-refresh .material-symbols-outlined[b-y1on1zna1v] {
        font-size: 18px !important;
    }

.primary[b-y1on1zna1v] {
    color: #00687a;
}

.two-col-inputs[b-y1on1zna1v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-footer[b-y1on1zna1v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
    flex-wrap: wrap;
}

.info-note[b-y1on1zna1v] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3d494c;
    opacity: 0.7;
    font-size: 13px;
}

    .info-note .material-symbols-outlined[b-y1on1zna1v] {
        flex-shrink: 0;
        font-size: 18px !important;
    }

.form-actions[b-y1on1zna1v] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-cancel[b-y1on1zna1v] {
    padding: 10px 24px;
    border: 1px solid #6d797d;
    background: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-cancel:hover[b-y1on1zna1v] {
        background-color: #f2f3ff;
    }

.btn-init[b-y1on1zna1v] {
    padding: 10px 24px;
    background-color: #06b6d4;
    color: #00424f;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.2s;
    box-shadow: 0 4px 12px rgba(6,182,212,0.2);
}

    .btn-init:hover:not(:disabled)[b-y1on1zna1v] {
        filter: brightness(0.95);
    }

    .btn-init:disabled[b-y1on1zna1v] {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .btn-init.btn-success[b-y1on1zna1v] {
        background-color: #006c49;
        color: white;
    }

    .btn-init .material-symbols-outlined[b-y1on1zna1v] {
        font-size: 18px !important;
    }

.spin-icon[b-y1on1zna1v] {
    animation: spin-b-y1on1zna1v 1s linear infinite;
}

@keyframes spin-b-y1on1zna1v {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Preview */
.preview-grid[b-y1on1zna1v] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    min-width: 0;
}

.preview-card[b-y1on1zna1v] {
    background: white;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 10rem;
    position: relative;
    min-width: 0;
}

.preview-overlay[b-y1on1zna1v] {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(circle, #00687a 1px, transparent 1px);
    background-size: 20px 20px;
}

.preview-header[b-y1on1zna1v] {
    padding: 10px;
    border-bottom: 1px solid #bcc9cd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f3ff;
}

.preview-title[b-y1on1zna1v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.ready-badge[b-y1on1zna1v] {
    padding: 2px 6px;
    background-color: #6cf8bb;
    color: #00714d;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.preview-body[b-y1on1zna1v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.preview-flow[b-y1on1zna1v] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.flow-node[b-y1on1zna1v] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(6,182,212,0.1);
    border: 2px dashed #06b6d4;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .flow-node .material-symbols-outlined[b-y1on1zna1v] {
        font-size: 18px !important;
    }

.pulsing[b-y1on1zna1v] {
    animation: pulse-anim-b-y1on1zna1v 2s infinite;
}

@keyframes pulse-anim-b-y1on1zna1v {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.cyan[b-y1on1zna1v] {
    color: #06b6d4;
}

.flow-line[b-y1on1zna1v] {
    flex: 1;
    height: 2px;
    background-color: #eaedff;
    position: relative;
    min-width: 40px;
}

.connection-line-anim[b-y1on1zna1v] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
    background-size: 200% 100%;
    animation: moveGradient-b-y1on1zna1v 3s linear infinite;
}

.throughput-card[b-y1on1zna1v] {
    background: white;
    border: 1px solid #bcc9cd;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.throughput-label[b-y1on1zna1v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #3d494c;
    margin: 0 0 6px 0;
}

.throughput-value[b-y1on1zna1v] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.tp-num[b-y1on1zna1v] {
    font-family: Manrope, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #00687a;
    line-height: 1;
}

.tp-unit[b-y1on1zna1v] {
    font-size: 13px;
    color: #3d494c;
    margin-bottom: 2px;
}

.sparkbar-container[b-y1on1zna1v] {
    height: 52px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.sparkbar[b-y1on1zna1v] {
    flex: 1;
    background-color: rgba(0,104,122,0.2);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s;
    min-width: 4px;
}

.sparkbar-active[b-y1on1zna1v] {
    background-color: #00687a;
}
/* /Components/Pages/IOTDashboard/IOTCategory.razor.rz.scp.css */
/* ── Overlay ── */
.iotcat-modal-overlay[b-jkeiy6mfp9] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.iotcat-overlay-visible[b-jkeiy6mfp9] {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.iotcat-overlay-hidden[b-jkeiy6mfp9] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Backdrop blur */
.iotcat-backdrop[b-jkeiy6mfp9] {
    position: absolute;
    inset: 0;
    background-color: rgba(19, 27, 46, 0.45);
    backdrop-filter: blur(3px);
}

/* ── Modal Box ── */
.iotcat-modal-content[b-jkeiy6mfp9] {
    position: relative;
    z-index: 10;
    background: white;
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

/* Animation: open  */
.iotcat-modal-in[b-jkeiy6mfp9] {
    transform: scale(1);
    opacity: 1;
}

/* Animation: closed */
.iotcat-modal-out[b-jkeiy6mfp9] {
    transform: scale(0.92);
    opacity: 0;
}

/* ── Header ── */
.iotcat-modal-header[b-jkeiy6mfp9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #bcc9cd;
    background-color: #f2f3ff;
}

.iotcat-modal-title[b-jkeiy6mfp9] {
    font-family: Manrope, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #00345e;
    margin: 0;
}

.iotcat-close-btn[b-jkeiy6mfp9] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6d797d;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

    .iotcat-close-btn:hover[b-jkeiy6mfp9] {
        color: #131b2e;
    }

    .iotcat-close-btn .material-symbols-outlined[b-jkeiy6mfp9] {
        font-size: 20px !important;
    }

/* ── Body ── */
.iotcat-modal-body[b-jkeiy6mfp9] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.iotcat-field[b-jkeiy6mfp9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iotcat-label[b-jkeiy6mfp9] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d494c;
}

.iotcat-input[b-jkeiy6mfp9] {
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .iotcat-input:focus[b-jkeiy6mfp9] {
        outline: none;
        border-color: #06b6d4;
        box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.12);
    }

.iotcat-input-error[b-jkeiy6mfp9] {
    border-color: #ef4444 !important;
}

.iotcat-error-msg[b-jkeiy6mfp9] {
    font-size: 11px;
    color: #ef4444;
}

/* ── Icon Grid ── */
.iotcat-icon-grid[b-jkeiy6mfp9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.iotcat-icon-opt[b-jkeiy6mfp9] {
    padding: 10px;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
    background: #f2f3ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d797d;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

    .iotcat-icon-opt:hover[b-jkeiy6mfp9] {
        border-color: #06b6d4;
        background-color: #e0f9ff;
        color: #00687a;
    }

.iotcat-icon-active[b-jkeiy6mfp9] {
    border-color: #06b6d4 !important;
    background-color: #e0f9ff !important;
    color: #00687a !important;
}

.iotcat-icon-opt .material-symbols-outlined[b-jkeiy6mfp9] {
    font-size: 20px !important;
}

/* ── Footer ── */
.iotcat-modal-footer[b-jkeiy6mfp9] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #bcc9cd;
    background-color: #fafafa;
}

.iotcat-btn-cancel[b-jkeiy6mfp9] {
    flex: 1;
    padding: 10px;
    border: 1px solid #6d797d;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #3d494c;
    transition: background-color 0.2s;
}

    .iotcat-btn-cancel:hover[b-jkeiy6mfp9] {
        background-color: #f2f3ff;
    }

.iotcat-btn-save[b-jkeiy6mfp9] {
    flex: 1;
    padding: 10px;
    background-color: #06b6d4;
    color: #00424f;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
    transition: filter 0.2s;
}

    .iotcat-btn-save:hover[b-jkeiy6mfp9] {
        filter: brightness(0.95);
    }
/* /Components/Pages/IOTDashboard/IOTHub.razor.rz.scp.css */
.iot-layout[b-0bf9l044ws] {
    display: flex;
    min-height: calc(100vh - 2.75rem);
    width: 100%;
    box-sizing: border-box;
}

.iot-main[b-0bf9l044ws] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.dashboard-content[b-0bf9l044ws] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 3rem;
background-color: #faf8ff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    min-width: 0;
}

/* Stats */
.stats-grid[b-0bf9l044ws] {
    display: grid;
  grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    min-width: 0;
}

.stat-card[b-0bf9l044ws] {
    background: white;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
  min-width: 0;
    overflow: hidden;
}

.stat-card:hover[b-0bf9l044ws] {
    border-color: #06b6d4;
  box-shadow: 0 4px 12px rgba(0, 104, 122, 0.08);
}

.stat-label[b-0bf9l044ws] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #6d797d;
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

.stat-value[b-0bf9l044ws] {
    font-family: Manrope, sans-serif;
    font-size: 36px;
    font-weight: 700;
  line-height: 1.1;
    margin: 0;
}

.stat-value.primary[b-0bf9l044ws] { color: #00687a; }
.stat-value.error[b-0bf9l044ws] { color: #ba1a1a; }
.stat-value.on-surface[b-0bf9l044ws] { color: #131b2e; }
.stat-value.secondary[b-0bf9l044ws] { color: #006c49; }

.stat-unit[b-0bf9l044ws] { font-size: 16px; font-weight: 600; }

.stat-sub[b-0bf9l044ws] {
    font-size: 12px;
    display: flex;
  align-items: center;
    gap: 4px;
    margin: 4px 0 0 0;
}
.stat-sub.secondary[b-0bf9l044ws] { color: #006c49; }
.stat-sub.error[b-0bf9l044ws] { color: #ba1a1a; }
.stat-sub.outline[b-0bf9l044ws] { color: #6d797d; }

.stat-icon-wrap[b-0bf9l044ws] {
    padding: 12px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.primary-bg[b-0bf9l044ws] { background-color: rgba(6,182,212,0.1); }
.error-bg[b-0bf9l044ws] { background-color: rgba(255,218,214,0.2); }
.surface-high-bg[b-0bf9l044ws] { background-color: #dae2fd; }
.secondary-bg[b-0bf9l044ws] { background-color: rgba(108,248,187,0.2); }

.stat-icon[b-0bf9l044ws] { font-size: 28px !important; }
.stat-icon.primary[b-0bf9l044ws] { color: #00687a; }
.stat-icon.error[b-0bf9l044ws] { color: #ba1a1a; }
.stat-icon.secondary[b-0bf9l044ws] { color: #006c49; }

.small-icon[b-0bf9l044ws] { font-size: 13px !important; vertical-align: middle; }

/* Section */
.section[b-0bf9l044ws] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.section-header[b-0bf9l044ws] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title-row[b-0bf9l044ws] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title[b-0bf9l044ws] {
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.badge[b-0bf9l044ws] {
    margin-left: 12px;
    padding: 3px 8px;
    background-color: #eaedff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #3d494c;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.link-btn[b-0bf9l044ws] {
    background: none;
    border: none;
    color: #00687a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.link-btn:hover[b-0bf9l044ws] { text-decoration: underline; }

/* Machine Cards */
.machine-grid[b-0bf9l044ws] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    min-width: 0;
}

.machine-card[b-0bf9l044ws] {
    background: white;
  border: 1px solid #bcc9cd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}
.machine-card:hover[b-0bf9l044ws] {
    border-color: #06b6d4;
    box-shadow: 0 4px 12px rgba(0,104,122,0.08);
    transform: translateY(-2px);
}

.status-bar[b-0bf9l044ws] { height: 4px; width: 100%; }
.status-bar.producing[b-0bf9l044ws] { background-color: #006c49; }
.status-bar.waiting[b-0bf9l044ws] { background-color: #e79400; }
.status-bar.offline[b-0bf9l044ws] { background-color: #ba1a1a; }

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

.card-header-row[b-0bf9l044ws] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.card-title[b-0bf9l044ws] { font-size: 14px; font-weight: 700; color: #131b2e; margin: 0; }
.card-id[b-0bf9l044ws] { font-size: 12px; color: #6d797d; margin: 0; }

.status-badge[b-0bf9l044ws] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.producing-badge[b-0bf9l044ws] { background-color: #006c49; }
.waiting-badge[b-0bf9l044ws] { background-color: #e79400; }
.offline-badge[b-0bf9l044ws] { background-color: #ba1a1a; }

.card-metrics[b-0bf9l044ws] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  margin-bottom: 12px;
}

.signal-bars[b-0bf9l044ws] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.bar[b-0bf9l044ws] {
    width: 5px;
    border-radius: 9999px;
}
.h-2[b-0bf9l044ws] { height: 7px; }
.h-3[b-0bf9l044ws] { height: 10px; }
.h-4[b-0bf9l044ws] { height: 13px; }
.h-5[b-0bf9l044ws] { height: 16px; }

.producing-color[b-0bf9l044ws] { background-color: #006c49; }
.warning-color[b-0bf9l044ws] { background-color: #e79400; }
.dim-color[b-0bf9l044ws] { background-color: #bcc9cd; opacity: 0.3; }

.signal-val[b-0bf9l044ws] { font-size: 12px; color: #6d797d; margin-left: 3px; }

.metric-right[b-0bf9l044ws] { text-align: right; }
.metric-right.tertiary[b-0bf9l044ws] { color: #855300; }
.metric-right.error[b-0bf9l044ws] { color: #ba1a1a; }
.metric-label[b-0bf9l044ws] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6d797d; margin: 0; }
.metric-value[b-0bf9l044ws] { font-size: 15px; font-weight: 700; margin: 0; }

.card-actions[b-0bf9l044ws] { display: flex; gap: 6px; }
.btn-configure[b-0bf9l044ws] {
    flex: 1;
  padding: 4px;
    border: 1px solid #00687a;
  color: #00687a;
    font-weight: 700;
    font-size: 12px;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-configure:hover[b-0bf9l044ws] { background-color: rgba(6,182,212,0.1); }

.btn-more[b-0bf9l044ws] {
    padding: 4px 7px;
 border: 1px solid #bcc9cd;
  color: #3d494c;
    background: none;
  cursor: pointer;
    transition: background-color 0.2s;
}
.btn-more:hover[b-0bf9l044ws] { background-color: #eaedff; }
.btn-more .material-symbols-outlined[b-0bf9l044ws] { font-size: 16px !important; }

/* Power Grid */
.power-grid[b-0bf9l044ws] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-width: 0;
}

.power-card[b-0bf9l044ws] {
  background: white;
    border: 1px solid #bcc9cd;
    border-radius: 4px;
padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: all 0.2s ease;
    min-width: 0;
}
.power-card:hover[b-0bf9l044ws] {
    border-color: #06b6d4;
    box-shadow: 0 4px 12px rgba(0,104,122,0.08);
}

.power-icon-wrap[b-0bf9l044ws] {
 width: 52px;
    height: 52px;
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.large-icon[b-0bf9l044ws] { font-size: 28px !important; }
.primary[b-0bf9l044ws] { color: #00687a; }
.error[b-0bf9l044ws] { color: #ba1a1a; }
.secondary[b-0bf9l044ws] { color: #006c49; }

.power-info[b-0bf9l044ws] { flex: 1; min-width: 0; }
.power-header[b-0bf9l044ws] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.power-title[b-0bf9l044ws] { font-size: 14px; font-weight: 700; margin: 0; }
.power-node[b-0bf9l044ws] { font-size: 12px; color: #6d797d; margin: 0 0 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pulse-dot[b-0bf9l044ws] {
  width: 10px;
    height: 10px;
    border-radius: 9999px;
    animation: pulse-b-0bf9l044ws 2s infinite;
    flex-shrink: 0;
}
.secondary-dot[b-0bf9l044ws] { background-color: #006c49; box-shadow: 0 0 8px #006c49; }
.error-dot[b-0bf9l044ws] { background-color: #ba1a1a; box-shadow: 0 0 8px #ba1a1a; }

@keyframes pulse-b-0bf9l044ws {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.progress-track[b-0bf9l044ws] {
    width: 100%;
    height: 4px;
    background-color: #eaedff;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill[b-0bf9l044ws] { height: 100%; border-radius: 9999px; }
.primary-fill[b-0bf9l044ws] { background-color: #00687a; }
.error-fill[b-0bf9l044ws] { background-color: #ba1a1a; }

.icon-action[b-0bf9l044ws] {
    padding: 6px;
    background: none;
 border: none;
cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
 flex-shrink: 0;
}
.icon-action:hover[b-0bf9l044ws] { background-color: #eaedff; }
.icon-action .material-symbols-outlined[b-0bf9l044ws] { font-size: 18px !important; }

/* Security */
.security-grid[b-0bf9l044ws] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    min-width: 0;
}

.sec-card[b-0bf9l044ws] {
    background: white;
    border: 1px solid #bcc9cd;
    border-radius: 4px;
    padding: 12px;
    transition: all 0.2s ease;
    min-width: 0;
    overflow: hidden;
}
.sec-card:hover[b-0bf9l044ws] {
    border-color: #06b6d4;
    box-shadow: 0 4px 12px rgba(0,104,122,0.08);
    transform: translateY(-2px);
}

.alarm-card[b-0bf9l044ws] { border-color: rgba(186,26,26,0.4); background-color: rgba(255,218,214,0.05); }

.sec-card-header[b-0bf9l044ws] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.sec-icon-wrap[b-0bf9l044ws] { width: 36px; height: 36px; background-color: rgba(0,104,122,0.1); display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; }
.error-icon-wrap[b-0bf9l044ws] { background-color: rgba(255,218,214,0.3) !important; }
.sec-status[b-0bf9l044ws] { text-align: right; }
.sec-status-text[b-0bf9l044ws] { font-size: 13px; font-weight: 700; }
.sec-status-text.secondary[b-0bf9l044ws] { color: #006c49; }
.sec-status-text.error[b-0bf9l044ws] { color: #ba1a1a; }
.sec-id[b-0bf9l044ws] { font-size: 10px; color: #6d797d; margin: 0; }
.sec-name[b-0bf9l044ws] { font-size: 13px; font-weight: 700; margin: 0 0 8px 0; }
.sec-name.error[b-0bf9l044ws] { color: #ba1a1a; }
.sec-icon-wrap .material-symbols-outlined[b-0bf9l044ws] { font-size: 18px !important; }

.cam-preview[b-0bf9l044ws] {
    aspect-ratio: 16/9;
    background-color: #eaedff;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.cam-preview img[b-0bf9l044ws] { width: 100%; height: 100%; object-fit: cover; }

.last-entry[b-0bf9l044ws] { padding: 4px 8px; background-color: #f2f3ff; border: 1px solid #bcc9cd; border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.entry-avatar[b-0bf9l044ws] { width: 20px; height: 20px; border-radius: 9999px; background-color: #6cf8bb; flex-shrink: 0; }
.entry-label[b-0bf9l044ws] { font-size: 10px; font-weight: 700; margin: 0; }
.entry-value[b-0bf9l044ws] { font-size: 10px; opacity: 0.7; margin: 0; }

.sensor-grid[b-0bf9l044ws] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sensor-item[b-0bf9l044ws] { padding: 4px; background-color: #f2f3ff; border: 1px solid #bcc9cd; border-radius: 4px; text-align: center; }
.sensor-label[b-0bf9l044ws] { font-size: 10px; color: #6d797d; margin: 0; }
.sensor-value[b-0bf9l044ws] { font-size: 13px; font-weight: 700; margin: 0; }

.btn-clear-alert[b-0bf9l044ws] {
    width: 100%;
    padding: 4px;
    background-color: #ba1a1a;
  color: white;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 4px;
  cursor: pointer;
    transition: filter 0.2s;
}
.btn-clear-alert:hover[b-0bf9l044ws] { filter: brightness(1.1); }
/* /Components/Pages/IOTDashboard/IOTSideNav.razor.rz.scp.css */
.iot-sidenav[b-bsliodbi6k] {
 display: flex;
 flex-direction: column;
    position: fixed;
    left: 0;
    top: 2.75rem; /* below app fixed navbar */
    height: calc(100% - 2.75rem);
    width: 13rem;
    padding: 12px 0;
    z-index: 30;
    background-color: #f2f3ff;
    border-right: 1px solid #bcc9cd;
    overflow-y: auto;
}

.sidenav-brand[b-bsliodbi6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    margin-bottom: 24px;
}

.brand-icon[b-bsliodbi6k] {
    width: 36px;
    height: 36px;
    background-color: #00687a;
    border-radius: 4px;
    display: flex;
  align-items: center;
  justify-content: center;
 color: white;
  flex-shrink: 0;
}

.brand-title[b-bsliodbi6k] {
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #00687a;
  margin: 0;
}

.brand-sub[b-bsliodbi6k] {
    font-size: 11px;
    color: #3d494c;
    opacity: 0.8;
    margin: 0;
}

.sidenav-nav[b-bsliodbi6k] {
flex: 1;
    display: flex;
  flex-direction: column;
    gap: 2px;
    padding: 0 6px;
}

.nav-item[b-bsliodbi6k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 4px;
    color: #3d494c;
    opacity: 0.8;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.nav-item:hover[b-bsliodbi6k] {
    background-color: #eaedff;
    opacity: 1;
}

.nav-item-active[b-bsliodbi6k] {
  color: #00687a;
    font-weight: 700;
    background-color: white;
    border-right: 3px solid #00687a;
    opacity: 1;
}

.sidenav-footer[b-bsliodbi6k] {
    margin-top: auto;
    padding: 12px 6px 0;
    border-top: 1px solid #bcc9cd;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-add-device[b-bsliodbi6k] {
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #06b6d4;
    color: #00424f;
    padding: 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    border: none;
    cursor: pointer;
    margin-bottom: 6px;
    transition: filter 0.2s;
}

.btn-add-device:hover[b-bsliodbi6k] {
    filter: brightness(0.95);
}
/* /Components/Pages/IOTDashboard/IOTStatic.razor.rz.scp.css */
.iot-layout[b-ke2vx89s4u] {
    display: block;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.iot-main[b-ke2vx89s4u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.static-content[b-ke2vx89s4u] {
    flex: 1;
    padding: 24px 3rem;
    background-color: #faf8ff;
    box-sizing: border-box;
    min-width: 0;
}

/* Page Header */
.page-header[b-ke2vx89s4u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.breadcrumb[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #3d494c;
    margin-bottom: 4px;
}

.bc-icon[b-ke2vx89s4u] {
    font-size: 12px !important;
}

.bc-active[b-ke2vx89s4u] {
    color: #00687a;
    font-weight: 700;
}

.page-title[b-ke2vx89s4u] {
    font-family: Manrope, sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #131b2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.online-badge[b-ke2vx89s4u] {
    padding: 2px 8px;
    background-color: #6cf8bb;
    color: #00714d;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-actions[b-ke2vx89s4u] {
    display: flex;
    gap: 16px;
}

.btn-discard[b-ke2vx89s4u] {
    padding: 8px 24px;
    border: 1px solid #6d797d;
    color: #131b2e;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: background-color 0.2s;
}

    .btn-discard:hover[b-ke2vx89s4u] {
        background-color: #f2f3ff;
    }

.btn-save[b-ke2vx89s4u] {
    padding: 8px 24px;
    background-color: #06b6d4;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: opacity 0.2s;
}

    .btn-save:hover[b-ke2vx89s4u] {
        opacity: 0.9;
    }

/* Bento Grid */
.bento-grid[b-ke2vx89s4u] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.bento-left[b-ke2vx89s4u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bento-right[b-ke2vx89s4u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bento Card */
.bento-card[b-ke2vx89s4u] {
    background: white;
    border: 1px solid #bcc9cd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
}

.bento-top-bar[b-ke2vx89s4u] {
    height: 4px;
    width: 100%;
}

.primary-bar[b-ke2vx89s4u] {
    background-color: #06b6d4;
}

.error-bar[b-ke2vx89s4u] {
    background-color: #ba1a1a;
}

.bento-body[b-ke2vx89s4u] {
    padding: 24px;
}

.bento-card-header[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.bento-title[b-ke2vx89s4u] {
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.bento-label[b-ke2vx89s4u] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #3d494c;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.primary[b-ke2vx89s4u] {
    color: #00687a;
}

.error[b-ke2vx89s4u] {
    color: #ba1a1a;
}

.secondary[b-ke2vx89s4u] {
    color: #006c49;
}

.white[b-ke2vx89s4u] {
    color: white;
}

/* Protocol Form */
.protocol-grid[b-ke2vx89s4u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.field-group[b-ke2vx89s4u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label[b-ke2vx89s4u] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #3d494c;
    text-transform: uppercase;
}

.device-id-field[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
}

.device-id-val[b-ke2vx89s4u] {
    font-size: 14px;
    font-weight: 700;
    font-family: monospace;
}

.copy-icon[b-ke2vx89s4u] {
    margin-left: auto;
    color: #3d494c;
    cursor: pointer;
    font-size: 18px !important;
}

.field-select[b-ke2vx89s4u], .field-input[b-ke2vx89s4u] {
    width: 100%;
    padding: 16px;
    background-color: white;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

    .field-select:focus[b-ke2vx89s4u], .field-input:focus[b-ke2vx89s4u] {
        outline: none;
        border-color: #06b6d4;
        box-shadow: 0 0 0 1px #06b6d4;
    }

.range-row[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.range-input[b-ke2vx89s4u] {
    flex: 1;
    accent-color: #06b6d4;
}

.range-val[b-ke2vx89s4u] {
    font-size: 14px;
    font-weight: 700;
    color: #00687a;
    white-space: nowrap;
}

/* Thresholds */
.threshold-list[b-ke2vx89s4u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.threshold-item[b-ke2vx89s4u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #bcc9cd;
    border-radius: 8px;
    transition: border-color 0.2s;
}

    .threshold-item:hover[b-ke2vx89s4u] {
        border-color: rgba(186,26,26,0.3);
    }

.threshold-left[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.threshold-right[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.threshold-icon[b-ke2vx89s4u] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon-bg[b-ke2vx89s4u] {
    background-color: rgba(255,218,214,0.2);
}

.surface-icon-bg[b-ke2vx89s4u] {
    background-color: #eaedff;
}

.threshold-name[b-ke2vx89s4u] {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.threshold-desc[b-ke2vx89s4u] {
    font-size: 10px;
    color: #3d494c;
    margin: 0;
}

.threshold-val[b-ke2vx89s4u] {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    margin: 0;
}

.threshold-severity[b-ke2vx89s4u] {
    font-size: 10px;
    color: #3d494c;
    text-transform: uppercase;
    text-align: right;
    margin: 0;
}

.edit-icon[b-ke2vx89s4u] {
    color: #3d494c;
    cursor: pointer;
}

/* Telemetry */
.telemetry-card[b-ke2vx89s4u] {
    background-color: #283044;
    color: #faf8ff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.telemetry-header[b-ke2vx89s4u] {
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-indicator[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot[b-ke2vx89s4u] {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #006c49;
    animation: pulse-anim-b-ke2vx89s4u 2s infinite;
}

@keyframes pulse-anim-b-ke2vx89s4u {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.telemetry-label[b-ke2vx89s4u] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.terminal-icon[b-ke2vx89s4u] {
    font-size: 18px !important;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
}

    .terminal-icon:hover[b-ke2vx89s4u] {
        color: white;
    }

.log-container[b-ke2vx89s4u] {
    flex: 1;
    padding: 16px;
    font-family: monospace;
    font-size: 11px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .log-container[b-ke2vx89s4u]::-webkit-scrollbar {
        width: 4px;
    }

    .log-container[b-ke2vx89s4u]::-webkit-scrollbar-track {
        background: transparent;
    }

    .log-container[b-ke2vx89s4u]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 10px;
    }

.log-dim[b-ke2vx89s4u] {
    color: rgba(255,255,255,0.4);
}

.log-ok[b-ke2vx89s4u] {
    color: #6ffbbe;
}

.log-warn[b-ke2vx89s4u] {
    color: #ffddb8;
}

.cmd-bar[b-ke2vx89s4u] {
    padding: 8px;
    background-color: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 8px;
}

.cmd-input[b-ke2vx89s4u] {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 11px;
    outline: none;
}

    .cmd-input[b-ke2vx89s4u]::placeholder {
        color: rgba(255,255,255,0.2);
    }

.btn-send[b-ke2vx89s4u] {
    padding: 4px 16px;
    background-color: #00687a;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Connection Flow */
.flow-diagram[b-ke2vx89s4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 24px 16px;
}

.flow-node-circle[b-ke2vx89s4u] {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.primary-circle[b-ke2vx89s4u] {
    background-color: #06b6d4;
}

.secondary-circle[b-ke2vx89s4u] {
    background-color: #6cf8bb;
    color: #00714d;
    border: 1px solid rgba(0,108,73,0.2);
}

.dashed-line[b-ke2vx89s4u] {
    flex: 1;
    height: 1px;
    background-image: linear-gradient(90deg, #06b6d4 50%, transparent 50%);
    background-size: 10px 1px;
    animation: marching-b-ke2vx89s4u 1s infinite linear;
}

@keyframes marching-b-ke2vx89s4u {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 0;
    }
}

.flow-labels[b-ke2vx89s4u] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 16px;
}

.flow-node-label[b-ke2vx89s4u] {
    font-size: 10px;
    font-weight: 700;
}

.stats-rows[b-ke2vx89s4u] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(188,201,205,0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-row[b-ke2vx89s4u] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.stat-row-label[b-ke2vx89s4u] {
    color: #3d494c;
}

.stat-row-val[b-ke2vx89s4u] {
    font-weight: 700;
}

    .stat-row-val.secondary[b-ke2vx89s4u] {
        color: #006c49;
    }
/* /Components/Pages/IOTDashboard/IOTTopBar.razor.rz.scp.css */
.iot-topbar[b-4oss1uhp0m] {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #faf8ff;
    border-bottom: 1px solid #bcc9cd;
    box-sizing: border-box;
}

.topbar-left[b-4oss1uhp0m] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-icon[b-4oss1uhp0m] {
    color: #00687a;
    font-size: 20px;
    flex-shrink: 0;
}

.topbar-title[b-4oss1uhp0m] {
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #00687a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right[b-4oss1uhp0m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-search[b-4oss1uhp0m] {
    position: relative;
    width: 14rem;
}

.search-icon[b-4oss1uhp0m] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #3d494c;
    font-size: 16px !important;
}

.search-input[b-4oss1uhp0m] {
    width: 100%;
    padding: 4px 12px 4px 32px;
    background-color: #f2f3ff;
    border: 1px solid #bcc9cd;
    border-radius: 9999px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .search-input:focus[b-4oss1uhp0m] {
        border-color: #06b6d4;
    }

.icon-btn[b-4oss1uhp0m] {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #3d494c;
    transition: background-color 0.2s;
}

    .icon-btn:hover[b-4oss1uhp0m] {
        background-color: #f2f3ff;
    }

    .icon-btn .material-symbols-outlined[b-4oss1uhp0m] {
        color: #00687a;
        font-size: 20px !important;
    }

.user-info[b-4oss1uhp0m] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-text[b-4oss1uhp0m] {
    text-align: right;
}

.user-name[b-4oss1uhp0m] {
    font-size: 11px;
    font-weight: 700;
    color: #131b2e;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-role[b-4oss1uhp0m] {
    font-size: 10px;
    color: #6d797d;
    margin: 0;
}

.avatar[b-4oss1uhp0m] {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #bcc9cd;
}

    .avatar img[b-4oss1uhp0m] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.btn-add-device-topbar[b-4oss1uhp0m] {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #06b6d4;
    color: #00424f;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s;
}

    .btn-add-device-topbar:hover[b-4oss1uhp0m] {
        filter: brightness(0.95);
    }

    .btn-add-device-topbar .material-symbols-outlined[b-4oss1uhp0m] {
        font-size: 18px !important;
    }
/* /Components/Pages/LoginPage.razor.rz.scp.css */
/*.bg-img {
    position: relative;
}

.bg-img .imgLogoL {
    position: absolute;
    left: 0;
    width: 12%
}

.bg-img .bg-op {
    background-color: #111418;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.bg-img .imgLeft {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-lg {
    background-image: url(img/br_login_mobileV2.jpeg);
    background-size: cover;
    position: relative;
}

.input-LG {
    font-size: 20px;
    padding-left: 10px;
    border: 2px solid #DADBE3;
    border-radius: 10px;
    outline: 0;
}

.input-LG:focus {
    border: 2px solid #305A80;
}
.inputCheck {
    border: 1px solid #DADBE3;
}

.inputUP input::placeholder {
    font-size: 22px;
    padding: 15px 0px
}

.bg-lg .buttonLG {
    background-color: #376682;
    border: 2px solid #305A80;
    color: white;
    font-size: 22px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    display: inline-block;
    text-decoration: none;
}

.qrVr {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.languageLG:focus-visible {
    border: 2px solid #25A5D6 !important;
}

select.changed-border {
    border-color: #25A5D6 !important;
}
@media screen and (min-width: 1200px) {
}*/
/* lap */
/*@media screen and (max-width: 1200px) {
    .forPas {
        width: 65% !important;
    }

    .bg-img {
        width: 65% !important;
    }

    .bg-lg {
        width: 35% !important;
    }
}*/
/* tap */
/*@media screen and (max-width: 992px) {
    .bg-img {
        width: 60% !important;
    }

    .bg-lg {
        width: 40% !important;
    }
}*/
/* tap */
/*@media screen and (max-width: 768px) {
    .contentLG {
        display: block !important;
        position: relative !important;
    }

    .bg-img {
        width: 100% !important;
        height: 100vh;
    }

    .bg-lg {
        position: absolute !important;
        width: 80% !important;
        height: 80%;
        top: 10%;
        left: 10%;
        z-index: 9;
        border-radius: 20px;
        opacity: 0.9;
    }

    .forPas {
        width: 100% !important;
    }

    .resLogoMain {
        margin-top: 30px !important;
        width: 185px !important;
        height: 193px !important;
    }

    .qrVr {
        width: 42% !important;
    }

    .resUN {
        margin-top: 20px !important;
    }
}*/
/* mobile */
/*@media (max-width: 576px) {
    .forPas {
        width: 80% !important;
    }
    .resLogoMain {
        margin-top: 30px !important;
        width: 165px !important;
        height: 173px !important;
    }
}*/
.error-tip[b-59pr5o2oat] {
    /*display: none;*/
    color:red;
}
a[b-59pr5o2oat] {
    color: -webkit-link !important;
    cursor: pointer;
    text-decoration: underline !important;
}
/* /Components/Pages/MappingChart/MappingScreen.razor.rz.scp.css */
/* MappingScreen - Modern Glass Card Design with Drag & Drop Support */

:root[b-xr77fufvbc] {
    --color-white: #ffffff;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-cyan-500: #06b6d4;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-amber-400: #fbbf24;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-background: #0b1326;
    --glass-bg: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(107, 114, 128, 0.2);
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

/* Main Container */
.mapping-container[b-xr77fufvbc] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-background) 0%, #111c30 100%);
    gap: var(--space-md);
    position: relative;
}

/* Header Section */
.mapping-header[b-xr77fufvbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

    .mapping-header h2[b-xr77fufvbc] {
        margin: 0;
        color: var(--color-white);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.02em;
        flex: 1;
        text-transform: uppercase;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    }

    .mapping-header .btn[b-xr77fufvbc] {
        padding: 0.625rem 1.25rem;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: var(--color-cyan-500);
        color: var(--color-slate-900);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

        .mapping-header .btn:hover[b-xr77fufvbc] {
            background-color: #00d4e3;
            box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
            transform: translateY(-2px);
        }

        .mapping-header .btn:active[b-xr77fufvbc] {
            transform: translateY(0);
        }

/* Delete Zone */
.delete-zone[b-xr77fufvbc] {
    position: fixed;
    left: var(--space-lg);
    top: 100px;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(239, 68, 68, 0.5);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 0.25rem;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

    .delete-zone:hover[b-xr77fufvbc] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%);
        border-color: rgba(239, 68, 68, 0.7);
    }

    .delete-zone.active[b-xr77fufvbc] {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(220, 38, 38, 0.3) 100%);
        border-color: var(--color-red-500);
        box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
    }

        .delete-zone.active .delete-icon[b-xr77fufvbc] {
            color: var(--color-red-500);
            transform: scale(1.1);
        }

        .delete-zone.active .delete-text[b-xr77fufvbc] {
            color: var(--color-red-500);
            font-weight: 700;
        }

.delete-icon[b-xr77fufvbc] {
    font-size: 24px;
    color: rgba(239, 68, 68, 0.7);
    transition: all 0.2s ease;
}

.delete-text[b-xr77fufvbc] {
    font-size: 10px;
    color: rgba(239, 68, 68, 0.7);
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Refresh Panel — dùng chung style với zoom-toolbar, chỉ đổi vị trí sang góc phải trên */
#refresh-panel.refresh-panel[b-xr77fufvbc] {
    top: 100px !important;
    right: 0px !important;
    bottom: auto !important;
    border-radius: 999px 0 0 999px;
    left: auto !important;
    transform: none !important;
}

.refresh-countdown-wrap[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(10px);
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

    .refresh-countdown-wrap.visible[b-xr77fufvbc] {
        max-width: 220px;
        opacity: 1;
        transform: translateX(0);
    }

.refresh-countdown-text[b-xr77fufvbc] {
    white-space: nowrap;
}

    .refresh-countdown-text #refresh-countdown-value[b-xr77fufvbc] {
        font-weight: 700;
        color: var(--color-cyan-500);
    }

/* Mapping Canvas */
.mapping-canvas[b-xr77fufvbc] {
    flex: 1;
    background-color: var(--color-slate-900);
    background-image: linear-gradient(0deg, transparent 24%, rgba(107, 114, 128, 0.08) 25%, rgba(107, 114, 128, 0.08) 26%, transparent 27%, transparent 74%, rgba(107, 114, 128, 0.08) 75%, rgba(107, 114, 128, 0.08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(107, 114, 128, 0.08) 25%, rgba(107, 114, 128, 0.08) 26%, transparent 27%, transparent 74%, rgba(107, 114, 128, 0.08) 75%, rgba(107, 114, 128, 0.08) 76%, transparent 77%, transparent);
    background-size: 40px 40px;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* =============================================
   SQUARE OBJECT — Machine Card (matches screenshot)
   Size: 260px wide × 185px tall
   ============================================= */
.square-object[b-xr77fufvbc] {
    position: absolute;
    width: 350px;
    height: 240px;
    cursor: grab;
    border-radius: 12px;
    user-select: none;
    transition: box-shadow 0.2s ease;
    will-change: left, top;
    z-index: 100;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transform-box: border-box;
}

    .square-object:hover[b-xr77fufvbc] {
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        border-color: rgba(255,255,255,0.12);
    }

    .square-object.dragging[b-xr77fufvbc] {
        box-shadow: 0 20px 56px rgba(0,0,0,0.6);
        z-index: 2000;
        cursor: grabbing;
        will-change: left, top;
        filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.35));
        transition: none !important;
    }

/* ---- Card inner layout ---- */
.drag-card[b-xr77fufvbc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Top accent bar (colored by status) */
.drag-card-accent[b-xr77fufvbc] {
    height: 10px;
    width: 100%;
    flex-shrink: 0;
}

    .drag-card-accent.status-running[b-xr77fufvbc] {
        background: #22c55e;
    }

    .drag-card-accent.status-idle[b-xr77fufvbc] {
        background: #fbbf24;
    }

    .drag-card-accent.status-maintenance[b-xr77fufvbc] {
        background: #ef4444;
    }

    .drag-card-accent.status-default[b-xr77fufvbc] {
        background: #06b6d4;
    }

/* Header row: title + status badge */
.drag-card-header[b-xr77fufvbc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 10px 4px 10px;
}

.drag-card-title-block[b-xr77fufvbc] {
}

.drag-card-id[b-xr77fufvbc] {
    font-size: 20px;
    font-weight: 700;
    color: black;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.drag-card-subtitle[b-xr77fufvbc] {
    font-size: 14px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1px;
}

/* Status badge */
.drag-card-status[b-xr77fufvbc] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

    .drag-card-status.status-running[b-xr77fufvbc] {
        background: rgba(34,197,94,0.15);
        color: #4ade80;
        border: 1px solid rgba(34,197,94,0.3);
    }

    .drag-card-status.status-idle[b-xr77fufvbc] {
        background: rgba(251,191,36,0.15);
        color: #fbbf24;
        border: 1px solid rgba(251,191,36,0.3);
    }

    .drag-card-status.status-maintenance[b-xr77fufvbc] {
        background: rgba(239,68,68,0.15);
        color: #f87171;
        border: 1px solid rgba(239,68,68,0.3);
    }

    .drag-card-status.status-default[b-xr77fufvbc] {
        background: rgba(6,182,212,0.15);
        color: #06b6d4;
        border: 1px solid rgba(6,182,212,0.3);
    }

/* Metrics row: WAIT / WIP / DELIVERY */
.drag-card-metrics[b-xr77fufvbc] {
    display: flex;
    padding: 2px 10px 4px 10px;
    gap: 0;
}

.drag-card-metric[b-xr77fufvbc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drag-card-metric-label[b-xr77fufvbc] {
    font-size: 8px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 1px;
    text-align: center;
}

.drag-card-metric-value[b-xr77fufvbc] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    display: flex; 
    justify-content: center;
}

    /* Colored values */
    .drag-card-metric-value.cyan[b-xr77fufvbc] {
        color: #06b6d4;
    }

    .drag-card-metric-value.green[b-xr77fufvbc] {
        color: #4ade80;
    }

    .drag-card-metric-value.amber[b-xr77fufvbc] {
        color: #fbbf24;
    }

    .drag-card-metric-value.red[b-xr77fufvbc] {
        color: #f87171;
    }

/* Divider */
.drag-card-divider[b-xr77fufvbc] {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0 10px;
}

/* Footer row: Work Order + Operator */
.drag-card-footer[b-xr77fufvbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px 5px 10px;
}

.drag-card-footer-item[b-xr77fufvbc] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drag-card-footer-label[b-xr77fufvbc] {
    font-size: 8px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drag-card-footer-value[b-xr77fufvbc] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
}

/* Alarm / warning row */
.drag-card-alarm[b-xr77fufvbc] {
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 700;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(239,68,68,0.08);
}

/* Mini bar chart area at bottom */
.drag-card-bars[b-xr77fufvbc] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 4px 10px 7px 10px;
    height: 32px;
    margin-top: auto;
}

.drag-card-bar[b-xr77fufvbc] {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    opacity: 0.7;
}

/* Locked overlay (MAINTENANCE) */
.drag-card-lock[b-xr77fufvbc] {
    margin: 0 10px 5px 10px;
    background: repeating-linear-gradient( 45deg, rgba(239,68,68,0.12), rgba(239,68,68,0.12) 4px, rgba(239,68,68,0.04) 4px, rgba(239,68,68,0.04) 8px );
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

/* =============================================
   Toast Notification
   ============================================= */
#toast-notification[b-xr77fufvbc] {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    color: var(--color-white);
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2001;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    #toast-notification.show[b-xr77fufvbc] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

#toast-spinner[b-xr77fufvbc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner[b-xr77fufvbc] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(6, 182, 212, 0.3);
    border-top-color: var(--color-cyan-500);
    border-radius: 50%;
    animation: spin-b-xr77fufvbc 0.8s linear infinite;
}

@keyframes spin-b-xr77fufvbc {
    to {
        transform: rotate(360deg);
    }
}

#toast-message[b-xr77fufvbc] {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .mapping-container[b-xr77fufvbc] {
        padding: var(--space-sm);
        height: auto;
        min-height: 100vh;
    }

    .mapping-header[b-xr77fufvbc] {
        flex-direction: column;
        align-items: stretch;
    }

        .mapping-header h2[b-xr77fufvbc] {
            font-size: 20px;
            text-align: center;
        }

        .mapping-header .btn[b-xr77fufvbc] {
            width: 100%;
            text-align: center;
        }

    .square-object[b-xr77fufvbc] {
        width: 100%;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    .delete-zone[b-xr77fufvbc] {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        margin-bottom: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .square-object[b-xr77fufvbc], #toast-notification[b-xr77fufvbc], .delete-zone[b-xr77fufvbc] {
        transition: none;
    }

    .spinner[b-xr77fufvbc] {
        animation: none;
    }
}

.square-object.will-delete[b-xr77fufvbc] {
    opacity: 0.6;
    outline: 2px solid red;
    transition: opacity 0.15s;
}

.zoom-toolbar[b-xr77fufvbc] {
    position: fixed !important;
    bottom: 24px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 12px;
    background: rgba(34, 42, 61, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 100 !important;
}

.zoom-btn[b-xr77fufvbc] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

    .zoom-btn:hover[b-xr77fufvbc] {
        background: rgba(107,114,128,0.2);
        color: #06b6d4;
    }

    .zoom-btn:active[b-xr77fufvbc] {
        transform: scale(0.92);
    }

.zoom-divider[b-xr77fufvbc] {
    width: 1px;
    height: 16px;
    background: rgba(107,114,128,0.3);
    margin: 0 4px;
}

.zoom-label[b-xr77fufvbc] {
    font-size: 12px;
    font-family: 'Segoe UI', monospace;
    color: #64748b;
    min-width: 40px;
    text-align: center;
    letter-spacing: 0.03em;
}

/* Mode Dropdown */
.mapping-mode-dropdown[b-xr77fufvbc] {
    position: relative;
}

.mapping-dropdown-btn[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 1rem 0.45rem 0.75rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 0.5rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 120px;
}

    .mapping-dropdown-btn:hover[b-xr77fufvbc] {
        border-color: rgba(6, 182, 212, 0.5);
        color: #ffffff;
        background: rgba(15, 23, 42, 0.9);
    }

.dropdown-chevron[b-xr77fufvbc] {
    width: 10px;
    height: 6px;
    margin-left: auto;
    color: #64748b;
    transition: transform 0.2s ease;
}

    .dropdown-chevron.open[b-xr77fufvbc] {
        transform: rotate(180deg);
    }

.dropdown-dot[b-xr77fufvbc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-pcard[b-xr77fufvbc] {
    background: #06b6d4;
    box-shadow: 0 0 6px #06b6d4;
}

.dot-nopcard[b-xr77fufvbc] {
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
}

.mapping-dropdown-menu[b-xr77fufvbc] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 140px;
    background: rgba(17, 28, 48, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(107, 114, 128, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: dropdownFadeIn-b-xr77fufvbc 0.15s ease;
}

@keyframes dropdownFadeIn-b-xr77fufvbc {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mapping-dropdown-item[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}

    .mapping-dropdown-item:hover[b-xr77fufvbc] {
        background: rgba(107, 114, 128, 0.15);
        color: #ffffff;
    }

    .mapping-dropdown-item.selected[b-xr77fufvbc] {
        color: #06b6d4;
        background: rgba(6, 182, 212, 0.08);
    }

button.drag-card-metric-label-btn[b-xr77fufvbc] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 0 -3px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1;
}

    button.drag-card-metric-label-btn:hover[b-xr77fufvbc] {
        border-color: rgba(6, 182, 212, 0.45);
        background: rgba(6, 182, 212, 0.07);
    }

    button.drag-card-metric-label-btn:active[b-xr77fufvbc] {
        background: rgba(6, 182, 212, 0.13);
    }

button.drag-card-metric-value-btn[b-xr77fufvbc] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 0 -3px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1;
}

    button.drag-card-metric-value-btn:hover[b-xr77fufvbc] {
        border-color: rgba(6, 182, 212, 0.45);
        background: rgba(6, 182, 212, 0.07);
    }

    button.drag-card-metric-value-btn:active[b-xr77fufvbc] {
        background: rgba(6, 182, 212, 0.13);
    }

/* === 2 TAG LỚN WAIT / WIP === */
.drag-card-metrics-tags[b-xr77fufvbc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px ;
}

.drag-card-tag-box[b-xr77fufvbc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
}

/* WAIT — neutral glass */
.drag-card-tag-box--wait[b-xr77fufvbc] {
    background: rgba(255,255,255,0.7);
    border-color: rgba(226,232,240,0.5);
}


/* WIP inactive */
.drag-card-tag-box--wip[b-xr77fufvbc] {
    background: rgba(255,255,255,0.7);
    border-color: rgba(226,232,240,0.5);
}

/* WIP active — xanh nhạt highlight */
.drag-card-tag-box--wip-active[b-xr77fufvbc] {
    background: rgba(0,74,198,0.06);
    border-color: rgba(0,74,198,0.2);
}

.drag-card-tag-box-label[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
    text-transform: uppercase;
}

.drag-card-tag-box--wip-active .drag-card-tag-box-label[b-xr77fufvbc] {
    color: #004ac6;
}

.drag-card-tag-box-icon[b-xr77fufvbc] {
    font-size: 11px;
}

.drag-card-tag-box-value[b-xr77fufvbc] {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #191c1e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.drag-card-tag-box--wip-active .drag-card-tag-box-value[b-xr77fufvbc] {
    color: #004ac6;
}

.drag-card-tag-warn[b-xr77fufvbc] {
    font-size: 16px;
    color: #ba1a1a;
}

/* === SECONDARY ROW: DELIVERY + RECENT === */
.drag-card-metrics-secondary[b-xr77fufvbc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
}

.drag-card-metric-secondary-btn[b-xr77fufvbc] {
    background: none;
    border-radius:6px;
    border:none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0px 10px 0px 10px;
}

.drag-card-metric-secondary-right[b-xr77fufvbc] {
    display: flex;
    align-items: flex-end;
}

.drag-card-metric-value-lg[b-xr77fufvbc] {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #191c1e;
    
}

/* Bar chart inline (RECENT) */
.drag-card-bars-inline[b-xr77fufvbc] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    margin-top: 2px;
}

/* === OEE FOOTER ROW === */
.drag-card-oee-row[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.drag-card-oee-bar-wrap[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.drag-card-oee-bar-track[b-xr77fufvbc] {
    width: 48px;
    height: 6px;
    background: #e7e8ea;
    border-radius: 99px;
    overflow: hidden;
}

.drag-card-oee-bar-fill[b-xr77fufvbc] {
    height: 100%;
    background: #004ac6;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.drag-card-oee-label[b-xr77fufvbc] {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.04em;
}

.drag-card-oee-life[b-xr77fufvbc] {
    font-size: 11px;
    font-weight: 500;
    color: #16a34a;
}

.drag-card-oee-alert[b-xr77fufvbc] {
    font-size: 11px;
    font-weight: 600;
    color: #ba1a1a;
}
/* === CARD BACKGROUND STATE === */
.drag-card[b-xr77fufvbc] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

/* ACTIVE — pulse glow xanh lá nhẹ */
.drag-card--active[b-xr77fufvbc] {
    border-color: #bbf7d0;
    animation: card-pulse-active-b-xr77fufvbc 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes card-pulse-active-b-xr77fufvbc {
    0%, 100% {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }

    50% {
        background-color: rgba(240, 253, 244, 1);
        box-shadow: 0 0 8px 2px rgba(34,197,94,0.08);
    }
}

/* IDLE — xám nhạt, không animation */
.drag-card--idle[b-xr77fufvbc] {
    border-color: #e2e8f0;
    background-color: #f8fafc;
    filter: grayscale(0.3);
    opacity: 0.85;
}

/* === BADGE TAG === */
.drag-card-tag[b-xr77fufvbc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ACTIVE badge — xanh lá */
.drag-card-tag--active[b-xr77fufvbc] {
    background-color: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* IDLE badge — xám */
.drag-card-tag--idle[b-xr77fufvbc] {
    background-color: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

/* Dot */
.drag-card-tag-dot[b-xr77fufvbc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.drag-card-tag-dot--active[b-xr77fufvbc] {
    background-color: #22c55e;
    animation: dot-pulse-b-xr77fufvbc 1.5s ease-in-out infinite;
}

.drag-card-tag-dot--idle[b-xr77fufvbc] {
    background-color: #94a3b8;
}

@keyframes dot-pulse-b-xr77fufvbc {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}



.square-object[b-xr77fufvbc] {
    position: absolute;
    min-width: 200px;
    min-height: 130px;
}

.resize-handle[b-xr77fufvbc] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #4ECDC4 50%);
    border-bottom-right-radius: 8px;
    z-index: 10;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.square-object:hover .resize-handle[b-xr77fufvbc] {
    opacity: 1;
}



/* ===== LOG PANEL ===== */
.log-panel[b-xr77fufvbc] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scaleY(0.92) translateY(8px);
    width: 16000px;
    max-width: 92vw;
    background: #f8f9fb;
    border-radius: 14px;
    border: 1px solid rgba(196, 198, 215, 0.6);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: bottom center;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 500;
}

    .log-panel.open[b-xr77fufvbc] {
        opacity: 1;
        transform: translateX(-50%) scaleY(1) translateY(0);
        pointer-events: auto;
    }

.log-panel-header[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e2e4;
    background: #f8f9fb;
}

.log-panel-title[b-xr77fufvbc] {
    font-size: 14px;
    font-weight: 700;
    color: #191c1e;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.log-search-wrapper[b-xr77fufvbc] {
    position: relative;
    display: flex;
    align-items: center;
}

.log-search-icon[b-xr77fufvbc] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    flex-shrink: 0;
}

.log-search-input[b-xr77fufvbc] {
    height: 28px;
    padding: 0 10px 0 28px;
    font-size: 12px;
    border: 1px solid #e1e2e4;
    border-radius: 4px;
    background: #ffffff;
    color: #191c1e;
    outline: none;
    width: 200px;
}

    .log-search-input:focus[b-xr77fufvbc] {
        border-color: #004ac6;
        box-shadow: 0 0 0 2px rgba(0, 74, 198, 0.08);
    }

.log-export-btn[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #004ac6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: uppercase;
}

    .log-export-btn:hover[b-xr77fufvbc] {
        text-decoration: underline;
    }

/* Table */
.log-body-scroll[b-xr77fufvbc] {
    height: 220px;
    min-height: 220px;
    overflow-y: auto;
    overflow-x: auto;
}

.log-table-wrap[b-xr77fufvbc] {
    overflow-x: visible;
}

.log-table[b-xr77fufvbc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .log-table thead tr[b-xr77fufvbc] {
        background: #f3f4f6;
    }

    .log-table th[b-xr77fufvbc] {
        padding: 8px 14px;
        font-size: 10px;
        font-weight: 700;
        color: #434655;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        border-bottom: 1px solid #e1e2e4;
        text-align: left;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f3f4f6;
    }

    .log-table td[b-xr77fufvbc] {
        padding: 9px 14px;
        border-bottom: 1px solid #e1e2e4;
        color: #191c1e;
        vertical-align: middle;
    }

    .log-table tbody tr:last-child td[b-xr77fufvbc] {
        border-bottom: none;
    }

    .log-table tbody tr:hover[b-xr77fufvbc] {
        background: #f3f4f6;
    }

    .log-table .text-right[b-xr77fufvbc] {
        text-align: right;
    }

    .log-table .text-center[b-xr77fufvbc] {
        text-align: center;
    }

.log-mono[b-xr77fufvbc] {
    font-family: 'Segoe UI', monospace;
    font-size: 12px;
    font-weight: 500;
}

/* Operator */
.log-operator[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.log-avatar[b-xr77fufvbc] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e7e8ea;
    border: 1px solid #c3c6d7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #434655;
    flex-shrink: 0;
}

/* Progress bar */
.log-progress[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.log-progress-track[b-xr77fufvbc] {
    width: 72px;
    height: 5px;
    background: #e7e8ea;
    border-radius: 99px;
    overflow: hidden;
}

.log-progress-fill[b-xr77fufvbc] {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.log-progress-fill--progress[b-xr77fufvbc] {
    background: #004ac6;
}

.log-progress-fill--done[b-xr77fufvbc] {
    background: #22c55e;
}

.log-progress-fill--queued[b-xr77fufvbc] {
    background: #94a3b8;
}

/* Status badge */
.log-badge[b-xr77fufvbc] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.log-badge--progress[b-xr77fufvbc] {
    background: rgba(0,74,198,0.1);
    color: #004ac6;
}

.log-badge--done[b-xr77fufvbc] {
    background: #dcfce7;
    color: #16a34a;
}

.log-badge--queued[b-xr77fufvbc] {
    background: #e7e8ea;
    color: #434655;
    border: 1px solid #c3c6d7;
}

/* Toggle button */
.log-toggle-btn[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .log-toggle-btn:hover[b-xr77fufvbc] {
        background: rgba(107,114,128,0.2);
        color: #06b6d4;
    }

    .log-toggle-btn.active[b-xr77fufvbc] {
        color: #06b6d4;
    }

.log-toggle-dot[b-xr77fufvbc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
    transition: background 0.2s;
}

.log-toggle-btn.active .log-toggle-dot[b-xr77fufvbc] {
    background: #06b6d4;
    box-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
    animation: dot-pulse-b-xr77fufvbc 1.5s ease-in-out infinite;
}
.drag-card-tag-box--wait:hover[b-xr77fufvbc] {
    background-color: #f5f5f5 !important;
    border: 1px solid #919191 !important;
}
.drag-card-tag-box--wip:hover[b-xr77fufvbc] {
    background-color: #f5f5f5 !important;
    border: 1px solid #919191 !important;
}
.drag-card-tag-box--wip-active:hover[b-xr77fufvbc] {
    background-color: #f5f5f5 !important;
    border: 1px solid #004ac6 !important;
}
.drag-card-metric-secondary-btn:hover[b-xr77fufvbc] {
    background-color: #f5f5f5 !important;
    border: 1px solid #919191 !important;
}

.log-section-label[b-xr77fufvbc] {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #434655;
    background: #eef0f3;
    border-top: 1px solid #e1e2e4;
    border-bottom: 1px solid #e1e2e4;
}

.log-mode-btn[b-xr77fufvbc] {
    background: transparent;
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
}

    .log-mode-btn.active[b-xr77fufvbc] {
        background: rgba(6, 182, 212, 0.1);
        border-color: rgba(6, 182, 212, 0.4);
        color: #06b6d4;
    }

    .log-mode-btn:hover[b-xr77fufvbc] {
        border-color: rgba(6, 182, 212, 0.4);
        color: #ffffff;
    }


.drag-card-header[b-xr77fufvbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 8px;
}

.drag-card-title-block[b-xr77fufvbc] {
    flex: 1;
}

.drag-card-header-actions[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.camera-btn-header[b-xr77fufvbc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .camera-btn-header:hover[b-xr77fufvbc] {
        background-color: rgba(59, 130, 246, 0.1);
        transform: scale(1.1);
    }

    .camera-btn-header:active[b-xr77fufvbc] {
        transform: scale(0.95);
    }

.camera-icon-header[b-xr77fufvbc] {
    display: inline-block;
    line-height: 1;
}

.modal-content[b-xr77fufvbc] {
    max-width: 1000px !important;
}
.template-dropdown-section-label[b-xr77fufvbc] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    padding: 6px 12px 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.template-row[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.template-name-btn[b-xr77fufvbc] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    text-align: left;
}

.template-delete-btn[b-xr77fufvbc] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

    .template-delete-btn:hover[b-xr77fufvbc] {
        color: #ef4444;
        background: #fef2f2;
    }

.template-dropdown-divider[b-xr77fufvbc] {
    border-top: 1px solid #1e293b;
    margin: 4px 0;
}

.template-create-row[b-xr77fufvbc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}

.template-input[b-xr77fufvbc] {
    flex: 1;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    min-width: 0;
}

    .template-input:focus[b-xr77fufvbc] {
        border-color: #3b82f6;
    }

.template-create-btn[b-xr77fufvbc] {
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

    .template-create-btn:hover:not(:disabled)[b-xr77fufvbc] {
        background: #2563eb;
    }

    .template-create-btn:disabled[b-xr77fufvbc] {
        opacity: .4;
        cursor: not-allowed;
    }

/* Confirm modal */
.mapping-confirm-overlay[b-xr77fufvbc] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapping-confirm-box[b-xr77fufvbc] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 28px 32px;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.mapping-confirm-title[b-xr77fufvbc] {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 10px;
}

.mapping-confirm-msg[b-xr77fufvbc] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 22px;
    line-height: 1.5;
}

.mapping-confirm-actions[b-xr77fufvbc] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-danger[b-xr77fufvbc] {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 13px;
}

    .btn-danger:hover[b-xr77fufvbc] {
        background: #b91c1c;
    }
/* /Components/Pages/MRP/MrpScenarioList.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   MSL – MRP Scenario List
   Scoped styles (no Tailwind)
═══════════════════════════════════════════════ */

.msl-page[b-9dsiros99g] {
    padding: 1.5rem;
    background: #f4f6fb;
    min-height: calc(100vh - 3rem);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    color: #131b2e;
    box-sizing: border-box;
}

.material-symbols-outlined[b-9dsiros99g] {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
}

/* ── Header ─────────────────────────────────── */
.msl-header[b-9dsiros99g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.msl-title[b-9dsiros99g] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
    color: #131b2e;
}

.msl-subtitle[b-9dsiros99g] {
    font-size: 0.9rem;
    color: #64748b;
    max-width: 42rem;
    margin: 0;
}

.msl-header-actions[b-9dsiros99g] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.msl-search[b-9dsiros99g] {
    position: relative;
}

.msl-search-icon[b-9dsiros99g] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1rem;
    pointer-events: none;
}

.msl-search-input[b-9dsiros99g] {
    width: 16rem;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 0.84rem;
    border: 1px solid #dde3ef;
    border-radius: 0.5rem;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.msl-search-input:focus[b-9dsiros99g] {
    border-color: #004ac6;
    box-shadow: 0 0 0 2px rgba(0, 74, 198, 0.15);
}

.msl-btn[b-9dsiros99g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}

.msl-btn--outline[b-9dsiros99g] {
    background: #fff;
    border: 1px solid #dde3ef;
    color: #131b2e;
}

.msl-btn--outline:hover[b-9dsiros99g] {
    background: #f4f6fb;
}

/* ── Table card ─────────────────────────────── */
.msl-card[b-9dsiros99g] {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid #e2e7f0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    overflow: hidden;
}

.msl-table-scroll[b-9dsiros99g] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #c4cee3 transparent;
}

.msl-table-scroll[b-9dsiros99g]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.msl-table-scroll[b-9dsiros99g]::-webkit-scrollbar-track {
    background: transparent;
}

.msl-table-scroll[b-9dsiros99g]::-webkit-scrollbar-thumb {
    background-color: #c4cee3;
    border-radius: 999px;
    border: 2px solid #fff;
    background-clip: padding-box;
}

.msl-table-scroll[b-9dsiros99g]::-webkit-scrollbar-thumb:hover {
    background-color: #8fa3d1;
}

.msl-table-scroll[b-9dsiros99g]::-webkit-scrollbar-corner {
    background: transparent;
}

.msl-table[b-9dsiros99g] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.msl-table thead tr[b-9dsiros99g] {
    background: rgba(0, 74, 198, 0.05);
    border-bottom: 2px solid rgba(0, 74, 198, 0.25);
}

.msl-table th[b-9dsiros99g] {
    position: relative;
    padding: 1rem 1.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #004ac6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msl-table-actions-head[b-9dsiros99g] {
    text-align: right;
}

.msl-col-resize-handle[b-9dsiros99g] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

.msl-col-resize-handle[b-9dsiros99g]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: #dde3ef;
    opacity: 0.7;
}

.msl-col-resize-handle:hover[b-9dsiros99g] {
    background: rgba(0, 74, 198, 0.1);
}

.msl-col-resize-handle:hover[b-9dsiros99g]::after {
    background: #004ac6;
    opacity: 1;
}

.msl-row[b-9dsiros99g] {
    border-bottom: 1px solid #eef1f7;
    cursor: pointer;
    transition: background 0.12s;
}

.msl-row:last-child[b-9dsiros99g] {
    border-bottom: none;
}

.msl-row:hover[b-9dsiros99g] {
    background: #f8faff;
}

.msl-row--selected[b-9dsiros99g] {
    background: rgba(37, 99, 235, 0.06);
}

.msl-table td[b-9dsiros99g] {
    padding: 0.75rem 1.5rem;
    font-size: 0.86rem;
    vertical-align: middle;
}

.msl-cell-icon[b-9dsiros99g] {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

/* ── Row actions ────────────────────────────── */
.msl-cell-actions[b-9dsiros99g] {
    text-align: right;
}

.msl-actions[b-9dsiros99g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.msl-icon-btn[b-9dsiros99g] {
    background: none;
    border: none;
    padding: 0.4rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.msl-icon-btn:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(37, 99, 235, 0.08);
    color: #004ac6;
}

.msl-icon-btn:disabled[b-9dsiros99g] {
    opacity: 0.3;
    cursor: not-allowed;
}

.msl-icon-btn--edit[b-9dsiros99g] {
    color: #004ac6;
}

.msl-icon-btn--edit:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(0, 74, 198, 0.1);
}

.msl-icon-btn--run[b-9dsiros99g] {
    color: #16a34a;
}

.msl-icon-btn--run:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.msl-icon-btn--view[b-9dsiros99g] {
    color: #7c3aed;
}

.msl-icon-btn--view:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.msl-icon-btn--copy[b-9dsiros99g] {
    color: #d97706;
}

.msl-icon-btn--copy:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.msl-icon-btn--danger[b-9dsiros99g] {
    color: #ba1a1a;
}

.msl-icon-btn--danger:hover:not(:disabled)[b-9dsiros99g] {
    background: rgba(186, 26, 26, 0.1);
    color: #ba1a1a;
}

/* ── Empty state ────────────────────────────── */
.msl-empty[b-9dsiros99g] {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
    font-size: 0.86rem;
}

/* ── Footer / pagination ────────────────────── */
.msl-footer[b-9dsiros99g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #fff;
    border-top: 1px solid #e2e7f0;
}

.msl-footer-count[b-9dsiros99g] {
    font-size: 0.72rem;
    color: #64748b;
    margin: 0;
}

.msl-pagination[b-9dsiros99g] {
    display: flex;
    gap: 0.4rem;
}

.msl-page-btn[b-9dsiros99g] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde3ef;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.78rem;
    color: #131b2e;
    cursor: pointer;
    transition: background 0.12s;
}

.msl-page-btn:hover:not(:disabled)[b-9dsiros99g] {
    background: #f4f6fb;
}

.msl-page-btn:disabled[b-9dsiros99g] {
    opacity: 0.3;
    cursor: not-allowed;
}

.msl-page-btn--active[b-9dsiros99g] {
    background: #004ac6;
    border-color: #004ac6;
    color: #fff;
}
/* /Components/Pages/MRP/MrpScenarioSetting.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   MSS – MRP Scenario Setting
   Scoped styles (no Tailwind)
═══════════════════════════════════════════════ */

.mss-page[b-avx7mlx2z8] {
    padding: 1.5rem;
    background: #f4f6fb;
    height: calc(100vh - 3rem);
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    color: #131b2e;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #c4cee3 transparent;
}

.mss-page[b-avx7mlx2z8]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mss-page[b-avx7mlx2z8]::-webkit-scrollbar-track {
    background: transparent;
}

.mss-page[b-avx7mlx2z8]::-webkit-scrollbar-thumb {
    background-color: #c4cee3;
    border-radius: 999px;
    border: 2px solid #f4f6fb;
    background-clip: padding-box;
}

.mss-page[b-avx7mlx2z8]::-webkit-scrollbar-thumb:hover {
    background-color: #8fa3d1;
}

.mss-page[b-avx7mlx2z8]::-webkit-scrollbar-corner {
    background: transparent;
}

.material-symbols-outlined[b-avx7mlx2z8] {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
}

/* ── Header ─────────────────────────────────── */
.mss-header[b-avx7mlx2z8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.mss-title[b-avx7mlx2z8] {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
}

.mss-subtitle[b-avx7mlx2z8] {
    font-size: 0.86rem;
    color: #64748b;
    margin: 0;
}

.mss-header-actions[b-avx7mlx2z8] {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.mss-btn[b-avx7mlx2z8] {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.mss-btn--outline[b-avx7mlx2z8] {
    background: #fff;
    border: 1px solid #004ac6;
    color: #004ac6;
}

.mss-btn--outline:hover[b-avx7mlx2z8] {
    background: rgba(0, 74, 198, 0.06);
}

.mss-btn--primary[b-avx7mlx2z8] {
    background: #004ac6;
    border: 1px solid #004ac6;
    color: #fff;
}

.mss-btn--primary:hover[b-avx7mlx2z8] {
    opacity: 0.9;
}

/* ── Tabs ───────────────────────────────────── */
.mss-tabs[b-avx7mlx2z8] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e2e7f0;
    margin-bottom: 1.25rem;
}

.mss-tab[b-avx7mlx2z8] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.mss-tab:hover[b-avx7mlx2z8] {
    color: #004ac6;
}

.mss-tab--active[b-avx7mlx2z8] {
    color: #004ac6;
    border-bottom-color: #004ac6;
}

.mss-tab-placeholder[b-avx7mlx2z8] {
    text-align: center;
    color: #64748b;
}

/* ── Scheduling tab wizard layout (label left, control right) ── */
.mss-wizard[b-avx7mlx2z8] {
    padding: 1.25rem 1.5rem;
}

.mss-wizard-row[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.3rem 0;
    /* Keeps checkbox rows (Active, Repeat On) the same height as the text/time-input rows
       above and below them -- without this, rows shrink to their content's height and the
       label column reads as a ragged staircase instead of an aligned block. */
    min-height: 2.25rem;
}

/* Bare checkbox inputs default to a browser UA margin (e.g. Chrome's 3px/4px), which offsets
   them a few px right of where .mss-input's flush left edge starts -- reset it so the Active
   checkbox lines up with the Description/From Time inputs above and below it. */
.mss-wizard-checkbox[b-avx7mlx2z8] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #004ac6;
    cursor: pointer;
}

.mss-wizard-row-label[b-avx7mlx2z8] {
    flex: 0 0 180px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1e3a5f;
}

.mss-wizard-row-control[b-avx7mlx2z8] {
    flex: 1;
    min-width: 0;
}

.mss-wizard-row--pair .mss-wizard-row-control[b-avx7mlx2z8] {
    flex: 1;
}

/* The gap between label and control must stay 1rem (same as single-field rows) so every row's
   first control lines up on the same left edge; the second label just gets its own left margin
   for breathing room instead of widening the row's shared gap. */
.mss-wizard-row--pair .mss-wizard-row-label:not(:first-child)[b-avx7mlx2z8] {
    margin-left: 0.5rem;
}

.mss-wizard-gap[b-avx7mlx2z8] {
    height: 1rem;
}

.mss-wizard-section-label[b-avx7mlx2z8] {
    font-size: 0.86rem;
    font-weight: 700;
    color: #131b2e;
    margin: 0 0 0.5rem;
}

/* ── Cards ──────────────────────────────────── */
.mss-card[b-avx7mlx2z8] {
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.mss-card-title[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--mss-accent, #64748b);
    font-weight: 600;
    margin-bottom: 1rem;
}

.mss-card-title > .material-symbols-outlined[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--mss-accent-bg, rgba(100, 116, 139, 0.1));
    font-size: 1.15rem;
}

.mss-card-title h3[b-avx7mlx2z8] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: #131b2e;
}

.mss-card-title--bordered[b-avx7mlx2z8] {
    background: var(--mss-accent-bg, rgba(100, 116, 139, 0.06));
    border: 1px solid var(--mss-accent-border, rgba(100, 116, 139, 0.15));
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin: -0.25rem -0.25rem 1.5rem;
    transition: background 0.15s, box-shadow 0.15s;
}

.mss-card-title--collapsible[b-avx7mlx2z8] {
    cursor: pointer;
    user-select: none;
}

.mss-card-title--collapsible:hover[b-avx7mlx2z8] {
    background: var(--mss-accent-hover, rgba(100, 116, 139, 0.1));
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.mss-card-title > .mss-card-toggle-icon[b-avx7mlx2z8] {
    margin-left: auto;
    color: var(--mss-accent, #64748b);
    background: transparent;
    width: auto;
    height: auto;
}

.mss-card--nested[b-avx7mlx2z8] {
    background: #fafbfd;
    border-left: 3px solid #dde3ef;
    box-shadow: none;
    margin-bottom: 0;
}

.mss-card-children[b-avx7mlx2z8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.1rem;
    margin-top: 1rem;
}

/* ── Grid helpers ───────────────────────────── */
.mss-grid-12[b-avx7mlx2z8] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

.mss-col-4[b-avx7mlx2z8] { grid-column: span 4; }
.mss-col-8[b-avx7mlx2z8] { grid-column: span 8; }

/* ── Compact field list (one field per line, for checkbox-heavy sub-sections) ── */
.mss-field-list[b-avx7mlx2z8] {
    display: flex;
    flex-direction: column;
}

.mss-field-row[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid #eef1f6;
    border-radius: 0.25rem;
    transition: background 0.15s;
}

.mss-field-row:last-child[b-avx7mlx2z8] {
    border-bottom: none;
}

.mss-field-row:hover[b-avx7mlx2z8] {
    background: #f8fafc;
}

.mss-field-row .mss-label[b-avx7mlx2z8] {
    margin-bottom: 0;
    flex: 1;
}

.mss-field-row .mss-input[b-avx7mlx2z8] {
    width: auto;
    min-width: 8rem;
}

/* ── Form fields ────────────────────────────── */
.mss-label[b-avx7mlx2z8] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    margin-bottom: 0.4rem;
}

.mss-input[b-avx7mlx2z8] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font-size: 0.86rem;
    font-family: inherit;
    border: 1px solid #dde3ef;
    border-radius: 0.375rem;
    background: #fff;
    color: #131b2e;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
}

.mss-input:focus[b-avx7mlx2z8] {
    border-color: #004ac6;
    box-shadow: 0 0 0 2px rgba(0, 74, 198, 0.12);
}

.mss-input:read-only[b-avx7mlx2z8] {
    background: #f4f6fb;
    cursor: not-allowed;
}

/* ── Lookup fields (click to pick from a popup) ── */
.mss-lookup-group[b-avx7mlx2z8] {
    display: flex;
    align-items: stretch;
}

.mss-lookup-group .mss-input[b-avx7mlx2z8] {
    flex: 1;
    border-radius: 0.375rem 0 0 0.375rem;
    cursor: pointer;
}

.mss-lookup-btn[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #dde3ef;
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
    background: #f4f6fb;
    padding: 0 0.6rem;
    cursor: pointer;
}

.mss-lookup-btn .material-symbols-outlined[b-avx7mlx2z8] {
    font-size: 1.1rem;
    color: #64748b;
}

.mss-lookup-btn:hover[b-avx7mlx2z8] {
    background: #e2e7f0;
}

/* ── Warehouse tab table ────────────────────── */
.mss-card--table[b-avx7mlx2z8] {
    padding: 0;
    overflow: hidden;
}

.mss-table-toolbar[b-avx7mlx2z8] {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #e2e7f0;
}

.mss-table-wrap[b-avx7mlx2z8] {
    max-height: 70vh;
    overflow: auto;
}

.mss-table[b-avx7mlx2z8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.mss-table th[b-avx7mlx2z8] {
    position: sticky;
    top: 0;
    background: #eaedff;
    text-align: left;
    padding: 0.6rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #434655;
    border-bottom: 1px solid #e2e7f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mss-col-resize-handle[b-avx7mlx2z8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}

.mss-col-resize-handle[b-avx7mlx2z8]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: #dde3ef;
    opacity: 0.7;
}

.mss-col-resize-handle:hover[b-avx7mlx2z8] {
    background: rgba(0, 74, 198, 0.1);
}

.mss-col-resize-handle:hover[b-avx7mlx2z8]::after {
    background: #004ac6;
    opacity: 1;
}

.mss-table td[b-avx7mlx2z8] {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
}

.mss-table tbody tr:hover[b-avx7mlx2z8] {
    background: #f8fafc;
}

.mss-table-check[b-avx7mlx2z8] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.mss-table-empty[b-avx7mlx2z8] {
    text-align: center;
    color: #64748b;
    padding: 1.5rem;
}

/* ── Auto trigger tab: weekday picker ────────── */
.mss-weekday-group[b-avx7mlx2z8] {
    display: flex;
    /* nowrap keeps this row the same single-line height as the Active/Description/From Time
       rows above it -- wrapping to 2 lines was what threw off the label column's alignment. */
    flex-wrap: nowrap;
    gap: 1rem;
}

.mss-weekday-check[b-avx7mlx2z8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #131b2e;
    cursor: pointer;
}

.mss-weekday-check input[type="checkbox"][b-avx7mlx2z8] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #004ac6;
    cursor: pointer;
}
/* /Components/Pages/MRP/MrpWorkbench.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   MWB – MRP Workbench
   Scoped styles (no Tailwind)
═══════════════════════════════════════════════ */

.mwb-page[b-vgzfc4a7fr] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.25rem;
    background: #f4f6fb;
    height: calc(100vh - 3rem);
    overflow: hidden;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    color: #131b2e;
    box-sizing: border-box;
}

.material-symbols-outlined[b-vgzfc4a7fr] {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
}

/* ── Header ─────────────────────────────────── */
.mwb-title[b-vgzfc4a7fr] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.mwb-subtitle[b-vgzfc4a7fr] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0.2rem 0 0;
}

.mwb-search[b-vgzfc4a7fr] {
    position: relative;
    display: flex;
    align-items: center;
}

.mwb-search .material-symbols-outlined[b-vgzfc4a7fr] {
    position: absolute;
    left: 0.5rem;
    color: #64748b;
    font-size: 1rem;
}

.mwb-search input[b-vgzfc4a7fr] {
    width: 11rem;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem 0.4rem 1.9rem;
    font-size: 0.8rem;
    border: 1px solid #dde3ef;
    border-radius: 0.5rem;
    outline: none;
    font-family: inherit;
}

.mwb-search input:focus[b-vgzfc4a7fr] {
    border-color: #004ac6;
}

.mwb-icon-btn-outline[b-vgzfc4a7fr] {
    background: #fff;
    border: 1px solid #dde3ef;
    color: #64748b;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-family: inherit;
}

.mwb-icon-btn-outline:hover[b-vgzfc4a7fr] {
    background: #f4f6fb;
}

.mwb-icon-btn-outline--active[b-vgzfc4a7fr] {
    background: rgba(0, 74, 198, 0.08);
    border-color: #004ac6;
    color: #004ac6;
}

.mwb-icon-btn-outline--active:hover[b-vgzfc4a7fr] {
    background: rgba(0, 74, 198, 0.12);
}

.mwb-selected-badge[b-vgzfc4a7fr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 74, 198, 0.08);
    border-radius: 999px;
    color: #004ac6;
    font-size: 0.78rem;
    font-weight: 600;
}

.mwb-divider[b-vgzfc4a7fr] {
    width: 1px;
    height: 1.4rem;
    background: #e2e7f0;
}

.mwb-toolbar-actions[b-vgzfc4a7fr] {
    display: flex;
    gap: 0.4rem;
}

.mwb-link-btn[b-vgzfc4a7fr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: #004ac6;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}

.mwb-link-btn:hover[b-vgzfc4a7fr] {
    background: rgba(0, 74, 198, 0.06);
}

/* ── Panels ─────────────────────────────────── */
.mwb-panel[b-vgzfc4a7fr] {
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mwb-panel--upper[b-vgzfc4a7fr] {
    flex: 1;
    min-height: 16rem;
}

.mwb-panel--lower[b-vgzfc4a7fr] {
    flex: 1;
    min-height: 12rem;
}

.mwb-section-hidden[b-vgzfc4a7fr] {
    display: none !important;
}

.mwb-vertical-resize-handle[b-vgzfc4a7fr] {
    flex-shrink: 0;
    height: 0.5rem;
    margin: -0.25rem 0;
    cursor: row-resize;
    position: relative;
    z-index: 4;
}

.mwb-vertical-resize-handle[b-vgzfc4a7fr]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: #b7c6ea;
    border-radius: 999px;
    transform: translateY(-50%);
}

.mwb-vertical-resize-handle:hover[b-vgzfc4a7fr]::after {
    background: #004ac6;
    height: 4px;
}

.mwb-panel-header[b-vgzfc4a7fr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: #f8faff;
    border-bottom: 1px solid #e2e7f0;
    flex-shrink: 0;
}

.mwb-panel-header h3[b-vgzfc4a7fr] {
    margin: 0;
    font-size: 0.9rem;
    color: #004ac6;
}

.mwb-panel-title-block[b-vgzfc4a7fr] {
    display: flex;
    flex-direction: column;
}

.mwb-panel-header-actions[b-vgzfc4a7fr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mwb-flow-item[b-vgzfc4a7fr] {
    font-weight: 700;
    color: #131b2e;
}

/* ── Lower section split ────────────────────── */
.mwb-lower-split[b-vgzfc4a7fr] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.mwb-lower-pane[b-vgzfc4a7fr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mwb-lower-pane-label[b-vgzfc4a7fr] {
    padding: 0.4rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: #f8faff;
    border-bottom: 1px solid #e2e7f0;
    flex-shrink: 0;
}

.mwb-lower-resize-handle[b-vgzfc4a7fr] {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    position: relative;
}

.mwb-lower-resize-handle[b-vgzfc4a7fr]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #b7c6ea;
    border-radius: 999px;
    transform: translateX(-50%);
}

.mwb-lower-resize-handle:hover[b-vgzfc4a7fr]::after {
    background: #004ac6;
    width: 3px;
}

.mwb-table-scroll[b-vgzfc4a7fr] {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c4cee3 transparent;
}

.mwb-table-scroll[b-vgzfc4a7fr]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mwb-table-scroll[b-vgzfc4a7fr]::-webkit-scrollbar-track {
    background: transparent;
}

.mwb-table-scroll[b-vgzfc4a7fr]::-webkit-scrollbar-thumb {
    background-color: #c4cee3;
    border-radius: 999px;
    border: 2px solid #fff;
    background-clip: padding-box;
}

.mwb-table-scroll[b-vgzfc4a7fr]::-webkit-scrollbar-thumb:hover {
    background-color: #8fa3d1;
}

.mwb-table-scroll[b-vgzfc4a7fr]::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Tables ─────────────────────────────────── */
.mwb-table[b-vgzfc4a7fr] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.82rem;
}

.mwb-table thead th[b-vgzfc4a7fr] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eaedff;
    color: #434655;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #e2e7f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mwb-th-check[b-vgzfc4a7fr] {
    width: 2.5rem;
}

.mwb-th-qty[b-vgzfc4a7fr] {
    background: #004ac6 !important;
    color: #fff !important;
    border-bottom: 1px solid #004ac6 !important;
}

.mwb-td-qty[b-vgzfc4a7fr] {
    background: #eef4ff;
    border-left: 2px solid #b7c6ea;
    border-right: 2px solid #b7c6ea;
}

.mwb-qty-input[b-vgzfc4a7fr] {
    width: 100%;
    box-sizing: border-box;
    height: 1.3rem;
    padding: 0 0.6rem;
    border: 2px solid #004ac6;
    border-radius: 0.375rem;
    background: #fff;
    text-align: right;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    color: #004ac6;
    box-shadow: 0 1px 3px rgba(0, 74, 198, 0.25);
}

.mwb-qty-input:focus[b-vgzfc4a7fr] {
    border-color: #002f7d;
    box-shadow: 0 0 0 3px rgba(0, 74, 198, 0.25);
    outline: none;
}

.mwb-col-resize-handle[b-vgzfc4a7fr] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}

.mwb-col-resize-handle[b-vgzfc4a7fr]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: #dde3ef;
    opacity: 0.7;
}

.mwb-col-resize-handle:hover[b-vgzfc4a7fr] {
    background: rgba(0, 74, 198, 0.1);
}

.mwb-col-resize-handle:hover[b-vgzfc4a7fr]::after {
    background: #004ac6;
    opacity: 1;
}

.mwb-table tbody td[b-vgzfc4a7fr] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(226, 231, 240, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}

.mwb-cell-icon[b-vgzfc4a7fr] {
    height: 1.1rem;
}

.mwb-empty[b-vgzfc4a7fr] {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 1.5rem !important;
}

.mwb-row[b-vgzfc4a7fr] {
    cursor: pointer;
    transition: background 0.12s;
}

.mwb-row:hover[b-vgzfc4a7fr] {
    background: #f8faff;
}

.mwb-row--focused[b-vgzfc4a7fr] {
    background: rgba(37, 99, 235, 0.06);
    outline: 2px solid #004ac6;
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* ── Panel footer ───────────────────────────── */
.mwb-panel-footer[b-vgzfc4a7fr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #f8faff;
    border-top: 1px solid #e2e7f0;
    font-size: 0.72rem;
    color: #64748b;
    flex-shrink: 0;
}

.mwb-loading-more[b-vgzfc4a7fr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #004ac6;
    font-weight: 600;
}
/* /Components/Pages/ReportLayout/ReportLayoutPage.razor.rz.scp.css */
/* Report Layout Page Styles */

.report-layout-sidebar[b-r89awxxmnj] {
    background-color: #fff;
}

.category-tree[b-r89awxxmnj] {
    user-select: none;
}

.category-item[b-r89awxxmnj] {
    border-radius: 4px;
transition: all 0.2s ease;
}

.category-node[b-r89awxxmnj] {
 transition: background-color 0.2s ease;
 position: relative;
}

.category-node:hover[b-r89awxxmnj] {
    background-color: #f5f7fa;
}

.category-node.selected[b-r89awxxmnj] {
    background-color: #e3f2fd;
    font-weight: 500;
    border-left: 3px solid #0064d9;
}

.category-toggle-icon[b-r89awxxmnj] {
 display: inline-flex;
    align-items: center;
  justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
 transition: transform 0.2s ease;
}

.category-toggle-icon:hover[b-r89awxxmnj] {
  transform: scale(1.1);
}

.category-toggle-icon img[b-r89awxxmnj] {
    transition: transform 0.2s ease;
}

.category-routes[b-r89awxxmnj] {
    animation: slideDown-b-r89awxxmnj 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideDown-b-r89awxxmnj {
 from {
   opacity: 0;
     max-height: 0;
transform: translateY(-10px);
    }
    to {
  opacity: 1;
      max-height: 500px;
        transform: translateY(0);
    }
}

.route-item[b-r89awxxmnj] {
    transition: all 0.2s ease;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
}

.route-item:hover[b-r89awxxmnj] {
    background-color: #f0f4f8;
  border-left-color: #90caf9;
}

.route-item.selected[b-r89awxxmnj] {
    background-color: #e3f2fd;
    font-weight: 500;
    border-left: 3px solid #0064d9;
}

/* Top-Bottom Split Layout */
.reports-list-section[b-r89awxxmnj] {
  background-color: #fff;
    border-radius: 4px;
    padding: 10px;
}

.report-details-section[b-r89awxxmnj] {
    background-color: #fafbfc;
    border-radius: 4px;
    padding: 10px;
    animation: slideInFromBottom-b-r89awxxmnj 0.3s ease-out;
}

@keyframes slideInFromBottom-b-r89awxxmnj {
  from {
        opacity: 0;
      transform: translateY(10px);
    }
    to {
        opacity: 1;
     transform: translateY(0);
    }
}

/* Table Styles */
.table-hover tbody tr[b-r89awxxmnj] {
  transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover[b-r89awxxmnj] {
    background-color: #f8f9fa;
}

.table-active[b-r89awxxmnj] {
    background-color: #fff8d6 !important;
    border-left: 3px solid #0064d9;
}

.table thead th[b-r89awxxmnj] {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 8px;
 font-size: 0.9rem;
    position: sticky;
    top: 0;
  z-index: 10;
}

.table tbody td[b-r89awxxmnj] {
    padding: 10px 8px;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Form Styles */
.form-group[b-r89awxxmnj] {
    margin-bottom: 1rem;
}

.form-group label[b-r89awxxmnj] {
    font-weight: 500;
 color: #495057;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

.form-control[b-r89awxxmnj] {
    font-size: 0.9rem;
}

.form-control:focus[b-r89awxxmnj] {
    border-color: #0064d9;
    box-shadow: 0 0 0 0.2rem rgba(0, 100, 217, 0.25);
}

/* Report Details Section */
.report-details[b-r89awxxmnj] {
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
}

.report-details h6[b-r89awxxmnj] {
    color: #333;
    font-weight: 600;
 border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .report-layout-sidebar[b-r89awxxmnj] {
   width: 100% !important;
  border-right: none;
        border-bottom: 1px solid #bfbfbf;
   margin-bottom: 1rem;
  }
  
    .category-routes[b-r89awxxmnj] {
        margin-left: 1rem !important;
    }
    
    .reports-list-section[b-r89awxxmnj] {
        max-height: 300px !important;
    }
}

/* Custom Scrollbar */
.report-layout-sidebar[b-r89awxxmnj]::-webkit-scrollbar,
.reports-list-section[b-r89awxxmnj]::-webkit-scrollbar,
.report-details-section[b-r89awxxmnj]::-webkit-scrollbar {
    width: 6px;
  height: 6px;
}

.report-layout-sidebar[b-r89awxxmnj]::-webkit-scrollbar-track,
.reports-list-section[b-r89awxxmnj]::-webkit-scrollbar-track,
.report-details-section[b-r89awxxmnj]::-webkit-scrollbar-track {
    background: #f1f1f1;
  border-radius: 3px;
}

.report-layout-sidebar[b-r89awxxmnj]::-webkit-scrollbar-thumb,
.reports-list-section[b-r89awxxmnj]::-webkit-scrollbar-thumb,
.report-details-section[b-r89awxxmnj]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.report-layout-sidebar[b-r89awxxmnj]::-webkit-scrollbar-thumb:hover,
.reports-list-section[b-r89awxxmnj]::-webkit-scrollbar-thumb:hover,
.report-details-section[b-r89awxxmnj]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Action Buttons */
.btn-link[b-r89awxxmnj] {
    padding: 0.25rem 0.5rem;
transition: transform 0.2s ease;
}

.btn-link:hover[b-r89awxxmnj] {
    transform: scale(1.1);
}

.btn-link img[b-r89awxxmnj] {
    opacity: 0.7;
transition: opacity 0.2s ease;
}

.btn-link:hover img[b-r89awxxmnj] {
    opacity: 1;
}

/* Empty State */
.text-center.text-muted.p-5[b-r89awxxmnj] {
    animation: fadeIn-b-r89awxxmnj 0.5s ease-in;
}

@keyframes fadeIn-b-r89awxxmnj {
    from {
   opacity: 0;
        transform: translateY(10px);
  }
    to {
      opacity: 1;
   transform: translateY(0);
    }
}

/* Category Breadcrumb */
.border-bottom[b-r89awxxmnj] {
    animation: slideInFromTop-b-r89awxxmnj 0.3s ease-out;
}

@keyframes slideInFromTop-b-r89awxxmnj {
 from {
        opacity: 0;
transform: translateY(-5px);
  }
    to {
      opacity: 1;
        transform: translateY(0);
  }
}

/* Divider between sections */
.report-details-section[b-r89awxxmnj] {
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}
/* /Components/Pages/SAPUI/ButtonConfigForm/ButtonConfigSAP.razor.rz.scp.css */
/* /Components/Pages/SAPUI/ItemMasterDataForm/ManagePriceListItems.razor.rz.scp.css */
.sap_inner-card[b-rv15g31vf4]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-rv15g31vf4]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-rv15g31vf4]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-rv15g31vf4]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-rv15g31vf4]{overflow-x:auto;width:100%}
.sap-table[b-rv15g31vf4]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-rv15g31vf4],.sap-table td[b-rv15g31vf4]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-rv15g31vf4],.sap-table td:first-child[b-rv15g31vf4]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-rv15g31vf4],.sap-table td:nth-child(2)[b-rv15g31vf4]{min-width:50px;width:50px;text-align:center}
.sap_input[b-rv15g31vf4]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-rv15g31vf4]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-rv15g31vf4]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-rv15g31vf4]{position:relative}
.sap_dropdown-menu[b-rv15g31vf4]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-rv15g31vf4]{display:block}
.sap_dropdown-item[b-rv15g31vf4]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-rv15g31vf4]{margin-top:1rem}
.sap_btn-action[b-rv15g31vf4],.sap_btn[b-rv15g31vf4],.sap_btn-primary[b-rv15g31vf4]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-rv15g31vf4]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-rv15g31vf4]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-rv15g31vf4] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-rv15g31vf4] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-rv15g31vf4] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-rv15g31vf4] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-rv15g31vf4] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-rv15g31vf4] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-rv15g31vf4] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-rv15g31vf4],
.curr-action-cell .sap_btn-primary[b-rv15g31vf4],
.curr-action-cell .curr-row-btn[b-rv15g31vf4] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-rv15g31vf4] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-rv15g31vf4]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-rv15g31vf4] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-rv15g31vf4] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageCardGroups.razor.rz.scp.css */
.sap_inner-card[b-hn1824dfzd]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-hn1824dfzd]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-hn1824dfzd]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-hn1824dfzd]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-hn1824dfzd]{overflow-x:auto;width:100%}
.sap-table[b-hn1824dfzd]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-hn1824dfzd],.sap-table td[b-hn1824dfzd]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-hn1824dfzd],.sap-table td:first-child[b-hn1824dfzd]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-hn1824dfzd],.sap-table td:nth-child(2)[b-hn1824dfzd]{min-width:50px;width:50px;text-align:center}
.sap_input[b-hn1824dfzd]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-hn1824dfzd]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-hn1824dfzd]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-hn1824dfzd]{position:relative}
.sap_dropdown-menu[b-hn1824dfzd]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-hn1824dfzd]{display:block}
.sap_dropdown-item[b-hn1824dfzd]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-hn1824dfzd]{margin-top:1rem}
.sap_btn-action[b-hn1824dfzd],.sap_btn[b-hn1824dfzd],.sap_btn-primary[b-hn1824dfzd]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-hn1824dfzd]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-hn1824dfzd]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-hn1824dfzd] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-hn1824dfzd] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-hn1824dfzd] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-hn1824dfzd] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-hn1824dfzd] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-hn1824dfzd] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-hn1824dfzd] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-hn1824dfzd],
.curr-action-cell .sap_btn-primary[b-hn1824dfzd],
.curr-action-cell .curr-row-btn[b-hn1824dfzd] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-hn1824dfzd] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-hn1824dfzd]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-hn1824dfzd] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-hn1824dfzd] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageLocations.razor.rz.scp.css */
.sap_inner-card[b-h19d009hz7]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-h19d009hz7]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-h19d009hz7]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-h19d009hz7]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-h19d009hz7]{overflow-x:auto;width:100%}
.sap-table[b-h19d009hz7]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-h19d009hz7],.sap-table td[b-h19d009hz7]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-h19d009hz7],.sap-table td:first-child[b-h19d009hz7]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-h19d009hz7],.sap-table td:nth-child(2)[b-h19d009hz7]{min-width:50px;width:50px;text-align:center}
.sap_input[b-h19d009hz7]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-h19d009hz7]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-h19d009hz7]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-h19d009hz7]{position:relative}
.sap_dropdown-menu[b-h19d009hz7]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-h19d009hz7]{display:block}
.sap_dropdown-item[b-h19d009hz7]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-h19d009hz7]{margin-top:1rem}
.sap_btn-action[b-h19d009hz7],.sap_btn[b-h19d009hz7],.sap_btn-primary[b-h19d009hz7]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-h19d009hz7]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-h19d009hz7]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-h19d009hz7] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-h19d009hz7] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-h19d009hz7] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-h19d009hz7] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-h19d009hz7] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-h19d009hz7] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-h19d009hz7] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-h19d009hz7],
.curr-action-cell .sap_btn-primary[b-h19d009hz7],
.curr-action-cell .curr-row-btn[b-h19d009hz7] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-h19d009hz7] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-h19d009hz7]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-h19d009hz7] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-h19d009hz7] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageManufacturers.razor.rz.scp.css */
.sap_inner-card[b-2vsyiu5m7d]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-2vsyiu5m7d]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-2vsyiu5m7d]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-2vsyiu5m7d]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-2vsyiu5m7d]{overflow-x:auto;width:100%}
.sap-table[b-2vsyiu5m7d]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-2vsyiu5m7d],.sap-table td[b-2vsyiu5m7d]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-2vsyiu5m7d],.sap-table td:first-child[b-2vsyiu5m7d]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-2vsyiu5m7d],.sap-table td:nth-child(2)[b-2vsyiu5m7d]{min-width:50px;width:50px;text-align:center}
.sap_input[b-2vsyiu5m7d]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-2vsyiu5m7d]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-2vsyiu5m7d]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-2vsyiu5m7d]{position:relative}
.sap_dropdown-menu[b-2vsyiu5m7d]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-2vsyiu5m7d]{display:block}
.sap_dropdown-item[b-2vsyiu5m7d]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-2vsyiu5m7d]{margin-top:1rem}
.sap_btn-action[b-2vsyiu5m7d],.sap_btn[b-2vsyiu5m7d],.sap_btn-primary[b-2vsyiu5m7d]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-2vsyiu5m7d]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-2vsyiu5m7d]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-2vsyiu5m7d] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-2vsyiu5m7d] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-2vsyiu5m7d] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-2vsyiu5m7d] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-2vsyiu5m7d] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-2vsyiu5m7d] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-2vsyiu5m7d] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-2vsyiu5m7d],
.curr-action-cell .sap_btn-primary[b-2vsyiu5m7d],
.curr-action-cell .curr-row-btn[b-2vsyiu5m7d] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-2vsyiu5m7d] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-2vsyiu5m7d]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-2vsyiu5m7d] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-2vsyiu5m7d] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManagePriceLists.razor.rz.scp.css */
.sap_inner-card[b-5epoy795w1]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-5epoy795w1]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-5epoy795w1]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-5epoy795w1]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-5epoy795w1]{overflow-x:auto;width:100%}
.sap-table[b-5epoy795w1]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-5epoy795w1],.sap-table td[b-5epoy795w1]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-5epoy795w1],.sap-table td:first-child[b-5epoy795w1]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-5epoy795w1],.sap-table td:nth-child(2)[b-5epoy795w1]{min-width:50px;width:50px;text-align:center}
.sap_input[b-5epoy795w1]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-5epoy795w1]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-5epoy795w1]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-5epoy795w1]{position:relative}
.sap_dropdown-menu[b-5epoy795w1]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-5epoy795w1]{display:block}
.sap_dropdown-item[b-5epoy795w1]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-5epoy795w1]{margin-top:1rem}
.sap_btn-action[b-5epoy795w1],.sap_btn[b-5epoy795w1],.sap_btn-primary[b-5epoy795w1]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-5epoy795w1]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-5epoy795w1]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-5epoy795w1] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-5epoy795w1] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-5epoy795w1] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-5epoy795w1] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-5epoy795w1] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-5epoy795w1] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-5epoy795w1] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-5epoy795w1],
.curr-action-cell .sap_btn-primary[b-5epoy795w1],
.curr-action-cell .curr-row-btn[b-5epoy795w1] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-5epoy795w1] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-5epoy795w1]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-5epoy795w1] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-5epoy795w1] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageShippingTypes.razor.rz.scp.css */
.sap_inner-card[b-vwj21jfsx9]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-vwj21jfsx9]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-vwj21jfsx9]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-vwj21jfsx9]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-vwj21jfsx9]{overflow-x:auto;width:100%}
.sap-table[b-vwj21jfsx9]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-vwj21jfsx9],.sap-table td[b-vwj21jfsx9]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-vwj21jfsx9],.sap-table td:first-child[b-vwj21jfsx9]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-vwj21jfsx9],.sap-table td:nth-child(2)[b-vwj21jfsx9]{min-width:50px;width:50px;text-align:center}
.sap_input[b-vwj21jfsx9]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-vwj21jfsx9]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-vwj21jfsx9]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-vwj21jfsx9]{position:relative}
.sap_dropdown-menu[b-vwj21jfsx9]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-vwj21jfsx9]{display:block}
.sap_dropdown-item[b-vwj21jfsx9]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-vwj21jfsx9]{margin-top:1rem}
.sap_btn-action[b-vwj21jfsx9],.sap_btn[b-vwj21jfsx9],.sap_btn-primary[b-vwj21jfsx9]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-vwj21jfsx9]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-vwj21jfsx9]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-vwj21jfsx9] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-vwj21jfsx9] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-vwj21jfsx9] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-vwj21jfsx9] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-vwj21jfsx9] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-vwj21jfsx9] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-vwj21jfsx9] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-vwj21jfsx9],
.curr-action-cell .sap_btn-primary[b-vwj21jfsx9],
.curr-action-cell .curr-row-btn[b-vwj21jfsx9] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-vwj21jfsx9] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-vwj21jfsx9]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-vwj21jfsx9] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-vwj21jfsx9] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageTaxcodes.razor.rz.scp.css */
.sap_inner-card[b-sbho6a6n98]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-sbho6a6n98]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-sbho6a6n98]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-sbho6a6n98]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-sbho6a6n98]{overflow-x:auto;width:100%}
.sap-table[b-sbho6a6n98]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-sbho6a6n98],.sap-table td[b-sbho6a6n98]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-sbho6a6n98],.sap-table td:first-child[b-sbho6a6n98]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-sbho6a6n98],.sap-table td:nth-child(2)[b-sbho6a6n98]{min-width:50px;width:50px;text-align:center}
.sap_input[b-sbho6a6n98]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-sbho6a6n98]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-sbho6a6n98]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-sbho6a6n98]{position:relative}
.sap_dropdown-menu[b-sbho6a6n98]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-sbho6a6n98]{display:block}
.sap_dropdown-item[b-sbho6a6n98]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-sbho6a6n98]{margin-top:1rem}
.sap_btn-action[b-sbho6a6n98],.sap_btn[b-sbho6a6n98],.sap_btn-primary[b-sbho6a6n98]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-sbho6a6n98]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-sbho6a6n98]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-sbho6a6n98] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-sbho6a6n98] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* highlight editing row */
.curr-row-editing td[b-sbho6a6n98] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .sticky-col-right[b-sbho6a6n98] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-sbho6a6n98] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-sbho6a6n98],
.curr-action-cell .sap_btn-primary[b-sbho6a6n98],
.curr-action-cell .curr-row-btn[b-sbho6a6n98] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-sbho6a6n98] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-sbho6a6n98]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-sbho6a6n98] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-sbho6a6n98] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPManageUoMs.razor.rz.scp.css */
.sap_inner-card[b-nyjudx48az]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-nyjudx48az]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-nyjudx48az]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-nyjudx48az]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-nyjudx48az]{overflow-x:auto;width:100%}
.sap-table[b-nyjudx48az]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-nyjudx48az],.sap-table td[b-nyjudx48az]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-nyjudx48az],.sap-table td:first-child[b-nyjudx48az]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-nyjudx48az],.sap-table td:nth-child(2)[b-nyjudx48az]{min-width:50px;width:50px;text-align:center}
.sap_input[b-nyjudx48az]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-nyjudx48az]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-nyjudx48az]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-nyjudx48az]{position:relative}
.sap_dropdown-menu[b-nyjudx48az]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-nyjudx48az]{display:block}
.sap_dropdown-item[b-nyjudx48az]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-nyjudx48az]{margin-top:1rem}
.sap_btn-action[b-nyjudx48az],.sap_btn[b-nyjudx48az],.sap_btn-primary[b-nyjudx48az]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-nyjudx48az]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-nyjudx48az]{display:flex;gap:.5rem;align-items:center}
.curr-scroll-wrapper[b-nyjudx48az] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-nyjudx48az] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

/* make sticky action column narrow (target ~35px) */
.curr-sticky-col[b-nyjudx48az] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    /* reduced width: half of previous 70px target -> 35px */
    max-width: 70px !important;
}

/* center header text in actions column */
.curr-sticky-col-header[b-nyjudx48az] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

/* highlight editing row */
.curr-row-editing td[b-nyjudx48az] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-nyjudx48az] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

/* action cell basics */
.curr-action-cell[b-nyjudx48az] {
    display: table-cell;
    vertical-align: middle;
    /* reduce padding so cell can shrink */
    padding: 2px 4px;
    gap: 4px;
    text-align: center; /* center everything inside the cell */
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

/* make action buttons icon-only and remove any background/border/shadow */
.curr-action-cell .sap_btn[b-nyjudx48az],
.curr-action-cell .sap_btn-primary[b-nyjudx48az],
.curr-action-cell .curr-row-btn[b-nyjudx48az] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important; /* reduce horizontal margins */
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ensure icon images are block and centered, slightly smaller */
.curr-action-cell img[b-nyjudx48az] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* slightly larger hit area without visible background (reduced) */
.curr-action-cell .sap_btn[b-nyjudx48az]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px; /* keep only hit area, not visible */
    pointer-events: none;
    visibility: hidden;
}

/* keep original spacing for rows but avoid text wrapping inside action cell */
.curr-action-cell > *[b-nyjudx48az] {
    white-space: nowrap;
}

/* small tweak to reduce default .curr-row-btn padding elsewhere */
.curr-row-btn[b-nyjudx48az] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/SAPMasterDataListType.razor.rz.scp.css */
.sap_table-no-data[b-3s5a3rkjp8]{text-align:center;color:#888;padding:1rem}
.sap-table[b-3s5a3rkjp8]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-3s5a3rkjp8],.sap-table td[b-3s5a3rkjp8]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-3s5a3rkjp8],.sap-table td:first-child[b-3s5a3rkjp8]{min-width:40px;width:40px;text-align:center}
.sap_input[b-3s5a3rkjp8]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-3s5a3rkjp8]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-3s5a3rkjp8]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}

/* select.sap_input strips the native dropdown arrow without drawing its own - add one back,
   scoped to just this component's selects, and fix the vertical padding that otherwise clips the
   selected option's text down to its descenders. */
.sap_input--select[b-3s5a3rkjp8] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23556b82'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding: 3px 24px 3px 8px !important;
    line-height: 1.3 !important;
}
.sap_checkbox_label[b-3s5a3rkjp8] {
    margin-left: 0.4rem;
    vertical-align: middle;
}
.sap_btn.sap_primary[b-3s5a3rkjp8],
.sap_btn[b-3s5a3rkjp8] {
    background: none !important;
    border: none !important;
}

.curr-scroll-wrapper[b-3s5a3rkjp8] {
    overflow-x: auto;
    overflow-y: visible;
}

.curr-table[b-3s5a3rkjp8] {
    min-width: max-content;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: relative;
}

.curr-sticky-col[b-3s5a3rkjp8] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
    white-space: nowrap;
    max-width: 70px !important;
}

.curr-sticky-col-header[b-3s5a3rkjp8] {
    z-index: 1;
    background: var(--color-header-bg, #f5f5f5);
    text-align: center;
    max-width: 70px !important;
}

.curr-row-editing td[b-3s5a3rkjp8] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-row-editing .curr-sticky-col[b-3s5a3rkjp8] {
    background-color: var(--color-row-edit, #fffde7) !important;
}

.curr-action-cell[b-3s5a3rkjp8] {
    display: table-cell;
    vertical-align: middle;
    padding: 2px 4px;
    gap: 4px;
    text-align: center;
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    overflow: visible;
}

.curr-action-cell .sap_btn[b-3s5a3rkjp8],
.curr-action-cell .sap_btn-primary[b-3s5a3rkjp8],
.curr-action-cell .curr-row-btn[b-3s5a3rkjp8] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important;
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.curr-action-cell img[b-3s5a3rkjp8] {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.curr-action-cell .sap_btn[b-3s5a3rkjp8]::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: -28px;
    pointer-events: none;
    visibility: hidden;
}

.curr-action-cell > *[b-3s5a3rkjp8] {
    white-space: nowrap;
}

.curr-row-btn[b-3s5a3rkjp8] {
    font-size: 12px;
    padding: 0;
    height: auto;
    margin: 0 2px;
}
/* /Components/Pages/SAPUI/ItemMasterDataForm/WareHousrDI.razor.rz.scp.css */
:root[b-b0fgs2c8t0] {
    --sap-bottom-bar-height: 56px;
    --sap-bottom-bar-gap: 24px;
}

.sap_page[b-b0fgs2c8t0] {
    padding-bottom: calc(var(--sap-bottom-bar-height) + var(--sap-bottom-bar-gap) + 16px) !important;
}

.sap_inner-card[b-b0fgs2c8t0],
.sap_card[b-b0fgs2c8t0],
section.sap_card[b-b0fgs2c8t0] {
    margin-bottom: 16px;
}

    .sap_inner-card:last-child[b-b0fgs2c8t0],
    .sap_card:last-child[b-b0fgs2c8t0],
    section.sap_card:last-child[b-b0fgs2c8t0] {
        margin-bottom: calc(var(--sap-bottom-bar-height) + var(--sap-bottom-bar-gap) + 24px);
    }

.sap_bottom-bar[b-b0fgs2c8t0] {
    z-index: 1200 !important;
}

.sap-safe-bottom[b-b0fgs2c8t0] {
    padding-bottom: calc(var(--sap-bottom-bar-height) + var(--sap-bottom-bar-gap) + 16px) !important;
}
/* /Components/Pages/SAPUI/ManageSAPList/SAPAdaptFilterHeader.razor.rz.scp.css */
/* =====================================================================
   SAPAdaptFilterHeader – SAP-style adaptive header filter component
   ===================================================================== */

.sap-adapt-filter-root[b-uzxz2vr9og] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.4rem 0.75rem 0.5rem;
    background: transparent;
}

/* Row of field columns */
.sap-adapt-filter-fields[b-uzxz2vr9og] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: flex-end;
    flex: 1;
}

/* Each individual field */
.sap-adapt-filter-field-col[b-uzxz2vr9og] {
  display: flex;
    flex-direction: column;
    min-width: 9rem;
    max-width: 14rem;
    flex: 1 1 9rem;
}

/* Label above input */
.sap-adapt-filter-label[b-uzxz2vr9og] {
    font-size: 0.75rem;
    color: #444;
  margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wrapper for input + copy button */
.sap-adapt-filter-input-wrap[b-uzxz2vr9og] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #b5cfe0;
  border-radius: 2px;
    background: #fff;
    height: 1.9rem;
}

.sap-adapt-filter-input-wrap:focus-within[b-uzxz2vr9og] {
border-color: #0070f2;
    box-shadow: 0 0 0 1px #0070f2;
}

/* Text / Number input */
.sap-adapt-filter-input[b-uzxz2vr9og] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 0.3rem;
    font-size: 0.82rem;
    color: #222;
    height: 100%;
    min-width: 0;
}

.sap-adapt-filter-input[b-uzxz2vr9og]::-webkit-inner-spin-button,
.sap-adapt-filter-input[b-uzxz2vr9og]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Copy / clear button */
.sap-adapt-filter-copy-btn[b-uzxz2vr9og] {
    border: none;
    background: none;
    padding: 0 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    opacity: 0.7;
    flex-shrink: 0;
}

.sap-adapt-filter-copy-btn:hover[b-uzxz2vr9og] {
    opacity: 1;
}

/* ── Select / Dropdown ──────────────────────────────────────────────── */

.sap-adapt-filter-tags-box[b-uzxz2vr9og] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  cursor: pointer;
    padding: 0 0.3rem;
    min-height: 1.9rem;
    width: 100%;
 user-select: none;
}

.sap-adapt-filter-caret[b-uzxz2vr9og] {
    margin-left: auto;
    font-size: 0.65rem;
    color: #666;
  padding-right: 0.15rem;
    flex-shrink: 0;
}

/* Tag chip (selected value) */
.sap-adapt-filter-tag[b-uzxz2vr9og] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #e8f4fd;
    border: 1px solid #a8cfe8;
    border-radius: 2px;
    font-size: 0.78rem;
  padding: 0.05rem 0.3rem;
    color: #1a5276;
    white-space: nowrap;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sap-adapt-filter-tag-remove[b-uzxz2vr9og] {
    cursor: pointer;
    font-size: 0.85rem;
    color: #888;
    line-height: 1;
}

.sap-adapt-filter-tag-remove:hover[b-uzxz2vr9og] {
    color: #c0392b;
}

/* Dropdown popup */
.sap-adapt-filter-dropdown[b-uzxz2vr9og] {
    position: absolute;
    top: calc(100% + 2px);
  left: 0;
    min-width: 100%;
  max-width: 20rem;
    background: #fff;
    border: 1px solid #b5cfe0;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 9999;
    max-height: 16rem;
    overflow-y: auto;
}

.sap-adapt-filter-dropdown-search[b-uzxz2vr9og] {
    padding: 0.3rem 0.4rem;
border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    background: #fff;
}

.sap-adapt-filter-dropdown-search-input[b-uzxz2vr9og] {
    width: 100%;
    border: 1px solid #b5cfe0;
  border-radius: 2px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    outline: none;
}

.sap-adapt-filter-dropdown-item[b-uzxz2vr9og] {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: #222;
    white-space: nowrap;
}

.sap-adapt-filter-dropdown-item:hover[b-uzxz2vr9og] {
    background: #e8f4fd;
}

.sap-adapt-filter-dropdown-item.selected[b-uzxz2vr9og] {
    background: #d0eaf7;
    font-weight: 500;
    color: #0070f2;
}

/* ── Action buttons row ─────────────────────────────────────────────── */

.sap-adapt-filter-actions[b-uzxz2vr9og] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.4rem;
}

.sap-adapt-filter-go-btn[b-uzxz2vr9og] {
    min-width: 3rem;
    height: 1.9rem;
    padding: 0 0.75rem;
    font-size: 0.82rem;
}

.sap-adapt-filter-adapt-btn[b-uzxz2vr9og] {
    background: none;
    border: none;
    color: #0070f2;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    text-decoration: underline;
  text-underline-offset: 2px;
}

.sap-adapt-filter-adapt-btn:hover[b-uzxz2vr9og] {
    color: #004fa3;
}
/* /Components/Pages/SAPUI/RelationshipMapModal.razor.rz.scp.css */
/* ── Overlay ─────────────────────────────────────────────────────────── */
.relationship-map-overlay[b-7izq8hlkl8] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.relationship-map-overlay.visible[b-7izq8hlkl8] {
        opacity: 1;
    pointer-events: all;
    }
.rm-scroll-container[b-7izq8hlkl8] {
    cursor: grab;
    overflow: auto;
    scrollbar-width: none; /* ← Firefox */
    -ms-overflow-style: none; /* ← IE/Edge */
}

    .rm-scroll-container[b-7izq8hlkl8]::-webkit-scrollbar {
        display: none; /* ← Chrome/Safari */
    }

    .rm-scroll-container:active[b-7izq8hlkl8] {
        cursor: grabbing;
    }
.relationship-map-dialog[b-7izq8hlkl8] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    width: 1150px;
    max-width: 96vw;
    height: 70vh; /* ← đổi max-height thành height */
    max-height: 70vh; /* ← giữ lại để an toàn */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: '72','SAP 72',Arial,sans-serif;
    transition: width .2s, height .2s;
}

    .relationship-map-dialog.fullscreen[b-7izq8hlkl8] {
        width: calc(100vw - 12rem) !important;
        max-width: calc(100vw - 12rem) !important;
     height: calc(100vh - 6rem) !important;
        max-height: calc(100vh - 6rem) !important;
   border-radius: 10px;
        margin: 4rem  5rem;
    }

/* ── Header ──────────────────────────────────────────────────────────── */
.rm-header[b-7izq8hlkl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
    background: #fff;
}

.rm-title[b-7izq8hlkl8] {
  margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #32363a;
}

.rm-header-actions[b-7izq8hlkl8] {
    display: flex;
    gap: 4px;
}

.rm-icon-btn[b-7izq8hlkl8] {
    background: transparent;
 border: 1px solid transparent;
    border-radius: 3px;
    padding: 5px 7px;
    cursor: pointer;
    color: #0a6ed1;
    display: flex;
    align-items: center;
    transition: background .15s, border-color .15s;
}

    .rm-icon-btn:hover[b-7izq8hlkl8] {
        background: #f0f4fb;
        border-color: #c5d9f5;
    }

.rm-body[b-7izq8hlkl8] {
    flex: 1;
    overflow: hidden;
    min-height: 0; /* ← thêm dòng này */
    background: #fff;
}


.rm-scroll-container[b-7izq8hlkl8] {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.rm-content[b-7izq8hlkl8] {
    padding: 0;
    display: inline-block; /* ← đổi lại inline-block */
    min-width: unset; /* ← bỏ min-width: 100% */
}
.rm-inner[b-7izq8hlkl8] {
    display: inline-flex;
    flex-direction: column;
    padding: 0 32px 32px 32px;
    min-width: fit-content;
}


/* ── Graph (DAG) layout ──────────────────────────────────────────────── */
.rm-graph-canvas[b-7izq8hlkl8] {
    position: relative;
}

.rm-edges-svg[b-7izq8hlkl8] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rm-graph-node[b-7izq8hlkl8] {
    position: absolute;
    z-index: 1;
    cursor: grab;
}

    /* Node đang được kéo: nổi lên trên các node khác */
    .rm-graph-node.rm-node-dragging[b-7izq8hlkl8] {
        z-index: 3;
        cursor: grabbing;
    }

        .rm-graph-node.rm-node-dragging .rm-node[b-7izq8hlkl8] {
            box-shadow: 0 6px 18px rgba(0,0,0,.22);
        }

        .rm-graph-node.rm-node-dragging .rm-node-link[b-7izq8hlkl8] {
            cursor: grabbing;
        }

.rm-edge-info-btn[b-7izq8hlkl8] {
    position: absolute;
    z-index: 2;
}

.connector-info-btn[b-7izq8hlkl8] {
    width: 36px;
    height: 24px;
    background-color: #30914c;
    border: #30914c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s;
}
    .connector-info-btn span[b-7izq8hlkl8] {
        color: white;
    }
    .connector-info-btn:hover span[b-7izq8hlkl8] {
        color: #30914c;
    }
    .connector-info-btn:hover[b-7izq8hlkl8] {
        background-color: #eaecee;
        border-color: #bcc3ca;
    }

/* ── Node wrapper ────────────────────────────────────────────────────── */
.rm-node-wrapper[b-7izq8hlkl8] {
    display: flex;
  flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Node card ───────────────────────────────────────────────────────── */
.node-base[b-7izq8hlkl8] {
    width: 145px;
    min-height: 195px;
    border-radius: 0 15px 15px 15px;
    border: 1px solid #c9d5e0;
    clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18px);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    transition: box-shadow .15s, border-color .15s;
    flex-shrink: 0;
    gap: 4px;
    padding: 16px 13px 13px;
}

    .node-base:hover[b-7izq8hlkl8] {
        border-color: #0a6ed1;
  box-shadow: 0 0 0 2px rgba(10,110,209,.15);
    }
.node-focused[b-7izq8hlkl8] {
    border-color: #0a6ed1 !important;
}
    .node-focused .node-corner-fold[b-7izq8hlkl8] {
        background: linear-gradient(315deg, #0a6ed1 0%, #0a6ed1 50%, transparent 50%);
    }

.node-positive[b-7izq8hlkl8] {
    border-color: #758ca4;
}

.node-negative[b-7izq8hlkl8] {
 border-color: #758ca4;
}



.node-cancelled[b-7izq8hlkl8] {
}

.node-corner-fold[b-7izq8hlkl8] {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 18px;
    height: 18px;
    background: linear-gradient(315deg, #758ca4 0%, #758ca4 50%, transparent 50%);
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 8px 0;
}

.node-base:hover .node-corner-fold[b-7izq8hlkl8] {
    background: linear-gradient(315deg, #0a6ed1 0%, #0a6ed1 50%, transparent 50%);
}

.node-center-icon[b-7izq8hlkl8] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Node details ────────────────────────────────────────────────────── */
.node-details[b-7izq8hlkl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.node-detail-row[b-7izq8hlkl8] {
    font-size: 0.67rem;
    color: #32363a;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.node-detail-docnum[b-7izq8hlkl8] {
    font-weight: 700;
    font-size: 0.78rem;
    color: #32363a;
}

.node-detail-type[b-7izq8hlkl8] {
    font-size: 0.63rem;
    color: #758ca4;
    font-style: italic;
}

.node-detail-date[b-7izq8hlkl8] {
    font-size: 0.63rem;
    color: #758ca4;
}

.node-detail-amount[b-7izq8hlkl8] {
    font-weight: 500;
    color: #32363a;
}

.node-detail-status[b-7izq8hlkl8] {
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.63rem;
    font-weight: 600;
    margin-top: 2px;
}

.node-detail-status--normal[b-7izq8hlkl8] {
    background: #e1f5e1;
    color: #00a800;
}

.node-detail-status--canceled[b-7izq8hlkl8] {
  background: #ffeaea;
    color: #f53232;
}

.node-detail-status--cancellation[b-7izq8hlkl8] {
    background: #ffeaea;
    color: #f53232;
}

.node-detail-status--paid[b-7izq8hlkl8] {
    background: #e3f2fd;
    color: #0a6ed1;
}

.node-detail-status--open[b-7izq8hlkl8] {
    background: #fff3e0;
    color: #e68a00;
}

.node-detail-status--closed[b-7izq8hlkl8] {
    background: #f0f0f0;
    color: #555;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.rm-footer[b-7izq8hlkl8] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 10px;
    border-top: 1px solid #e5e5e5;
    background: #fff;
    flex-shrink: 0;
}

.rm-close-btn[b-7izq8hlkl8] {
    padding: 5px 20px;
    background: #fff;
    border: 1px solid #b0b5ba;
    border-radius: 3px;
    font-size: .875rem;
    color: #32363a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .rm-close-btn:hover[b-7izq8hlkl8] {
background: #f5f5f5;
        border-color: #8a9096;
    }

.rm-lanes-row[b-7izq8hlkl8] {
    display: flex;
    align-items: flex-start;
    padding: 20px 0 16px 0;
    min-width: fit-content;  /* ← co theo nội dung */
}

.rm-lane-edge[b-7izq8hlkl8] {
    display: flex;
  align-items: center;
    padding-top: 24px;
    flex-shrink: 0;
    width: 10px;
}

.lane-edge-line[b-7izq8hlkl8] {
    width: 2px;
    height: 20px;
    background: #b0b5ba;
    margin: 0 auto;
}

.rm-lane-col[b-7izq8hlkl8] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rm-lane-header[b-7izq8hlkl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    width: 100%;
}

.lane-hline[b-7izq8hlkl8] {
    position: absolute;
    top: 32px;
    height: 1px;
    background: gray;
    width: calc(50% - 36px);
}

.lane-hline-left[b-7izq8hlkl8] {
    left: 0;
}

.lane-hline-right[b-7izq8hlkl8] {
    right: 0;
}

.lane-donut-wrap[b-7izq8hlkl8] {
    position: relative;
    width: 64px;
  height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut-svg[b-7izq8hlkl8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.donut-outer[b-7izq8hlkl8] {
    fill: #fff;
    stroke: gray;
    stroke-width: 1;
}

.donut-ring-positive[b-7izq8hlkl8] {
    stroke: #00a800;
}

.donut-ring-negative[b-7izq8hlkl8] {
  stroke: #f53232;
}

.donut-ring-warning[b-7izq8hlkl8] {
    stroke: #f58b00;
}

.lane-icon-inner[b-7izq8hlkl8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lane-label[b-7izq8hlkl8] {
    font-size: 0.8rem;
    font-weight: 500;
  color: #32363a;
    text-align: center;
  white-space: nowrap;
    margin-top: 4px;
}

.rm-lane-sep[b-7izq8hlkl8] {
    display: flex;
    align-items: center;
    padding-top: 19px;
    flex-shrink: 0;
    gap: 2px;
}

.sep-arrows[b-7izq8hlkl8] {
    color: #6e9fcc;
    padding: 0 0.5rem;
}
.node-title[b-7izq8hlkl8] {
    font-size: .875rem;
    color: #32363a;
    text-align: left;
    width: 100%;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;

}

.node-status-row[b-7izq8hlkl8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    margin: 20px 0;
    justify-content: flex-start; /* ← thêm dòng này */
    width: 100%; /* ← thêm dòng này để đảm bảo full width */
}

.status-closed[b-7izq8hlkl8] {
    color: #00a800;
}

.status-open-overdue[b-7izq8hlkl8] {
    color: #AA0808;
}

.status-open[b-7izq8hlkl8] {
    color: #B44F00;
}

.status-default[b-7izq8hlkl8] {
    color: #758ca4;
}

.node-amount-block[b-7izq8hlkl8],
.node-due-block[b-7izq8hlkl8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 4px;
}

.node-amount-label[b-7izq8hlkl8] {
    font-size: 0.75rem;
    color: #556B82;
    text-align: left;
}
.status-open-future[b-7izq8hlkl8] {
    color: #556B82;
}
.node-amount-value[b-7izq8hlkl8] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #32363a;
    text-align: left;
}

.node-due-value[b-7izq8hlkl8] {
    font-size: 0.7rem;
    color: #32363a;
    text-align: left;
}
/* ── Node zoom levels ────────────────────────────────────────────────── */
.rm-node-lv1[b-7izq8hlkl8] {
    width: 176px;
    min-height: 221px;
}

.rm-node-lv2[b-7izq8hlkl8] {
    width: 145px;
    min-height: 195px;
}

.rm-node-lv3[b-7izq8hlkl8] {
    width: 104px;
    min-height: 128px;
    padding: 10px 8px 8px;
    gap: 2px;
}

.rm-node-lv4[b-7izq8hlkl8] {
    width: 48px;
    min-height: 60px;
    padding: 8px 4px;
    clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px);
    border-radius: 0 10px 10px 10px;
    justify-content: center;
    align-items: center;
}

    .rm-node-lv4 .node-corner-fold[b-7izq8hlkl8] {
        width: 12px;
        height: 12px;
    }

    .rm-node-lv4 .node-details[b-7izq8hlkl8] {
        align-items: center;
        justify-content: center;
    }

.node-lv4-icon[b-7izq8hlkl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.rm-node-lv3 .node-title-sm[b-7izq8hlkl8] {
    font-size: 0.875rem;
    color: #32363a;
    text-align: center;
    width: 100%;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
    margin-top: 0.5rem;
}

.rm-node-lv3 .node-status-row[b-7izq8hlkl8] {
    margin: 4px 0 0 0;
}


.rm-node-lv1 .node-title[b-7izq8hlkl8] {
    font-size: 1rem;
}

.rm-node-lv1 .node-status-row[b-7izq8hlkl8] {
    font-size: 0.875rem;
}

    .rm-node-lv1 .node-status-row svg[b-7izq8hlkl8] {
        width: 20px;
        height: 20px;
    }

    .rm-node-lv1 .node-status-row span[style*="SAP-icons"][b-7izq8hlkl8] {
        font-size: 1.2rem !important;
    }

.rm-node-lv1 .node-amount-label[b-7izq8hlkl8] {
    font-size: 0.875rem;
}
.rm-node-lv3 .node-status-row[b-7izq8hlkl8] {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rm-node-lv3 .node-status-row svg[b-7izq8hlkl8] {
    width: 20px;
    height: 20px;
}

.rm-node-lv3 .node-status-row span[style*="SAP-icons"][b-7izq8hlkl8] {
    font-size: 1.2rem !important;
}

.rm-node-lv4 .node-lv4-icon svg[b-7izq8hlkl8] {
    width: 22px;
    height: 22px;
}
.rm-node-lv4 .node-lv4-icon span[style*="SAP-icons"][b-7izq8hlkl8] {
    font-size: 1.32rem !important;
}

.rm-scroll-container[b-7izq8hlkl8] {
    cursor: grab;
    overflow: auto;
}

    .rm-scroll-container:active[b-7izq8hlkl8] {
        cursor: grabbing;
    }

/* /Components/Pages/SAPUI/SaleForm/SaleOrderDI.razor.rz.scp.css */
/* /Components/Pages/SAPUI/SAPAutoCompleteInputOld.razor.rz.scp.css */
/* ===== AutoComplete Container ===== */
.sap_autocomplete_container[b-y6a4cttdd5] {
    position: relative;
    width: 100%;
}

/* ===== Input Group ===== */
.sap_input_group[b-y6a4cttdd5] {
    position: relative;
    display: flex;
  align-items: center;
}

.sap_input[b-y6a4cttdd5] {
    flex: 1;
    height: 1.625rem;
    padding: 6px 8px;
  font-size: 12px;
    border-radius: 3px;
    border: 1px solid #d4dadf;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 1px 0 0 #556b81;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.sap_input:hover:not(:disabled)[b-y6a4cttdd5] {
    border-color: #91C0FF;
    box-shadow: 0 1px 0 0 #2882ec;
}

.sap_input:focus[b-y6a4cttdd5],
.sap_input_active[b-y6a4cttdd5] {
    border-color: #0068ff;
    box-shadow: 0 0 0 1px rgba(0, 104, 255, 0.9);
}



.sap_input_btn[b-y6a4cttdd5] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.sap_input_btn:hover:not(:disabled)[b-y6a4cttdd5] {
    opacity: 0.7;
}

.sap_input_btn:disabled[b-y6a4cttdd5] {
    cursor: not-allowed;
    opacity: 0.3;
}

.sap_input_btn:disabled img[b-y6a4cttdd5] {
    display: none;
}

/* ===== Dropdown Container ===== */
.sap_dropdown[b-y6a4cttdd5] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #c8d0e3;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

/* ===== Dropdown Table Wrapper ===== */
.sap_dropdown_table[b-y6a4cttdd5] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 350px;
    flex: 1;
}

/* ===== Table Styling ===== */
.sap_dropdown table[b-y6a4cttdd5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: white;
}

.sap_dropdown thead[b-y6a4cttdd5] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f7f7f7;
}

.sap_dropdown thead th[b-y6a4cttdd5] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #32363a;
    border-bottom: 1px solid #d9d9d9;
    background: #f7f7f7;
    white-space: nowrap;
}

.sap_dropdown tbody td[b-y6a4cttdd5] {
    padding: 6px 12px;
    border-bottom: 1px solid #ededed;
    color: #32363a;
    vertical-align: middle;
    white-space: nowrap;
}

.sap_dropdown tbody tr[b-y6a4cttdd5] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.sap_dropdown tbody tr:hover[b-y6a4cttdd5] {
    background-color: #eaecee;
}

.sap_dropdown tbody tr:active[b-y6a4cttdd5] {
    background-color: #d9f0ff;
}

.sap_dropdown tbody tr:last-child td[b-y6a4cttdd5] {
    border-bottom: none;
}

/* ===== Dropdown Footer ===== */
.sap_dropdown_footer[b-y6a4cttdd5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #ededed;
    background: #fafbfc;
    font-size: 11px;
    color: #6c757d;
}

.sap_items_count[b-y6a4cttdd5] {
    font-size: 11px;
    color: #6c757d;
}

.sap_show_all_btn[b-y6a4cttdd5] {
    padding: 4px 12px;
    font-size: 11px;
    background: white;
  border: 1px solid #d4dadf;
    border-radius: 3px;
    color: #0068ff;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.sap_show_all_btn:hover[b-y6a4cttdd5] {
    background: #f0f7ff;
    border-color: #0068ff;
}

.sap_show_all_btn:active[b-y6a4cttdd5] {
    background: #e0efff;
}

/* ===== Scrollbar Styling ===== */
.sap_dropdown_table[b-y6a4cttdd5]::-webkit-scrollbar {
 width: 8px;
    height: 8px;
}

.sap_dropdown_table[b-y6a4cttdd5]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sap_dropdown_table[b-y6a4cttdd5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.sap_dropdown_table[b-y6a4cttdd5]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .sap_dropdown[b-y6a4cttdd5] {
        max-height: 300px;
    }

    .sap_dropdown_table[b-y6a4cttdd5] {
        max-height: 250px;
    }

    .sap_dropdown thead th[b-y6a4cttdd5],
    .sap_dropdown tbody td[b-y6a4cttdd5] {
        padding: 6px 8px;
        font-size: 11px;
    }
}
/* /Components/Pages/SAPUI/SAPBusinessPartner.razor.rz.scp.css */
/* Total Summary Styles */
.sap_total-summary[b-p59bp5y7ue] {
    margin-top: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.sap_summary-grid[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin-left: auto;
}

.sap_summary-row[b-p59bp5y7ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

    .sap_summary-row.sap_summary-total[b-p59bp5y7ue] {
        border-top: 2px solid #dee2e6;
        padding-top: 12px;
        margin-top: 8px;
        font-weight: 600;
        font-size: 1.1rem;
    }

.sap_summary-label[b-p59bp5y7ue] {
    color: #6c757d;
    font-weight: 500;
}

.sap_summary-value[b-p59bp5y7ue] {
    font-weight: 600;
    color: #212529;
}

/* Table Actions */
.sap_table-actions[b-p59bp5y7ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 12px;
}

.sap_table-actions-right[b-p59bp5y7ue] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_btn-action[b-p59bp5y7ue] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    transition: all 0.2s;
}

    .sap_btn-action:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #e9ecef;
    }

    .sap_btn-action:disabled[b-p59bp5y7ue] {
        opacity: 0.5;
        cursor: not-allowed;
        color: #6c757d;
    }

.sap_btn-icon[b-p59bp5y7ue] {
    width: 100px;
    height: 32px;
    padding: 24px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_btn-icon:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_btn-icon:disabled[b-p59bp5y7ue] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_btn-icon-right[b-p59bp5y7ue] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_btn-icon-right:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_btn-icon-right:disabled[b-p59bp5y7ue] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Table No Data */
.sap_table-no-data[b-p59bp5y7ue] {
    text-align: center;
    padding: 32px;
    color: #6c757d;
    font-style: italic;
}

/* Attachment Area */
.sap_attachment-area[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.sap_attachment-icon[b-p59bp5y7ue] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.sap_attachment-text[b-p59bp5y7ue] {
    color: #6c757d;
    margin-bottom: 16px;
}

/* Input Sizes */
.sap_input-sm[b-p59bp5y7ue] {
    max-width: 120px;
}

/* Define New Link */
.sap_define-new-link[b-p59bp5y7ue] {
    margin-top: 8px;
}

.sap_link[b-p59bp5y7ue] {
    color: #0d6efd;
    text-decoration: none;
    font-size: 14px;
}

    .sap_link:hover[b-p59bp5y7ue] {
        text-decoration: underline;
    }

/* Link Section */
.sap_link-section[b-p59bp5y7ue] {
    padding: 8px 0;
}

/* UDF Grid - Single Column Layout (như trong ảnh) */
.sap_udf-grid-two-column[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    max-width: 800px; /* Giới hạn độ rộng */
}

    .sap_udf-grid-two-column .sap_label[b-p59bp5y7ue] {
        display: grid;
        grid-template-columns: 200px 1fr;
        align-items: center;
        gap: 16px;
    }

        .sap_udf-grid-two-column .sap_label span[b-p59bp5y7ue] {
            color: #495057;
            font-weight: 400;
            text-align: left;
        }

        .sap_udf-grid-two-column .sap_label .sap_input[b-p59bp5y7ue] {
            width: 100%;
            max-width: 540px;
        }

/* Checkbox Row */
.sap_checkbox-row[b-p59bp5y7ue] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

    .sap_checkbox-row span[b-p59bp5y7ue] {
        flex: 1;
    }

    .sap_checkbox-row input[type="checkbox"][b-p59bp5y7ue] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

/* Spacing utilities */
.sap_mt-8[b-p59bp5y7ue] {
    margin-top: 8px;
}

.sap_mt-12[b-p59bp5y7ue] {
    margin-top: 12px;
}

.sap_mt-16[b-p59bp5y7ue] {
    margin-top: 16px;
}

.sap_mt-24[b-p59bp5y7ue] {
    margin-top: 24px;
}

.sap_mb-80[b-p59bp5y7ue] {
    margin-bottom: 80px;
}

.sap_dropdown-container[b-p59bp5y7ue] {
    position: relative;
    display: inline-block;
}

.sap_dropdown-menu[b-p59bp5y7ue] {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 4px;
}

    .sap_dropdown-menu.show[b-p59bp5y7ue] {
        display: block;
    }

.sap_dropdown-item[b-p59bp5y7ue] {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

    .sap_dropdown-item:last-child[b-p59bp5y7ue] {
        border-bottom: none;
    }

    .sap_dropdown-item:hover[b-p59bp5y7ue] {
        background-color: #f5f5f5;
    }

    .sap_dropdown-item:active[b-p59bp5y7ue] {
        background-color: #e8e8e8;
    }

.sap_btn-icon img[b-p59bp5y7ue] {
    vertical-align: middle;
    margin-left: 8px;
}
/* Collapsible Section Styles */
.sap_collapsible-header[b-p59bp5y7ue] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

    .sap_collapsible-header:hover[b-p59bp5y7ue] {
        opacity: 0.8;
    }

.sap_collapse-icon[b-p59bp5y7ue] {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 12px;
    color: #6c757d;
}

    .sap_collapse-icon.sap_collapsed[b-p59bp5y7ue] {
        transform: rotate(90deg);
    }

.sap_collapsible-content[b-p59bp5y7ue] {
    padding: 16px 0;
}

.sap_remarks-textarea[b-p59bp5y7ue] {
    min-height: 100px;
    width: 100%;
    resize: vertical;
}

/* Table Container with Horizontal Scroll */
.sap_inner-card[b-p59bp5y7ue] {
    overflow-x: auto;
    overflow-y: visible;
}

/* Table Wrapper for Scroll Control */
.sap_table-wrapper[b-p59bp5y7ue] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

/* Table Fixed Width for Columns */
.sap-table[b-p59bp5y7ue] {
    min-width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

    .sap-table th[b-p59bp5y7ue],
    .sap-table td[b-p59bp5y7ue] {
        min-width: 150px; /* Chiều rộng tối thiểu mỗi cột */
        max-width: 200px; /* Chiều rộng tối đa mỗi cột */
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
    }

    /* Fixed width cho cột checkbox và # */


    /* Sticky header */
    .sap-table thead th[b-p59bp5y7ue] {
        top: 0;
        background: #f8f9fa;
        
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
    }


/* Scrollbar Styling */
.sap_table-wrapper[b-p59bp5y7ue]::-webkit-scrollbar {
    height: 10px;
}

.sap_table-wrapper[b-p59bp5y7ue]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.sap_table-wrapper[b-p59bp5y7ue]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    .sap_table-wrapper[b-p59bp5y7ue]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
.sap_form-grid-two-column[b-p59bp5y7ue] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px 24px;
    align-items: start;
    max-width: 800px;
    padding-left: 12px;
}

    .sap_form-grid-two-column .sap_label[b-p59bp5y7ue] {
        display: contents;
    }

        .sap_form-grid-two-column .sap_label > span[b-p59bp5y7ue] {
            color: #495057;
            font-weight: 400;
            text-align: left;
            padding-top: 8px;
        }

        .sap_form-grid-two-column .sap_label > input[b-p59bp5y7ue],
        .sap_form-grid-two-column .sap_label > textarea[b-p59bp5y7ue],
        .sap_form-grid-two-column .sap_label > SAPLookupInput[b-p59bp5y7ue],
        .sap_form-grid-two-column .sap_label > SAPDropDownList[b-p59bp5y7ue] {
            width: 100%;
        }

        .sap_form-grid-two-column .sap_label > textarea[b-p59bp5y7ue] {
            min-height: 80px;
            resize: vertical;
        }

/* Responsive - trên mobile collapse hết */
@media (max-width: 768px) {
    .sap-table th[b-p59bp5y7ue],
    .sap-table td[b-p59bp5y7ue] {
        min-width: 120px;
        max-width: 150px;
    }

    .sap_form-grid--half[b-p59bp5y7ue] {
        grid-template-columns: 1fr;
    }

    .sap_form-grid-two-column[b-p59bp5y7ue] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .sap_form-grid-two-column .sap_label[b-p59bp5y7ue] {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .sap_table-actions[b-p59bp5y7ue] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .sap_table-actions-right[b-p59bp5y7ue] {
        justify-content: flex-end;
    }

    .sap_summary-grid[b-p59bp5y7ue] {
        max-width: 100%;
    }

    .sap_udf-grid-two-column[b-p59bp5y7ue] {
        grid-template-columns: 1fr;
    }
}








.sap_action-header[b-p59bp5y7ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-p59bp5y7ue] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-p59bp5y7ue] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-p59bp5y7ue] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_nav-btn:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_nav-btn:disabled[b-p59bp5y7ue] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_action-right[b-p59bp5y7ue] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn[b-p59bp5y7ue] {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sap_btn-primary[b-p59bp5y7ue] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-p59bp5y7ue] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-p59bp5y7ue] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-p59bp5y7ue] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_btn[b-p59bp5y7ue] {
    background: white;
    color: #0d6efd;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn:hover:not(:disabled)[b-p59bp5y7ue] {
        background: #f5f5f5;
        border-color: #0b5ed7;
    }

.sap_btn-dropdown[b-p59bp5y7ue] {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .sap_btn-dropdown:hover[b-p59bp5y7ue] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

.sap_summary-logo[b-p59bp5y7ue] {
    flex-shrink: 0;
    margin-right: 48px;
}

/* Summary Bar */
.sap_summary-bar[b-p59bp5y7ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 32px;
    padding: 12px 16px;
    background: white;
}

.sap_summary-item[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 50px;
    flex-shrink: 0; /* thêm dòng này */
    width: auto !important;
}

    .sap_summary-item .sap_label_summary[b-p59bp5y7ue] {
        font-size: 0.8125rem;
        color: #6c757d;
        font-weight: 400;
        white-space: nowrap;
    }

    .sap_summary-item .sap_value[b-p59bp5y7ue],
    .sap_summary-item .sapMText[b-p59bp5y7ue] {
        font-size: 0.875rem;
        color: #212529;
        font-weight: 500;
        word-break: break-word;
        white-space: nowrap;
    }

.sap_customer-value[b-p59bp5y7ue] {
    font-weight: 700;
    color: #212529;
}

.sap_summary-image[b-p59bp5y7ue] {
    width: 96px;
    height: auto;
    object-fit: contain;
}

.sap_summary-placeholder[b-p59bp5y7ue] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 32px;
}

.sap_summary-description[b-p59bp5y7ue] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-left: 24px; /* THÊM dòng này - khoảng cách với lề trái */
    /* hoặc dùng margin-left: 48px; */
}

.sap_description-label[b-p59bp5y7ue] {
    font-weight: 400;
    color: #6c757d;
    flex-shrink: 0;
}

.sap_description-value[b-p59bp5y7ue] {
    color: #212529;
    font-weight: 400;
}



.sap_customer-name[b-p59bp5y7ue] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}
/* Image Upload Section */
    .sap_image-upload[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sap_image-placeholder[b-p59bp5y7ue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    text-align: center;
}

    .sap_image-placeholder p[b-p59bp5y7ue] {
        margin: 8px 0 0 0;
        color: #212529;
    }

    .sap_image-placeholder .sap_text-muted[b-p59bp5y7ue] {
        font-size: 0.875rem;
        color: #6c757d;
    }
.sap_input_v2[type="date"][b-p59bp5y7ue] {
    max-width: 150px; /* hoặc 180px tùy theo thiết kế */
    width: auto;
}
.dropdown .sap_dropdown[b-p59bp5y7ue] {
    min-width: 500px;
}
.sap-table tbody td[b-p59bp5y7ue] {
    border-bottom: 1px solid #ededed;
    padding: 6px 12px;
    vertical-align: middle;
    height: 36px;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
/* /Components/Pages/SAPUI/SAPChartOfAccounts.razor.rz.scp.css */
/* Container */
html[b-oolw4fvxor], body[b-oolw4fvxor] {
    height: 100%;
    margin: 0;
}
.sap-coa-container[b-oolw4fvxor] {
    display: flex;
    height: calc(100vh - 50px);
    gap: 1px;
    background: #e0e0e0;
}

/* Left Panel */
.sap-coa-left[b-oolw4fvxor] {
    background: #f5f6f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 50%;
}
.sap-coa-left.sap-coa-left--full[b-oolw4fvxor] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.sap-coa-header[b-oolw4fvxor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff !important;
}

.sap-coa-title[b-oolw4fvxor] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.sap-icon-btn[b-oolw4fvxor] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sap-icon-btn:hover[b-oolw4fvxor] {
        background: #f5f5f5;
        border-radius: 4px;
    }

/* Filters */
.sap-coa-filters[b-oolw4fvxor] {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.sap-filter-row[b-oolw4fvxor] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

    .sap-filter-row label[b-oolw4fvxor] {
        width: 120px;
        font-size: 0.875rem;
        color: #666;
        margin: 0;
    }

.sap-input-group[b-oolw4fvxor] {
    flex: 1;
    display: flex;
    gap: 4px;
}

.sap-input[b-oolw4fvxor] {
    width: 100%;
    height: 1.625rem;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #d4dadf;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 1px 0 0 #556b81;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

select.sap-input[b-oolw4fvxor] {
    height: 1.625rem;
    padding: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
}

    .sap-input:hover[b-oolw4fvxor],
    select.sap-input:hover[b-oolw4fvxor] {
        border-color: #91C0FF;
        box-shadow: 0 1px 0 0 #2882ec;
    }

    .sap-input:focus[b-oolw4fvxor],
    select.sap-input:focus[b-oolw4fvxor] {
        border-color: #0068ff;
        box-shadow: 0 0 0 1px rgba(0, 104, 255, 0.9);
    }

    .sap-input:disabled[b-oolw4fvxor],
    select.sap-input:disabled[b-oolw4fvxor] {
        background-color: #f5f7fb;
        border-color: #dde2eb;
        color: #999;
        box-shadow: none;
    }

.sap-icon-btn-sm[b-oolw4fvxor] {
    background: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sap-icon-btn-sm:hover[b-oolw4fvxor] {
        background: #f5f5f5;
    }

/* Actions */
.sap-coa-actions[b-oolw4fvxor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.sap-actions-right[b-oolw4fvxor] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.sap_btn-white[b-oolw4fvxor] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

.sap_btn-primary[b-oolw4fvxor] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-oolw4fvxor] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white:hover:not(:disabled)[b-oolw4fvxor] {
    background: #f5f5f5;
}

.sap_btn-white:disabled[b-oolw4fvxor] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_btn[b-oolw4fvxor] {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sap_btn-primary[b-oolw4fvxor] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-oolw4fvxor] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-oolw4fvxor] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-oolw4fvxor] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-oolw4fvxor] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-oolw4fvxor] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-oolw4fvxor] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_btn[b-oolw4fvxor] {
    background: white;
    color: #0d6efd;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn:hover:not(:disabled)[b-oolw4fvxor] {
        background: #f5f5f5;
        border-color: #0b5ed7;
    }

.sap_btn-dropdown[b-oolw4fvxor] {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .sap_btn-dropdown:hover[b-oolw4fvxor] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

/* Tree Table */
.sap-coa-tree[b-oolw4fvxor] {
    flex: 1;
    overflow-y: auto;
}

.sap-tree-table[b-oolw4fvxor] {
    width: 100%;
    border-collapse: collapse;
}

    .sap-tree-table thead[b-oolw4fvxor] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 1;
    }

    .sap-tree-table th[b-oolw4fvxor] {
        text-align: left;
        padding: 8px 12px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #333;
        border-bottom: 1px solid #e0e0e0;
        box-shadow:   inset -1px 0 0 #e5e5e5,inset 0 -1px 0 #e5e5e5;
    }

    .sap-tree-table td[b-oolw4fvxor] {
        padding: 6px 12px;
        font-size: 0.875rem;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
    }

.sap-tree-row:hover[b-oolw4fvxor] {
    background: #f9f9f9;
}

.sap-tree-root[b-oolw4fvxor] {
    font-weight: 600;
}

.sap-tree-toggle[b-oolw4fvxor] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-right: 4px;
    font-size: 0.75rem;
    color: #666;
}

.sap-number[b-oolw4fvxor] {
    text-align: right;
}

/* Right Panel */
.sap-coa-right[b-oolw4fvxor] {
    width: 100%;
    /*min-width: 30%;*/
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sap-detail-header[b-oolw4fvxor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.sap-detail-title[b-oolw4fvxor] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}




.sap-summary-item[b-oolw4fvxor] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sap-summary-label[b-oolw4fvxor] {
    font-size: 0.75rem;
    color: #666;
}

.sap-summary-value[b-oolw4fvxor] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
}

/* Tabs */
.sap-detail-tabs[b-oolw4fvxor] {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.sap-tab[b-oolw4fvxor] {
    background: none;
    border: none;
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .sap-tab:hover[b-oolw4fvxor] {
        color: #333;
    }

    .sap-tab.active[b-oolw4fvxor] {
        color: #0066cc;
        border-bottom-color: #0066cc;
    }

/* Content */
.sap-detail-content[b-oolw4fvxor] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #ECECEC;
    padding-bottom: 70vh; 
}


.sap-form-section[b-oolw4fvxor] {
    margin-bottom: 24px;
}

.sap-section-title[b-oolw4fvxor] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.sap-form-grid[b-oolw4fvxor] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}



.sap-textarea[b-oolw4fvxor] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

    .sap-textarea:focus[b-oolw4fvxor] {
        outline: none;
        border-color: #0066cc;
    }

    .sap-textarea:read-only[b-oolw4fvxor] {
        background: #f5f5f5;
    }

.sap-udf-grid[b-oolw4fvxor] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Radio Group */
.sap-radio-group[b-oolw4fvxor] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.sap-radio-label[b-oolw4fvxor] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #333;
}

    .sap-radio-label input[type="radio"][b-oolw4fvxor] {
        cursor: pointer;
    }

        .sap-radio-label input[type="radio"]:disabled[b-oolw4fvxor] {
            cursor: not-allowed;
        }


/* Checkbox Grid */
.sap-checkbox-grid[b-oolw4fvxor] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
}

.sap-checkbox-label[b-oolw4fvxor] {
    display: grid;
    grid-template-columns: 300px auto 1fr 1fr;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #333;
}

    .sap-checkbox-label input[type="checkbox"][b-oolw4fvxor] {
        cursor: pointer;
        justify-self: center;
    }

        .sap-checkbox-label input[type="checkbox"]:disabled[b-oolw4fvxor] {
            cursor: not-allowed;
        }

/* Section Title in Forms */
.sap_section-title[b-oolw4fvxor] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

/* Actions */
.sap-detail-actions[b-oolw4fvxor] {
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    z-index: 1000;
    background-color: #ffffff;
    border: 1px solid #dde2eb;
    border-radius: 12px; /* floating card look */
    box-shadow: 08px24px rgba(0,0,0,0.12),02px8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
}



/* No Selection */
.sap-no-selection[b-oolw4fvxor] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 1rem;
}

/* Scrollbar Styling */
.sap-coa-tree[b-oolw4fvxor]::-webkit-scrollbar,
.sap-detail-content[b-oolw4fvxor]::-webkit-scrollbar {
    width: 8px;
}

.sap-coa-tree[b-oolw4fvxor]::-webkit-scrollbar-track,
.sap-detail-content[b-oolw4fvxor]::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.sap-coa-tree[b-oolw4fvxor]::-webkit-scrollbar-thumb,
.sap-detail-content[b-oolw4fvxor]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

    .sap-coa-tree[b-oolw4fvxor]::-webkit-scrollbar-thumb:hover,
    .sap-detail-content[b-oolw4fvxor]::-webkit-scrollbar-thumb:hover {
        background: #999;
    }
.sap_label[b-oolw4fvxor] {
    grid-template-columns: 140px 1fr;
    gap: 2px;
}

/* Resizer handle */
.sap-resizer[b-oolw4fvxor] {
    width: 6px;
    background: #e0e0e0;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sap-resizer:hover[b-oolw4fvxor],
    .sap-resizer.resizing[b-oolw4fvxor] {
        background: #b0b8c9;
    }

    /* Thanh kéo trực quan ở giữa */
    .sap-resizer[b-oolw4fvxor]::after {
        content: "";
        display: block;
        width: 4px;
        height: 48px;
        border-radius: 4px;
        background: #9aa5b4;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
/* Ensure right panel acts as positioning context */


/* If you need different height, tweak padding-bottom and the bar padding above */
/* /Components/Pages/SAPUI/SAPItemMasterData.razor.rz.scp.css */
.sap_action-header[b-fksb398b06] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-fksb398b06] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-fksb398b06] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-fksb398b06] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_nav-btn:hover:not(:disabled)[b-fksb398b06] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_nav-btn:disabled[b-fksb398b06] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_action-right[b-fksb398b06] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn[b-fksb398b06] {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sap_btn-primary[b-fksb398b06] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-fksb398b06] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-fksb398b06] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-fksb398b06] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-fksb398b06] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-fksb398b06] {
        background: #f5f5f5;        
    }

    .sap_btn-white:disabled[b-fksb398b06] {
        opacity: 0.5;
        cursor: not-allowed;
    }
.sap_btn[b-fksb398b06] {
    background: white;
    color: #0d6efd;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn:hover:not(:disabled)[b-fksb398b06] {
        background: #f5f5f5;
        border-color: #0b5ed7;
    }
.sap_btn-dropdown[b-fksb398b06] {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .sap_btn-dropdown:hover[b-fksb398b06] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }
.sap_summary-logo[b-fksb398b06] {
    flex-shrink: 0;
    margin-right: 48px;
}
.sap_summary-bar[b-fksb398b06] {
    gap: 5px !important; 
}
.sap_summary-image[b-fksb398b06] {
    width: 96px;
    height: auto; 
    object-fit: contain;
}

.sap_summary-placeholder[b-fksb398b06] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 32px;
}
.sap_summary-description[b-fksb398b06] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-left: 24px; /* THÊM dòng này - khoảng cách với lề trái */
    /* hoặc dùng margin-left: 48px; */
}

.sap_description-label[b-fksb398b06] {
    font-weight: 400;
    color: #6c757d;
    flex-shrink: 0;
}

.sap_description-value[b-fksb398b06] {
    color: #212529;
    font-weight: 400;
}

.sap_dropdown-control[b-fksb398b06]::before {
    content: "";
    position: absolute;
    right: 9px; /* chỉnh cho vừa */
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 4px 4px 0 4px; /* tam giác nhỏ hướng xuống */
    border-color: #0068ff transparent transparent transparent;
    display: none !important;
}
.sap-table thead th[b-fksb398b06] {
    position: static;
}
.sap_table-cell--number[b-fksb398b06] {
    text-align: right;
}
/* /Components/Pages/SAPUI/SAPSalesOrder.razor.rz.scp.css */
/* Total Summary Styles */
.sap_total-summary[b-35fr44se1x] {
    margin-top: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.sap_summary-grid[b-35fr44se1x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin-left: auto;
}

.sap_summary-row[b-35fr44se1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.sap_summary-row.sap_summary-total[b-35fr44se1x] {
    border-top: 2px solid #dee2e6;
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 1.1rem;
}

.sap_summary-label[b-35fr44se1x] {
    color: #6c757d;
    font-weight: 500;
}

.sap_summary-value[b-35fr44se1x] {
    font-weight: 600;
    color: #212529;
}

/* Table Actions */
.sap_table-actions[b-35fr44se1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 12px;
}

.sap_table-actions-right[b-35fr44se1x] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_btn-action[b-35fr44se1x] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    transition: all 0.2s;
}

    .sap_btn-action:hover:not(:disabled)[b-35fr44se1x] {
        background: #e9ecef;
    }

    .sap_btn-action:disabled[b-35fr44se1x] {
        opacity: 0.5;
        cursor: not-allowed;
        color: #6c757d;
    }

.sap_btn-icon[b-35fr44se1x] {
    width: 100px;
    height: 32px;
    padding: 24px;
    background: none ;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_btn-icon:hover:not(:disabled)[b-35fr44se1x] {
  background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_btn-icon:disabled[b-35fr44se1x] {
    opacity: 0.5;
    cursor: not-allowed;
    }

.sap_btn-icon-right[b-35fr44se1x] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_btn-icon-right:hover:not(:disabled)[b-35fr44se1x] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_btn-icon-right:disabled[b-35fr44se1x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Table No Data */
.sap_table-no-data[b-35fr44se1x] {
    text-align: center;
 padding: 32px;
    color: #6c757d;
    font-style: italic;
}

/* Attachment Area */
.sap_attachment-area[b-35fr44se1x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.sap_attachment-icon[b-35fr44se1x] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.sap_attachment-text[b-35fr44se1x] {
    color: #6c757d;
    margin-bottom: 16px;
}

/* Input Sizes */
.sap_input-sm[b-35fr44se1x] {
 max-width: 120px;
}

/* Define New Link */
.sap_define-new-link[b-35fr44se1x] {
    margin-top: 8px;
}

.sap_link[b-35fr44se1x] {
    color: #0d6efd;
    text-decoration: none;
    font-size: 14px;
}

    .sap_link:hover[b-35fr44se1x] {
     text-decoration: underline;
    }

/* Link Section */
.sap_link-section[b-35fr44se1x] {
 padding: 8px 0;
}

/* UDF Grid - Single Column Layout (như trong ảnh) */
.sap_udf-grid-two-column[b-35fr44se1x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    max-width: 800px; /* Giới hạn độ rộng */
}

.sap_udf-grid-two-column .sap_label[b-35fr44se1x] {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 16px;
}

.sap_udf-grid-two-column .sap_label span[b-35fr44se1x] {
    color: #495057;
    font-weight: 400;
    text-align: left;
}

.sap_udf-grid-two-column .sap_label .sap_input[b-35fr44se1x] {
    width: 100%;
    max-width: 540px;
}

/* Checkbox Row */
.sap_checkbox-row[b-35fr44se1x] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

    .sap_checkbox-row span[b-35fr44se1x] {
        flex: 1;
    }

    .sap_checkbox-row input[type="checkbox"][b-35fr44se1x] {
   width: 18px;
        height: 18px;
    cursor: pointer;
    }

/* Spacing utilities */
.sap_mt-8[b-35fr44se1x] {
    margin-top: 8px;
}

.sap_mt-12[b-35fr44se1x] {
 margin-top: 12px;
}

.sap_mt-16[b-35fr44se1x] {
    margin-top: 16px;
}

.sap_mt-24[b-35fr44se1x] {
    margin-top: 24px;
}

.sap_mb-80[b-35fr44se1x] {
    margin-bottom: 80px;
}
.sap_dropdown-container[b-35fr44se1x] {
    position: relative;
    display: inline-block;
}

.sap_dropdown-menu[b-35fr44se1x] {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 4px;
}

    .sap_dropdown-menu.show[b-35fr44se1x] {
        display: block;
    }

.sap_dropdown-item[b-35fr44se1x] {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

    .sap_dropdown-item:last-child[b-35fr44se1x] {
        border-bottom: none;
    }

    .sap_dropdown-item:hover[b-35fr44se1x] {
        background-color: #f5f5f5;
    }

    .sap_dropdown-item:active[b-35fr44se1x] {
        background-color: #e8e8e8;
    }

.sap_btn-icon img[b-35fr44se1x] {
    vertical-align: middle;
    margin-left: 8px;
}
/* Collapsible Section Styles */
.sap_collapsible-header[b-35fr44se1x] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

    .sap_collapsible-header:hover[b-35fr44se1x] {
        opacity: 0.8;
    }

.sap_collapse-icon[b-35fr44se1x] {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 12px;
    color: #6c757d;
}

    .sap_collapse-icon.sap_collapsed[b-35fr44se1x] {
        transform: rotate(90deg);
    }

.sap_collapsible-content[b-35fr44se1x] {
    padding: 16px 0;
}

.sap_remarks-textarea[b-35fr44se1x] {
    min-height: 100px;
    width: 100%;
    resize: vertical;
}

/* Table Container with Horizontal Scroll */
.sap_inner-card[b-35fr44se1x] {
    overflow-x: auto;
    overflow-y: visible;
}

/* Table Wrapper for Scroll Control */
.sap_table-wrapper[b-35fr44se1x] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

/* Table Fixed Width for Columns */
.sap-table[b-35fr44se1x] {
    min-width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

    .sap-table th[b-35fr44se1x],
    .sap-table td[b-35fr44se1x] {
        min-width: 150px; /* Chiều rộng tối thiểu mỗi cột */
        max-width: 200px; /* Chiều rộng tối đa mỗi cột */
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
    }

        /* Fixed width cho cột checkbox và # */
        

    /* Sticky header */
    .sap-table thead th[b-35fr44se1x] {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 11;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
    }

/* Scrollbar Styling */
.sap_table-wrapper[b-35fr44se1x]::-webkit-scrollbar {
    height: 10px;
}

.sap_table-wrapper[b-35fr44se1x]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.sap_table-wrapper[b-35fr44se1x]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    .sap_table-wrapper[b-35fr44se1x]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


/* Responsive - trên mobile collapse hết */
@media (max-width: 768px) {
    .sap-table th[b-35fr44se1x],
    .sap-table td[b-35fr44se1x] {
        min-width: 120px;
        max-width: 150px;
    }
    .sap_form-grid--half[b-35fr44se1x] {
        grid-template-columns: 1fr;
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .sap_table-actions[b-35fr44se1x] {
        flex-direction: column;
   gap: 8px;
        align-items: stretch;
    }

    .sap_table-actions-right[b-35fr44se1x] {
    justify-content: flex-end;
    }

    .sap_summary-grid[b-35fr44se1x] {
        max-width: 100%;
    }

    .sap_udf-grid-two-column[b-35fr44se1x] {
        grid-template-columns: 1fr;
    }
}








.sap_action-header[b-35fr44se1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-35fr44se1x] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-35fr44se1x] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-35fr44se1x] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_nav-btn:hover:not(:disabled)[b-35fr44se1x] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_nav-btn:disabled[b-35fr44se1x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_action-right[b-35fr44se1x] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn[b-35fr44se1x] {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sap_btn-primary[b-35fr44se1x] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-35fr44se1x] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-35fr44se1x] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-35fr44se1x] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-35fr44se1x] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-35fr44se1x] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-35fr44se1x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_btn[b-35fr44se1x] {
    background: white;
    color: #0d6efd;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn:hover:not(:disabled)[b-35fr44se1x] {
        background: #f5f5f5;
        border-color: #0b5ed7;
    }

.sap_btn-dropdown[b-35fr44se1x] {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .sap_btn-dropdown:hover[b-35fr44se1x] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

.sap_summary-logo[b-35fr44se1x] {
    flex-shrink: 0;
    margin-right: 48px;
}

.sap_summary-bar[b-35fr44se1x] {
    gap: 5px !important;
}

.sap_summary-image[b-35fr44se1x] {
    width: 96px;
    height: auto;
    object-fit: contain;
}

.sap_summary-placeholder[b-35fr44se1x] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 32px;
}

.sap_summary-description[b-35fr44se1x] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-left: 24px; /* THÊM dòng này - khoảng cách với lề trái */
    /* hoặc dùng margin-left: 48px; */
}

.sap_description-label[b-35fr44se1x] {
    font-weight: 400;
    color: #6c757d;
    flex-shrink: 0;
}

.sap_description-value[b-35fr44se1x] {
    color: #212529;
    font-weight: 400;
}



.sap_customer-name[b-35fr44se1x] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputACT.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-6tqn23erxy] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-6tqn23erxy] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-6tqn23erxy] {
    min-width: 0;
}

.sap_section-title[b-6tqn23erxy] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-6tqn23erxy] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-6tqn23erxy] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-6tqn23erxy] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-6tqn23erxy] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-6tqn23erxy]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-6tqn23erxy]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-6tqn23erxy]{background:#e9ecef}
.sap_btn-action:disabled[b-6tqn23erxy]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-6tqn23erxy]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-6tqn23erxy]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-6tqn23erxy]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-6tqn23erxy]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-6tqn23erxy]{vertical-align:middle}
.sap_dropdown-container[b-6tqn23erxy]{position:relative;display:inline-block}
.sap_dropdown-menu[b-6tqn23erxy]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-6tqn23erxy]{display:block}
.sap_dropdown-item[b-6tqn23erxy]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-6tqn23erxy]{border-bottom:none}
.sap_dropdown-item:hover[b-6tqn23erxy]{background:#f5f5f5}

.sap_form-grid[b-6tqn23erxy] {
    display: grid;
    gap: 8px;
    min-width: 0; /* thêm dòng này */
}

    /* Thêm mới: đảm bảo tất cả children trong grid không tràn */
    .sap_form-grid > *[b-6tqn23erxy] {
        min-width: 0;
    }
.sap_date-flex-wrapper[b-6tqn23erxy] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

.sap_date-flex-wrapper > *[b-6tqn23erxy] {
    min-width: 0;
    flex-shrink: 1;
}
.sap_date-flex-wrapper .sap_label[b-6tqn23erxy] {
    grid-template-columns: auto 1fr;
    min-width: 0;
}

.sap_date-flex-wrapper .sap_input_group[b-6tqn23erxy] {
    min-width: 120px;
}

.sap_date-flex-wrapper input[type="date"][b-6tqn23erxy] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputDatePeriod.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-9gp47oauug] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-9gp47oauug] {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-9gp47oauug] {
    min-width: 0;
}

.sap_section-title[b-9gp47oauug] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-9gp47oauug] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-9gp47oauug] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-9gp47oauug] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-9gp47oauug] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-9gp47oauug]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-9gp47oauug]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-9gp47oauug]{background:#e9ecef}
.sap_btn-action:disabled[b-9gp47oauug]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-9gp47oauug]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-9gp47oauug]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-9gp47oauug]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-9gp47oauug]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-9gp47oauug]{vertical-align:middle}
.sap_dropdown-container[b-9gp47oauug]{position:relative;display:inline-block}
.sap_dropdown-menu[b-9gp47oauug]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-9gp47oauug]{display:block}
.sap_dropdown-item[b-9gp47oauug]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-9gp47oauug]{border-bottom:none}
.sap_dropdown-item:hover[b-9gp47oauug]{background:#f5f5f5}

.sap_form-row--range[b-9gp47oauug] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
}

    .sap_form-row--range > :first-child[b-9gp47oauug] {
        flex: 1;
    }

    .sap_form-row--range > :last-child[b-9gp47oauug] {
        margin-left: auto;
        flex-shrink: 0;
        min-width: 200px; /* hoặc chỉnh theo ý muốn */
    }
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputPeriod.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-fsxwkyyrz5] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-fsxwkyyrz5] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-fsxwkyyrz5] {
    min-width: 0;
}

.sap_section-title[b-fsxwkyyrz5] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-fsxwkyyrz5] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-fsxwkyyrz5] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-fsxwkyyrz5] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-fsxwkyyrz5] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-fsxwkyyrz5]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-fsxwkyyrz5]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-fsxwkyyrz5]{background:#e9ecef}
.sap_btn-action:disabled[b-fsxwkyyrz5]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-fsxwkyyrz5]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-fsxwkyyrz5]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-fsxwkyyrz5]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-fsxwkyyrz5]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-fsxwkyyrz5]{vertical-align:middle}
.sap_dropdown-container[b-fsxwkyyrz5]{position:relative;display:inline-block}
.sap_dropdown-menu[b-fsxwkyyrz5]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-fsxwkyyrz5]{display:block}
.sap_dropdown-item[b-fsxwkyyrz5]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-fsxwkyyrz5]{border-bottom:none}
.sap_dropdown-item:hover[b-fsxwkyyrz5]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputPurchaseOrderSAP.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-tcf6srix6d] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-tcf6srix6d] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-tcf6srix6d] {
    min-width: 0;
}

.sap_section-title[b-tcf6srix6d] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-tcf6srix6d] {
    display: grid;
    gap: 8px;
}

/* One row can hold 1..N fields side by side - own copy of SubHeaderInputSAP.razor.css's rules
   (Blazor CSS isolation scopes to the component that renders the markup, not the C# inheritance
   chain, so SubHeaderInputSAP.razor.css's copy never applies to this component's own ObjectData
   RenderFragment even though it inherits from SubHeaderInputSAP). See that file for the full
   rationale. */
.sap_form-row[b-tcf6srix6d] {
    display: flex;
    gap: 24px;
    align-items: start;
}

.sap_form-row-item[b-tcf6srix6d] {
    flex: 1 1 0;
    min-width: 0;
}

.sap_form-row-item--fixed[b-tcf6srix6d] {
    flex: 0 0 auto;
}

/* Live Admin-mode width resizer, sits between two fields sharing a row (see headerRowResize.js). */
.sap-row-resizer[b-tcf6srix6d] {
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
}

    .sap-row-resizer[b-tcf6srix6d]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 2px;
        background: transparent;
        transition: background-color 0.15s ease;
    }

    .sap-row-resizer:hover[b-tcf6srix6d]::after,
    .sap-row-resizer.sap-row-resizing[b-tcf6srix6d]::after {
        background-color: #0070f2;
    }

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-tcf6srix6d] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-tcf6srix6d] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-tcf6srix6d] {
        grid-template-columns: 1fr;
    }
}

/* Collapsed header summary - bold field labels (Currency/Item-Service Type), matching
   SubHeaderInputSAP's collapsed summary. ::deep reaches into SubInnerCardPreferencesSAP's
   ".sap_label" markup, scoped so it only affects the collapsed summary row. */
.sap_card-collapse-summary[b-tcf6srix6d]  .sap_label > span:first-child {
    font-weight: bold;
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-tcf6srix6d]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-tcf6srix6d]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-tcf6srix6d]{background:#e9ecef}
.sap_btn-action:disabled[b-tcf6srix6d]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-tcf6srix6d]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-tcf6srix6d]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-tcf6srix6d]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-tcf6srix6d]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-tcf6srix6d]{vertical-align:middle}
.sap_dropdown-container[b-tcf6srix6d]{position:relative;display:inline-block}
.sap_dropdown-menu[b-tcf6srix6d]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-tcf6srix6d]{display:block}
.sap_dropdown-item[b-tcf6srix6d]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-tcf6srix6d]{border-bottom:none}
.sap_dropdown-item:hover[b-tcf6srix6d]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputSAP.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-2kgpyl5pk0] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-2kgpyl5pk0] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;

}

.sap_column[b-2kgpyl5pk0] {
    min-width: 0;
}

.sap_section-header[b-2kgpyl5pk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sap_section-title[b-2kgpyl5pk0] {
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 600;
    flex: 1;
}

.sap_rollback-btn[b-2kgpyl5pk0] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.15s ease;
    font-size: 16px;
    flex-shrink: 0;
}

.sap_rollback-btn:hover[b-2kgpyl5pk0] {
    background-color: #e9ecef;
    color: #0d6efd;
}

.sap_rollback-btn:active[b-2kgpyl5pk0] {
    transform: scale(0.95);
}

.sap_rollback-icon[b-2kgpyl5pk0] {
    display: inline-block;
}

.sap_form-grid[b-2kgpyl5pk0] {
    display: grid;
    gap: 8px;
}

/* .sap_form-row/.sap_form-row-item/.sap-row-resizer moved to the global sapui_custom.css - Blazor's
   per-component CSS isolation meant these scoped rules never applied to SubSectionLogisticsSAP/
   SubSectionAccountingSAP, which now render the same classes for their own Row groups too. */

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-2kgpyl5pk0] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-2kgpyl5pk0] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
/* Wrap xuống 1 cột khi màn hình nhỏ hơn 900px */
@media (max-width: 900px) {
    .sap_card-columns[b-2kgpyl5pk0] {
        grid-template-columns: 1fr;
        gap: 24px; /* giảm gap khi stack dọc */
    }
}

/* Collapsed header summary - bold all field labels (Customer/Series/No./Delivery Date/
   Currency/Item-Service Type). ::deep reaches into the child components (SeriesHeader,
   HeaderDipslaySAP, HeaderDipslayClassSAP, SubInnerCardPreferencesSAP) that actually render
   the ".sap_label" markup, scoped so it only affects the collapsed summary row and not the
   same shared components used elsewhere (e.g. the expanded FirstColumn/SecondColumn grid). */
.sap_card-collapse-summary[b-2kgpyl5pk0]  .sap_label > span:first-child {
    font-weight: bold;
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-2kgpyl5pk0]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-2kgpyl5pk0]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-2kgpyl5pk0]{background:#e9ecef}
.sap_btn-action:disabled[b-2kgpyl5pk0]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-2kgpyl5pk0]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-2kgpyl5pk0]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-2kgpyl5pk0]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-2kgpyl5pk0]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-2kgpyl5pk0]{vertical-align:middle}
.sap_dropdown-container[b-2kgpyl5pk0]{position:relative;display:inline-block}
.sap_dropdown-menu[b-2kgpyl5pk0]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-2kgpyl5pk0]{display:block}
.sap_dropdown-item[b-2kgpyl5pk0]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-2kgpyl5pk0]{border-bottom:none}
.sap_dropdown-item:hover[b-2kgpyl5pk0]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputSQ.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-po2jwso1h3] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-po2jwso1h3] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-po2jwso1h3] {
    min-width: 0;
}

.sap_section-title[b-po2jwso1h3] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-po2jwso1h3] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-po2jwso1h3] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-po2jwso1h3] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-po2jwso1h3] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-po2jwso1h3]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-po2jwso1h3]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-po2jwso1h3]{background:#e9ecef}
.sap_btn-action:disabled[b-po2jwso1h3]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-po2jwso1h3]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-po2jwso1h3]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-po2jwso1h3]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-po2jwso1h3]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-po2jwso1h3]{vertical-align:middle}
.sap_dropdown-container[b-po2jwso1h3]{position:relative;display:inline-block}
.sap_dropdown-menu[b-po2jwso1h3]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-po2jwso1h3]{display:block}
.sap_dropdown-item[b-po2jwso1h3]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-po2jwso1h3]{border-bottom:none}
.sap_dropdown-item:hover[b-po2jwso1h3]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputStockSAP.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-mcoohzbus1] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-mcoohzbus1] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;

}

.sap_column[b-mcoohzbus1] {
    min-width: 0;
}

.sap_section-header[b-mcoohzbus1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sap_section-title[b-mcoohzbus1] {
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 600;
    flex: 1;
}

.sap_rollback-btn[b-mcoohzbus1] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.15s ease;
    font-size: 16px;
    flex-shrink: 0;
}

.sap_rollback-btn:hover[b-mcoohzbus1] {
    background-color: #e9ecef;
    color: #0d6efd;
}

.sap_rollback-btn:active[b-mcoohzbus1] {
    transform: scale(0.95);
}

.sap_rollback-icon[b-mcoohzbus1] {
    display: inline-block;
}

.sap_form-grid[b-mcoohzbus1] {
    display: grid;
    gap: 8px;
}

/* One row can hold 1..N fields side by side. The first field in a row has no width override
   (flex:1, keeps .sap_label's default 1fr input column - grows to fill whatever's left); every
   subsequent field gets flex:0 (sized to its own content) and sets --sap-input-width, which
   .sap_label (sapui_custom.css / HeaderDipslaySAP.razor.css / HeaderDipslayClassSAP.razor.css)
   reads to widen its input column beyond the default 1fr. */
.sap_form-row[b-mcoohzbus1] {
    display: flex;
    gap: 24px;
    align-items: start;
}

.sap_form-row-item[b-mcoohzbus1] {
    flex: 1 1 0;
    min-width: 0;
}

.sap_form-row-item--fixed[b-mcoohzbus1] {
    flex: 0 0 auto;
}

/* Live Admin-mode width resizer, sits between two fields sharing a row (see headerRowResize.js -
   it reads/writes this handle's nextElementSibling, i.e. the field immediately after it). */
.sap-row-resizer[b-mcoohzbus1] {
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
}

    .sap-row-resizer[b-mcoohzbus1]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 2px;
        background: transparent;
        transition: background-color 0.15s ease;
    }

    .sap-row-resizer:hover[b-mcoohzbus1]::after,
    .sap-row-resizer.sap-row-resizing[b-mcoohzbus1]::after {
        background-color: #0070f2;
    }

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-mcoohzbus1] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-mcoohzbus1] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
/* Wrap xuống 1 cột khi màn hình nhỏ hơn 900px */
@media (max-width: 900px) {
    .sap_card-columns[b-mcoohzbus1] {
        grid-template-columns: 1fr;
        gap: 24px; /* giảm gap khi stack dọc */
    }
}

/* Collapsed header summary - bold all field labels (Customer/Series/No./Delivery Date/
   Currency/Item-Service Type). ::deep reaches into the child components (SeriesHeader,
   HeaderDipslaySAP, HeaderDipslayClassSAP, SubInnerCardPreferencesSAP) that actually render
   the ".sap_label" markup, scoped so it only affects the collapsed summary row and not the
   same shared components used elsewhere (e.g. the expanded FirstColumn/SecondColumn grid). */
.sap_card-collapse-summary[b-mcoohzbus1]  .sap_label > span:first-child {
    font-weight: bold;
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-mcoohzbus1]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-mcoohzbus1]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-mcoohzbus1]{background:#e9ecef}
.sap_btn-action:disabled[b-mcoohzbus1]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-mcoohzbus1]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-mcoohzbus1]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-mcoohzbus1]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-mcoohzbus1]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-mcoohzbus1]{vertical-align:middle}
.sap_dropdown-container[b-mcoohzbus1]{position:relative;display:inline-block}
.sap_dropdown-menu[b-mcoohzbus1]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-mcoohzbus1]{display:block}
.sap_dropdown-item[b-mcoohzbus1]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-mcoohzbus1]{border-bottom:none}
.sap_dropdown-item:hover[b-mcoohzbus1]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubHeaderInput/SubHeaderInputWareHouse.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-bkc3tt7bxx] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-bkc3tt7bxx] {
    gap: 48px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-bkc3tt7bxx] {
    min-width: 0;
}

.sap_section-title[b-bkc3tt7bxx] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-bkc3tt7bxx] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-bkc3tt7bxx] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-bkc3tt7bxx] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-bkc3tt7bxx] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-bkc3tt7bxx]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-bkc3tt7bxx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-bkc3tt7bxx]{background:#e9ecef}
.sap_btn-action:disabled[b-bkc3tt7bxx]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-bkc3tt7bxx]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-bkc3tt7bxx]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-bkc3tt7bxx]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-bkc3tt7bxx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-bkc3tt7bxx]{vertical-align:middle}
.sap_dropdown-container[b-bkc3tt7bxx]{position:relative;display:inline-block}
.sap_dropdown-menu[b-bkc3tt7bxx]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-bkc3tt7bxx]{display:block}
.sap_dropdown-item[b-bkc3tt7bxx]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-bkc3tt7bxx]{border-bottom:none}
.sap_dropdown-item:hover[b-bkc3tt7bxx]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubInnerCardLine/SalesOrderLineDetailPanel.razor.rz.scp.css */
.line-detail-panel-overlay[b-5ymfyqpsts] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
}

.line-detail-panel[b-5ymfyqpsts] {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 1140px;
    max-width: 95vw;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.line-detail-panel-header[b-5ymfyqpsts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e5e5;
}

.line-detail-panel-docnum[b-5ymfyqpsts] {
    font-weight: 400;
    font-size: 0.85rem;
    color: #666;
    margin-left: 10px;
}

.line-detail-panel-header-actions[b-5ymfyqpsts] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.line-detail-panel-fullscreen[b-5ymfyqpsts] {
    cursor: pointer;
    font-size: 1.1rem;
    color: #999;
    line-height: 1;
}

    .line-detail-panel-fullscreen:hover[b-5ymfyqpsts] {
        color: #333;
    }

.line-detail-panel-close[b-5ymfyqpsts] {
    cursor: pointer;
    font-size: 1.2rem;
    color: #999;
    line-height: 1;
}

    .line-detail-panel-close:hover[b-5ymfyqpsts] {
        color: #333;
    }

.line-detail-panel-body[b-5ymfyqpsts] {
    max-height: min(60vh, 480px);
    overflow: auto;
    padding: 8px;
}
/* /Components/Pages/SAPUI/SubInnerCardLine/SubInnerCardLineDetailSAP.razor.rz.scp.css */
.sap_inner-card[b-cqxitunc00]{background:#f8fafc;padding:1rem;border-radius:6px}
.sap_section-title[b-cqxitunc00]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-cqxitunc00]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-cqxitunc00]{text-align:center;color:#888;padding:1rem}
/* isolation:isolate scopes the frozen-column sticky cells' z-index (1/2/3, used only to order
   sticky bits within this table) to a stacking context of their own, so they can't leak out and
   out-rank page-level sticky elements (e.g. SaleOrderDI's sticky sub-header, also z-index:2) that
   should paint on top of this table while scrolling the page. */
.sap_table-wrapper-line[b-cqxitunc00]{overflow-x:auto;width:100%;isolation:isolate}
.sap-table-line[b-cqxitunc00]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table-line th[b-cqxitunc00],.sap-table-line td[b-cqxitunc00]{padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table-line th:first-child[b-cqxitunc00],.sap-table-line td:first-child[b-cqxitunc00]{min-width:40px;width:40px;text-align:center}
.sap-table-line th:nth-child(2)[b-cqxitunc00],.sap-table-line td:nth-child(2)[b-cqxitunc00]{min-width:50px;width:50px;text-align:center}
.sap_input[b-cqxitunc00]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-cqxitunc00]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-cqxitunc00]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-cqxitunc00]{position:relative}
.sap_dropdown-menu[b-cqxitunc00]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-cqxitunc00]{display:block}
.sap_dropdown-item[b-cqxitunc00]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-cqxitunc00]{margin-top:1rem}
.sap_btn-action[b-cqxitunc00],.sap_btn[b-cqxitunc00],.sap_btn-primary[b-cqxitunc00]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-cqxitunc00]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-cqxitunc00]{display:flex;gap:.5rem;align-items:center}

    .sap-table-line th[b-cqxitunc00],
.sap-table-line td[b-cqxitunc00] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;    
    width: inherit;    
    position: relative;
}

    .sap-table-line th[b-cqxitunc00] {
        user-select: none;
    }

.sap-col-resizer[b-cqxitunc00] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10;
}

    .sap-col-resizer:hover[b-cqxitunc00],
    .sap-col-resizer.resizing[b-cqxitunc00] {
        background: rgba(0, 120, 212, 0.4);
    }

/* /Components/Pages/SAPUI/SubInnerCardLine/SubInnerCardLinePRQSAP.razor.rz.scp.css */
.sap_inner-card[b-163jjogprc] {
    background: #fff;
    padding: 1rem;
    border-radius: 6px
}

.sap_section-title[b-163jjogprc] {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600
}

.sap_table-actions[b-163jjogprc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem
}

.sap_table-no-data[b-163jjogprc] {
    text-align: center;
    color: #888;
    padding: 1rem
}

.sap_table-wrapper-line[b-163jjogprc] {
    overflow-x: auto;
    width: 100%
}

.sap-table-line[b-163jjogprc] {
    width: 100%;
    border-collapse: collapse;
    min-width: max-content
}

    .sap-table-line th[b-163jjogprc], .sap-table-line td[b-163jjogprc] {
        padding: .5rem;
        text-align: left;
        min-width: 160px;
        white-space: nowrap
    }

        .sap-table-line th:first-child[b-163jjogprc], .sap-table-line td:first-child[b-163jjogprc] {
            min-width: 40px;
            width: 40px;
            text-align: center
        }

        .sap-table-line th:nth-child(2)[b-163jjogprc], .sap-table-line td:nth-child(2)[b-163jjogprc] {
            min-width: 50px;
            width: 50px;
            text-align: center
        }

.sap_input[b-163jjogprc] {
    padding: .4rem .5rem;
    border: 1px solid #ccc;
    border-radius: 3px
}

.sap_input_group[b-163jjogprc] {
    display: flex;
    align-items: center;
    gap: .5rem
}

.sap_input_btn[b-163jjogprc] {
    background: #f3f3f3;
    border: 1px solid #ddd;
    padding: .25rem .4rem;
    border-radius: 3px;
    cursor: pointer
}

.sap_dropdown-container[b-163jjogprc] {
    position: relative
}

.sap_dropdown-menu[b-163jjogprc] {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10;
    min-width: 160px
}

    .sap_dropdown-menu.show[b-163jjogprc] {
        display: block
    }

.sap_dropdown-item[b-163jjogprc] {
    padding: .4rem .6rem;
    cursor: pointer
}

.sap_mt-16[b-163jjogprc] {
    margin-top: 1rem
}

.sap_btn-action[b-163jjogprc], .sap_btn[b-163jjogprc], .sap_btn-primary[b-163jjogprc] {
    padding: .4rem .6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer
}

.sap_btn-primary[b-163jjogprc] {
    background: #0078d4;
    color: #fff;
    border-color: #0078d4
}

.sap_table-actions-right[b-163jjogprc] {
    display: flex;
    gap: .5rem;
    align-items: center
}

.sap-table-line th[b-163jjogprc],
.sap-table-line td[b-163jjogprc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    width: inherit;
    position: relative;
}

.sap-table-line th[b-163jjogprc] {
    user-select: none;
}

.sap-col-resizer[b-163jjogprc] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10;
}

    .sap-col-resizer:hover[b-163jjogprc],
    .sap-col-resizer.resizing[b-163jjogprc] {
        background: rgba(0, 120, 212, 0.4);
    }
/* /Components/Pages/SAPUI/SubInnerCardLine/SubInnerCardLineStockSAP.razor.rz.scp.css */
.sap_inner-card[b-m49p88fs1i]{background:#f8fafc;padding:1rem;border-radius:6px}
.sap_section-title[b-m49p88fs1i]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-m49p88fs1i]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-m49p88fs1i]{text-align:center;color:#888;padding:1rem}
/* isolation:isolate scopes the frozen-column sticky cells' z-index (1/2/3, used only to order
   sticky bits within this table) to a stacking context of their own, so they can't leak out and
   out-rank page-level sticky elements (e.g. SaleOrderDI's sticky sub-header, also z-index:2) that
   should paint on top of this table while scrolling the page. */
.sap_table-wrapper-line[b-m49p88fs1i]{overflow-x:auto;width:100%;isolation:isolate}
.sap-table-line[b-m49p88fs1i]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table-line th[b-m49p88fs1i],.sap-table-line td[b-m49p88fs1i]{padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table-line th:first-child[b-m49p88fs1i],.sap-table-line td:first-child[b-m49p88fs1i]{min-width:40px;width:40px;text-align:center}
.sap-table-line th:nth-child(2)[b-m49p88fs1i],.sap-table-line td:nth-child(2)[b-m49p88fs1i]{min-width:50px;width:50px;text-align:center}
.sap_input[b-m49p88fs1i]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-m49p88fs1i]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-m49p88fs1i]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-m49p88fs1i]{position:relative}
.sap_dropdown-menu[b-m49p88fs1i]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-m49p88fs1i]{display:block}
.sap_dropdown-item[b-m49p88fs1i]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-m49p88fs1i]{margin-top:1rem}
.sap_btn-action[b-m49p88fs1i],.sap_btn[b-m49p88fs1i],.sap_btn-primary[b-m49p88fs1i]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-m49p88fs1i]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-m49p88fs1i]{display:flex;gap:.5rem;align-items:center}

    .sap-table-line th[b-m49p88fs1i],
.sap-table-line td[b-m49p88fs1i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;    
    width: inherit;    
    position: relative;
}

    .sap-table-line th[b-m49p88fs1i] {
        user-select: none;
    }

.sap-col-resizer[b-m49p88fs1i] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10;
}

    .sap-col-resizer:hover[b-m49p88fs1i],
    .sap-col-resizer.resizing[b-m49p88fs1i] {
        background: rgba(0, 120, 212, 0.4);
    }

/* /Components/Pages/SAPUI/SubSectionAccounting/SubSectionAccountingSAP.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-fxajr9p43c] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-fxajr9p43c] {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-fxajr9p43c] {
    min-width: 0;
}

.sap_section-title[b-fxajr9p43c] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-fxajr9p43c] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-fxajr9p43c] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-fxajr9p43c] {
    flex: 1;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-fxajr9p43c] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-fxajr9p43c]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-fxajr9p43c]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-fxajr9p43c]{background:#e9ecef}
.sap_btn-action:disabled[b-fxajr9p43c]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-fxajr9p43c]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-fxajr9p43c]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-fxajr9p43c]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-fxajr9p43c]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-fxajr9p43c]{vertical-align:middle}
.sap_dropdown-container[b-fxajr9p43c]{position:relative;display:inline-block}
.sap_dropdown-menu[b-fxajr9p43c]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-fxajr9p43c]{display:block}
.sap_dropdown-item[b-fxajr9p43c]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-fxajr9p43c]{border-bottom:none}
.sap_dropdown-item:hover[b-fxajr9p43c]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubSectionAccounting/SubsectionAccountingWarehouse.razor.rz.scp.css */
.sap_inner-card[b-8ktlv88drt]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-8ktlv88drt]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-8ktlv88drt]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-8ktlv88drt]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper[b-8ktlv88drt]{overflow-x:auto;width:100%}
.sap-table[b-8ktlv88drt]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table th[b-8ktlv88drt],.sap-table td[b-8ktlv88drt]{border:1px solid #f0f0f0;padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table th:first-child[b-8ktlv88drt],.sap-table td:first-child[b-8ktlv88drt]{min-width:40px;width:40px;text-align:center}
.sap-table th:nth-child(2)[b-8ktlv88drt],.sap-table td:nth-child(2)[b-8ktlv88drt]{min-width:50px;width:50px;text-align:center}
.sap_input[b-8ktlv88drt]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-8ktlv88drt]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-8ktlv88drt]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-8ktlv88drt]{position:relative}
.sap_dropdown-menu[b-8ktlv88drt]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-8ktlv88drt]{display:block}
.sap_dropdown-item[b-8ktlv88drt]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-8ktlv88drt]{margin-top:1rem}
.sap_btn-action[b-8ktlv88drt],.sap_btn[b-8ktlv88drt],.sap_btn-primary[b-8ktlv88drt]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-8ktlv88drt]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-8ktlv88drt]{display:flex;gap:.5rem;align-items:center}
/* /Components/Pages/SAPUI/SubSectionContent/SubSectionContentJE.razor.rz.scp.css */
.sap_inner-card[b-wcf9zqnodc]{background:#fff;padding:1rem;border-radius:6px}
.sap_section-title[b-wcf9zqnodc]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap_table-actions[b-wcf9zqnodc]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.sap_table-no-data[b-wcf9zqnodc]{text-align:center;color:#888;padding:1rem}
.sap_table-wrapper-line[b-wcf9zqnodc] {
    overflow-x: auto;
    overflow-y: clip;
    padding-bottom: 70px;
    /*margin-bottom: -180px;*/
    /* Ép scrollbar luôn hiển thị */
    scrollbar-width: thin; /* Firefox */
}

.sap-table-line[b-wcf9zqnodc]{width:100%;border-collapse:collapse;min-width:max-content}
.sap-table-line th[b-wcf9zqnodc],.sap-table-line td[b-wcf9zqnodc]{padding:.5rem;text-align:left;min-width:160px;white-space:nowrap}
.sap-table-line th:first-child[b-wcf9zqnodc],.sap-table-line td:first-child[b-wcf9zqnodc]{min-width:40px;width:40px;text-align:center}
.sap-table-line th:nth-child(2)[b-wcf9zqnodc],.sap-table-line td:nth-child(2)[b-wcf9zqnodc]{min-width:50px;width:50px;text-align:center}
.sap_input[b-wcf9zqnodc]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:3px}
.sap_input_group[b-wcf9zqnodc]{display:flex;align-items:center;gap:.5rem}
.sap_input_btn[b-wcf9zqnodc]{background:#f3f3f3;border:1px solid #ddd;padding:.25rem .4rem;border-radius:3px;cursor:pointer}
.sap_dropdown-container[b-wcf9zqnodc]{position:relative}
.sap_dropdown-menu[b-wcf9zqnodc]{position:absolute;display:none;background:#fff;border:1px solid #ddd;z-index:10;min-width:160px}
.sap_dropdown-menu.show[b-wcf9zqnodc]{display:block}
.sap_dropdown-item[b-wcf9zqnodc]{padding:.4rem .6rem;cursor:pointer}
.sap_mt-16[b-wcf9zqnodc]{margin-top:1rem}
.sap_btn-action[b-wcf9zqnodc],.sap_btn[b-wcf9zqnodc],.sap_btn-primary[b-wcf9zqnodc]{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.sap_btn-primary[b-wcf9zqnodc]{background:#0078d4;color:#fff;border-color:#0078d4}
.sap_table-actions-right[b-wcf9zqnodc]{display:flex;gap:.5rem;align-items:center}

    .sap-table-line th[b-wcf9zqnodc],
.sap-table-line td[b-wcf9zqnodc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;    
    width: inherit;    
    position: relative;
}

    .sap-table-line th[b-wcf9zqnodc] {
        user-select: none;
    }

.sap-col-resizer[b-wcf9zqnodc] {  
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10;
}

    .sap-col-resizer:hover[b-wcf9zqnodc],
    .sap-col-resizer.resizing[b-wcf9zqnodc] {
        background: rgba(0, 120, 212, 0.4);
    }
.sap-table-line td:has(.dropdown-menu.show)[b-wcf9zqnodc],
.sap-table-line td:has(.sap_dropdown-menu.show)[b-wcf9zqnodc] {
    overflow: visible !important;
}


.sap_btn-add-row-wrapper[b-wcf9zqnodc] {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid #e5eeff;
}

.sap_btn-add-row[b-wcf9zqnodc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #0070f2;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: text-decoration 0.15s;
}

    .sap_btn-add-row:hover[b-wcf9zqnodc] {
        background: #f5f5f5;
    }

    .sap_btn-add-row i[b-wcf9zqnodc] {
        font-size: 1.2rem;
    }
/* /Components/Pages/SAPUI/SubSectionContent/SubSectionContentJEV2.razor.rz.scp.css */
.sap_inner-card[b-0n468mbwqk] {
    background: #fff;
    padding: 1rem;
    border-radius: 6px
}

.sap_section-title[b-0n468mbwqk] {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600
}

.sap_table-actions[b-0n468mbwqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem
}

.sap_table-no-data[b-0n468mbwqk] {
    text-align: center;
    color: #888;
    padding: 1rem
}

.sap_table-wrapper-line[b-0n468mbwqk] {
    overflow-x: auto;
    overflow-y: clip;
    padding-bottom: 70px;
    /*margin-bottom: -180px;*/
    /* Ép scrollbar luôn hiển thị */
    scrollbar-width: thin; /* Firefox */
}

.sap-table-line[b-0n468mbwqk] {
    width: 100%;
    border-collapse: collapse;
    min-width: max-content
}

    .sap-table-line th[b-0n468mbwqk], .sap-table-line td[b-0n468mbwqk] {
        padding: .5rem;
        text-align: left;
        min-width: 160px;
        white-space: nowrap
    }

        .sap-table-line th:first-child[b-0n468mbwqk], .sap-table-line td:first-child[b-0n468mbwqk] {
            min-width: 40px;
            width: 40px;
            text-align: center
        }

        .sap-table-line th:nth-child(2)[b-0n468mbwqk], .sap-table-line td:nth-child(2)[b-0n468mbwqk] {
            min-width: 50px;
            width: 50px;
            text-align: center
        }

.sap_input[b-0n468mbwqk] {
    padding: .4rem .5rem;
    border: 1px solid #ccc;
    border-radius: 3px
}

.sap_input_group[b-0n468mbwqk] {
    display: flex;
    align-items: center;
    gap: .5rem
}

.sap_input_btn[b-0n468mbwqk] {
    background: #f3f3f3;
    border: 1px solid #ddd;
    padding: .25rem .4rem;
    border-radius: 3px;
    cursor: pointer
}

.sap_dropdown-container[b-0n468mbwqk] {
    position: relative
}

.sap_dropdown-menu[b-0n468mbwqk] {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10;
    min-width: 160px
}

    .sap_dropdown-menu.show[b-0n468mbwqk] {
        display: block
    }

.sap_dropdown-item[b-0n468mbwqk] {
    padding: .4rem .6rem;
    cursor: pointer
}

.sap_mt-16[b-0n468mbwqk] {
    margin-top: 1rem
}

.sap_btn-action[b-0n468mbwqk], .sap_btn[b-0n468mbwqk], .sap_btn-primary[b-0n468mbwqk] {
    padding: .4rem .6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer
}

.sap_btn-primary[b-0n468mbwqk] {
    background: #0078d4;
    color: #fff;
    border-color: #0078d4
}

.sap_table-actions-right[b-0n468mbwqk] {
    display: flex;
    gap: .5rem;
    align-items: center
}

.sap-table-line th[b-0n468mbwqk],
.sap-table-line td[b-0n468mbwqk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    width: inherit;
    position: relative;
}

.sap-table-line th[b-0n468mbwqk] {
    user-select: none;
}

.sap-col-resizer[b-0n468mbwqk] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10;
}

    .sap-col-resizer:hover[b-0n468mbwqk],
    .sap-col-resizer.resizing[b-0n468mbwqk] {
        background: rgba(0, 120, 212, 0.4);
    }

.sap-table-line td:has(.dropdown-menu.show)[b-0n468mbwqk],
.sap-table-line td:has(.sap_dropdown-menu.show)[b-0n468mbwqk] {
    overflow: visible !important;
}


.sap_btn-add-row-wrapper[b-0n468mbwqk] {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid #e5eeff;
}

.sap_btn-add-row[b-0n468mbwqk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #0070f2;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: text-decoration 0.15s;
}

    .sap_btn-add-row:hover[b-0n468mbwqk] {
        background: #f5f5f5;
    }

    .sap_btn-add-row i[b-0n468mbwqk] {
        font-size: 1.2rem;
    }
/* /Components/Pages/SAPUI/SubSectionContent/SubSectionContentPO.razor.rz.scp.css */
.sap_section-content[b-ag32y0cac4]{padding:.5rem}
.sap_block-title[b-ag32y0cac4]{font-size:1.2rem;margin-bottom:.5rem}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-ag32y0cac4]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-ag32y0cac4]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-ag32y0cac4]{background:#e9ecef}
.sap_btn-action:disabled[b-ag32y0cac4]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-ag32y0cac4]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-ag32y0cac4]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-ag32y0cac4]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-ag32y0cac4]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-ag32y0cac4]{vertical-align:middle}
.sap_dropdown-container[b-ag32y0cac4]{position:relative;display:inline-block}
.sap_dropdown-menu[b-ag32y0cac4]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-ag32y0cac4]{display:block}
.sap_dropdown-item[b-ag32y0cac4]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-ag32y0cac4]{border-bottom:none}
.sap_dropdown-item:hover[b-ag32y0cac4]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubSectionContent/SubSectionContentPRQ.razor.rz.scp.css */
.sap_section-content[b-f11vwr6nsq]{padding:.5rem}
.sap_block-title[b-f11vwr6nsq]{font-size:1.2rem;margin-bottom:.5rem}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-f11vwr6nsq]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-f11vwr6nsq]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-f11vwr6nsq]{background:#e9ecef}
.sap_btn-action:disabled[b-f11vwr6nsq]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-f11vwr6nsq]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-f11vwr6nsq]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-f11vwr6nsq]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-f11vwr6nsq]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-f11vwr6nsq]{vertical-align:middle}
.sap_dropdown-container[b-f11vwr6nsq]{position:relative;display:inline-block}
.sap_dropdown-menu[b-f11vwr6nsq]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-f11vwr6nsq]{display:block}
.sap_dropdown-item[b-f11vwr6nsq]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-f11vwr6nsq]{border-bottom:none}
.sap_dropdown-item:hover[b-f11vwr6nsq]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubSectionContent/SubSectionContentSAP.razor.rz.scp.css */
.sap_section-content[b-ym99ajnnfl]{padding:.5rem}
.sap_block-title[b-ym99ajnnfl]{font-size:1.2rem;margin-bottom:.5rem}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-ym99ajnnfl]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-ym99ajnnfl]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-ym99ajnnfl]{background:#e9ecef}
.sap_btn-action:disabled[b-ym99ajnnfl]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-ym99ajnnfl]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-ym99ajnnfl]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-ym99ajnnfl]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-ym99ajnnfl]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-ym99ajnnfl]{vertical-align:middle}
.sap_dropdown-container[b-ym99ajnnfl]{position:relative;display:inline-block}
.sap_dropdown-menu[b-ym99ajnnfl]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-ym99ajnnfl]{display:block}
.sap_dropdown-item[b-ym99ajnnfl]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-ym99ajnnfl]{border-bottom:none}
.sap_dropdown-item:hover[b-ym99ajnnfl]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubSectionLogistics/SubSectionLogisticsSAP.razor.rz.scp.css */
/* Styles specific to SubHeaderInputSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_card[b-ialoidevvx] {
    padding: 18px 20px 22px;
    border-radius: 6px;
}

.sap_card-columns[b-ialoidevvx] {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
}

.sap_column[b-ialoidevvx] {
    min-width: 0;
}

.sap_section-title[b-ialoidevvx] {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

.sap_form-grid[b-ialoidevvx] {
    display: grid;
    gap: 8px;
}

/* make the small header inputs align nicely inside the column */
.sap_input_group[b-ialoidevvx] {
    display: flex;
    align-items: center;
}

.sap_input_group .sap_input[b-ialoidevvx] {
    flex: 1;
}

/* New row-based layout styles */
.sap_row[b-ialoidevvx] {
    width: 100%;
    margin-bottom: 0;
}

.sap_row-container[b-ialoidevvx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sap_button-container[b-ialoidevvx] {
    margin-top: 8px;
    text-align: center;
}

.sap_link-button[b-ialoidevvx] {
    background: none;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    width: 100%;
}

.sap_link-button:hover[b-ialoidevvx] {
    background: #0d6efd;
    color: #fff;
}

.sap_address-components[b-ialoidevvx] {
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.sap_mt-16[b-ialoidevvx] {
    margin-top: 16px;
}

/* responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .sap_card-columns[b-ialoidevvx] {
        grid-template-columns: 1fr;
    }
    
    .sap_row-container[b-ialoidevvx] {
        grid-template-columns: 1fr;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-ialoidevvx]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-ialoidevvx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-ialoidevvx]{background:#e9ecef}
.sap_btn-action:disabled[b-ialoidevvx]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-ialoidevvx]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-ialoidevvx]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-ialoidevvx]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-ialoidevvx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-ialoidevvx]{vertical-align:middle}
.sap_dropdown-container[b-ialoidevvx]{position:relative;display:inline-block}
.sap_dropdown-menu[b-ialoidevvx]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-ialoidevvx]{display:block}
.sap_dropdown-item[b-ialoidevvx]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-ialoidevvx]{border-bottom:none}
.sap_dropdown-item:hover[b-ialoidevvx]{background:#f5f5f5}
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarACT.razor.rz.scp.css */
/* Summary bar tweaks for SubSummarybarSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_summary-bar[b-ovz0oe9d2n] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    flex-wrap: wrap;
}

.sap_summary-item[b-ovz0oe9d2n] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

    .sap_summary-item .sap_label[b-ovz0oe9d2n] {
        font-size: 11px;
        color: #6b7280;
    }

    .sap_summary-item .sap_value[b-ovz0oe9d2n] {
        font-size: 14px;
        font-weight: 600;
        color: #009966;
        margin-top: 3px;
    }

.sap_customer-name[b-ovz0oe9d2n] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}

/* collapse into stacked layout on small screens */
@media (max-width: 640px) {
    .sap_summary-bar[b-ovz0oe9d2n] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sap_summary-item[b-ovz0oe9d2n] {
        min-width: auto;
    }
}
.sap-toggle-btn[b-ovz0oe9d2n] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarItemMaster.razor.rz.scp.css */
/* Summary bar tweaks for SubSummarybarSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_summary-bar[b-c9kalxg58s] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #eef2f8;
    flex-wrap: wrap;
}

.sap_summary-item[b-c9kalxg58s] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.sap_summary-item .sap_label[b-c9kalxg58s] {
    font-size: 11px;
    color: #6b7280;
}

    .sap_summary-item .sap_value[b-c9kalxg58s] {
        font-size: 14px;
        font-weight: 600;
        color: #009966;
        margin-top: 3px;
    }
.sap_customer-name[b-c9kalxg58s] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}  

/* collapse into stacked layout on small screens */
@media (max-width: 640px) {
    .sap_summary-bar[b-c9kalxg58s] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sap_summary-item[b-c9kalxg58s] {
        min-width: auto;
    }
}
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarJE.razor.rz.scp.css */
/* Customer code: link-style, xanh dương, có mũi tên */
.sap_customer-code[b-evomafgpn5] {
    color: #0070F2;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
}


.sap_arrow[b-evomafgpn5] {
    font-size: 15px;
    margin-right: 2px;
}

/* Customer name: đen, nhỏ hơn, không đậm */
.sap_customer-name[b-evomafgpn5] {
    display: block;
    color: #111827;
    font-weight: 400;
    font-size: 12px;
    white-space: normal;
    margin-top: 1px;
}

/* Customer value: xếp dọc */
.sap_customer-value[b-evomafgpn5] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* ← cho phép children bị clamp */
    overflow: hidden;
    overflow: visible !important;
}

/* Total value: đen, không xanh */
.sap_total-value[b-evomafgpn5] {
    color: #111827 !important;
    font-weight: 400;
    font-size: 13px;
}
.sapMText[b-evomafgpn5] {
    display: inline-block;
    box-sizing: border-box;
    white-space: pre-line;
    word-wrap: break-word;
    cursor: text;
    font-size: .875rem;
    font-family: "72", "72full", Arial, Helvetica, sans-serif;
    line-height: normal;
    color: #1d2d3e;
    font-weight: 400;
}
.sap_customer-value .sapMText[b-evomafgpn5] {
    white-space: nowrap;
    overflow: hidden; /* ← cắt text thay vì tràn */
    text-overflow: ellipsis; /* ← hiển thị "..." khi bị cắt */
    max-width: 100%; /* ← không vượt quá container */
    word-break: normal;
}

.sap_summary-bar[b-evomafgpn5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* đổi thành 10px theo yêu cầu */
    align-items: flex-start;
}
.sap_summary-item[b-evomafgpn5] {
    min-width: 0; /* ← quan trọng: cho phép flex item co lại */
    flex-shrink: 1;
}
    .sap_summary-item:first-child[b-evomafgpn5] {
        flex: 1 1 200px;
        max-width: 300px; /* giới hạn tối đa */
        min-width: 0;
    }

    /* Cột Total và Status không co giãn */
    .sap_summary-item:not(:first-child)[b-evomafgpn5] {
        flex: 0 0 auto;
    }
.sap_summary-item .sapMText[b-evomafgpn5] {
    white-space: nowrap;
}
.sap_summary-item:first-child[b-evomafgpn5] {
    flex: 1 1 200px;
    max-width: 300px;
    min-width: 0;
}

/* Total: không co giãn, nhưng có margin-right cố định sang Status */
.sap_summary-item:nth-child(2)[b-evomafgpn5] {
    flex: 0 0 auto;
    margin-right: 40px; /* ← khoảng cách cố định giữa Total và Status */
}
.sap-toggle-btn[b-evomafgpn5] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}

.sap-bp-submenu[b-evomafgpn5] {
    position: absolute;
    bottom: 24px;
    right: 0;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
    z-index: 10000;
}

.sap-bp-viewmore-btn[b-evomafgpn5] {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #0070f2;
    font-size: inherit;
    width: 100%;
    text-align: left;
}

    .sap-bp-viewmore-btn:hover[b-evomafgpn5] {
        background: #f5f5f5;
    }
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarPeriod.razor.rz.scp.css */
/* Summary bar tweaks for SubSummarybarSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_summary-bar[b-bi16rdfwaa] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    flex-wrap: wrap;
}

.sap_summary-item[b-bi16rdfwaa] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

    .sap_summary-item .sap_label[b-bi16rdfwaa] {
        font-size: 11px;
        color: #6b7280;
    }

    .sap_summary-item .sap_value[b-bi16rdfwaa] {
        font-size: 14px;
        font-weight: 600;
        color: #009966;
        margin-top: 3px;
    }

.sap_customer-name[b-bi16rdfwaa] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}

/* collapse into stacked layout on small screens */
@media (max-width: 640px) {
    .sap_summary-bar[b-bi16rdfwaa] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sap_summary-item[b-bi16rdfwaa] {
        min-width: auto;
    }
}
.sap-toggle-btn[b-bi16rdfwaa] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarPRQ.razor.rz.scp.css */
/* Customer code: link-style, xanh dương, có mũi tên */
.sap_customer-code[b-tpcwe37fcr] {
    color: #0070F2;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
}

    .sap_customer-code:hover[b-tpcwe37fcr] {
        text-decoration: underline;
    }

.sap_arrow[b-tpcwe37fcr] {
    font-size: 15px;
    margin-right: 2px;
}

/* Customer name: đen, nhỏ hơn, không đậm */
.sap_customer-name[b-tpcwe37fcr] {
    display: block;
    color: #111827;
    font-weight: 400;
    font-size: 12px;
    white-space: normal;
    margin-top: 1px;
}

/* Customer value: xếp dọc */
.sap_customer-value[b-tpcwe37fcr] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* ← cho phép children bị clamp */
    overflow: hidden;
}

/* Total value: đen, không xanh */
.sap_total-value[b-tpcwe37fcr] {
    color: #111827 !important;
    font-weight: 400;
    font-size: 13px;
}
.sapMText[b-tpcwe37fcr] {
    display: inline-block;
    box-sizing: border-box;
    white-space: pre-line;
    word-wrap: break-word;
    cursor: text;
    font-size: .875rem;
    font-family: "72", "72full", Arial, Helvetica, sans-serif;
    line-height: normal;
    color: #1d2d3e;
    font-weight: 400;
}
.sap_customer-value .sapMText[b-tpcwe37fcr] {
    white-space: nowrap;
    overflow: hidden; /* ← cắt text thay vì tràn */
    text-overflow: ellipsis; /* ← hiển thị "..." khi bị cắt */
    max-width: 100%; /* ← không vượt quá container */
    word-break: normal;
}

.sap_summary-bar[b-tpcwe37fcr] {
    display: flex;
    flex-wrap: wrap;
    gap: 100px; /* đổi thành 10px theo yêu cầu */
    align-items: flex-start;
}
.sap_summary-item[b-tpcwe37fcr] {
    min-width: 0; /* ← quan trọng: cho phép flex item co lại */
    flex-shrink: 1;
}
    .sap_summary-item:first-child[b-tpcwe37fcr] {
        max-width: 300px; /* giới hạn tối đa */
        min-width: 0;
    }

    /* Cột Total và Status không co giãn */
    .sap_summary-item:not(:first-child)[b-tpcwe37fcr] {
        flex: 0 0 auto;
    }
.sap-toggle-btn[b-tpcwe37fcr] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarSAP.razor.rz.scp.css */
/* Customer code: link-style, xanh dương, có mũi tên */
.sap_customer-code[b-x17jsi1i2o] {
    color: #0070F2;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
}


.sap_arrow[b-x17jsi1i2o] {
    font-size: 15px;
    margin-right: 2px;
}

/* Customer name: đen, nhỏ hơn, không đậm */
.sap_customer-name[b-x17jsi1i2o] {
    display: block;
    color: #111827;
    font-weight: 400;
    font-size: 12px;
    white-space: normal;
    margin-top: 1px;
}

/* Customer value: xếp dọc */
.sap_customer-value[b-x17jsi1i2o] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* ← cho phép children bị clamp */
    overflow: hidden;
    overflow: visible !important;
}

/* Total value: đen, không xanh */
.sap_total-value[b-x17jsi1i2o] {
    color: #111827 !important;
    font-weight: 400;
    font-size: 13px;
}
.sapMText[b-x17jsi1i2o] {
    display: inline-block;
    box-sizing: border-box;
    white-space: pre-line;
    word-wrap: break-word;
    cursor: text;
    font-size: .875rem;
    font-family: "72", "72full", Arial, Helvetica, sans-serif;
    line-height: normal;
    color: #1d2d3e;
    font-weight: 400;
}
.sap_customer-value .sapMText[b-x17jsi1i2o] {
    white-space: nowrap;
    overflow: hidden; /* ← cắt text thay vì tràn */
    text-overflow: ellipsis; /* ← hiển thị "..." khi bị cắt */
    max-width: 100%; /* ← không vượt quá container */
    word-break: normal;
}

.sap_summary-bar[b-x17jsi1i2o] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* đổi thành 10px theo yêu cầu */
    align-items: flex-start;
    background: transparent;
}
.sap_summary-item[b-x17jsi1i2o] {
    min-width: 0; /* ← quan trọng: cho phép flex item co lại */
    flex-shrink: 1;
}
    .sap_summary-item:first-child[b-x17jsi1i2o] {
        flex: 1 1 200px;
        max-width: 300px; /* giới hạn tối đa */
        min-width: 0;
    }

    /* Cột Total và Status không co giãn */
    .sap_summary-item:not(:first-child)[b-x17jsi1i2o] {
        flex: 0 0 auto;
    }
.sap_summary-item .sapMText[b-x17jsi1i2o] {
    white-space: nowrap;
}
.sap_summary-item:first-child[b-x17jsi1i2o] {
    flex: 1 1 200px;
    max-width: 300px;
    min-width: 0;
}

/* Total: không co giãn, nhưng có margin-right cố định sang Status */
.sap_summary-item:nth-child(2)[b-x17jsi1i2o] {
    flex: 0 0 auto;
    margin-right: 40px; /* ← khoảng cách cố định giữa Total và Status */
}
.sap-toggle-btn[b-x17jsi1i2o] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}

.sap-bp-submenu[b-x17jsi1i2o] {
    position: absolute;
    bottom: 24px;
    right: 0;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
    z-index: 10000;
}

.sap-bp-viewmore-btn[b-x17jsi1i2o] {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #0070f2;
    font-size: inherit;
    width: 100%;
    text-align: left;
}

    .sap-bp-viewmore-btn:hover[b-x17jsi1i2o] {
        background: #f5f5f5;
    }
/* /Components/Pages/SAPUI/SubSummarybar/SubSummarybarWHS.razor.rz.scp.css */
/* Summary bar tweaks for SubSummarybarSAP.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_summary-bar[b-59ntleb5ln] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    flex-wrap: wrap;
}

.sap_summary-item[b-59ntleb5ln] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

    .sap_summary-item .sap_label[b-59ntleb5ln] {
        font-size: 11px;
        color: #6b7280;
    }

    .sap_summary-item .sap_value[b-59ntleb5ln] {
        font-size: 14px;
        font-weight: 600;
        color: #009966;
        margin-top: 3px;
    }

.sap_customer-name[b-59ntleb5ln] {
    color: black;
    font-weight: 600;
    white-space: nowrap;
}

/* collapse into stacked layout on small screens */
@media (max-width: 640px) {
    .sap_summary-bar[b-59ntleb5ln] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sap_summary-item[b-59ntleb5ln] {
        min-width: auto;
    }
}
.sap-toggle-btn[b-59ntleb5ln] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0;
    cursor: pointer;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/PRHeaderBar.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-ise2w6os9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-ise2w6os9b] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-ise2w6os9b] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-ise2w6os9b] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

    .sap_nav-btn:hover:not(:disabled)[b-ise2w6os9b] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .sap_nav-btn:disabled[b-ise2w6os9b] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sap_action-right[b-ise2w6os9b] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-ise2w6os9b] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-ise2w6os9b] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-ise2w6os9b] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-ise2w6os9b] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-ise2w6os9b] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-ise2w6os9b] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-ise2w6os9b] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-ise2w6os9b] {
    display: flex;
    gap: 8px;
    align-items: center
}

.sap_btn-action[b-ise2w6os9b] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    transition: all .15s
}

    .sap_btn-action:hover:not(:disabled)[b-ise2w6os9b] {
        background: #e9ecef
    }

    .sap_btn-action:disabled[b-ise2w6os9b] {
        opacity: .5;
        cursor: not-allowed;
        color: #6c757d
    }

.sap_btn-icon-right[b-ise2w6os9b] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all .15s
}

    .sap_btn-icon-right:hover:not(:disabled)[b-ise2w6os9b] {
        background: #e9ecef
    }

    .sap_btn-icon-right:disabled[b-ise2w6os9b] {
        opacity: .5;
        cursor: not-allowed
    }

.sap_btn-icon[b-ise2w6os9b] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

    .sap_btn-icon img[b-ise2w6os9b] {
        vertical-align: middle
    }

.sap_dropdown-container[b-ise2w6os9b] {
    position: relative;
    display: inline-block
}

.sap_dropdown-menu[b-ise2w6os9b] {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 1000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 4px
}

    .sap_dropdown-menu.show[b-ise2w6os9b] {
        display: block
    }

.sap_dropdown-item[b-ise2w6os9b] {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0
}

    .sap_dropdown-item:last-child[b-ise2w6os9b] {
        border-bottom: none
    }

    .sap_dropdown-item:hover[b-ise2w6os9b] {
        background: #f5f5f5
    }

.custumButtonPGLO[b-ise2w6os9b] {
    line-height: 1.5rem;
    font-size: 0.875rem !important;
    background-color: #0d6efd !important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderACT.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-q2qfuzvza3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-q2qfuzvza3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-q2qfuzvza3] {
    font-size: 1.25rem;
    font-weight: 900;
    color: #333;
    margin-right: 15px;
    margin-left: 20px;
}

.sap_nav-btn[b-q2qfuzvza3] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-q2qfuzvza3] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-q2qfuzvza3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-q2qfuzvza3] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-q2qfuzvza3] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-q2qfuzvza3] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-q2qfuzvza3] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-q2qfuzvza3] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-q2qfuzvza3] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-q2qfuzvza3] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-q2qfuzvza3] {
        opacity: 0.5;
        cursor: not-allowed;
    }
.sap_radio-group[b-q2qfuzvza3] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.sap_radio-label[b-q2qfuzvza3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

    .sap_radio-label input[type="radio"][b-q2qfuzvza3] {
        accent-color: #0070f2; /* SAP blue */
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

        .sap_radio-label input[type="radio"]:disabled[b-q2qfuzvza3] {
            cursor: not-allowed;
        }
/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-q2qfuzvza3]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-q2qfuzvza3]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-q2qfuzvza3]{background:#e9ecef}
.sap_btn-action:disabled[b-q2qfuzvza3]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-q2qfuzvza3]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-q2qfuzvza3]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-q2qfuzvza3]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-q2qfuzvza3]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-q2qfuzvza3]{vertical-align:middle}
.sap_dropdown-container[b-q2qfuzvza3]{position:relative;display:inline-block}
.sap_dropdown-menu[b-q2qfuzvza3]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-q2qfuzvza3]{display:block}
.sap_dropdown-item[b-q2qfuzvza3]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-q2qfuzvza3]{border-bottom:none}
.sap_dropdown-item:hover[b-q2qfuzvza3]{background:#f5f5f5}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderJE.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-fh6ravd02k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-fh6ravd02k] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-fh6ravd02k] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-fh6ravd02k] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-fh6ravd02k] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-fh6ravd02k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-fh6ravd02k] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-fh6ravd02k] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-fh6ravd02k] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-fh6ravd02k] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-fh6ravd02k] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-fh6ravd02k] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-fh6ravd02k] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-fh6ravd02k] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-fh6ravd02k]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-fh6ravd02k]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-fh6ravd02k]{background:#e9ecef}
.sap_btn-action:disabled[b-fh6ravd02k]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-fh6ravd02k]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-fh6ravd02k]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-fh6ravd02k]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-fh6ravd02k]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-fh6ravd02k]{vertical-align:middle}
.sap_dropdown-container[b-fh6ravd02k]{position:relative;display:inline-block}
.sap_dropdown-menu[b-fh6ravd02k]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-fh6ravd02k]{display:block}
.sap_dropdown-item[b-fh6ravd02k]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-fh6ravd02k]{border-bottom:none}
.sap_dropdown-item:hover[b-fh6ravd02k]{background:#f5f5f5}
.custumButtonPGLO[b-fh6ravd02k] {
    line-height: 1.5rem;
    font-size: 0.875rem !important;
    background-color: #0d6efd !important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderSAP.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-v0knmyu6a1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: transparent;
    gap: 12px;
}

.sap_action-left[b-v0knmyu6a1] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-v0knmyu6a1] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-v0knmyu6a1] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-v0knmyu6a1] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-v0knmyu6a1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-v0knmyu6a1] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-v0knmyu6a1] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-v0knmyu6a1] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-v0knmyu6a1] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-v0knmyu6a1] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-v0knmyu6a1] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border: none;
    background: transparent;
}

    .sap_btn-white:hover:not(:disabled)[b-v0knmyu6a1] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-v0knmyu6a1] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-v0knmyu6a1]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-v0knmyu6a1]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-v0knmyu6a1]{background:#e9ecef}
.sap_btn-action:disabled[b-v0knmyu6a1]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-v0knmyu6a1]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-v0knmyu6a1]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-v0knmyu6a1]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-v0knmyu6a1]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-v0knmyu6a1]{vertical-align:middle}
.sap_dropdown-container[b-v0knmyu6a1]{position:relative;display:inline-block}
.sap_dropdown-menu[b-v0knmyu6a1]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-v0knmyu6a1]{display:block}
.sap_dropdown-item[b-v0knmyu6a1]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-v0knmyu6a1]{border-bottom:none}
.sap_dropdown-item:hover[b-v0knmyu6a1]{background:#f5f5f5}
.custumButtonPGLO[b-v0knmyu6a1] {
    line-height: 1.5rem;
    font-size: 0.875rem !important;
    background-color: #0d6efd !important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderSAPItemMaster.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-3y7mu40gvm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-3y7mu40gvm] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-3y7mu40gvm] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-3y7mu40gvm] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-3y7mu40gvm] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-3y7mu40gvm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-3y7mu40gvm] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-3y7mu40gvm] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-3y7mu40gvm] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-3y7mu40gvm] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-3y7mu40gvm] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-3y7mu40gvm] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-3y7mu40gvm] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-3y7mu40gvm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-3y7mu40gvm]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-3y7mu40gvm]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-3y7mu40gvm]{background:#e9ecef}
.sap_btn-action:disabled[b-3y7mu40gvm]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-3y7mu40gvm]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-3y7mu40gvm]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-3y7mu40gvm]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-3y7mu40gvm]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-3y7mu40gvm]{vertical-align:middle}
.sap_dropdown-container[b-3y7mu40gvm]{position:relative;display:inline-block}
.sap_dropdown-menu[b-3y7mu40gvm]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-3y7mu40gvm]{display:block}
.sap_dropdown-item[b-3y7mu40gvm]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-3y7mu40gvm]{border-bottom:none}
.sap_dropdown-item:hover[b-3y7mu40gvm]{background:#f5f5f5}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderStock.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-1dnd3tv1gu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: transparent;
    gap: 12px;
}

.sap_action-left[b-1dnd3tv1gu] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-1dnd3tv1gu] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-1dnd3tv1gu] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-1dnd3tv1gu] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-1dnd3tv1gu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-1dnd3tv1gu] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-1dnd3tv1gu] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-1dnd3tv1gu] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-1dnd3tv1gu] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-1dnd3tv1gu] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-1dnd3tv1gu] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border: none;
    background: transparent;
}

    .sap_btn-white:hover:not(:disabled)[b-1dnd3tv1gu] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-1dnd3tv1gu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-1dnd3tv1gu]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-1dnd3tv1gu]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-1dnd3tv1gu]{background:#e9ecef}
.sap_btn-action:disabled[b-1dnd3tv1gu]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-1dnd3tv1gu]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-1dnd3tv1gu]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-1dnd3tv1gu]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-1dnd3tv1gu]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-1dnd3tv1gu]{vertical-align:middle}
.sap_dropdown-container[b-1dnd3tv1gu]{position:relative;display:inline-block}
.sap_dropdown-menu[b-1dnd3tv1gu]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-1dnd3tv1gu]{display:block}
.sap_dropdown-item[b-1dnd3tv1gu]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-1dnd3tv1gu]{border-bottom:none}
.sap_dropdown-item:hover[b-1dnd3tv1gu]{background:#f5f5f5}
.custumButtonPGLO[b-1dnd3tv1gu] {
    line-height: 1.5rem;
    font-size: 0.875rem !important;
    background-color: #0d6efd !important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubHeaderWHS.razor.rz.scp.css */
/* existing component styles (unchanged) */

.sap_action-header[b-wdkbnafo9q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background: white;
    gap: 12px;
}

.sap_action-left[b-wdkbnafo9q] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sap_item-code[b-wdkbnafo9q] {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #333;
    margin-right: 15px;
    margin-left: 15px;
}

.sap_nav-btn[b-wdkbnafo9q] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.2s;
}

.sap_nav-btn:hover:not(:disabled)[b-wdkbnafo9q] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sap_nav-btn:disabled[b-wdkbnafo9q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_action-right[b-wdkbnafo9q] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sap_btn-primary[b-wdkbnafo9q] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
}

    .sap_btn-primary:hover:not(:disabled)[b-wdkbnafo9q] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }


.sap_btn.sap_primary[b-wdkbnafo9q] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-size: 1rem;
    font-weight: 550;
    border-radius: 10px;
}

    .sap_btn.sap_primary:hover:not(:disabled)[b-wdkbnafo9q] {
        background: #0b5ed7;
        border-color: #0b5ed7;
    }

.sap_btn-white[b-wdkbnafo9q] {
    color: #0064D9;
    font-size: 1rem;
    font-weight: 530;
    border-radius: 10px;
    border-color: white;
}

    .sap_btn-white:hover:not(:disabled)[b-wdkbnafo9q] {
        background: #f5f5f5;
    }

    .sap_btn-white:disabled[b-wdkbnafo9q] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-wdkbnafo9q]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-wdkbnafo9q]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-wdkbnafo9q]{background:#e9ecef}
.sap_btn-action:disabled[b-wdkbnafo9q]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-wdkbnafo9q]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-wdkbnafo9q]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-wdkbnafo9q]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-wdkbnafo9q]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-wdkbnafo9q]{vertical-align:middle}
.sap_dropdown-container[b-wdkbnafo9q]{position:relative;display:inline-block}
.sap_dropdown-menu[b-wdkbnafo9q]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-wdkbnafo9q]{display:block}
.sap_dropdown-item[b-wdkbnafo9q]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-wdkbnafo9q]{border-bottom:none}
.sap_dropdown-item:hover[b-wdkbnafo9q]{background:#f5f5f5}
.custumButtonPGLO[b-wdkbnafo9q] {
    line-height: 1.5rem;
    font-size: 0.875rem !important;
    background-color: #0d6efd !important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubInnerCardCloseRemarkSAP.razor.rz.scp.css */
.sap_inner-card[b-k9snbue99z]{padding:1rem;border-radius:6px}
.sap_section-title[b-k9snbue99z]{margin:0;font-size:1rem;font-weight:700;color:#1a1a1a}
/* Header box: full border khi đóng, chỉ border-bottom khi mở */
.sap_remark-header-box[b-k9snbue99z]{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;padding:.5rem .75rem;border-bottom: 1px solid #d0d0d0;border-radius:10px}
.sap_remark-header-box--open[b-k9snbue99z]{border-bottom:1px solid #d0d0d0;border-top:none;border-left:none;border-right:none;border-radius:10px 10px 0 0;padding-left:10px}
.sap_collapse-icon-img[b-k9snbue99z]{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.sap_collapsible-content[b-k9snbue99z]{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.sap_link-section[b-k9snbue99z]{margin-bottom:.25rem}
.sap_link[b-k9snbue99z]{color:#0078d4;text-decoration:none;font-size:.875rem}
.sap_link:hover[b-k9snbue99z]{text-decoration:underline}
.sap_textarea[b-k9snbue99z]{width:100%;min-height:80px;padding:.5rem;border:1px solid #ccc;border-radius:4px;font-size:.875rem;resize:vertical;box-sizing:border-box}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-k9snbue99z]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-k9snbue99z]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-k9snbue99z]{background:#e9ecef}
.sap_btn-action:disabled[b-k9snbue99z]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-k9snbue99z]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-k9snbue99z]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-k9snbue99z]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-k9snbue99z]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-k9snbue99z]{vertical-align:middle}
.sap_dropdown-container[b-k9snbue99z]{position:relative;display:inline-block}
.sap_dropdown-menu[b-k9snbue99z]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-k9snbue99z]{display:block}
.sap_dropdown-item[b-k9snbue99z]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-k9snbue99z]{border-bottom:none}
.sap_dropdown-item:hover[b-k9snbue99z]{background:#f5f5f5}
.sap_remark-header-box:focus-within[b-k9snbue99z] {
    border: 2px solid #004da5;
    outline: none;
}
.sap_section-title[b-k9snbue99z] {
    margin-bottom: 0!important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubInnerCardFreightSAP.razor.rz.scp.css */
.sap_inner-card[b-8gyzupr1v8]{background:#fff;border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.sap_section-title[b-8gyzupr1v8]{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.sap-table[b-8gyzupr1v8]{width:100%;border-collapse:collapse}
.sap-table th[b-8gyzupr1v8],.sap-table td[b-8gyzupr1v8]{border:1px solid #f0f0f0;padding:.5rem;text-align:left}
.sap_table-actions[b-8gyzupr1v8]{display:flex;justify-content:flex-end;gap:.5rem}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-8gyzupr1v8]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-8gyzupr1v8]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-8gyzupr1v8]{background:#e9ecef}
.sap_btn-action:disabled[b-8gyzupr1v8]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-8gyzupr1v8]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-8gyzupr1v8]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-8gyzupr1v8]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-8gyzupr1v8]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-8gyzupr1v8]{vertical-align:middle}
.sap_dropdown-container[b-8gyzupr1v8]{position:relative;display:inline-block}
.sap_dropdown-menu[b-8gyzupr1v8]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-8gyzupr1v8]{display:block}
.sap_dropdown-item[b-8gyzupr1v8]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-8gyzupr1v8]{border-bottom:none}
.sap_dropdown-item:hover[b-8gyzupr1v8]{background:#f5f5f5}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubInnerCardOpenRemarkSAP.razor.rz.scp.css */
.sap_inner-card[b-ir8xno8i4w]{padding:1rem;border-radius:6px}
.sap_section-title[b-ir8xno8i4w]{margin:0;font-size:1rem;font-weight:700;color:#1a1a1a}
/* Header box: full border khi đóng, chỉ border-bottom khi mở */
.sap_remark-header-box[b-ir8xno8i4w]{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;padding:.5rem .75rem;border-bottom: 1px solid #d0d0d0;border-radius:10px}
.sap_remark-header-box--open[b-ir8xno8i4w]{border-bottom:1px solid #d0d0d0;border-top:none;border-left:none;border-right:none;border-radius:10px 10px 0 0;padding-left:10px}
.sap_collapse-icon-img[b-ir8xno8i4w]{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.sap_collapsible-content[b-ir8xno8i4w]{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.sap_link-section[b-ir8xno8i4w]{margin-bottom:.25rem}
.sap_link[b-ir8xno8i4w]{color:#0078d4;text-decoration:none;font-size:.875rem}
.sap_link:hover[b-ir8xno8i4w]{text-decoration:underline}
.sap_textarea[b-ir8xno8i4w]{width:100%;min-height:80px;padding:.5rem;border:1px solid #ccc;border-radius:4px;font-size:.875rem;resize:vertical;box-sizing:border-box}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-ir8xno8i4w]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-ir8xno8i4w]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-ir8xno8i4w]{background:#e9ecef}
.sap_btn-action:disabled[b-ir8xno8i4w]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-ir8xno8i4w]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-ir8xno8i4w]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-ir8xno8i4w]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-ir8xno8i4w]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-ir8xno8i4w]{vertical-align:middle}
.sap_dropdown-container[b-ir8xno8i4w]{position:relative;display:inline-block}
.sap_dropdown-menu[b-ir8xno8i4w]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-ir8xno8i4w]{display:block}
.sap_dropdown-item[b-ir8xno8i4w]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-ir8xno8i4w]{border-bottom:none}
.sap_dropdown-item:hover[b-ir8xno8i4w]{background:#f5f5f5}
.sap_remark-header-box:focus-within[b-ir8xno8i4w] {
    border: 2px solid #004da5;
    outline: none;
}
.sap_section-title[b-ir8xno8i4w] {
    margin-bottom: 0!important;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubInnerCardSummary.razor.rz.scp.css */
.sap_inner-card[b-1iuiwvb7dp] {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 6px
}

/* Floating widget docked to the bottom-right corner, always visible regardless of scroll
   position - same "floating card" treatment as .sap_bottom-bar (border/shadow formula matches
   it for visual consistency). bottom offset clears the fixed .sap_bottom-bar (10px inset,
   2.5rem tall). */
.sap_summary-sticky[b-1iuiwvb7dp] {
    position: fixed;
    right: 35px;
    bottom: 70px;
    z-index: 1;
/*    width: 460px;*/
    max-width: calc(100vw - 40px);
    border: 1px solid #dde2eb;
    box-shadow: 0 0 0 .0625rem rgba(34, 53, 72, 0.48), 0 .125rem .5rem 0 rgba(34, 53, 72, 0.3);
}

.sap_section-title[b-1iuiwvb7dp] {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600
}

.sap_summary-grid[b-1iuiwvb7dp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
}
/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-1iuiwvb7dp] {
    display: flex;
    gap: 8px;
    align-items: center
}

.sap_btn-action[b-1iuiwvb7dp] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    transition: all .15s
}

    .sap_btn-action:hover:not(:disabled)[b-1iuiwvb7dp] {
        background: #e9ecef
    }

    .sap_btn-action:disabled[b-1iuiwvb7dp] {
        opacity: .5;
        cursor: not-allowed;
        color: #6c757d
    }

.sap_btn-icon-right[b-1iuiwvb7dp] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all .15s
}

    .sap_btn-icon-right:hover:not(:disabled)[b-1iuiwvb7dp] {
        background: #e9ecef
    }

    .sap_btn-icon-right:disabled[b-1iuiwvb7dp] {
        opacity: .5;
        cursor: not-allowed
    }

.sap_btn-icon[b-1iuiwvb7dp] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

    .sap_btn-icon img[b-1iuiwvb7dp] {
        vertical-align: middle
    }

.sap_dropdown-container[b-1iuiwvb7dp] {
    position: relative;
    display: inline-block
}

.sap_dropdown-menu[b-1iuiwvb7dp] {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 1000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 4px
}

    .sap_dropdown-menu.show[b-1iuiwvb7dp] {
        display: block
    }

.sap_dropdown-item[b-1iuiwvb7dp] {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0
}

    .sap_dropdown-item:last-child[b-1iuiwvb7dp] {
        border-bottom: none
    }

    .sap_dropdown-item:hover[b-1iuiwvb7dp] {
        background: #f5f5f5
    }

/* Component-specific summary styles */
.sap_total-summary[b-1iuiwvb7dp] {
    background-color: #fff;
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid #e0e4ef;
}

.sap_summary-row[b-1iuiwvb7dp] {
    display: grid;
    /* Cột 1: Linh hoạt | Cột 2 (Label): 200px | Cột 3 (Value): 250px (Tùy chỉnh độ rộng này) */
    grid-template-columns: 1fr 200px 250px;
    align-items: center;
    gap: 0; /* Giảm gap về 0 để kiểm soát bằng độ rộng cột */
}

.sap_summary-label[b-1iuiwvb7dp] {
    font-size: 13px;
    color: #444;
    text-align: left; /* Căn lề trái để tất cả các chữ cái đầu hàng thẳng nhau */
    white-space: nowrap;
    grid-column: 2; /* Nằm ở cột 2 */
}

.sap_summary-value-container[b-1iuiwvb7dp] {
    display: flex;
    justify-content: flex-end; /* Đẩy sang phải */
    align-items: center;
    gap: 8px;
    grid-column: 3; /* Value ở cột 3 (phải) */
}

.sap_summary-value[b-1iuiwvb7dp] {
    font-size: 13px;
    font-weight: 600;
    color: #009966;
    text-align: right;
    grid-column: 3; /* Value ở cột 3 (phải) */
}
.sap_summary-value[b-1iuiwvb7dp], .sap_inline-group[b-1iuiwvb7dp] {
    grid-column: 3;
    justify-content: flex-end; 
    text-align: right;
}
.sap_inline-group[b-1iuiwvb7dp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end; /* Căn phải cho inline group */
    grid-column: 3; /* Inline group ở cột 3 (phải) */
}

/* small variant for compact inputs used in summary */
.sap_input.sap_input-sm[b-1iuiwvb7dp] {
    height: 1.25rem;
    padding: 4px 6px;
    font-size: 14px;
}

/* Allow embedding a small/compact value if needed */
.sap_summary-value--small[b-1iuiwvb7dp] {
    font-size: 14px;
    font-weight: 600;
}
/* Thanh kẻ ngang nằm trong Grid */
.sap_summary-line[b-1iuiwvb7dp] {
    grid-column: 2 / span 2; /* Bắt đầu từ cột 2 và kéo dài qua 2 cột (cột nhãn và cột giá trị) */
    border-top: 2px solid #dee2e6;
    margin: 10px 0; /* Khoảng cách trên dưới để thanh kẻ không dính sát vào chữ */
    width: 100%;
}

/* Đảm bảo hàng chứa thanh kẻ không bị lệch */
.sap_summary-row:has(.sap_summary-line)[b-1iuiwvb7dp] {
    align-items: center;
    height: auto;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubSapAttachments.razor.rz.scp.css */

/* Empty state (no attachments, or an unsupported document type) */
.sap_attachment-area[b-1fxxk49fya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.sap_attachment-icon[b-1fxxk49fya] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.sap_attachment-text[b-1fxxk49fya] {
    color: #6c757d;
    margin-bottom: 16px;
}

/* Toolbar - "Add Attachment" pill button, matching PaymentRequestDetail's prd-import-btn */
.sap_attachment-toolbar[b-1fxxk49fya] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sap_attachment-add-btn[b-1fxxk49fya] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #c3c6d7;
    border-radius: 8px;
    background: #ffffff;
    color: #004ac6;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}

.sap_attachment-add-btn:hover[b-1fxxk49fya] {
    background: #f2f3ff;
}

.sap_attachment-add-btn .material-symbols-outlined[b-1fxxk49fya] {
    font-size: 18px;
}

/* Attachment cards - horizontal scrolling row, matching PaymentRequestDetail's prd-attachment-* */
.sap_attachment-list[b-1fxxk49fya] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    /* overflow-x: auto forces the y-axis to clip too, which was cutting off the remove badge's
       negative top offset below - this top padding gives it room inside the clipped area instead. */
    padding: 12px 4px 8px;
}

.sap_attachment-card[b-1fxxk49fya] {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    height: 200px;
    padding: 8px;
    border: 1px solid #c3c6d7;
    border-radius: 8px;
    background: #eaedff;
}

.sap_attachment-link[b-1fxxk49fya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sap_attachment-thumb[b-1fxxk49fya] {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.sap_attachment-file-icon[b-1fxxk49fya] {
    font-size: 80px;
    color: #004ac6;
}

.sap_attachment-name[b-1fxxk49fya] {
    max-width: 100%;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sap_attachment-remove[b-1fxxk49fya] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: #ba1a1a;
    color: #fff;
    cursor: pointer;
}

.sap_attachment-remove .material-symbols-outlined[b-1fxxk49fya] {
    font-size: 16px;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubSapTab.razor.rz.scp.css */
/* Styles for the SAP sub-tabs used in SubSapTab.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_tabs[b-pk5se35bjx] {
    display: flex;
    gap: 35px;
    padding: 12px 35px 0;
    background-color: transparent;
    border-bottom: 1px solid #dde2eb;
}

.sap_tab[b-pk5se35bjx] {
    border: none;
    background: none;
    padding: 8px 0;
    font-size: 13px;
    color: #556B82;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

    .sap_tab.sap_active[b-pk5se35bjx] {
        color: #0070f2;
        font-weight: 600;
    }

        .sap_tab.sap_active[b-pk5se35bjx]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background-color: #0070f2;
        }




@media (max-width: 600px) {
    .sap_tabs[b-pk5se35bjx] {
        gap: 8px;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-pk5se35bjx]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-pk5se35bjx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-pk5se35bjx]{background:#e9ecef}
.sap_btn-action:disabled[b-pk5se35bjx]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-pk5se35bjx]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-pk5se35bjx]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-pk5se35bjx]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-pk5se35bjx]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-pk5se35bjx]{vertical-align:middle}
.sap_dropdown-container[b-pk5se35bjx]{position:relative;display:inline-block}
.sap_dropdown-menu[b-pk5se35bjx]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-pk5se35bjx]{display:block}
.sap_dropdown-item[b-pk5se35bjx]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-pk5se35bjx]{border-bottom:none}
.sap_dropdown-item:hover[b-pk5se35bjx]{background:#f5f5f5}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubSapTabV2.razor.rz.scp.css */
/* Styles for the SAP sub-tabs used in SubSapTab.razor */
/* Scoped to the component by Blazor .razor.css convention */

.sap_tabs[b-3uq4mdr9at] {
    display: flex;
    gap: 35px;
    padding: 12px 35px 0;
    background-color: #fff;
    border-bottom: 1px solid #dde2eb;
}

.sap_tab[b-3uq4mdr9at] {
    border: none;
    background: none;
    padding: 8px 0;
    font-size: 13px;
    color: #556B82;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

    .sap_tab.sap_active[b-3uq4mdr9at] {
        color: #0070f2;
        font-weight: 600;
    }

        .sap_tab.sap_active[b-3uq4mdr9at]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background-color: #0070f2;
        }




@media (max-width: 600px) {
    .sap_tabs[b-3uq4mdr9at] {
        gap: 8px;
    }
}

/* Shared action/dropdown/button helpers for Sub_SAPUI components */
.sap_table-actions-right[b-3uq4mdr9at]{display:flex;gap:8px;align-items:center}
.sap_btn-action[b-3uq4mdr9at]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;font-size:14px;color:#0d6efd;transition:all .15s}
.sap_btn-action:hover:not(:disabled)[b-3uq4mdr9at]{background:#e9ecef}
.sap_btn-action:disabled[b-3uq4mdr9at]{opacity:.5;cursor:not-allowed;color:#6c757d}
.sap_btn-icon-right[b-3uq4mdr9at]{width:32px;height:32px;padding:0;background:none;border:none!important;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#495057;transition:all .15s}
.sap_btn-icon-right:hover:not(:disabled)[b-3uq4mdr9at]{background:#e9ecef}
.sap_btn-icon-right:disabled[b-3uq4mdr9at]{opacity:.5;cursor:not-allowed}
.sap_btn-icon[b-3uq4mdr9at]{padding:6px 12px;background:none;border:none!important;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sap_btn-icon img[b-3uq4mdr9at]{vertical-align:middle}
.sap_dropdown-container[b-3uq4mdr9at]{position:relative;display:inline-block}
.sap_dropdown-menu[b-3uq4mdr9at]{display:none;position:absolute;background:#fff;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1000;border:1px solid #e0e0e0;border-radius:4px;margin-top:4px}
.sap_dropdown-menu.show[b-3uq4mdr9at]{display:block}
.sap_dropdown-item[b-3uq4mdr9at]{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.sap_dropdown-item:last-child[b-3uq4mdr9at]{border-bottom:none}
.sap_dropdown-item:hover[b-3uq4mdr9at]{background:#f5f5f5}
/* /Components/Pages/SAPUI/Sub_SAPUI/SubSapUDF.razor.rz.scp.css */
.sap_udf-grid-two-column[b-d7jmeeqoos] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    max-width: 800px; /* Giới hạn độ rộng */
}
.sap_udf-grid-two-column[b-d7jmeeqoos] {
    grid-template-columns: 1fr;
}
/* /Components/Pages/SAPUI/Sub_SAPUI/Sub_LineSAPUI/SubLineDetailActionSAP.razor.rz.scp.css */
.sap_line-actions[b-91yqazgo9c]{display:flex;gap:.5rem}
.sap_btn[b-91yqazgo9c]{padding:.3rem .5rem;border-radius:4px;border:1px solid #ccc;background:#fff}

/* Component-specific action toolbar styles */
.sap_table-actions-right[b-91yqazgo9c] {display:flex;gap:8px;align-items:center}

/* Collapsible action group + sliding toggle arrow */
.sap_btn-toggle-collapse[b-91yqazgo9c] {flex-shrink:0}

.sap_toggle-arrow[b-91yqazgo9c] {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #0070f2;
    line-height: 1;
    transition: transform 0.3s ease;
}

.sap_toggle-arrow.expanded[b-91yqazgo9c] {
    transform: rotate(180deg);
}

.sap_actions-collapsible[b-91yqazgo9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 700px;
    opacity: 1;
    transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}

.sap_actions-collapsible.collapsed[b-91yqazgo9c] {
    max-width: 0;
    opacity: 0;
    margin-left: -8px;
    pointer-events: none;
}

.sap_btn-action[b-91yqazgo9c] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    transition: all 0.15s ease;
}

.sap_btn-action:hover:not(:disabled)[b-91yqazgo9c] {
    background: #e9ecef;
}

.sap_btn-action:disabled[b-91yqazgo9c] {
    opacity: 0.5;
    cursor: not-allowed;
    color: #6c757d;
}

.sap_btn-icon-right[b-91yqazgo9c] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    transition: all 0.15s ease;
}

.sap_btn-icon-right:hover:not(:disabled)[b-91yqazgo9c] {
    background: #e9ecef;
}

.sap_btn-icon-right:disabled[b-91yqazgo9c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sap_btn-icon[b-91yqazgo9c] {
    padding: 6px 12px;
    background: none;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sap_btn-icon img[b-91yqazgo9c] { vertical-align: middle; }

/* Dropdown helper */
.sap_dropdown-container[b-91yqazgo9c] {
    position: relative;
    display: inline-block;
}

.sap_dropdown-menu[b-91yqazgo9c] {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
    z-index: 1000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 4px;
}

.sap_dropdown-menu.show[b-91yqazgo9c] { display: block; }

.sap_dropdown-item[b-91yqazgo9c] {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.12s;
}

.sap_dropdown-item:last-child[b-91yqazgo9c] { border-bottom: none; }

.sap_dropdown-item:hover[b-91yqazgo9c] { background: #f5f5f5; }
/* /Components/Pages/SibarCategory/RouteSearchingCpn.razor.rz.scp.css */
.route-item-wrapper[b-wcep2k76u9] {
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    padding: 0;
}
/* /Components/Pages/SibarCategory/SibarCategoryPage.razor.rz.scp.css */
.category-item[b-7x1qf28kml] {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.category-item:active[b-7x1qf28kml] {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.route-item:hover[b-7x1qf28kml] {
    background-color: #5496cd;
}

.cate-drag-handle[b-7x1qf28kml] {
    cursor: grab;
}

.category-item.dragging[b-7x1qf28kml],
.route-item.dragging[b-7x1qf28kml] {
    opacity: .5;
}

.route-show-btn img[b-7x1qf28kml] {
    transition: transform .15s ease-in-out;
}


/* /Components/Pages/Systems/ListData.razor.rz.scp.css */
/* Search Container - PC View (Default) - No changes */
/* Base container */
.search-container-responsive[b-flq9nsdrn9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

/* Search item wrapper for mobile responsiveness */
.search-item-wrapper[b-flq9nsdrn9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-sizing: border-box;
    min-width: 0;
}

.search-item-flex-row[b-flq9nsdrn9] {
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.search-item-col[b-flq9nsdrn9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-sizing: border-box;
    min-width: 0;
}

.search-item-col-half[b-flq9nsdrn9] {
    flex: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.search-item-label[b-flq9nsdrn9] {
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #ddd;
    line-height: 1.3;
}

/* PC View (Default) - Show all items in pairs horizontally */
.search-item-pair-mobile[b-flq9nsdrn9] {
    width: 25rem;
    flex-shrink: 0;
}

/* Default wrapper widths for PC view */
.search-container-responsive > .search-item-wrapper[b-flq9nsdrn9] {
    width: auto;
    flex-shrink: 0;
}

/* Override to ensure items take their natural width on PC */
.search-item-wrapper[style*="width:12.5rem"][b-flq9nsdrn9] {
    width: 12.5rem;
    flex-shrink: 0;
}

.search-item-wrapper[style*="width:25rem"][b-flq9nsdrn9] {
    width: 25rem;
    flex-shrink: 0;
}

.search-action-buttons-responsive[b-flq9nsdrn9] {
    gap: 0.5rem;
    flex-basis: 100%;
    display: flex;
    align-items: center;
}

.search-action-buttons-responsive button[b-flq9nsdrn9] {
    white-space: nowrap;
}

/* ============================================================
   MOBILE VIEW (< 768px) - 1 object per line, full width
   ============================================================ */
@media (max-width: 767px) {
    .search-container-responsive[b-flq9nsdrn9] {
        gap: 0.35rem;
        padding: 0;
        width: 100%;
    }

    /* Hide items beyond the 4th on mobile */
    .search-item-wrapper:nth-child(n+5)[b-flq9nsdrn9] {
        display: none;
    }

    /* Force full width for all search items - Override ALL inline widths */
    .search-container-responsive > .search-item-wrapper[b-flq9nsdrn9],
    .search-item-wrapper[style*="width:12.5rem"][b-flq9nsdrn9],
    .search-item-wrapper[style*="width:25rem"][b-flq9nsdrn9] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
    }

    /* Show pair items as full width on mobile */
    .search-item-pair-mobile[b-flq9nsdrn9] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
    }

    .search-item-flex-row[b-flq9nsdrn9] {
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }

    .search-item-col-half[b-flq9nsdrn9] {
        width: 100%;
        flex: 1;
    }

    .search-item-label[b-flq9nsdrn9] {
        font-size: 0.8rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        color: #ddd;
    }

    .search-action-buttons-responsive[b-flq9nsdrn9] {
        gap: 0.35rem;
        flex-basis: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }

    .search-action-buttons-responsive button[b-flq9nsdrn9] {
        flex: 0 1 auto;
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem !important;
    }

    .search-action-buttons-responsive button[style*="max-width"][b-flq9nsdrn9] {
        max-width: 100%;
        flex: 1 1 calc(50% - 0.175rem);
    }

    .search-action-buttons-responsive button[style*="min-width"][b-flq9nsdrn9] {
        min-width: 1.8rem;
        flex: 0 0 auto;
    }
}

/* ============================================================
   TABLET VIEW (768px - 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .search-container-responsive[b-flq9nsdrn9] {
        gap: 0.75rem;
    }

    .search-item-pair-mobile[b-flq9nsdrn9] {
        width: 22rem;
        flex-shrink: 0;
    }

    .search-item-flex-row[b-flq9nsdrn9] {
        gap: 0.5rem;
    }

    .search-item-label[b-flq9nsdrn9] {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .search-action-buttons-responsive[b-flq9nsdrn9] {
        gap: 0.5rem;
    }
}

/* ============================================================
   DESKTOP VIEW (>= 1024px) - PC View (NO CHANGES)
   ============================================================ */
@media (min-width: 1024px) {
    .search-container-responsive[b-flq9nsdrn9] {
        gap: 0.75rem;
    }

    .search-item-pair-mobile[b-flq9nsdrn9] {
        width: 25rem;
        flex-shrink: 0;
    }

    .search-item-flex-row[b-flq9nsdrn9] {
        gap: 0.5rem;
    }

    .search-item-label[b-flq9nsdrn9] {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .search-action-buttons-responsive[b-flq9nsdrn9] {
        gap: 0.75rem;
    }
}

/* ============================================================
   INPUT FIELDS RESPONSIVE
   ============================================================ */
.inputCustumHD[b-flq9nsdrn9],
.custumSearch[b-flq9nsdrn9] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.5rem;
}

/* Style FlatPickr input to inherit proper font styling */
.flatpickr-input[b-flq9nsdrn9] {
    font-size: 1rem !important;
    color: #cae4fb !important;
}

@media (max-width: 767px) {
    .inputCustumHD[b-flq9nsdrn9],
    .custumSearch[b-flq9nsdrn9] {
        font-size: 0.95rem;
        padding: 0.4rem;
    }

    .flatpickr-input[b-flq9nsdrn9] {
        font-size: 0.95rem !important;
    }
}
/* /Components/Pages/Systems/ServerUpdate/RemoteUpdate.razor.rz.scp.css */
/* Row styling based on change type */
.row-new[b-i40jorlz38] {
    border-left: 4px solid #36B37E !important;
    background-color: rgba(227, 252, 239, 0.3) !important;
}

.row-update[b-i40jorlz38] {
    border-left: 4px solid #FFAB00 !important;
    background-color: rgba(255, 240, 179, 0.3) !important;
}

.row-delete[b-i40jorlz38] {
    border-left: 4px solid #FF5630 !important;
    background-color: rgba(255, 235, 230, 0.3) !important;
}

/* Material icons alignment */
.material-symbols-outlined[b-i40jorlz38] {
    vertical-align: middle;
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* Custom scrollbar */
.table-responsive[b-i40jorlz38]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive[b-i40jorlz38]::-webkit-scrollbar-track {
    background: #F4F5F7;
}

.table-responsive[b-i40jorlz38]::-webkit-scrollbar-thumb {
    background: #DFE1E6;
    border-radius: 4px;
}

.table-responsive[b-i40jorlz38]::-webkit-scrollbar-thumb:hover {
    background: #c3c6d6;
}

/* Table hover effect */
.table-hover tbody tr:hover[b-i40jorlz38] {
    background-color: rgba(0, 0, 0, 0.025) !important;
    transition: background-color 0.2s ease;
}

/* Badge styling to match design */
.badge[b-i40jorlz38] {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Code tag styling */
code[b-i40jorlz38] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Button improvements */
.btn-sm[b-i40jorlz38] {
    font-size: 13px;
    padding: 4px 12px;
}
/* /Components/Pages/Tasks/TicketManagerPage.razor.rz.scp.css */
.toggle-label[b-najqyjkdox] {
    position: relative;
    display: block;
    width: 70px;
    height: 32px;
    border: 1px solid #376682;
    cursor: pointer
}

    .toggle-label input[type=checkbox][b-najqyjkdox] {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

        .toggle-label input[type=checkbox] + .back[b-najqyjkdox] {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(17, 20, 24, 0.6);
            opacity: 0.6;
            transition: background 150ms linear;
        }

        .toggle-label input[type=checkbox]:checked + .back[b-najqyjkdox] {
            background: rgba(17, 20, 24, 0.6);
        }

        .toggle-label input[type=checkbox] + .back .toggle[b-najqyjkdox] {
            display: block;
            position: absolute;
            content: ' ';
            background: #E0F4FF;
            width: 50%;
            height: 100%;
            transition: margin 150ms linear;
            border: 1px solid #376682;
        }

        .toggle-label input[type=checkbox]:checked + .back .toggle[b-najqyjkdox] {
            margin-left: 35px;
        }

    .toggle-label .label[b-najqyjkdox] {
        display: block;
        position: absolute;
        width: 50%;
        text-align: center;
    }

        .toggle-label .label.on[b-najqyjkdox] {
            left: 0px;
            top: 3px
        }

        .toggle-label .label.off[b-najqyjkdox] {
            right: 0px;
            top: 3px
        }

disabled[b-najqyjkdox] {
    background-color: #111418;
    opacity: 0.4;
    color: white;
}

.cursor-pointer[b-najqyjkdox] {
    cursor: pointer
}

.d-none[b-najqyjkdox] {
    display: none;
}

.opacity-hidden[b-najqyjkdox] {
    opacity: 0;
    transition: opacity 0.5s;
}

.opacity-visible[b-najqyjkdox] {
    opacity: 1;
    transition: opacity 0.5s;
}
/* /Components/Pages/Tickets/PurchaseRequest.razor.rz.scp.css */

/* /Components/Subs/AnnouncementSettingsCpn.razor.rz.scp.css */
.news-dashboard-page[b-819l1lpo4d] {
    padding: 0;
    max-width: 100%;
    margin: 0;
    min-height: calc(100vh - 3rem);
    overflow: visible;
}

/* Split Layout Container */
.dashboard-split-container[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    gap: 0;
}

.dashboard-left-panel[b-819l1lpo4d],
.dashboard-right-panel[b-819l1lpo4d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-left-panel[b-819l1lpo4d] {
    border-right: 2px solid #e9ecef;
    background: #f8f9fa;
}

.dashboard-right-panel[b-819l1lpo4d] {
    background: white;
}

/* Panel Header */
.panel-header[b-819l1lpo4d] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1.5rem;
    height: 60px;
    background: linear-gradient(135deg, #2c4a65, #3d5c7a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.dashboard-left-panel .panel-header[b-819l1lpo4d] {
    justify-content: space-between;
}

.panel-title[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.panel-content[b-819l1lpo4d] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}

.calendar-content[b-819l1lpo4d] {
    padding: 0;
    background: white;
}

.btn-settings[b-819l1lpo4d] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: none;
}

    .btn-settings img[b-819l1lpo4d] {
        filter: brightness(0) invert(1);
    }

/* Settings Panel */
.news-settings-panel[b-819l1lpo4d] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown-b-819l1lpo4d 0.3s ease;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

    .news-settings-panel[b-819l1lpo4d]::-webkit-scrollbar {
        width: 8px;
    }

    .news-settings-panel[b-819l1lpo4d]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .news-settings-panel[b-819l1lpo4d]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .news-settings-panel[b-819l1lpo4d]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.settings-container[b-819l1lpo4d] {
    padding: 2rem;
}

.settings-section[b-819l1lpo4d] {
    margin-bottom: 2rem;
}

    .settings-section:last-child[b-819l1lpo4d] {
        margin-bottom: 0;
    }

.section-header[b-819l1lpo4d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

    .section-header h3[b-819l1lpo4d] {
        font-size: 1.25rem;
        color: #2c4a65;
        margin: 0;
        font-weight: 600;
    }

.btn-collapse[b-819l1lpo4d] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}

    .btn-collapse:hover[b-819l1lpo4d] {
        color: #2c4a65;
    }

/* Form */
.add-feature-form[b-819l1lpo4d] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    animation: fadeIn-b-819l1lpo4d 0.3s ease;
}

.form-row[b-819l1lpo4d] {
    margin-bottom: 1.5rem;
}

.form-group[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-819l1lpo4d] {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

.form-input[b-819l1lpo4d],
.form-textarea[b-819l1lpo4d] {
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

    .form-input:focus[b-819l1lpo4d],
    .form-textarea:focus[b-819l1lpo4d] {
        outline: none;
        border-color: #2c4a65;
        box-shadow: 0 0 0 3px rgba(44, 74, 101, 0.1);
    }

.form-textarea[b-819l1lpo4d] {
    resize: vertical;
    min-height: 80px;
}

/* IMAGE UPLOAD STYLES - UPDATED */
.image-upload-container[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Upload Tabs */
.upload-tabs[b-819l1lpo4d] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab-button[b-819l1lpo4d] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    background: white;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .tab-button:hover[b-819l1lpo4d] {
        border-color: #2c4a65;
        background: #f8f9fa;
    }

    .tab-button.active[b-819l1lpo4d] {
        background: #2c4a65;
        color: white;
        border-color: #2c4a65;
    }

/* File Upload Section */
.upload-section[b-819l1lpo4d] {
    position: relative;
}

.file-input[b-819l1lpo4d] {
    display: none;
}

.file-label[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s;
}

    .file-label:hover[b-819l1lpo4d] {
        border-color: #2c4a65;
        background: #e9ecef;
    }

.file-icon[b-819l1lpo4d] {
    font-size: 2rem;
}

.file-label small[b-819l1lpo4d] {
    color: #6c757d;
    font-size: 0.85rem;
}

.upload-progress[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #e7f3ff;
    border-radius: 6px;
    margin-top: 1rem;
}

.image-preview-container[b-819l1lpo4d] {
    position: relative;
    width: 100%;
    max-width: 400px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.image-preview[b-819l1lpo4d] {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    display: block;
}

.btn-remove-image[b-819l1lpo4d] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

    .btn-remove-image:hover[b-819l1lpo4d] {
        background: #dc3545;
        transform: scale(1.1);
    }

/* THUMBNAIL IN LIST */
.item-thumbnail[b-819l1lpo4d] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
}

.thumbnail-image[b-819l1lpo4d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Form Actions */
.form-actions[b-819l1lpo4d] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-add[b-819l1lpo4d],
.btn-cancel[b-819l1lpo4d] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-add[b-819l1lpo4d] {
    background: #28a745;
    color: white;
}

    .btn-add:hover[b-819l1lpo4d] {
        background: #218838;
        transform: translateY(-2px);
    }

    .btn-add img[b-819l1lpo4d] {
        filter: brightness(0) invert(1);
    }

.btn-cancel[b-819l1lpo4d] {
    background: #6c757d;
    color: white;
}

    .btn-cancel:hover[b-819l1lpo4d] {
        background: #5a6268;
    }

/* Features Management List */
.features-management-list[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.feature-management-item[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s;
}

    .feature-management-item.active[b-819l1lpo4d] {
        border-color: #28a745;
        background: #f0fff4;
    }

    .feature-management-item:hover[b-819l1lpo4d] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.feature-details[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.feature-text[b-819l1lpo4d] {
    flex: 1;
    min-width: 0;
}

    .feature-text h4[b-819l1lpo4d] {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
        margin: 0 0 0.25rem 0;
    }

    .feature-text p[b-819l1lpo4d] {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.btn-delete[b-819l1lpo4d] {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    opacity: 0.6;
    color: #dc3545;
}

    .btn-delete:hover[b-819l1lpo4d] {
        background: none !important;
        opacity: 1;
    }

.management-actions[b-819l1lpo4d] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-edit-mini[b-819l1lpo4d] {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    opacity: 0.6;
    color: #6c757d;
}

    .btn-edit-mini:hover[b-819l1lpo4d] {
        background: none !important;
        opacity: 1;
        color: #2c4a65;
    }

.features-management-list[b-819l1lpo4d]::-webkit-scrollbar {
    width: 8px;
}

.features-management-list[b-819l1lpo4d]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.features-management-list[b-819l1lpo4d]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .features-management-list[b-819l1lpo4d]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Alert Styles */
.alert[b-819l1lpo4d] {
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.alert-danger[b-819l1lpo4d] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.text-success[b-819l1lpo4d] {
    color: #28a745;
}

.text-muted[b-819l1lpo4d] {
    color: #6c757d;
    font-size: 0.85rem;
}

.checkbox-label[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

.form-checkbox[b-819l1lpo4d] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #2c4a65;
}

.checkbox-text[b-819l1lpo4d] {
    font-weight: 500;
    color: #495057;
    font-size: 0.95rem;
}

.form-input:disabled[b-819l1lpo4d] {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Badge Styles */
.badge-ontop[b-819l1lpo4d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.badge-days[b-819l1lpo4d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.ontop-item[b-819l1lpo4d] {
    border-left: 4px solid #ff6b6b !important;
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.05), transparent) !important;
}

.file-attachments-container[b-819l1lpo4d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.files-list[b-819l1lpo4d] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

    .files-list h4[b-819l1lpo4d] {
        margin: 0 0 1rem 0;
        font-size: 0.95rem;
        color: #495057;
        font-weight: 600;
    }

.file-item[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

    .file-item:last-child[b-819l1lpo4d] {
        margin-bottom: 0;
    }

    .file-item:hover[b-819l1lpo4d] {
        border-color: #2c4a65;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.file-info[b-819l1lpo4d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.file-icon-mini[b-819l1lpo4d] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.file-name[b-819l1lpo4d] {
    font-size: 0.9rem;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove-file[b-819l1lpo4d] {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .btn-remove-file:hover[b-819l1lpo4d] {
        background: #c82333;
        transform: scale(1.1);
    }

/* Badge for file count */
.badge-files[b-819l1lpo4d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Attached files mini display in list */
.attached-files-mini[b-819l1lpo4d] {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

    .attached-files-mini small[b-819l1lpo4d] {
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
        color: #495057;
    }

.file-tag[b-819l1lpo4d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #e9ecef;
    color: #495057;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid #dee2e6;
}

.file-tag-more[b-819l1lpo4d] {
    display: inline-flex;
    align-items: center;
    background: #6c757d;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Empty state */
.empty-state[b-819l1lpo4d] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

    .empty-state p[b-819l1lpo4d] {
        margin: 0;
        font-size: 1rem;
    }

/* Loading container */
.loading-container[b-819l1lpo4d] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .file-item[b-819l1lpo4d] {
        padding: 0.5rem;
    }

    .file-name[b-819l1lpo4d] {
        font-size: 0.85rem;
    }

    .btn-remove-file[b-819l1lpo4d] {
        width: 20px;
        height: 20px;
        font-size: 0.9rem;
    }

    .attached-files-mini[b-819l1lpo4d] {
        gap: 0.25rem;
    }

    .file-tag[b-819l1lpo4d] {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }
}

/* Animations */
@keyframes slideDown-b-819l1lpo4d {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-819l1lpo4d {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .settings-container[b-819l1lpo4d] {
        padding: 1rem;
    }

    .form-actions[b-819l1lpo4d] {
        flex-direction: column;
    }

    .btn-add[b-819l1lpo4d],
    .btn-cancel[b-819l1lpo4d] {
        width: 100%;
        justify-content: center;
    }

    .image-preview-container[b-819l1lpo4d] {
        max-width: 100%;
    }

    .item-thumbnail[b-819l1lpo4d] {
        width: 50px;
        height: 50px;
    }

    .upload-tabs[b-819l1lpo4d] {
        flex-direction: column;
    }

    .tab-button[b-819l1lpo4d] {
        width: 100%;
    }
}
/* /Components/Subs/AppCreators/CreatorCpn.razor.rz.scp.css */
/* moved to global appCreator.css */
/* /Components/Subs/AppCreators/CreatorViewCpn.razor.rz.scp.css */
/* moved to global appCreator.css */
/* /Components/Subs/AppCreators/HtmlControlCpn.razor.rz.scp.css */


/* ---------- LABEL ---------- */
.labelCustumHD[b-zugajq4mc9] {
    display: block;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #566168;
    margin-bottom: 6px;
    line-height: 1.4;
}

    .labelCustumHD.required[b-zugajq4mc9]::after {
        content: ' *';
        color: #9f403d;
        font-style: normal;
    }

/* ---------- INPUT / TEXTAREA ---------- */
.inputCustumHD[b-zugajq4mc9] {
    width: 100%;
    background: #fafafa;
    border: 1px solid rgba(168, 179, 187, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    color: black;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .inputCustumHD[b-zugajq4mc9]::placeholder {
        color: #a8b3bb;
        font-style: italic;
    }

    .inputCustumHD:hover[b-zugajq4mc9] {
        border-color: rgba(113, 124, 132, 0.55);
        background: #ffffff;
    }

    .inputCustumHD:focus[b-zugajq4mc9] {
        border-color: #005db6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0, 93, 182, 0.12);
    }

/* Textarea riêng */
textarea.inputCustumHD[b-zugajq4mc9] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

/* Readonly / disabled */
.inputCustumHD[readonly][b-zugajq4mc9],
.inputCustumHD:disabled[b-zugajq4mc9] {
    background: #f0f4f8;
    color: #566168;
    cursor: not-allowed;
    border-color: rgba(168, 179, 187, 0.2);
}

    .inputCustumHD[readonly]:hover[b-zugajq4mc9],
    .inputCustumHD:disabled:hover[b-zugajq4mc9] {
        border-color: rgba(168, 179, 187, 0.2);
        background: #f0f4f8;
    }
/* Khi KHÔNG có class redesign → giữ nguyên, không cần override */

/* Khi CÓ class fieldGroupObject--redesign */
.fieldGroupObject--redesign > div[b-zugajq4mc9] {
    border: none !important;
    min-width: unset !important;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(58, 97, 134, 0.15);
}

.fieldGroupObject--redesign .btnFieldGroup[b-zugajq4mc9] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3a6186;
    background: #dde8f0 !important;
    border-bottom: 1px solid rgba(168,179,187,0.2) !important;
    width: 100%;
}
.richTextObject--redesign[b-zugajq4mc9] {
    border: 1px solid rgba(168, 179, 187, 0.4);
    box-shadow: 0 4px 16px rgba(58, 97, 134, 0.15);
    overflow: hidden;
    border-radius: 8px 8px 0 0 !important;
}

    
/* /Components/Subs/AppCreators/HtmlControlViewCpn.razor.rz.scp.css */


/* ---------- LABEL ---------- */
.labelCustumHD[b-nwoptier5d] {
    display: block;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #566168;
    margin-bottom: 6px;
    line-height: 1.4;
}

    .labelCustumHD.required[b-nwoptier5d]::after {
        content: ' *';
        color: #9f403d;
        font-style: normal;
    }

/* ---------- INPUT / TEXTAREA ---------- */
.inputCustumHD[b-nwoptier5d] {
    width: 100%;
    background: #fafafa;
    border: 1px solid rgba(168, 179, 187, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    color: black;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .inputCustumHD[b-nwoptier5d]::placeholder {
        color: #a8b3bb;
        font-style: italic;
    }

    .inputCustumHD:hover[b-nwoptier5d] {
        border-color: rgba(113, 124, 132, 0.55);
        background: #ffffff;
    }

    .inputCustumHD:focus[b-nwoptier5d] {
        border-color: #005db6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0, 93, 182, 0.12);
    }

/* Textarea riêng */
textarea.inputCustumHD[b-nwoptier5d] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

/* Readonly / disabled */
.inputCustumHD[readonly][b-nwoptier5d],
.inputCustumHD:disabled[b-nwoptier5d] {
    background: #f0f4f8;
    color: #566168;
    cursor: not-allowed;
    border-color: rgba(168, 179, 187, 0.2);
}

    .inputCustumHD[readonly]:hover[b-nwoptier5d],
    .inputCustumHD:disabled:hover[b-nwoptier5d] {
        border-color: rgba(168, 179, 187, 0.2);
        background: #f0f4f8;
    }
/* Khi KHÔNG có class redesign → giữ nguyên, không cần override */

/* Khi CÓ class fieldGroupObject--redesign */
.fieldGroupObject--redesign > div[b-nwoptier5d] {
    border: none !important;
    min-width: unset !important;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(58, 97, 134, 0.15);
}

.fieldGroupObject--redesign .btnFieldGroup[b-nwoptier5d] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3a6186;
    background: #dde8f0 !important;
    border-bottom: 1px solid rgba(168,179,187,0.2) !important;
    width: 100%;
}
.richTextObject--redesign[b-nwoptier5d] {
    border: 1px solid rgba(168, 179, 187, 0.4);
    box-shadow: 0 4px 16px rgba(58, 97, 134, 0.15);
    overflow: hidden;
    border-radius: 8px 8px 0 0 !important;
}

    
/* /Components/Subs/AppCreators/HtmlRenderViewCpn.razor.rz.scp.css */
/* HTML Render View Component - Read-only display styling */

/* Link styling in view mode */
a[b-xr22x2f5p5] {
    text-decoration: none;
    color: inherit;
}

/* Disabled buttons styling */
button:disabled[b-xr22x2f5p5] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

button:disabled:hover[b-xr22x2f5p5] {
    background-color: unchanged;
    border-color: unchanged;
}

/* Image styling in view mode */
img[b-xr22x2f5p5] {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text content styling */
span[b-xr22x2f5p5], p[b-xr22x2f5p5], div[b-xr22x2f5p5] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Remove any input-like appearance from read-only elements */
.inputCustumHD:disabled[b-xr22x2f5p5],
.inputCustumHD[readonly][b-xr22x2f5p5] {
    background-color: #f5f5f5;
    color: #666;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Dropdown in view mode - disabled state */
.dropdown-menu:disabled[b-xr22x2f5p5] {
    pointer-events: none;
    opacity: 0.6;
}

/* Link hover effect in view mode - subtle only */
a:hover[b-xr22x2f5p5] {
    text-decoration: underline;
}
/* /Components/Subs/AppCreators/ObjectCreators/ActivateLinkObject.razor.rz.scp.css */
.activateLinkObject[b-7i3nplzb5i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

/* ── Field row ── */
.al-field-row[b-7i3nplzb5i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.al-field-label[b-7i3nplzb5i] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4f667a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Input with pick button ── */
.al-input-wrapper[b-7i3nplzb5i] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.al-input[b-7i3nplzb5i] {
    flex: 1;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    background: #fff;
    cursor: pointer;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.al-input:focus[b-7i3nplzb5i] {
    outline: none;
    border-color: #5496cd;
}

.al-pick-btn[b-7i3nplzb5i] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f5f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.al-pick-btn:hover[b-7i3nplzb5i] {
    background: #e8ecf0;
}

/* ── Status select ── */
.al-select[b-7i3nplzb5i] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    background: #fff;
    cursor: pointer;
    width: 100%;
}

.al-select:focus[b-7i3nplzb5i] {
    outline: none;
    border-color: #5496cd;
}

/* ── Modal ── */
.al-modal-backdrop[b-7i3nplzb5i] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.al-modal[b-7i3nplzb5i] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 420px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.al-modal-header[b-7i3nplzb5i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #4f667a;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.al-modal-close[b-7i3nplzb5i] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.al-modal-close:hover[b-7i3nplzb5i] {
    opacity: 0.75;
}

.al-modal-body[b-7i3nplzb5i] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    flex: 1;
}

.al-search-input[b-7i3nplzb5i] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.al-search-input:focus[b-7i3nplzb5i] {
    outline: none;
    border-color: #5496cd;
}

.al-list[b-7i3nplzb5i] {
    overflow-y: auto;
    flex: 1;
    border: 1px solid #eee;
    border-radius: 6px;
}

.al-list-item[b-7i3nplzb5i] {
    padding: 8px 12px;
    font-size: 0.88rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    transition: background 0.12s;
}

.al-list-item:last-child[b-7i3nplzb5i] {
    border-bottom: none;
}

.al-list-item:hover[b-7i3nplzb5i] {
    background-color: #f0f6ff;
}

.al-list-item.selected[b-7i3nplzb5i] {
    background-color: #dbeeff;
    font-weight: 600;
    color: #1a6fc4;
}

.al-list-empty[b-7i3nplzb5i] {
    padding: 16px;
    text-align: center;
    color: #aaa;
    font-size: 0.85rem;
    font-style: italic;
}
/* /Components/Subs/AppCreators/ObjectCreators/ActivateLinkObjectView.razor.rz.scp.css */
/* Activate Link Object View - Read-only display */

.al-field-row-view[b-924sgc5dyi] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 10px;
    border-bottom: 1px solid #e3e7e8;
}

.al-field-label[b-924sgc5dyi] {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.al-field-value[b-924sgc5dyi] {
    color: #666;
    font-size: 14px;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
    word-wrap: break-word;
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Status styling */
.al-status-active[b-924sgc5dyi] {
    color: #28a745;
    font-weight: 600;
}

.al-status-pending[b-924sgc5dyi] {
    color: #ffc107;
    font-weight: 600;
}

.al-status-unknown[b-924sgc5dyi] {
    color: #6c757d;
    font-weight: 500;
}
/* /Components/Subs/AppCreators/ObjectCreators/LocationObjectView.razor.rz.scp.css */
/* Location Object View - Read-only display */

.location-header[b-gsr8ndxcub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-weight: 600;
    color: #333;
}

.locationObject-view[b-gsr8ndxcub] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-display-context[b-gsr8ndxcub] {
    color: #666;
    font-size: 14px;
    word-wrap: break-word;
    line-height: 1.5;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
    min-height: 40px;
}

.location-coordinates[b-gsr8ndxcub] {
    color: #888;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px;
    background-color: #f0f0f0;
    border-left: 3px solid #ddd;
    border-radius: 2px;
}
/* /Components/Subs/AppCreators/ObjectCreators/SignatureObject.razor.rz.scp.css */
.signatureObject[b-0lpi7gjvxf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

/* ── Preview area ── */
.signature-preview-wrapper[b-0lpi7gjvxf] {
    width: 100%;
    flex: 1;
    min-height: 60px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.signature-preview-img[b-0lpi7gjvxf] {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.signature-empty-placeholder[b-0lpi7gjvxf] {
    color: #bbb;
    font-size: 0.85rem;
    font-style: italic;
    user-select: none;
}

/* ── Action buttons ── */
.signature-actions[b-0lpi7gjvxf] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-top: 4px;
}

.signature-action-btn[b-0lpi7gjvxf] {
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

.signature-clear-btn-sm[b-0lpi7gjvxf] {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #555;
}

.signature-clear-btn-sm:hover[b-0lpi7gjvxf] {
    background-color: #e8e8e8;
}

.signature-download-btn[b-0lpi7gjvxf] {
    background-color: #27ae60;
    border: none;
    color: #fff;
}

.signature-download-btn:hover[b-0lpi7gjvxf] {
    background-color: #1e8449;
}

.signature-edit-btn[b-0lpi7gjvxf] {
    background-color: #f0a500;
    border: none;
    color: #fff;
}

.signature-edit-btn:hover[b-0lpi7gjvxf] {
    background-color: #d4900a;
}

.signature-save-btn[b-0lpi7gjvxf] {
    background-color: #3498db;
    border: none;
    color: #fff;
}

.signature-save-btn:hover[b-0lpi7gjvxf] {
    background-color: #2980b9;
}

.signature-cancel-btn[b-0lpi7gjvxf] {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #555;
}

.signature-cancel-btn:hover[b-0lpi7gjvxf] {
    background-color: #e8e8e8;
}

/* ── Modal ── */
.signature-modal-backdrop[b-0lpi7gjvxf] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-modal[b-0lpi7gjvxf] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 520px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.signature-modal-header[b-0lpi7gjvxf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #4f667a;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.signature-modal-close[b-0lpi7gjvxf] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.signature-modal-close:hover[b-0lpi7gjvxf] {
    opacity: 0.75;
}

.signature-modal-body[b-0lpi7gjvxf] {
    padding: 12px 16px;
    background-color: #fafafa;
}

.signature-modal-canvas[b-0lpi7gjvxf] {
    width: 100%;
    height: 220px;
    border: 1px dashed #aaa;
    border-radius: 4px;
    background-color: #fff;
    cursor: crosshair;
    touch-action: none;
    display: block;
}

.signature-modal-footer[b-0lpi7gjvxf] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background-color: #fff;
}
/* /Components/Subs/AppCreators/ObjectCreators/SignatureObjectView.razor.rz.scp.css */
/* Signature Object View - Read-only display */

.signature-preview-wrapper[b-wn3scs10dc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
}

.signature-preview-img[b-wn3scs10dc] {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.signature-empty-placeholder[b-wn3scs10dc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-style: italic;
    font-size: 14px;
}

.signature-info[b-wn3scs10dc] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.signature-action-btn[b-wn3scs10dc] {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.signature-action-btn:hover[b-wn3scs10dc] {
    background-color: #e9e9e9;
    border-color: #999;
}

.signature-download-btn-view[b-wn3scs10dc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.signature-download-btn-view i[b-wn3scs10dc] {
    font-size: 12px;
}
/* /Components/Subs/AppCreators/ObjectCreators/VerificationObject.razor.rz.scp.css */
.verificationObject[b-wt5411b3ip] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.verification-row[b-wt5411b3ip] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.verification-datetime[b-wt5411b3ip] {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 1px solid #e3e7e8;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.85rem;
    color: black;
}

.verification-datetime:disabled[b-wt5411b3ip] {
    background-color: #f5f5f5;
    color: #888;
}

.verification-btn[b-wt5411b3ip] {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.verification-btn:disabled[b-wt5411b3ip] {
    opacity: 0.5;
    cursor: not-allowed;
}

.verification-signin-btn[b-wt5411b3ip] {
    background-color: #3498db;
    color: #fff;
}

.verification-signin-btn:hover:not(:disabled)[b-wt5411b3ip] {
    background-color: #2980b9;
}

.verification-signout-btn[b-wt5411b3ip] {
    background-color: #e74c3c;
    color: #fff;
}

.verification-signout-btn:hover:not(:disabled)[b-wt5411b3ip] {
    background-color: #c0392b;
}

.verification-location-row[b-wt5411b3ip] {
    padding-left: 2px;
    min-height: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verification-location-text[b-wt5411b3ip] {
    font-size: 0.78rem;
    word-break: break-all;
    color: #888;
}

/* Photo preview */
.verification-photo-wrapper[b-wt5411b3ip] {
    position: relative;
    display: inline-block;
    margin-top: 2px;
}

.verification-photo-img[b-wt5411b3ip] {
    display: block;
    max-width: 100%;
    max-height: 120px;
    border-radius: 4px;
    border: 1px solid #ddd;
    object-fit: cover;
}

.verification-photo-download-btn[b-wt5411b3ip] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 4px;
    color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.verification-photo-download-btn:hover[b-wt5411b3ip] {
    background: rgba(0, 0, 0, 0.8);
}

/* Camera modal */
.verification-camera-backdrop[b-wt5411b3ip] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-camera-modal[b-wt5411b3ip] {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    width: min(480px, 96vw);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.verification-camera-header[b-wt5411b3ip] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.95rem;
}

.verification-camera-close[b-wt5411b3ip] {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

.verification-camera-close:hover[b-wt5411b3ip] {
    color: #e74c3c;
}

.verification-camera-body[b-wt5411b3ip] {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

.verification-camera-video[b-wt5411b3ip] {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
}

.verification-camera-footer[b-wt5411b3ip] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}

/* Lightbox */
.verification-photo-img[b-wt5411b3ip] {
    cursor: zoom-in;
}

.verification-lightbox-backdrop[b-wt5411b3ip] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-lightbox-modal[b-wt5411b3ip] {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-lightbox-img[b-wt5411b3ip] {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    box-shadow: 0 4px 32px rgba(0,0,0,0.6);
}

.verification-lightbox-close[b-wt5411b3ip] {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1;
    color: #333;
    line-height: 1;
}

.verification-lightbox-close:hover[b-wt5411b3ip] {
    background: #e74c3c;
    color: #fff;
}
/* /Components/Subs/AppCreators/ObjectCreators/VerificationObjectView.razor.rz.scp.css */
/* Verification Object View - Read-only display */

.verification-row-view[b-a0dpe6w1kt] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e3e7e8;
}

.verification-location-row-view[b-a0dpe6w1kt] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e3e7e8;
}

.verification-label[b-a0dpe6w1kt] {
    font-weight: 600;
    min-width: 100px;
    color: #333;
    margin-right: 12px;
    font-size: 13px;
}

.verification-value[b-a0dpe6w1kt] {
    flex: 1;
    color: #666;
    font-size: 13px;
    word-wrap: break-word;
}

.verification-photo-wrapper-view[b-a0dpe6w1kt] {
    margin: 12px 0;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.verification-photo-img-view[b-a0dpe6w1kt] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
    object-fit: contain;
}
/* /Components/Subs/APS/LevelWOQuantityChartCpn.razor.rz.scp.css */
/* WOQuantityChartCpn - scoped styles intentionally empty.
   All woqc-* rules live in schedulePageV2.css so both
   WOQuantityChartCpn and WorkshopQuantityChartCpn share them
   without depending on Blazor scoped-CSS build order. */
/* /Components/Subs/APS/TableWOAPS.razor.rz.scp.css */
.wo-container[b-q4tb59p795] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Desktop Table Styles */
.table-container[b-q4tb59p795] {
    width: 100%;
    overflow-x: auto;
    background-color: #ffffff;
    border-radius: 0.125rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(116, 119, 128, 0.1);
    position: relative;
}

.wo-table[b-q4tb59p795] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    text-align: left;
}

.wo-table thead[b-q4tb59p795] {
    background: linear-gradient(135deg, #002555 0%, #1b3b6f 100%);
    position: relative;
}

.table-header-row[b-q4tb59p795] {
    display: table-row;
}

.table-header-cell[b-q4tb59p795] {
    padding: 1rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    cursor: move;
    user-select: none;
    transition: background-color 0.2s ease;
    position: relative;
}

.table-header-cell:last-child[b-q4tb59p795] {
    border-right: none;
}

.table-header-cell:hover[b-q4tb59p795] {
    background-color: rgba(255, 255, 255, 0.1);
}

.table-header-cell.dragging[b-q4tb59p795] {
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.2);
}

.table-header-cell.drag-over[b-q4tb59p795] {
    background-color: rgba(74, 144, 226, 0.2);
}

.column-drop-indicator[b-q4tb59p795] {
    position: absolute;
    top: 0;
    width: 3px;
    background: linear-gradient(to bottom, #4a90e2, #2e5c8a);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.5), 0 0 10px rgba(74, 144, 226, 0.3);
    z-index: 1000;
    pointer-events: none;
}

.table-row[b-q4tb59p795] {
    border-bottom: 1px solid rgba(196, 198, 209, 0.2);
    transition: background-color 0.2s ease;
    color: #191c1e;
}

.table-row:hover[b-q4tb59p795] {
    background-color: #f5f5f5;
}

.table-row-alt[b-q4tb59p795] {
    background-color: #f7f9fb;
}

.table-row-alt:hover[b-q4tb59p795] {
    background-color: #eff1f3;
}

.table-cell[b-q4tb59p795] {
    padding: 0.75rem 1rem;
    border-right: 1px solid rgba(196, 198, 209, 0.2);
}

.table-cell:last-child[b-q4tb59p795] {
    border-right: none;
}

.text-center[b-q4tb59p795] {
    text-align: center;
}

.text-primary[b-q4tb59p795] {
    color: #002555;
}

.font-bold[b-q4tb59p795] {
    font-weight: 700;
}

.font-mono[b-q4tb59p795] {
    font-family: 'Courier New', monospace;
}

.font-semibold[b-q4tb59p795] {
    font-weight: 600;
}

.text-xs[b-q4tb59p795] {
    font-size: 12px;
}

.py-3[b-q4tb59p795] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Utility Classes */
.d-flex[b-q4tb59p795] {
    display: flex;
}

.gap-1[b-q4tb59p795] {
    gap: 0.25rem;
}

.align-items-center[b-q4tb59p795] {
    align-items: center;
}

.justify-content-center[b-q4tb59p795] {
    justify-content: center;
}

.form-check-input[b-q4tb59p795] {
    width: 1em;
    height: 1em;
    margin-top: 0.125em;
    vertical-align: top;
    border: 1px solid #747780;
    border-radius: 0.125em;
    cursor: pointer;
    accent-color: #002555;
}

.form-check-input:checked[b-q4tb59p795] {
    background-color: #002555;
    border-color: #002555;
}

.form-check-input:focus[b-q4tb59p795] {
    outline: none;
    ring: 1px;
    ring-color: #002555;
}

.checkbox-wrapper[b-q4tb59p795] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.checkbox-wrapper .form-check-input[b-q4tb59p795] {
    margin: 0;
    flex-shrink: 0;
}

.table-action-bar[b-q4tb59p795] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

.btn-add-plan[b-q4tb59p795] {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #002555 0%, #1b3b6f 100%);
    color: #ffffff;
    font-size: 11px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 0.125rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-add-plan:hover[b-q4tb59p795] {
    opacity: 0.85;
}

.btn-add-plan:active[b-q4tb59p795] {
    transform: scale(0.97);
}
/* /Components/Subs/APS/WOQuantityChartCpn.razor.rz.scp.css */
/* WOQuantityChartCpn - scoped styles intentionally empty.
   All woqc-* rules live in schedulePageV2.css so both
   WOQuantityChartCpn and WorkshopQuantityChartCpn share them
   without depending on Blazor scoped-CSS build order. */
/* /Components/Subs/APS/WorkshopQuantityChartCpn.razor.rz.scp.css */
/* WOQuantityChartCpn - scoped styles intentionally empty.
   All woqc-* rules live in schedulePageV2.css so both
   WOQuantityChartCpn and WorkshopQuantityChartCpn share them
   without depending on Blazor scoped-CSS build order. */
/* /Components/Subs/CustomControls/ContextMenu.razor.rz.scp.css */
.context-menu-overlay[b-tmehtpbkgk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
}

/* ---- Built-in search box ---- */
.context-menu-search[b-tmehtpbkgk] {
    padding: 6px 8px 4px;
    border-bottom: 1px solid #e5e5e5;
}

.context-menu-search-input[b-tmehtpbkgk] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d0d7e2;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #f8f9ff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.context-menu-search-input:focus[b-tmehtpbkgk] {
    border-color: #3755c3;
    box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.12);
    background: #fff;
}

.context-menu[b-tmehtpbkgk] {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 4px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    animation: contextMenuFadeIn-b-tmehtpbkgk 0.15s ease-out;
    transform-origin: top left;
}

@keyframes contextMenuFadeIn-b-tmehtpbkgk {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-list[b-tmehtpbkgk] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu-item[b-tmehtpbkgk] {
    position: relative;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.context-menu-item:hover:not(.disabled)[b-tmehtpbkgk] {
    background-color: #f5f5f5;
}

.context-menu-item.disabled[b-tmehtpbkgk] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.context-menu-item-content[b-tmehtpbkgk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-icon[b-tmehtpbkgk] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.context-menu-icon-symbol[b-tmehtpbkgk] {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: #666;
}

.context-menu-text[b-tmehtpbkgk] {
    flex: 1;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.context-menu-shortcut[b-tmehtpbkgk] {
    font-size: 12px;
    color: #999;
    margin-left: 16px;
    font-family: 'Courier New', monospace;
}

.context-menu-arrow[b-tmehtpbkgk] {
    font-size: 10px;
    color: #999;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.context-menu-item:hover:not(.disabled) .context-menu-arrow[b-tmehtpbkgk] {
    transform: translateX(2px);
}

.context-menu-separator[b-tmehtpbkgk] {
    height: 1px;
    background-color: #e5e5e5;
    margin: 4px 8px;
}

.context-menu-group[b-tmehtpbkgk] {
    position: relative;
}

.context-menu-submenu[b-tmehtpbkgk] {
    position: absolute;
    left: 100%;
    top: -4px;
    margin-left: 2px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 4px 0;
    animation: submenuSlideIn-b-tmehtpbkgk 0.15s ease-out;
}

@keyframes submenuSlideIn-b-tmehtpbkgk {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Active/Selected state for better feedback */
.context-menu-item:active:not(.disabled)[b-tmehtpbkgk] {
    background-color: #e0e0e0;
}

/* Keyboard focus support */
.context-menu-item:focus[b-tmehtpbkgk] {
    outline: 2px solid #4CAF50;
    outline-offset: -2px;
}
/* /Components/Subs/CustomControls/SelectCustom.razor.rz.scp.css */
.dropdown[b-s3aa7yz6m7] {
    position: relative;
    display: inline-block;
}
.dropdown-input[b-s3aa7yz6m7] {
    padding-right: 20px;
    background-image: url(/img/icon/icons8-arrow-down-30SL.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    /*background-color: #E0F4FF;*/
    /*border: .0625rem solid #bfbfbf;*/
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1rem;
    font-weight: 350;
    padding-right: 15px;
    height: 1.625rem;
    outline: none;
    color: #000;
    /*font-weight: 400;*/
    line-height: normal;
}
/*.dropdown-input:focus {
    outline: none;
    border: 1px solid #305A80;
    border-radius: 0;
}*/
.dropdown-input:hover[b-s3aa7yz6m7] {
    cursor: pointer;
}
.dropdown-list[b-s3aa7yz6m7] {
    background: none;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: .0625rem solid #bfbfbf;
    border-top: none;
    border-radius: 0;
    display: none;
    z-index: 1000;
    top: 1.625rem;
}
.dropdown-list[b-s3aa7yz6m7]::-webkit-scrollbar {
    display: none;
}
.category[b-s3aa7yz6m7] {
    padding: 2px 8px;
    background-color: white;
    cursor: pointer;
    font-size: .875rem;
    /*font-weight: 400;*/
    color: #000;
}
.category:hover[b-s3aa7yz6m7] {
    background-color: #cccccc;
}
/* /Components/Subs/CustomControls/SelectCustomBlackInput.razor.rz.scp.css */
.dropdown[b-2y7dyi1roq] {
    position: relative;
    display: inline-block;
}
.dropdown-input[b-2y7dyi1roq] {
    padding-right: 20px;
    background-image: url(/img/icon/icons8-arrow-down-30SL.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    /*background-color: #E0F4FF;*/
    /*border: .0625rem solid #bfbfbf;*/
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1rem;
    font-weight: 350;
    padding-right: 15px;
    height: 1.625rem;
    outline: none;
    color: #000;
    /*font-weight: 400;*/
    line-height: normal;
}
/*.dropdown-input:focus {
    outline: none;
    border: 1px solid #305A80;
    border-radius: 0;
}*/
.dropdown-input:hover[b-2y7dyi1roq] {
    cursor: pointer;
}
.dropdown-list[b-2y7dyi1roq] {
    background: none;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: .0625rem solid #bfbfbf;
    border-top: none;
    border-radius: 0;
    display: none;
    z-index: 1000;
    top: 1.625rem;
}
.dropdown-list[b-2y7dyi1roq]::-webkit-scrollbar {
    display: none;
}
.category[b-2y7dyi1roq] {
    padding: 2px 8px;
    background-color: white;
    cursor: pointer;
    font-size: .875rem;
    /*font-weight: 400;*/
    color: #000;
}
.category:hover[b-2y7dyi1roq] {
    background-color: #cccccc;
}
/* /Components/Subs/CustomControls/TablecustomV2.razor.rz.scp.css */
.sap-table[b-idsj69xnft] {
    border-collapse: collapse; /* or 'separate' if you need spacing */
    width: 100%;
}

    .sap-table[b-idsj69xnft], .sap-table th[b-idsj69xnft], .sap-table td[b-idsj69xnft] {
        border: 1px solid #e6e6e6;
    }

        .sap-table td[b-idsj69xnft] {
            border-bottom: 1px solid #ececec;
        }

        .sap-table thead th[b-idsj69xnft] {
            background: #fafafa;
            border-bottom: 2px solid #ddd;
        }

.curr-table tbody[b-idsj69xnft] {
    border: none !important;
}
/* /Components/Subs/CustomControls/TableCustomV3.razor.rz.scp.css */
.sap-table[b-7etwm8xqsg] {
    border-collapse: collapse; /* or 'separate' if you need spacing */
    width: 100%;
}

    .sap-table[b-7etwm8xqsg], .sap-table th[b-7etwm8xqsg], .sap-table td[b-7etwm8xqsg] {
        border: 1px solid #e6e6e6;
    }

        .sap-table td[b-7etwm8xqsg] {
            border-bottom: 1px solid #ececec;
        }

        .sap-table thead th[b-7etwm8xqsg] {
            background: #fafafa;
            border-bottom: 2px solid #ddd;
        }

.curr-table tbody[b-7etwm8xqsg] {
    border: none !important;
}
    .curr-table tbody tr[b-7etwm8xqsg] {
        background-color: white; /* hoặc màu bạn muốn */
    }
.sap-table[b-7etwm8xqsg] {
    border-top: none!important;
}

.sap-row-highlighted[b-7etwm8xqsg] {
    background-color: #fffadf !important;
}

/* /Components/Subs/EditParamModal.razor.rz.scp.css */
/* /Components/Subs/NewsDashboardCpn.razor.rz.scp.css */
.news-dashboard-page[b-xldwvws52k] {
    padding: 0;
    max-width: 100%;
    margin: 0;
    min-height: auto; /* Thay vì calc(100vh - 3rem) */
    overflow: visible;
}

.dashboard-split-container[b-xldwvws52k] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 3rem);
    gap: 0;
}

    .dashboard-split-container[style*="display: none"][b-xldwvws52k] {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

.dashboard-left-panel[b-xldwvws52k],
.dashboard-right-panel[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible; /* THAY ĐỔI: từ hidden sang visible */
}

.dashboard-left-panel[b-xldwvws52k] {
    border-right: 2px solid #e9ecef;
    background: #f8f9fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-right-panel[b-xldwvws52k] {
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Panel Header */
.panel-header[b-xldwvws52k] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1.5rem;
    height: 60px;
    background: linear-gradient(135deg, #2c4a65, #3d5c7a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.dashboard-left-panel .panel-header[b-xldwvws52k] {
    justify-content: space-between;
}

.panel-title[b-xldwvws52k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.panel-content[b-xldwvws52k] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    min-height: 0;
}

.calendar-content[b-xldwvws52k] {
    padding: 0;
    background: white;
    overflow: visible !important; /* ĐỔI: từ auto !important sang visible !important */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btn-settings[b-xldwvws52k] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: none;
}

    .btn-settings img[b-xldwvws52k] {
        filter: brightness(0) invert(1);
    }

/* Settings Panel */
.news-settings-panel[b-xldwvws52k] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown-b-xldwvws52k 0.3s ease;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

    .news-settings-panel[b-xldwvws52k]::-webkit-scrollbar {
        width: 8px;
    }

    .news-settings-panel[b-xldwvws52k]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .news-settings-panel[b-xldwvws52k]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .news-settings-panel[b-xldwvws52k]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.settings-container[b-xldwvws52k] {
    padding: 2rem;
}

.settings-section[b-xldwvws52k] {
    margin-bottom: 2rem;
}

    .settings-section:last-child[b-xldwvws52k] {
        margin-bottom: 0;
    }

.section-header[b-xldwvws52k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

    .section-header h3[b-xldwvws52k] {
        font-size: 1.25rem;
        color: #2c4a65;
        margin: 0;
        font-weight: 600;
    }

.btn-collapse[b-xldwvws52k] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}

    .btn-collapse:hover[b-xldwvws52k] {
        color: #2c4a65;
    }

/* Form */
.add-feature-form[b-xldwvws52k] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    animation: fadeIn-b-xldwvws52k 0.3s ease;
}

.form-row[b-xldwvws52k] {
    margin-bottom: 1.5rem;
}

.form-group[b-xldwvws52k] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-xldwvws52k] {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

.form-input[b-xldwvws52k],
.form-textarea[b-xldwvws52k] {
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

    .form-input:focus[b-xldwvws52k],
    .form-textarea:focus[b-xldwvws52k] {
        outline: none;
        border-color: #2c4a65;
        box-shadow: 0 0 0 3px rgba(44, 74, 101, 0.1);
    }

.form-textarea[b-xldwvws52k] {
    resize: vertical;
    min-height: 80px;
}

/* Form Actions */
.form-actions[b-xldwvws52k] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-add[b-xldwvws52k],
.btn-cancel[b-xldwvws52k] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-add[b-xldwvws52k] {
    background: #28a745;
    color: white;
}

    .btn-add:hover[b-xldwvws52k] {
        background: #218838;
        transform: translateY(-2px);
    }

    .btn-add img[b-xldwvws52k] {
        filter: brightness(0) invert(1);
    }

.btn-cancel[b-xldwvws52k] {
    background: #6c757d;
    color: white;
}

    .btn-cancel:hover[b-xldwvws52k] {
        background: #5a6268;
    }

/* Features Management List */
.features-management-list[b-xldwvws52k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.feature-management-item[b-xldwvws52k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s;
}

    .feature-management-item.active[b-xldwvws52k] {
        border-color: #28a745;
        background: #f0fff4;
    }

    .feature-management-item:hover[b-xldwvws52k] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.feature-details[b-xldwvws52k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.feature-text[b-xldwvws52k] {
    flex: 1;
    min-width: 0;
}

    .feature-text h4[b-xldwvws52k] {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
        margin: 0 0 0.25rem 0;
    }

    .feature-text p[b-xldwvws52k] {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.btn-delete[b-xldwvws52k] {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    opacity: 0.6;
    color: #dc3545;
}

    .btn-delete:hover[b-xldwvws52k] {
        background: none !important;
        opacity: 1;
    }

.management-actions[b-xldwvws52k] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-edit-mini[b-xldwvws52k] {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    opacity: 0.6;
    color: #6c757d;
}

    .btn-edit-mini:hover[b-xldwvws52k] {
        background: none !important;
        opacity: 1;
        color: #2c4a65;
    }

.features-management-list[b-xldwvws52k]::-webkit-scrollbar {
    width: 8px;
}

.features-management-list[b-xldwvws52k]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.features-management-list[b-xldwvws52k]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .features-management-list[b-xldwvws52k]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Main Content */
.news-dashboard-content[b-xldwvws52k] {
    /* Inline style từ Razor xử lý */
}

.loading-container[b-xldwvws52k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
}

.loading-text[b-xldwvws52k] {
    color: #6c757d;
    font-size: 1.1rem;
}

.empty-state[b-xldwvws52k] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-image[b-xldwvws52k] {
    width: 200px;
    margin-bottom: 2rem;
    opacity: 0.6;
}

.empty-state h2[b-xldwvws52k] {
    font-size: 1.75rem;
    color: #2c4a65;
    margin-bottom: 1rem;
}

.empty-state p[b-xldwvws52k] {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Features Grid */
.features-grid[b-xldwvws52k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-card[b-xldwvws52k] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .feature-card:hover[b-xldwvws52k] {
        transform: translateY(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

.card-image-container[b-xldwvws52k] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card-image[b-xldwvws52k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.feature-card:hover .card-image[b-xldwvws52k] {
    transform: scale(1.1);
}

.card-overlay[b-xldwvws52k] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(44, 74, 101, 0.9), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}

.feature-card:hover .card-overlay[b-xldwvws52k] {
    opacity: 1;
}

.view-detail[b-xldwvws52k] {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.card-body[b-xldwvws52k] {
    padding: 1.5rem;
}

.card-title[b-xldwvws52k] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c4a65;
    margin: 0 0 0.75rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.card-description[b-xldwvws52k] {
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.card-footer[b-xldwvws52k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.card-date[b-xldwvws52k] {
    color: #adb5bd;
    font-size: 0.875rem;
}

.btn-read-more[b-xldwvws52k] {
    background: none;
    border: none;
    color: #2c4a65;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-read-more:hover[b-xldwvws52k] {
        color: #1f3449;
        transform: translateX(4px);
    }

/* Feature Detail Modal */
.feature-modal-overlay[b-xldwvws52k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
    animation: fadeIn-b-xldwvws52k 0.3s ease;
}

.feature-modal[b-xldwvws52k] {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-xldwvws52k 0.3s ease;
}

.modal-header[b-xldwvws52k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
}

    .modal-header h2[b-xldwvws52k] {
        margin: 0;
        font-size: 1.5rem;
        color: #2c4a65;
    }

.btn-close-modal[b-xldwvws52k] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .btn-close-modal:hover[b-xldwvws52k] {
        background: #f8f9fa;
        color: #212529;
    }

.modal-body[b-xldwvws52k] {
    padding: 2rem;
}

.modal-image[b-xldwvws52k] {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.modal-text[b-xldwvws52k] {
    color: #495057;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Animations */
@keyframes slideDown-b-xldwvws52k {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-xldwvws52k {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-xldwvws52k {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Left Column Layout */
.dashboard-left-column[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ĐỔI LẠI: từ visible sang hidden */

    min-height: 0;
    gap: 0;
}
.calendar-section[b-xldwvws52k] {
    flex: 1 1 auto;
    border-right: 2px solid #e9ecef;
    background: #f8f9fa;
    overflow: visible; /* ← ĐỔI thành visible */
    min-height: 600px;
    display: flex;
    flex-direction: column;
}
/* Dashboard Top Row - Container chính */
.dashboard-top-row[b-xldwvws52k] {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    gap: 0;
}

/* WRAPPER CHO CALENDAR - Đảm bảo cùng chiều cao với News Dashboard */
.calendar-wrapper-container[b-xldwvws52k] {
    flex: 1; /* Chia đều không gian với dashboard-right-column */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    background: #f8f9fa;
    border-right: 2px solid #e9ecef;
}

/* Dashboard Left Column */
.dashboard-left-column[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 0;
}

/* Calendar Section */
.calendar-section[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Dashboard Left Panel */
.dashboard-left-panel[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Panel Content */
.panel-content[b-xldwvws52k] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    min-height: 0;
}

/* Calendar Content */
.calendar-content[b-xldwvws52k] {
    padding: 0;
    background: white;
    overflow: auto !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Calendar Wrapper */
.calendar-wrapper[b-xldwvws52k] {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1;
}

    .calendar-wrapper[b-xldwvws52k]::-webkit-scrollbar {
        height: 8px;
    }

    .calendar-wrapper[b-xldwvws52k]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .calendar-wrapper[b-xldwvws52k]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .calendar-wrapper[b-xldwvws52k]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Dashboard Right Column - News Dashboard */
.dashboard-right-column[b-xldwvws52k] {
    flex: 1; /* Chia đều không gian với calendar-wrapper-container */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.dashboard-right-panel[b-xldwvws52k] {
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .features-grid[b-xldwvws52k] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .calendar-wrapper-container[b-xldwvws52k] {
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .dashboard-split-container[b-xldwvws52k] {
        flex-direction: column;
    }

    .dashboard-top-row[b-xldwvws52k] {
        flex-direction: column;
    }

    .calendar-wrapper-container[b-xldwvws52k] {
        border-right: none;
        border-bottom: 2px solid #e9ecef;
        min-height: 400px;
        max-height: 50vh;
    }

    .dashboard-left-column[b-xldwvws52k] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        min-height: 0;
        gap: 0;
    }

    .calendar-section[b-xldwvws52k] {
        flex: 1;
        overflow: auto;
        min-height: 350px;
    }

    .calendar-content[b-xldwvws52k] {
        overflow-x: auto;
        overflow-y: visible;
    }

    .dashboard-right-column[b-xldwvws52k] {
        flex: 1;
        min-height: 400px;
    }

    .stickers-section[b-xldwvws52k] {
        flex: 0 0 auto;
    }

    .dashboard-left-panel[b-xldwvws52k] {
        border-right: none;
        border-bottom: 2px solid #e9ecef;
        max-height: none;
    }
}
.summary-section[b-xldwvws52k] {
    flex: 0 0 100px;
    border-right: 2px solid #e9ecef;
    border-top: 2px solid #e9ecef;
    background: white;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    max-height: 100px;
    flex-shrink: 0;
}





   



.dashboard-top-row[b-xldwvws52k] {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden; /* ĐỔI LẠI: từ visible sang hidden */
    min-height: 0;
}
/* Right Column */
.dashboard-right-column[b-xldwvws52k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: calc(100vh ); /* 60px = header height */
}

/* Announcements Sections */
.announcements-section[b-xldwvws52k] {
    margin-bottom: 3rem;
}

    .announcements-section.older-section[b-xldwvws52k] {
        padding-top: 2rem;
        border-top: 2px solid #e9ecef;
    }

.section-title[b-xldwvws52k] {
    font-size: 1.5rem;
    color: #2c4a65;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge-new[b-xldwvws52k] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    animation: pulse-b-xldwvws52k 2s infinite;
}

@keyframes pulse-b-xldwvws52k {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.feature-card.new-feature[b-xldwvws52k] {
    border: 2px solid #ff6b6b;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.2);
}

    .feature-card.new-feature:hover[b-xldwvws52k] {
        box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3);
    }

.loading-container-small[b-xldwvws52k] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.empty-state-small[b-xldwvws52k] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

/* STICKERS SECTION - QUAN TRỌNG */
.stickers-section[b-xldwvws52k] {
    flex: 0 0 auto; /* THAY ĐỔI: Cho phép tự động điều chỉnh chiều cao */
    border-top: 2px solid #e9ecef;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: visible; /* THAY ĐỔI: từ hidden sang visible */
}

.stickers-header[b-xldwvws52k] {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #2c4a65, #3d5c7a);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stickers-content[b-xldwvws52k] {
    flex: 1;
    overflow: visible; /* THAY ĐỔI: từ auto sang visible */
    padding: 1rem;
}



.toggle-icon[b-xldwvws52k] {
    font-size: 1rem;
    transition: transform 0.3s ease;
}
/* Unified Header Bar - Gộp 3 thanh */
.unified-header-bar[b-xldwvws52k] {
    background: linear-gradient(135deg, #2c4a65, #3d5c7a);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 6rem;
    z-index: 8;
    border-radius: 0.8rem 0.8rem 0 0;
}
.header-left[b-xldwvws52k] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.header-center[b-xldwvws52k] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.btn-toggle-dashboard[b-xldwvws52k] {
    background: none;
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-toggle-dashboard:hover[b-xldwvws52k] {
        background: none;
        transform: scale(1.2);
    }

.toggle-icon[b-xldwvws52k] {
    font-size: 0.9rem;
}

.header-title[b-xldwvws52k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}


.header-right[b-xldwvws52k] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-settings[b-xldwvws52k] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-settings img[b-xldwvws52k] {
        filter: brightness(0) invert(1);
    }

.sticker-grid[b-xldwvws52k] {
    display: grid;
    gap: 1.5rem;
}
/* Responsive */
@media (max-width: 1024px) {
    .features-grid[b-xldwvws52k] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .dashboard-split-container[b-xldwvws52k] {
        flex-direction: column;
    }

    .dashboard-left-panel[b-xldwvws52k] {
        border-right: none;
        border-bottom: 2px solid #e9ecef;
        max-height: 50vh;
    }

    .dashboard-left-column[b-xldwvws52k] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* ĐỔI LẠI: từ visible sang hidden */
        min-height: 0;
        gap: 0;
    }
    .stickers-section[b-xldwvws52k] {
        flex: 0 0 auto;
    }

    .calendar-section[b-xldwvws52k] {
        flex: 1 1 auto;
        border-right: 2px solid #e9ecef;
        background: #f8f9fa;
        overflow: hidden; /* ĐỔI LẠI: từ visible sang hidden */
        min-height: 0;
        display: flex;
        flex-direction: column;
    }


   

  

    .stat-card[b-xldwvws52k] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
    }

    .panel-header[b-xldwvws52k] {
        padding: 1rem;
    }

    .panel-title[b-xldwvws52k] {
        font-size: 1.25rem;
    }

    .panel-content[b-xldwvws52k] {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
        position: relative;
        min-height: 0;
    }



    .features-grid[b-xldwvws52k] {
        grid-template-columns: 1fr;
    }

    .settings-container[b-xldwvws52k] {
        padding: 1rem;
    }

    .form-actions[b-xldwvws52k] {
        flex-direction: column;
    }

    .btn-add[b-xldwvws52k],
    .btn-cancel[b-xldwvws52k] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Subs/SapFioriControls/SfCalendar.razor.rz.scp.css */
.sap-calendar[b-zi914bv0iq] {
    width: 280px;
    padding: 12px;
    background: #f7f7f7;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-family: Arial, sans-serif;
}

/* HEADER */
.sap-calendar__header[b-zi914bv0iq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sap-calendar__title[b-zi914bv0iq] {
    font-weight: 600;
    color: #0070f2;
    cursor: pointer;
}

.sap-calendar__nav[b-zi914bv0iq] {
    cursor: pointer;
    color: #0070f2;
    font-size: 18px;
}

/* WEEKDAYS */
.sap-calendar__weekdays[b-zi914bv0iq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.sap-calendar__weekdays--with-week[b-zi914bv0iq] {
    grid-template-columns: 30px repeat(7, 1fr);
}

.sap-calendar__weekdays div[b-zi914bv0iq] {
    text-align: center;
    font-size: 12px;
    color: #6a6d70;
}

/* GRID */
.sap-calendar__grid[b-zi914bv0iq] {
    display: grid;
    gap: 6px;
}

.sap-calendar__grid--with-week[b-zi914bv0iq] {
    grid-template-columns: 30px repeat(7, 1fr);
}

.sap-calendar__grid--month[b-zi914bv0iq],
.sap-calendar__grid--year[b-zi914bv0iq] {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

/* WEEK NUMBER */
.sap-calendar__week[b-zi914bv0iq] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
}

/* DAY */
.sap-calendar__day[b-zi914bv0iq] {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #32363a;
}

    .sap-calendar__day:hover[b-zi914bv0iq] {
        background: #eaeaea;
    }

/* STATES */
.sap-calendar__day--muted[b-zi914bv0iq] {
    color: #a0a0a0;
}

.sap-calendar__day--weekend[b-zi914bv0iq] {
    background: #eeeeee;
}

.sap-calendar__day--today[b-zi914bv0iq] {
    border: 2px solid #0070f2;
}

.sap-calendar__day--active[b-zi914bv0iq] {
    border: 2px solid #0070f2;
    color: #0070f2;
    font-weight: 600;
}

/* MONTH / YEAR CELL */
.sap-calendar__cell[b-zi914bv0iq] {
    text-align: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    color: #0070f2;
}

    .sap-calendar__cell:hover[b-zi914bv0iq] {
        background: #eaeaea;
    }
/* /Components/Toasts/FloatingToast.razor.rz.scp.css */
.fab-button[b-cjacnvm4am] {
    position: fixed;
    bottom: 80px;
    right: 32px;
    width: 56px;
    height: 56px;
    background-color: #0047ab;
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    transition: transform 0.2s ease;
    font-size: 24px;
}

    .fab-button:hover[b-cjacnvm4am] {
        transform: scale(1.1);
    }

    .fab-button:active[b-cjacnvm4am] {
        transform: scale(0.95);
    }

.quick-access-panel[b-cjacnvm4am] {
    position: fixed;
    bottom: 150px;
    right: 32px;
    width: 360px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 24px;
    transition: all 0.3s ease;
}

.panel-open[b-cjacnvm4am] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.panel-closed[b-cjacnvm4am] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
}

.panel-header[b-cjacnvm4am] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.panel-title[b-cjacnvm4am] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #191c1e;
}

.close-icon[b-cjacnvm4am] {
    cursor: pointer;
    color: #737784;
    font-size: 24px;
    transition: color 0.2s ease;
}

    .close-icon:hover[b-cjacnvm4am] {
        color: #191c1e;
    }

.panel-content[b-cjacnvm4am] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Grid */
.stats-grid[b-cjacnvm4am] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.stat-item[b-cjacnvm4am] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background-color: #f2f4f6;
    border-radius: 4px;
}

.stat-label[b-cjacnvm4am] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #737784;
    margin-bottom: 4px;
}

.stat-value[b-cjacnvm4am] {
    font-size: 18px;
    font-weight: 700;
}

/* Exceptions Section */
.exceptions-section[b-cjacnvm4am] {
    margin-top: 8px;
}

.exceptions-title[b-cjacnvm4am] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #737784;
    margin: 0 0 8px 0;
}

.exceptions-list[b-cjacnvm4am] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exception-item[b-cjacnvm4am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid rgba(115, 119, 132, 0.3);
    border-radius: 4px;
    background-color: rgba(242, 244, 246, 0.5);
    transition: background-color 0.2s ease;
}

    .exception-item:hover[b-cjacnvm4am] {
        background-color: #f2f4f6;
    }

.exception-info[b-cjacnvm4am] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exception-date[b-cjacnvm4am] {
    font-size: 11px;
    font-weight: 700;
    color: #191c1e;
}

.exception-reason[b-cjacnvm4am] {
    font-size: 10px;
    color: #737784;
}

.exception-action[b-cjacnvm4am] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exception-badge[b-cjacnvm4am] {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

    .exception-badge.Late[b-cjacnvm4am] {
        background-color: rgba(251, 146, 60, 0.1);
        color: #fb923c;
    }

    .exception-badge.Absent[b-cjacnvm4am] {
        background-color: rgba(186, 26, 26, 0.1);
        color: #ba1a1a;
    }

    .exception-badge.Early\ Leave[b-cjacnvm4am] {
        background-color: rgba(168, 85, 247, 0.1);
        color: #a855f7;
    }

.exception-btn[b-cjacnvm4am] {
    background: none;
    border: none;
    color: #0047ab;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .exception-btn:hover[b-cjacnvm4am] {
        opacity: 1;
    }
/* /Components/WOBarCell.razor.rz.scp.css */
.wo-cell-bar[b-cfqvk0ehj3] {
    position: relative;
    width: 100%;
    min-width: 3.5rem;
    height: 1.1rem;
    background: #e5e7eb;
    border-radius: 0.25rem;
    overflow: hidden;
}

.wo-cell-bar-fill[b-cfqvk0ehj3] {
    height: 100%;
    border-radius: 0.25rem;
    transition: width .2s;
}

.wo-cell-bar-label[b-cfqvk0ehj3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    pointer-events: none;
}