/* =====================================
   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: 36px !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;
    }

    .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);

        overflow: hidden;
    }

    #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);
    }

    /* =====================================
    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;
    }

    #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%;
        max-width: 750px;
        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);
            }
        }
    }
}