/* =====================================
   LAYOUT COMPONENT STYLES
   ===================================== */

@layer components {
    /* ============= Body Background ============= */
    body{
        background: var(--surface-third) !important;
    }

    /* ============= Main Layout Wrappers ============= */
    /* Loading and Inner Wrapper Background */
    #loadingWrapper, #innerWrapper{
        background: var(--surface-third) !important;
    }

    /* Grid Item Background */
    #wrapper .grid .grid-item{
        background: var(--surface-third) !important;
    }

    /* ============= Broker Dashboard ============= */
    /* Broker Dashboard Layout */
    #broker-tab-dashboard{
        display: flex;
    }

    /* Agent Profile Component */
    #broker-tab-dashboard .agent-profile{
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;
    }

    /* Agent Info Component */
    #broker-tab-dashboard .agent-info{
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;

        margin-left: 24px;
    }

    /* =====================================
    DASHBOARD
    ===================================== */
    #dashboardOverviewWrapper:has(> #dashboard-grid){
        margin-left: 20px !important;
        margin-right: 20px !important;
        margin-top: 12px !important;
    }

    /* =====================================
    POLICIES
    ===================================== */
    .policy-data-left{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    .policy-data-left .select2-container{
        min-width: none !important;
    }

    .btn-input-parent > .flex input, .flex > .flex input, .btn-input-parent > .flex select, .flex > .flex select{
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    #pa_type, #pa_value_type{
        border-radius: 0 !important;
        min-width: 28px !important;
        padding-left: 4px !important;
        padding-right: 14px !important;
        border-left: none !important;
    }

    .btn-input-parent > .flex button, .flex > .flex button{
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .btn-input-parent > button{
        margin-left: 8px !important;
    }

    .flex > .flex button:first-child{
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Prem. Adjustment: keep the button group at natural width, let the
       input/dropdowns shrink instead. */
    div[data-role="pa"] > .flex + .flex {
        flex-shrink: 0;
    }

    /* Fit lock+Set+Update on one line; wrap is a fallback if it ever
       doesn't fit (long translation, zoom), instead of clipping. */
    div[data-role="pa"] .flex > .flex {
        flex-wrap: wrap;
    }

    div[data-role="pa"] .flex > .flex button {
        flex-shrink: 0;
        min-width: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Set squared off by default (left side handled by the generic rule
       above). Needs .ui-corner-all for specificity to beat buttons.css's
       .ui-button.ui-corner-all rule (same @layer, both !important). */
    button.ui-corner-all[data-role="calculate-pa"]{
        border-radius: 0 !important;
    }

    /* ...unless Update isn't visible, then Set is the last button and
       should look like it: :last-child covers Update not rendered,
       .pa-update-hidden (toggled by load_policy.js) covers it being
       hidden at runtime, since display:none won't affect :last-child. */
    button.ui-corner-all[data-role="calculate-pa"]:last-child,
    div[data-role="pa"].pa-update-hidden button.ui-corner-all[data-role="calculate-pa"]{
        border-top-right-radius: var(--btn-radius) !important;
        border-bottom-right-radius: var(--btn-radius) !important;
    }

    .total-price{
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .total-price p, .total-price label{
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
        margin: 0;
        padding: 0;
    }

    .total-price p{
        color: var(--success) !important;
    }

    .total-price p.red{
        color: var(--destructive) !important;
    }

    .total-price p.big-p{
        color: var(--foreground-primary) !important;
    }

    [data-role="price-parent"] span > p{
        font-size: var(--font-size-base);
        color: var(--foreground-second);
    }

    #policy-form-wrapper, #policy-referral-wrapper, #policy-endorsement-wrapper, 
    #policy-charges-wrapper, .block-info{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
    }

    [data-role="price-parent"]{
        margin-top: 16px;
        border-top: 1px solid var(--border);
    }

    #policy-no-referral-information span{
        font-size: var(--font-size-base);
        color: var(--foreground-second);
    }


    .infoBlock{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
    }

    #claims_results{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
        padding: 15px;
    }

    #claims_listing_wrapper > div {
        margin-bottom: 20px;
    }

    .submit-parent{
        background-color: transparent !important;
        border: none !important;
        border-top: 1px solid var(--border) !important;
        font-size: 1em !important;
    }

    .submit-parent button {
        font-size: 1em;
    }

    #policy-form .ui-tabs-nav{
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: revert !important;
    }

    #policy-form .ui-tabs-panel{
        padding: 0 !important;
    }

    /* =====================================
    ACTIVITIES
    ===================================== */

    .box-list li{
        font-size: var(--font-size-base);
        color: var(--foreground-second);
    }

    .box-list.bold li{
        font-weight: 600;
        color: var(--foreground-primary);
    }

    div[data-role="manual-transaction-row"]{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-second);
        padding: 15px;
        margin-bottom: 10px;
    }

    .diary-list{
        padding: 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        margin-top: 20px;
    }

    .diary-list-parent{
        width: calc(75% - 32px);
    }

    .div-paginator{
        padding: 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        margin-top: 20px;
    }

    .div-paginator:empty{
        display: none;
    }

    li.diary{
        border: 1px solid var(--border);
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    li.diary:first-of-type{
        border: none;
    }

    .diary-top a[data-role="load-activity"]{
        font-size: var(--font-size-lg) !important;
        color: var(--foreground-primary) !important;
    }

    .diary-top a[data-role="load-comment"]{
        font-size: var(--font-size-lg) !important;
        color: var(--foreground-second) !important;
    }

    .diary-top span{
        font-size: var(--font-size-base);
    }

    .log-parent{
        padding: 0px 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    .diary-bottom > div:first-of-type{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .diary-bottom > div:first-of-type .tag{
        margin: 0 !important
    }

    .log-block{
        border-left: 1px solid var(--border);
    }

    .log-block::before{
        background-color: var(--foreground-second);
    }

    .log-block .right-log{
        color: var(--foreground-second);
    }

    .log-block .right-log a{
        color: var(--foreground-primary);
    }

    
    .activity-left .activity-box-parent{
        display: none;
    }

    .activity-preview .activity-box-parent{
        display: flex;
        gap: 8px;
    }

    .activity-sm-box{
        padding: 12px;
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        flex: 1;
        margin: 0;
    }

    .activity-box-parent > .clear{
        display: none;
    }

    .activity-left{
        background-color: var(--surface-third);
        border-color: var(--border);
    }

    .activity-preview .activity-left .required{
        border-color: var(--border);
        padding-right: 16px;
    }

    #editActivityForm .required.checkbox-parent:first-of-type > p{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .comment-parent, .new-comment{
        border-color: var(--border);
    }

    /* =====================================
    POLICIES OVERVIEW
    ===================================== */
    .inner-search-table .newTableHeading{
        padding: 8px 16px !important;
    }

    #policy-data-form{
        background-color: transparent !important;
    }

    #policies-overview-wrapper table,
    #renewals-overview-wrapper table,
    div[data-role="claims-overview"] table,
    div[data-role="settlements-overview"] table,
    #claims-recover-container table,
    #firms-overview-wrapper table,
    #authorise_broker_overview table,
    #consumerOverviewWrapper table,
    #productsListingWrapper table,
    #taxesWrapper table,
    div[data-role="insurers-insurers"] table,
    div[data-role="contracts-overview"] table,
    #datasetsOverviewWrapper table,
    #fieldsOverviewWrapper table,
    #eavObjectsOverviewWrapperDiv table{
        opacity: 1;
        /* box-shadow: var(--shadow-xl); */
    }

    #policy-activities,
    #policy-notes,
    #policy-logs,
    #policy-claims,
    #policy-settlements,
    #policy-invoices,
    #policy-journals,
    #policy-documents,
    #policy-cancellation-overview{
        padding: 20px 30px;
    }

    #policy-activities > .search-parent, 
    #policy-notes > .search-parent,
    #policy-logs > .search-parent,
    #policy-claims > .search-parent,
    #policy-settlements > .search-parent,
    #policy-invoices > .search-parent,
    #policy-journals > .search-parent,
    #policy-documents > .row,
    #policy-cancellation-completed-tab,
    #policy-admin-cancellation{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);

        /* Use clip, not hidden. overflow:hidden makes this card a scroll
           container, so the sticky search sidebar (top:164px) anchors to the card
           instead of the window and sits 164px below the card top whenever the
           table column is taller than the sidebar. overflow:clip clips to the
           rounded corners without creating a scroll container. */
        overflow: clip;
    }

    /* CP-5851: the Files tab was missing the framed container every other search
       tab has. Its .search-parent is nested one level deeper than the others
       (#policy-files > div > .search-parent), so the direct-child group above
       cannot reach it — use a descendant selector to give Files the same frame. */
    #policy-files .search-parent{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        overflow: clip; /* see comment above */
    }

    /* CP-5852: when the search bar is open the sidebar can be taller than a short
       Claims/Settlements table, so the framed container's bottom border ends up
       well below the table and the table looks like it has no bottom border.
       Give the table card its own bottom edge so it is always closed off under
       the last row, regardless of the sidebar height. */
    #policy-claims .tableData,
    #policy-settlements .tableData{
        border-bottom: 1px solid var(--border);
    }

    #policy-documents > .row,
    #policy-admin-cancellation{
        padding: 16px;
    }

    #policy-admin-cancellation-form > .w-65p{
        padding-right: 24px !important;
    }

    #policy-form-container > div:not(.first-of-type){
        margin-top: 20px !important;
    }

    #policy-admin-cancellation > .submit-parent{
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
    }

    .inner-search-table .diary-list-parent{
        padding: 16px !important;
        padding-right: 12px !important;
        width: calc(75% - 16px);
    }

    .inner-search-table .my-list-parent{
        border: none;
        padding: 16px !important;
        padding-left: 12px !important;
        padding-right: 0px !important;
    }

    .inner-search-table .diary-list{
        margin-top: 0 !important;
    }

    .inner-search-table .log-parent{
        padding: 8px 16px;
    }

    body div.policyPaymentInfo, body div.policySoapInfo, body div.policyDocsInfo, body div.policyLinkingInfo {
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background-color: var(--surface-primary);
    }

    .inner-search-table .no-activities, .inner-search-table .no-notes{
        padding-left: 0 !important;
        border-top: none !important;
    }

    #brokers-tabs .table-name{
        color: var(--foreground-primary) !important;
        font-size: var(--font-size-lg) !important;
        text-transform: none !important;
    }

    #brokers-tabs h3{
        color: var(--foreground-second) !important;
        font-size: var(--font-size-base) !important;
    }

    #borkers-tabs .profile-bottom th{
        border-color: var(--border);
    }

    #brokers-tabs .ui-tabs-nav li.ui-tabs-selected,
    #product-tabs .ui-tabs-nav li.ui-tabs-selected,
    #policy .ui-tabs-nav li.ui-tabs-selected {
        padding-bottom: 0;
    }

    /* =====================================
    BROKER OVERVIEW
    ===================================== */
    #firm-tab-users-tabs,
    #broker-products-and-policies,
    #broker-tab-products-policies.second-layer-tabs-parent,
    #broker-tab-specialisms,
    #broker-tab-notes,
    #broker-tab-meetings,
    #broker-tab-branding,
    #broker-product_management-v3,
    #broker-tab-additional,
    #broker-tab-digital-signature,
    #broker-tab-dashboard,
    #broker-tab-details,
    #broker-tab-children{
        padding: 20px 30px !important;
    }

    #broker-products-and-policies {
        padding-top: 0 !important;
    }

    #broker-assigned-policies {
        border: 0 !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .broker-policy-transfer-check:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    #edit-broker-form,
    #firm-tab-users-tabs > .search-parent,
    #broker-products-and-policies,
    #specialism-tabs,
    #broker-tab-notes > .search-parent,
    #broker-tab-meetings-tabs,
    #broker-edit-additional,
    #digital-signature-form,
    #createFirmForm{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);

        overflow: hidden;
    }

    #broker-children-wrapper .overview-table{
        padding: 0px !important;
    }

    #broker-children-wrapper button[data-role="add-child"]{
        margin-bottom: 16px !important;
    }

    #broker-children-wrapper .current, .current > td{
        background-color: var(--success-light) !important;
    }

    .ui-tabs{
        padding: 0px;
    }

    #broker-tab-products-policies > .ui-tabs,
    #specialism-tabs,
    #broker-tab-meetings-tabs{
        padding: 0px !important;
        overflow: hidden;
    }

    #broker-products-and-policies > .ui-tabs-nav,
    #specialism-tabs > .ui-tabs-nav,
    #broker-tab-meetings-tabs > .ui-tabs-nav{
        margin: 0px !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
    }

    #edit-broker-form,
    #search_meetings_form,
    #create_meeting_form,
    #broker-tab-performance-overview,
    #create_review_form,
    #broker-edit-additional,
    #digital-signature-form,
    #createFirmForm
    {
        padding: 16px !important;
    }

    #edit-broker-form > .submit-parent,
    #broker-edit-additional > .submit-parent,
    #digital-signature-form > .submit-parent,
    #createFirmForm > .submit-parent{
        padding-right: 16px;
        margin-right: -16px;
        margin-left: -16px;
        margin-bottom: -16px;
    }

    #broker-tab-meetings-overview > .tableData{
        margin-top: 0px !important
    }

    #specialism-tabs .padding-parent{
        padding: 16px;
    }

    #broker-tab-specialisms > .tableData {
        padding: 16px 0px;
    }

    #createFirmForm > .row{
        margin: 0 !important;

        display: flex !important;
        gap: 24px;
    }

    #createFirmForm > .row > div{
        padding: 0px !important;
        width: 100% !important;
    }

    #createFirmForm > .row > div.clear{
        display: none !important;
    }

    #broker-tab-dashboard .agent-profile .profile-top, #broker-tab-dashboard .agent-profile .profile-bottom{
        padding: 16px !important;
    }

    #broker-tab-dashboard .agent-profile .profile-top{
        border-color: var(--border) !important;
    }

    #broker-tab-dashboard .info-table-light thead tr th{
        border-color: var(--border) !important;
    }

    #broker-tab-dashboard .agent-info{
        padding: 16px !important;
    }

    #broker-tab-dashboard > .agent-info > .sm-row{
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    /* =====================================
    ACCOUNTING OVERVIEW
    ===================================== */
    #depositInViewWrapper,
    #depositInItemsWrapper{
        padding: 20px 30px !important;
    }

    #depositInViewWrapper > div:first-of-type,
    #depositInItemsWrapper > .search-parent{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);

        overflow: hidden;
    }

    #checkout-create-form{
        padding: 16px;

        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #checkout-create-form > .submit-parent{
        padding-right: 16px;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
    }


    /* =====================================
    REPORTS OVERVIEW
    ===================================== */
    #report-marketing-wrapper #marketingReport{
        padding: 16px;

        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #report-marketing-wrapper #marketingReport > div{
        width: 100% !important;
    }

    #report-marketing-wrapper #marketingReport > div div.flex{
        align-items: end;
    }

    #report-marketing-wrapper #marketingReport > div .required {
        margin: 0 !important;
    }

    #report-marketing-wrapper .tableHeading.border-none{
        border: 1px solid var(--border);
    }

    #report-marketing-wrapper .tableData > div > div.row{
        margin: 0;
        margin-top: 24px;
    }

    #report-marketing-wrapper .tableData > div > div.row > div{
        margin: 0;
        padding: 0;
        margin-bottom: 16px;
    }

    #report-marketing-wrapper .tableData > div > div.row > div:nth-child(odd){
        padding-right: 8px;
    }

    #report-marketing-wrapper .tableData > div > div.row > div:nth-child(even){
        padding-left: 8px;
    }

    #cases_per_product_listing{
        width: 100%;
        overflow: hidden;

        padding: 20px 30px;
        margin: 0;
        display: flex;
        gap: 16px;
    }

    #cases_per_product_listing > div:nth-child(even){
        margin: 0;
        padding: 16px;

        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);

        height: fit-content;
        width: 100%;
    }


    /* =====================================
    RATINGS OVERVIEW
    ===================================== */
    table.rating_engine, div.rating_field_preview_inner, div.rating_group_preview_inner{
        padding: 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #ratings-overview-output > div[style*="border:2px dashed red;"],
    #ple-overview-output > div[style*="border:2px dashed red;"]
    {
        padding: 16px !important;
        background-color: var(--surface-primary) !important;
        border: 1px dashed var(--destructive) !important;
        border-radius: var(--widget-radius) !important;
    }

    #referralForm,
    #ple-save-form,
    #create-equation-form{
        width: 100%;
        margin: 0 auto;
        padding: 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #referralForm > .row > .width50p ,
    #ple-save-form > .row > .width50p,
    #create-equation-form > .row > .width50p {
        width: 100% !important;
    }

    #referralForm > .submit-parent,
    #ple-save-form > .submit-parent,
    #create-equation-form > .submit-parent{
        padding-right: 16px;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
    }

    #analyse-product-form,
    #ratings-search-form,
    #ple-overview-search-form,
    #ple-search-form,
    #ple_preview_window{
        padding: 16px;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #analyse-product-form .required,
    #ratings-search-form .required,
    #ple-overview-search-form .required{
        margin-top: 0;
    }

    #ratings-search-form > .row > .clear,
    #analyse-product-form > .row > .clear,
    #ple-overview-search-form > .row > .clear{
        height: 0px !important;
    }

    #ple-overview-search-form > .row {
        margin-bottom: 16px;
    }

    #ple_preview_window{
        margin-top: 24px;
    }

    #ple-tab-simulation .ui-widget-content{
        padding: 16px !important;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #filter-toolbar{
        border: none !important;
        background: transparent !important;
    }

    #matrix-data-tab{
        padding: 20px 30px !important;
    }

    form[data-role="matrix-mapping"]{
        padding: calc(20px - 1em) calc(30px - 1em) 0px calc(30px - 1em) !important;
    }

    #matrix-data-tab > .padding-parent,
    form[data-role="matrix-mapping"] > .padding-parent{
        padding: 16px !important;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    #matrix-data-tab div[data-role="toggable-form"] .required{
        margin-right: 16px !important;
        margin-top: 0 !important;
    }

    #matrix-data-tab div[data-role="toggable-form"] .flex{
        margin-bottom: 16px !important;
    }

    #create-matrix-form .submit-parent{
        border: none !important;
        margin-top: 0 !important;
        padding: 16px !important;
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;
    }


    /* =====================================
    BUILDER OVERVIEW
    ===================================== */
    #design-view > .row{
        display: flex;
    }

    #design-available-fields{
        padding: 16px !important;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        margin-left: 15px;
        margin-right: 24px;
    }

    #design-droppable{
        border: 1px solid var(--border);
        background: var(--surface-primary);
        border-radius: var(--widget-radius);
        padding: 16px;
    }

    ul.form-builder-column{
        border: 1px solid var(--border);
        width: calc(50% + 24px);
        display: block;
        float: none;
        margin: 0px auto;
        margin-bottom: 16px;
        list-style-type: none;
        padding: 16px;
        background: var(--surface-second);
        min-height: 200px;
        overflow: auto;
        border-radius: var(--widget-radius);
    }

    ul.form-builder-active{
        background: var(--surface-primary);
        border: 1px solid var(--primary);
        box-shadow: 0px 0px 0px 4px var(--ring);
    }

    ul.form-builder-column li>div{
        border: 1px dashed var(--secondary) !important;
        margin: 0 !important;
        margin-bottom: 16px !important;
        padding: 8px !important;
        border-radius: var(--widget-radius);
    }

    ul.form-builder-column li:last-of-type>div{
        margin-bottom: 0 !important;
    }

    ul.form-builder-column li>div div:first-of-type{
        padding-left: 0 !important;
    }

    ul.form-builder-column li>div div:nth-child(2){
        padding-right: 0 !important;
    }

    ul.form-builder-column li>div div[style*="margin:2px;border:2px dotted #F6931F;"]{
        display: flex;
        align-items: center;
        gap: 4px;
        background-color: var(--surface-second) !important;
        border-radius: var(--widget-radius) !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        border: 1px dashed var(--secondary) !important;
    }


    /* ================== ACTIVITY ===================== */
    #activityOverviewWrapper > #editActivityForm{
        display: grid;
        grid-template: 1fr / auto 1fr;
        gap: 24px;
        flex-direction: row-reverse;
        
        & > .checkbox-parent{
            padding: 0px;
            margin: 0px;
            border: none;
            
            grid-column: 1 / span 2;
        }
        
        & > div{
            display: block;
            margin: 0px;
            
            & > *{
                width: 100%;
            }
        }
        
        & .activity-left{
            background: none;
            border: none;
            position: static !important;
            max-width: 550px;
            min-width: 400px;
            width: 100%;
            top: 0px;
            bottom: 0px;
            padding: 0px;
            
            & > .mCustomScrollBox{
                padding: 0px !important;
            }
            
            & .bu-card{
                padding: 0px;
            }
            
            & .required{
                padding-inline: 16px;
            }
            
            & .qq-uploader{
                width: 100%;
            }
            
            & #parent-category_id > div{
                display: grid;
                grid-template: 1fr / repeat(2, 1fr);
            }
        }
        
        & .activity-right{
            width: 100%;
            
            & #parent-content{
                min-height: 250px;
                padding: 12px;
                border-radius: var(--input-radius);
                background-color: var(--surface-third);
                margin-bottom: 32px;
            }
            
            & #comments-container{
                & .comment-parent{
                    border: none;
                    border-bottom: 1px solid var(--border);
                    
                    &:last-child{
                        border: none;
                    }
                }
            }
            
            & .new-comment{
                border: none;
            }
            
            & .bu-heading-3{
                color: var(--foreground-second);
                font-weight: 500;
                font-size: var(--font-size-base);
            }
        }
    }

    /* ================== MATRIX FORM ===================== */
    #create-matrix-form, #view-matrix-form{
        & #matrix-data-table{
            /* 200px left column, 16px - margin, 2px - borders */
            max-width: calc(100% - 200px - 16px - 2px) !important;
            width: auto !important;
            float: left !important;
            overflow-x: auto !important;
            margin-left: 16px;

            
        }

        & .main-td{
            min-height: 66px !important;
            padding: 4px 10px !important;
        }

        & table.overview-table.matrix-table tbody tr td.hover,
        & .matrix-table .main-th.hover,
        & #matrix-row-data .main-td.hover {
            background: var(--primary-light) !important;
        }

        & #parent-date_effective{
            max-width: none !important;
        }
    }

    /* ================== Product Logic Overview ===================== */
    .ple_preview_inner{
        border: var(--primary) 1px solid;
        border-radius: 12px;
    }

    #condition_modal_dialog_placeholder{
        & #matched_value_parent > span{
            display: flex;
            align-items: center;
            gap: 8px;

            & > input, & > select{
                flex: 1;
                width: auto !important;
            }
        }
    }

    #condition-overview-details{
        & #condition-details-branches{
            & .ui-tabs-nav{
                margin: 16px 8px 0px;
            }

            & > .ui-tabs-panel{
                margin: 16px 8px 0px;
                background: var(--surface-primary) !important;
                border: var(--border) 1px solid;
                border-radius: 12px !important;

                & .ui-tabs-panel{
                    padding: 0px;
                    margin: 16px 8px 0px;
                }
            }
        }
    }
}