/*
 * /client/css/dist/admin-theme.bundle.css
 * GENERATED by `php artisan assets:bundle` from config/static-bundles.php - do not edit,
 * edit the sources below and rebuild. [CP-6287]
 *
 * Sources, in order:
 *   /client/css/admin/theme.css
 *   /client/css/admin/theme/misc.css
 *   /client/css/admin/theme/navigation.css
 *   /client/css/admin/theme/select.css
 *   /client/css/admin/theme/buttons.css
 *   /client/css/admin/theme/slider.css
 *   /client/css/admin/theme/sections.css
 *   /client/css/admin/theme/input.css
 *   /client/css/admin/theme/table.css
 *   /client/css/admin/theme/datepicker.css
 *   /client/css/admin/theme/slideover.css
 *   /client/css/admin/theme/layout.css
 *   /client/css/admin/theme/toast.css
 *   /client/css/admin/theme/icons.css
 */

/* ==== /client/css/admin/theme.css ==== */
/* Define CSS custom properties (variables) for theming */
/* Define CSS custom properties (variables) */
@layer reset, base, components, utilities, customer_theme;

/* Import component styles */
/* @import url('./theme/misc.css');
@import url('./theme/navigation.css');
@import url('./theme/select.css');
@import url('./theme/buttons.css');
@import url('./theme/slider.css');
@import url('./theme/sections.css');
@import url('./theme/input.css');
@import url('./theme/table.css');
@import url('./theme/datepicker.css');
@import url('./theme/slideover.css');
@import url('./theme/layout.css');
@import url('./theme/toast.css'); 
@import url('./theme/icons.css');
@import url('./theme/customer_theme.css');*/



@layer base {
    :root {
        /* Surface Colors */
        --surface-primary: #FFFFFF;
        /* Bright white for main surfaces */
        --surface-second: #F5F5F5;
        /* Soft gray for secondary surfaces */
        --surface-third: #FAFAFA;
        /* Slightly darker gray for tertiary surfaces */
        --foreground-primary: #0A0A0A;
        /* Near-black for primary text */
        --foreground-second: #737373;
        /* Mid-gray for secondary text */
        --foreground-third: #A1A1A1;
        /* Light gray for subtle text */
        --foreground-contrast: #ffffff;
        /* White for high-contrast text */
        --border: #E5E5E5;
        /* Light gray for borders */

        --dark-surface-primary: #0A0A0A;
        /* Dark gray for main dark surfaces */
        --dark-surface-second: #262626;
        /* Slightly lighter dark gray */
        --dark-surface-third: #171717;
        /* Medium dark gray for tertiary surfaces */
        --dark-foreground-primary: #FFFFFF;
        /* Off-white for primary dark text */
        --dark-foreground-second: #D4D4D4;
        /* Light gray for secondary dark text */
        --dark-foreground-third: #A1A1A1;
        /* Mid-gray for subtle dark text */
        --dark-foreground-contrast: #ffffff;
        /* White for high-contrast dark text */
        --dark-border: #525252;
        /* Dark gray for borders */

        /* Primary Colors */
        --primary: #106CFF;
        /* Vibrant red for emphasis */
        --primary-hover: #278CFF;
        /* Darker red for hover states */
        --primary-mid: #88CCFF;
        /* Softer mid-tone red */
        --primary-light: #EDF7FF;
        /* Light red for backgrounds */
        --ring: #106cff33;

        /* Secondary Colors */
        --secondary: #F34807;
        /* Vibrant yellow for emphasis */
        --secondary-hover: #FE6211;
        /* Darker yellow for hover states */
        --secondary-mid: #FFB071;
        /* Softer mid-tone yellow */
        --secondary-light: #FFF6ED;
        /* Light yellow for backgrounds */

        /* Info Colors */
        --info: #0260E7;
        /* Rich blue for informational elements */
        --info-hover: #277EFC;
        /* Darker blue for hover */
        --info-mid: #0151c2;
        /* Lighter mid-tone blue */
        --info-light: #EDF3FD;
        /* Very light blue for backgrounds */

        /* Destructive Colors */
        --destructive: #E7000B;
        /* Strong red for destructive actions */
        --destructive-hover: #FB2C36;
        /* Darker red for hover */
        --destructive-mid: #c2050e;
        /* Mid-tone red */
        --destructive-light: #FEF2F2;
        /* Light red for backgrounds */

        /* Success Colors */
        --success: #00A63E;
        /* Deep green for success states */
        --success-hover: #00C951;
        /* Darker green for hover */
        --success-mid: #028b34;
        /* Brighter mid-tone green */
        --success-light: #F0FDF4;
        /* Light green for backgrounds */

        /* Warning Colors */
        --warning: #E17100;
        /* Bold orange for warnings */
        --warning-hover: #FD9A00;
        /* Slightly darker orange for hover */
        --warning-mid: #be6002;
        /* Mid-tone orange */
        --warning-light: #FFD230;
        /* Light orange for backgrounds */


        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

        /* Gradients */
        --primary-gradient-start: #f97316;
        --primary-gradient-end: #fb923c;

        /* Legacy Color Palette for backward compatibility */
        --color-transparent: transparent;
        --color-current: currentColor;
        --color-black: #000000;
        --color-white: #ffffff;

        /* Primary Colors */
        --color-blue-500: #2e6e9e;
        --color-blue-600: #215781;
        --color-red-500: #ef4444;
        --color-red-600: #dc2626;
        --color-green-500: #22c55e;
        --color-green-600: #16a34a;
        --color-yellow-500: #eab308;
        --color-yellow-600: #ca8a04;
        --color-indigo-500: #6366f1;
        --color-indigo-600: #4f46e5;
        --color-purple-500: #8b5cf6;
        --color-purple-600: #7c3aed;
        --color-pink-500: #ec4899;
        --color-pink-600: #db2777;

        /* Typography */
        --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

        /* Font Sizes */
        --root-font-size: 13px;

        --font-size-xs: 0.75rem;
        /* 12px */
        --font-size-sm: 0.875rem;
        /* 14px */
        --font-size-base: 1rem;
        /* 16px */
        --font-size-lg: 1.125rem;
        /* 18px */
        --font-size-xl: 1.25rem;
        /* 20px */
        --font-size-2xl: 1.5rem;
        /* 24px */
        --font-size-3xl: 1.875rem;
        /* 30px */
        --font-size-4xl: 2.25rem;
        /* 36px */
        --font-size-5xl: 3rem;
        /* 48px */
        --font-size-6xl: 3.75rem;
        /* 60px */
        --font-size-7xl: 4.5rem;
        /* 72px */
        --font-size-8xl: 6rem;
        /* 96px */
        --font-size-9xl: 8rem;
        /* 128px */

        /* Line Heights */
        --line-height-none: 1;
        --line-height-tight: 1.25;
        --line-height-snug: 1.4;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.625;
        --line-height-loose: 2;

        --btn-radius: 8px;
        --input-radius: 8px;
        --widget-radius: 8px;
        --table-radius: 8px;

        --input-focus-border: var(--primary);
        --input-slider-color: var(--info);
        --input-slider-thumb: var(--color-white);

        --chart-color1: var(--destructive);
        --chart-color2: var(--success);
        --chart-color3: var(--info);
        --chart-color4: var(--color-purple-600);
        --chart-color5: var(--color-yellow-600);
        --chart-color6: var(--color-pink-600);
    }

    :root {
        font-size: var(--root-font-size);
    }
}

/* ==== /client/css/admin/theme/misc.css ==== */
/* =====================================
   MISCELLANEOUS COMPONENT STYLES
   ===================================== */

@layer components{
    body *{
        font-size: var(--font-size-base);
    }

    .ui-widget-content{
        color: var(--foreground-primary);
    }

    .ui-widget-content a{
        color: var(--foreground-primary);
    }

    /* ============= Activity Indicators ============= */
    /* No Activities Message */
    .no-activities > *{
        color: var(--foreground-primary);
    }

    /* ============= Headings ============= */
    /* Section Headings */
    .padding-parent > h3{
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
    }

    /* ============= Tags and Badges ============= */
    /* Tag Base Styles */
    .tag, .top-btn-span{
        border-radius: var(--input-radius);
        font-size: var(--font-size-base);
        padding: 2px 8px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    /*
     * Colours are split out and skipped for elements that carry their own inline
     * background. Some tags are coloured from data rather than from the theme - the
     * activity listing paints the policy chip #2888c7 and the category chip with
     * category.color_hex straight onto the element. A stylesheet !important beats an
     * inline *normal* declaration, so the blanket rule above was erasing those colours
     * and the chips lost their highlight (CP-6228).
     */
    .tag:not([style*="background-color"]), .top-btn-span{
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* Data-coloured chips: keep the light label they were built for, and drop the
       bordered look .tag.white would otherwise give them. */
    .tag[style*="background-color"]{
        color: var(--color-white) !important;
        border: none !important;
    }

    /* Keep long tag values inside the activity summary boxes */
    .activity-sm-box{
        min-width: 0;
        height: auto;
        min-height: 70px;
    }

    .activity-sm-box .tag{
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        height: auto;
        min-height: 24px;
        line-height: 20px;
    }

    .tag.tag-error{
        background-color: var(--destructive-light) !important;
        color: var(--destructive) !important;
    }

    .tag.tag-success{
        background-color: var(--success-light) !important;
        color: var(--success) !important;
    }

    .tag.white:not([style*="background-color"]){
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        color: var(--foreground-primary) !important;
    }

    .tag.selected{
        color: var(--foreground-primary) !important;
    }

    .priority-circle.selected{
        color: var(--color-white) !important;
    }

    .assign-span{
        margin-left: 0px;
    }

    /* Button Span Variation */
    .top-btn-span{
        width: 20px;
        height: 20px;
        font-size: var(--font-size-sm);
    }

    /* Circular Red Badge */
    .top-btn-span.circle-red{
        border-radius: 50%;
        background-color: var(--destructive) !important;
        color: var(--color-white) !important;
    }

    /* ============= UI Widget Base ============= */
    /* Widget Content Background */
    .ui-widget-content{
        background: transparent;
    }

    /* ============= Dialog Components ============= */
    /* Dialog Base */
    .ui-dialog{
        background-color: var(--surface-primary);
        overflow: hidden;
        border: 1px solid var(--border);
        border-top-left-radius: var(--widget-radius);
        border-bottom-left-radius: var(--widget-radius);
        box-shadow: var(--shadow-lg);
    }

    .ui-dialog-content > .ui-tabs > .ui-tabs-panel{
        padding: 24px 30px !important;
    }

    /* Dialog Title Bar */
    .ui-dialog-titlebar{
        border: none;
        border-bottom: 1px solid var(--border);
        background-color: var(--surface-primary);
    }

    /* Dialog Title Text */
    .ui-dialog-title{
        color: var(--foreground-primary);
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

    /* Dialog Close Button - Hide Default Span */
    .ui-dialog-titlebar-close span{
        display: none;
    }

    /* Dialog Close Button - Remove Default After */
    .ui-dialog-titlebar-close::after{
        content: none;
    }

    /* Dialog Close Button - Custom Icon */
    .ui-dialog-titlebar-close{
        background: url("/client/images/icon_x.svg") no-repeat center center;
        background-size: 24px 24px;
        width: 24px;
        height: 24px;
    }

    .ui-dialog-buttonpane{
        border: none !important;
        border-top: 1px solid var(--border) !important;
    }

    /* ============= SweetAlert2 Modals ============= */
    /* SweetAlert2 Modal Base */
    .swal2-modal{
        background-color: var(--surface-primary) !important;
        color: var(--foreground-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;
    }

    /* SweetAlert2 Modal Display */
    .swal2-modal.swal2-show{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
    }

    /* SweetAlert2 Modal Title */
    .swal2-modal .swal2-title{
        color: var(--foreground-primary) !important;
        font-size: var(--font-size-2xl) !important;
        font-weight: 600 !important;
    }

    /* SweetAlert2 Modal Content */
    .swal2-modal .swal2-content{
        color: var(--foreground-second) !important;
        font-size: var(--font-size-base) !important;
    }

    /* ============= SweetAlert2 Icons ============= */
    /* SweetAlert2 Icon Base */
    .swal2-modal .swal2-icon{
        height: 64px !important;
        width: 64px !important;
        line-height: 64px !important;
        font-size: 24px !important;
        border-width: 2px !important;
        margin-bottom: 16px !important;
    }

    /* Scale and re-centre the error X lines for the 64px icon. */
    .swal2-modal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
        width: 32px !important;
        height: 4px !important;
        top: 30px !important;
    }

    .swal2-modal .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
        left: 16px !important;
    }
    
    .swal2-modal .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
        right: 16px !important;
    }

    /* Warning Icon */
    .swal2-warning{
        color: var(--warning) !important;
        border-color: var(--warning) !important;
    }

    /* Error Icon */
    .swal2-error{
        color: var(--error) !important;
        border-color: var(--error) !important;
    }

    /* Success Icon */
    .swal2-success{
        color: var(--success) !important;
        border-color: var(--success) !important;
    }

    /* Info Icon */
    .swal2-info{
        color: var(--info) !important;
        border-color: var(--info) !important;
    }

    /* Question Icon */
    .swal2-question{
        color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    /* ============= Accordion Component ============= */
    /* Accordion Base */
    .ui-accordion{
        background: transparent !important;
    }

    /* ============= Broker View ============= */
    /* Broker View Wrapper */
    #broker-view-wrapper{
        background: transparent;
    }

    /* ============= Tab Navigation ============= */
    /* Tab Navigation Container */
    #wrapper .ui-tabs .ui-tabs-nav, .ui-dialog .ui-tabs .ui-tabs-nav{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin: 24px 30px;
        margin-bottom: 0px;
        padding: 8px 12px;
    }

    /* Tab Navigation Items */
    #wrapper .ui-tabs .ui-tabs-nav li, .ui-dialog .ui-tabs .ui-tabs-nav li{
        background: transparent;
    }

    /* Tab Navigation Links */
    #wrapper .ui-tabs-nav li a, .ui-dialog .ui-tabs-nav li a{
        min-height: 34px;
        font-weight: 500;
        border: 1px solid transparent;
        border-radius: var(--btn-radius);
        background: var(--surface-primary);
        color: var(--foreground-second);
        font-family: var(--font-family-sans);
        font-size: var(--font-size-base);
        line-height: var(--font-size-base);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.4em 1em;
        white-space: nowrap;
        min-width: 37px;
        box-shadow: none;
    }

    /* Tab Navigation Link After Element */
    #wrapper .ui-tabs-nav li a::after, .ui-dialog .ui-tabs-nav li a::after{
        content: none;
    }

    /* ============= Tab States ============= */
    /* Active Tab */
    #wrapper .ui-tabs-nav li.ui-state-active a, .ui-dialog .ui-tabs-nav li.ui-state-active a{
        border: 1px solid var(--primary);
        background: var(--surface-primary);
        color: var(--foreground-primary);
    }

    /* Tab Hover State */
    #wrapper .ui-tabs-nav li:not(.ui-state-active).ui-state-hover a, .ui-dialog .ui-tabs-nav li:not(.ui-state-active).ui-state-hover a{
        background: var(--surface-second);
        color: var(--foreground-primary);
    }

    a.error_tab{
        font-weight: 600;
        color: var(--destructive);
    }

    /* body .error-state{
        border: 1px dashed var(--destructive) !important;
        border-radius: var(--widget-radius) !important;
        background-color: var(--surface-third) !important;
    } */
    body .error-state{
        background-color: transparent !important;
        border: none !important;
        padding: 0px !important;
    }

    .ui-state-highlight{
        /* padding: 8px 10px;
        border: 1px solid var(--border);
        background-color: var(--surface-primary) !important;
        color: var(--foreground-primary);
        border-radius: var(--widget-radius);
        font-size: var(--font-size-base);

        position: relative;
        overflow: hidden; */

        padding: 0px;
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--destructive);
        background-color: transparent;
        margin-bottom: 8px;
    }

    /* .ui-state-highlight.ui-error::after{
        content: "";
        position: absolute;
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--destructive);
    } */

    .ajax-link{
        border-bottom: 1px dashed var(--info);
    }

    .border-top-eee{
        border-top: 1px solid var(--border);
    }

    .green-span.ajax-link{
        border: 1px solid var(--success) !important;
        background-color: var(--success-light) !important;
        color: var(--success) !important;
    }

    .legend-num{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--input-radius);
        width: 32px;
        color: var(--color-white) !important;
    }

    span.blue, p.blue, i.blue{
        color: var(--info) !important;
    }

    span.green, p.green, i.green{
        color: var(--success) !important;
    }

    span.red, p.red, i.red{
        color: var(--destructive) !important;
    }

    span.orange, p.orange, i.orange{
        color: var(--warning) !important;
    }

    span.purple, p.purple, i.purple{
        color: var(--color-purple-500) !important;
    }

    .legend-num.red{
        background-color: var(--destructive) !important;
        color: var(--color-white) !important;
    }

    .legend-num.green{
        background-color: var(--success) !important;
        color: var(--color-white) !important;
    }

    .legend-num.orange{
        background-color: var(--warning) !important;
        color: var(--color-white) !important;
    }

    .legend-num.purple{
        background-color: var(--color-purple-500) !important;
        color: var(--color-white) !important;
    }

    .legend-num.blue{
        background-color: var(--info) !important;
        color: var(--color-white) !important;
    }

    .no-data .legend-num{
        background-color: var(--surface-second) !important;
        color: var(--foreground-second) !important;
    }

    .loading-circle-loader-container > span,
    .loading-circle-loader-container > div{
        display: none;
    }

    .loading-circle-loader-container{
        position: relative;
    }

    .table-loader .loading-circle-loader-container{
        display: block;
        width: 100%;
        min-height: 32px;
    }

    [data-role="spinner_holder"] > *{
        display: none !important;
        position: relative;
    }

    .loading-circle-loader-container::after,
    [data-role="spinner_holder"]::after{
        content: "";
        width: 32px;
        height: 32px;
        background-image: url('/client/images/sm-logo.svg');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        filter: grayscale(100%);
        
        opacity: 0.5;
        animation: spinning 4s linear infinite;
    }

    @keyframes spinning {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .color999{
        color: var(--foreground-third);
    }

    .div.userAssigned, div.notice{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    .jstree a{
        font-size: var(--font-size-base) !important;
        color: var(--foreground-primary) !important;
    }

    .jstree a:hover{
        color: var(--foreground-primary) !important;
        background-color: var(--surface-second) !important;
        border: none !important;
    }

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

    .ui-accordion:not(#dashboardBox) .ui-accordion-header{
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--input-radius) !important;
        color: var(--foreground-primary) !important;
    }

    .ui-accordion:not(#dashboardBox) .ui-accordion-header.ui-state-active{
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        background-color: var(--surface-second) !important;
    }

    .ui-accordion:not(#dashboardBox) .ui-accordion-content{
        border-radius: var(--input-radius) !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        background-color: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-top: none !important;
        padding: 8px !important;
    }

    .field-tpl{
        background-color: var(--surface-third) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--input-radius) !important;
    }

    .preview-validation{
        border: 1px dashed var(--primary) !important;
        border-radius: var(--input-radius) !important;
    }

    .newTableHeading > .pull-right.margin-right-10:first-child{
        margin-right: 0px !important;
    }

    .flex > .margin-right-10:not(:last-child){
        margin-right: 10px !important;
    }

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

    .alert.alert-info{
        border-color: var(--info) !important;
        background-color: var(--info-light) !important;
        color: var(--info) !important;
    }

    .alert.alert-success{
        border-color: var(--success) !important;
        background-color: var(--success-light) !important;
        color: var(--success) !important;
    }

    .alert.alert-warning{
        border-color: var(--warning) !important;
        background-color: var(--warning-light) !important;
        color: var(--warning) !important;
    }

    .alert.alert-error{
        border-color: var(--destructive) !important;
        background-color: var(--destructive-light) !important;
        color: var(--destructive) !important;
    }

    .fixedd{
        background-color: var(--surface-primary) !important;
    }

    .payment-option > input[type="radio"]{
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }

    .flex-col{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .flex.no-margin-inside > *:nth-child(1){
        margin-left: 0px !important;
    }

    .border-bottom-eee{
        border-color: var(--border);
    }

    .surface-primary{
        background-color: var(--surface-primary) !important;
    }

    div.custom-priority{
        display: flex;
        gap: 0px;
        width: full;
        
        & > span.priority-circle{
            padding: 0px !important;
            margin: 0px !important;
            border-radius: 0px;
            border-color: var(--border) !important;
            background-color: var(--surface-primary) !important;
            flex: 1;
            
            &:not(:last-child){
                border-right: 0px;
            }
            
            &:last-child{
                border-top-right-radius: var(--input-radius);
                border-bottom-right-radius: var(--input-radius);
            }
            
            &:first-child{
                border-top-left-radius: var(--input-radius);
                border-bottom-left-radius: var(--input-radius);
            }
            
            &:hover{
                transform: scale(1);
                opacity: 0.75;
                background-color: var(--surface-second) !important;
            }
            
            &.selected {
                transform: scale(1);
                background-color: var(--custom-color) !important;
                color: var(--foreground-contrast) !important;
                
                &:hover{
                    opacity: 0.75;
                }
            }
        }
    }

    div[data-role="category-trigger-parent"] {
        gap: 8px;

        &>span.tag {
            background-color: var(--surface-primary) !important;
            border-color: var(--border) !important;
            padding: 8px 8px !important;
            margin: 0px !important;
            height: auto;
            font-weight: 600;
            color: var(--custom-color) !important;

            &:hover {
                transform: scale(1) !important;
                opacity: 0.75;
                background-color: var(--surface-second) !important;
            }
            
            &.selected {
                transform: scale(1);
                background-color: var(--custom-color) !important;
                color: var(--foreground-contrast) !important;
                
                &:hover{
                    opacity: 0.75;
                }
            }
        }
    }
}

/* ==== /client/css/admin/theme/navigation.css ==== */
/* =====================================
   NAVIGATION COMPONENT STYLES
   ===================================== */

@layer components {
    /* ============= TOP NAV BASE ============= */
    #top-nav{
        background: var(--surface-primary);
        height: 60px;
    }

    #top-nav > #bottomWrap{
        padding-right: 32px;
    }

    #top-nav #devWrap{
        padding-left: 32px;
    }

    /* ============= TOP NAV ACTIONS ============= */
    .nav.navbar-nav{
        display: flex;
        align-items: center;
        transform: translateX(8px);
    }

    /* Top Nav Profile Link */
    .nav>li.profile-top a{
        padding: 0px 8px !important;
    }

    /* Top Nav User Avatar */
    .nav .user-img{
        position: relative;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        overflow: hidden;
        left: 0px;
        border: none;
    }

    /* Top Nav Link Base */
    .top-nav-link{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    /* Top Nav Link Icons */
    .top-nav-link img{
        height: 16px;
        width: 16px;
        padding: 0;
        margin: 0;
    }

    /* ============= TOP NAV DROPDOWNS ============= */
    /* Dropdown Active State */
    .nav li.dropdown.open a.top-nav-link{
        background: var(--surface-third);
        box-shadow: none;
        z-index: auto;
    }

    /* Dropdown Menu Base */
    .nav .dropdown-menu{
        background: var(--surface-primary);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;
    }

    /* Dropdown Menu Header */
    .dropdown-menu > li:first-of-type{
        text-align: left !important;
        font-size: var(--font-size-xl) !important;
        line-height: var(--line-height-tight) !important;
        color: var(--foreground-primary) !important;
        padding: 16px 20px;
    }

    /* Dropdown Refresh Button */
    .dropdown-menu #my-reports-refresh-button{
        position: absolute;
        right: 16px !important;
        top: 10px !important;
        left: auto !important;
        margin-right: 0px !important;
    }

    /* Settings Dropdown Items */
    #settings.dropdown-menu > li:not(:first-of-type){
        border-top: 1px solid var(--border);
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Settings Dropdown Title */
    #settings.dropdown-menu .menu-title{
        font-size: var(--font-size-base);
        font-weight: 500;
        line-height: var(--line-height-normal);
        color: var(--foreground-primary);
    }

    /* Settings Dropdown Right Content */
    #settings.dropdown-menu li .right{
        height: auto;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    /* ============= PAGE HEADING ============= */
    .page-heading{
        background: var(--surface-primary);
        border-bottom: 1px solid var(--border);
        border-top: 1px solid var(--border);
        padding-right: 32px;
        padding-left: 282px;
    }

    body.slim.show-nav-text .page-heading{
        padding-left: 112px;
    }

    .page-heading h3{
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
        margin: 0;
    }

    .range-in [data-role="time-btn"]{
        opacity: 0;
        pointer-events: none;
    }

    .time-selection-parent{
        position: relative;
    }

    body .absolute-range input:first-of-type{
        margin-left: 0px;
    }

    .range-in .absolute-range{
        top: 0;
        left: 0;
    }

    .page-heading h3 a{
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

    .page-heading a{
        color: var(--foreground-second);
        text-decoration: none;
    }

    .page-heading a:hover{
        text-decoration: underline;
    }

    .amount-display-heading{
        background-color: var(--surface-third);
    }

    .amount-display-wrapper span{
        font-size: var(--font-size-base) !important;
        font-weight: 500 !important;
        color: var(--foreground-primary) !important;
    }

    .amount-display-wrapper span.currency{
        color: var(--success) !important;
        font-weight: 600 !important;
    }

    /* ============= SIDEBAR THEME ============= */
    /* Sidebar Auth Image */
    #auth-img{
        border-right: 1px solid var(--border) !important;
    }

    /* Sidebar Base */
    #top{
        background: var(--dark-surface-primary) !important;
        border-right: 1px solid var(--border) !important;
    }

    /* Sidebar Tab Navigation Base */
    #top .ui-tabs-nav li{
        background-color: var(--dark-surface-primary) !important;
    }

    /* Sidebar Tab Selected State */
    #top .ui-tabs-nav li.ui-tabs-selected{
        background-color: var(--dark-surface-second) !important;
    }

    /* Sidebar Tab Hover State */
    #top .ui-tabs-nav li.ui-state-hover, #top .ui-tabs-nav li:hover{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Tab Link Hover State */
    #top .ui-tabs-nav li.ui-state-hover>a, #top .ui-tabs-nav li:hover>a{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Tab Active Link */
    #top .ui-tabs-nav li >a.dark-active{
        background-color: var(--dark-surface-third) !important;
    }

    #top:not(.show-nav-text).slim .ui-tabs-nav li .nav-title{
        display: none !important;
    }

    /* Sidebar Tab Title */
    #top .ui-tabs-nav li .nav-title{
        color: var(--dark-foreground-primary) !important;
        font-size: var(--font-size-sm) !important;
        font-family: var(--font-family-sans) !important;
    }

    /* Sidebar Panel Base */
    .ui-tabs-panel{
        border-radius: var(--widget-radius) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        background: transparent !important;
    }

    /* Sidebar Navigation Item Base */
    .ui-tabs-panel .navigation{
        background-color: var(--dark-surface-second) !important;
        color: var(--dark-foreground-primary) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Sidebar Navigation Item Hover */
    .ui-tabs-panel .navigation:hover{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Navigation Item Selected */
    .ui-tabs-panel .navigation.nav-selected{
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Sidebar Toggle Button Base */
    [data-role="trigger-nav-size"]{
        color: var(--dark-foreground-second) !important;
    }

    /* Sidebar Toggle Button Hover */
    [data-role="trigger-nav-size"]:hover{
        color: var(--dark-foreground-primary) !important;
    }

    /* ============= SIDEBAR LIGHT THEME ============= */
    /* Light Theme Sidebar Base */
    body.light #top{
        background: var(--surface-primary) !important;
        border-right: 1px solid var(--border) !important;
    }

    /* Light Theme Tab Navigation Base */
    body.light #top .ui-tabs-nav li{
        background-color: var(--surface-primary) !important;
    }

    /* Light Theme Tab Selected State */
    body.light #top .ui-tabs-nav li.ui-tabs-selected{
        background-color: var(--surface-second) !important;
    }

    /* Light Theme Tab Hover State */
    body.light #top .ui-tabs-nav li.ui-state-hover, body.light #top .ui-tabs-nav li:hover{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Link Hover State */
    body.light #top .ui-tabs-nav li.ui-state-hover>a, body.light #top .ui-tabs-nav li:hover>a{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Active Link */
    body.light #top .ui-tabs-nav li >a.dark-active{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Title */
    body.light #top .ui-tabs-nav li .nav-title{
        color: var(--foreground-second) !important;
        font-size: var(--font-size-sm) !important;
        font-family: var(--font-family-sans) !important;
    }

    /* Light Theme Panel Base */
    #top body.light .ui-tabs-panel{
        border-radius: var(--widget-radius) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border: 1px solid var(--border) !important;
        border-left: none !important;
        background: transparent !important;
        box-shadow: var(--shadow-xl);
    }

    /* Light Theme Navigation Item Base */
    body.light .ui-tabs-panel .navigation{
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Light Theme Navigation Item Hover */
    body.light .ui-tabs-panel .navigation:hover{
        background-color: var(--surface-primary) !important;
    }

    /* Light Theme Navigation Item Selected */
    body.light .ui-tabs-panel .navigation.nav-selected{
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Light Theme Toggle Button Base */
    body.light [data-role="trigger-nav-size"]{
        color: var(--foreground-second) !important;
    }

    /* Light Theme Toggle Button Hover */
    body.light [data-role="trigger-nav-size"]:hover{
        color: var(--foreground-primary) !important;
    }
}

/* ==== /client/css/admin/theme/select.css ==== */
/* =====================================
   SELECT COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Select2 Base Container ============= */
    .select2-container{
        margin-top: 0px;
        min-width: 100px !important;
    }

    /* ============= Select2 Selection Base ============= */
    /* Single and Multiple Selection Base */
    .select2-container .select2-selection.select2-selection--single,.select2-container .select2-selection--multiple{
        border-radius: var(--input-radius);
        border: 1px solid var(--border);
        font-size: var(--font-size-base);
        background-color: var(--surface-primary);
        color: var(--foreground-second);
        font-family: var(--font-family-sans);
    }

    /* Single Selection Specific */
    .select2-selection--single{
        margin: 0px;
        cursor: pointer;
    }

    /* ============= Select2 Arrow Indicator ============= */
    /* Arrow Base */
    .select2-selection__arrow{
        width: 16px;
        height: 16px;
        position: absolute;
        right: 0.6em;
        top: 50%;
        transform: translateY(-50%);
        background-image: url('/client/images/icon_chevron-down.svg');
        background-repeat: no-repeat;
        background-size: 16px 16px;
        /* height: 26px;
        position: absolute;
        top: 3px;
        right: 8px;
        width: 20px; */
    }

    /* Arrow Open State */
    .select2-container--open .select2-selection__arrow{
        transform: rotate(180deg) translateY(50%);
    }

    /* Hide Default Arrow */
    .select2-selection__arrow b{
        display: none;
        /* border-color: var(--foreground-primary) transparent transparent transparent; */
    }

    /* ============= Select2 Selection Content ============= */
    /* Selection Rendered Content */
    .select2-selection__rendered{
        position: relative;
    }

    /* Selection Choice Tags */
    .select2-selection__rendered .select2-selection__choice{
        color: var(--foreground-primary);
        background-color: var(--surface-second);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        margin-top: 0px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Selection Clear Button */
    .select2-selection__rendered .select2-selection__clear{
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0px;
    }

    .select2-container--open{
        border-radius: var(--input-radius);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: var(--input-focus-border) !important;
        /* box-shadow: 0 0 0 3px var(--ring) !important; */
    }

    .select2-container--open .select2-selection{
        border-color: var(--input-focus-border) !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    /* ============= Select2 Dropdown ============= */
    /* Dropdown Container */
    .select2-dropdown{
        border-color: var(--border) !important;
        border-radius: var(--input-radius);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background-color: var(--surface-primary);
        overflow: hidden;
    }

    .select2-container--open .select2-dropdown{
        border-color: var(--input-focus-border) !important;
        /* box-shadow: 0 0 0 3px var(--ring) !important; */
    }

    /* ============= Select2 Search ============= */
    /* Search Field */
    .select2-dropdown .select2-search__field{
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        font-size: var(--font-size-base);
        background-color: var(--surface-primary);
        color: var(--foreground-primary);
        font-family: var(--font-family-sans);
        padding: 4px;
    }

    /* Search Field Focus State */
    .select2-dropdown .select2-search__field:focus{
        border: 1px solid var(--input-focus-border);
        outline: none;

        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    /* ============= Select2 Results ============= */
    /* Results Group Header */
    .select2-results__group{
        background-color: var(--surface-third);
        font-size: 1em;
        border-bottom: 1px solid var(--border);
        border-top: 1px solid var(--border);
        color: var(--foreground-primary);
        font-family: var(--font-family-sans);
        font-weight: 600;
    }

    /* Results Option */
    .select2-results__option{
        font-size: 1em;
        color: var(--foreground-primary);
        font-family: var(--font-family-sans);
    }

    /* Results Option Highlighted State */
    .select2-results__option--highlighted{
        background-color: var(--primary-light);
        color: var(--primary);
    }

    /* ============= Native Select Styles ============= */
    /* Native Select (Non-Select2) */
    select:not(.select2-hidden-accessible) {
        border-radius: var(--input-radius) !important;
        border: 1px solid var(--border) !important;
        font-size: var(--font-size-base) !important;
        color: var(--foreground-primary) !important;
        background: var(--surface-primary); 
        font-weight: 400 !important;
        padding: 0 2.5em 0 1em;
        
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        
        background-image: url('/client/images/icon_chevron-down.svg');
        background-repeat: no-repeat;
        background-position: calc(100% - 0.6em) center; 
        background-size: 16px 16px;
    }

    /* Native Select Focus State */
    select:not(.select2-hidden-accessible):focus {
        border: 1px solid var(--input-focus-border) !important;
        outline: none !important;

        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    /* ============= Misc ============= */
    #policy-revision-changer .select2-container .select2-selection--single{
        height: auto;
    }
}

/* ==== /client/css/admin/theme/buttons.css ==== */
/* =====================================
   BUTTONS COMPONENT STYLES
   ===================================== */

@layer components {
    /* ============= Primary Button Base ============= */
    .ui-button,.swal2-confirm,.swal2-cancel,.qq-upload-button, .qq-btn, .white-btn, .green-btn, .btn-login, .do-remove-field{
        max-height: 34px;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid var(--primary) !important;
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-base) !important;
        padding: 8px 12px;
        white-space: nowrap;
        min-width: 37px;
        box-shadow: none !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .ui-button .ui-icon, .do-remove-field .ui-icon {
        position: relative;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        height: 16px;
        width: 16px;
        min-height: 16px;
        min-width: 16px;
    }

    /* .ui-button .fa{ 
        font-size: var(--font-size-lg) !important;
    } */

    .ui-button .fa::before{
        font-size: var(--font-size-lg) !important;
    }

    .xs-btn{
        min-height: 20px;
        min-width: 20px;
        padding: 0;
    }

    /* Primary Button Corner Radius */
    .ui-button.ui-corner-all,.swal2-confirm,.swal2-cancel,.qq-upload-button, .qq-btn, .white-btn, .green-btn,.btn-login, button[data-role="toggle-search"]{
        border-radius: var(--btn-radius) !important;
    }

    /* Primary Button Text */
    .ui-button .ui-button-text, .qq-upload-button > div{
        padding: 0 !important;
        font-size: var(--font-size-base);
        text-shadow: none !important;
        line-height: 1 !important;
        color: inherit !important;
        display: block;
        font-family: inherit;
    }

    /* Primary Button Text Only */
    .ui-button-text-only .ui-button-text {
        white-space: nowrap;

        display: inline-flex;
        align-items: center;
        margin: 0 !important;
    }

    /* Primary Button Hover State */
    .ui-button.ui-state-hover, .ui-button:hover,.swal2-confirm:hover,.qq-upload-button:hover, .btn-login:hover {
        border: 1px solid var(--primary-hover) !important;
        background-color: var(--primary-hover) !important;
        color: var(--color-white) !important;
    }

    /* Primary Button Active State */
    .ui-button:active, .ui-button.ui-state-active, .btn-login:active {
        border: 1px solid var(--primary-mid) !important;
        background-color: var(--primary-mid) !important;
        color: var(--color-white) !important;
        transform: translateY(1px);
    }

    /* Primary Button Focus State */
    .ui-button:focus, .ui-button.ui-state-focus, .btn-login:focus {
        border: 1px solid var(--primary-mid) !important;
        background-color: var(--primary-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= White Button Base ============= */
    .ui-button.btn-white, .ui-button.white-btn, .white-btn, 
    .custom-table-btn, button[data-action="deselect"],
    button[data-action="select"],
    button[data-role="plus"],
    button[data-role="minus"],
    button[data-role="toggle-search"],
    button[data-role="quick-view"],
    button[data-role="payment-overview"],
    button[data-role="price_history"],
    button[data-role="email_history"],
    button[data-role="linked-policies"],
    button[data-role="email_preview"],
    button[data-role="trigger-reset"],
    button[data-role="product-featured"],
    button[data-role="view_eav_dataset_info"],
    .do-remove-field {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-primary) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Hover State */
    .ui-button.btn-white.ui-state-hover, .ui-button.btn-white:hover, 
    .ui-button.white-btn.ui-state-hover, .ui-button.white-btn:hover, .white-btn:hover, 
    .custom-table-btn:hover, button[data-action="deselect"]:hover,
    button[data-action="select"]:hover,
    .do-remove-field:hover, .do-remove-field.ui-state-hover,
    button[data-role="plus"]:hover,
    button[data-role="minus"]:hover,
    button[data-role="toggle-search"]:hover,
    button[data-role="quick-view"]:hover,
    button[data-role="payment-overview"]:hover,
    button[data-role="price_history"]:hover,
    button[data-role="email_history"]:hover,
    button[data-role="linked-policies"]:hover,
    button[data-role="email_preview"]:hover,
    button[data-role="trigger-reset"]:hover,
    button[data-role="product-featured"]:hover,
    button[data-role="view_eav_dataset_info"]:hover {
        border: 1px solid var(--border) !important;
        background-color: var(--primary-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Active State */
    .ui-button.btn-white:active, .ui-button.btn-white.ui-state-active, 
    .ui-button.white-btn:active, .ui-button.white-btn.ui-state-active, .custom-table-btn:active, 
    .custom-table-btn.ui-state-active, button[data-action="deselect"]:active,
    button[data-action="select"]:active,
    .do-remove-field:active, .do-remove-field.ui-state-active,
    button[data-role="plus"]:active,
    button[data-role="minus"]:active,
    button[data-role="toggle-search"]:active,
    button[data-role="quick-view"]:active,
    button[data-role="payment-overview"]:active,
    button[data-role="price_history"]:active,
    button[data-role="email_history"]:active,
    button[data-role="linked-policies"]:active,
    button[data-role="email_preview"]:active,
    button[data-role="trigger-reset"]:active,
    button[data-role="product-featured"]:active,
    button[data-role="view_eav_dataset_info"]:active {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Focus State */
    .ui-button.btn-white:focus, .ui-button.btn-white.ui-state-focus, 
    .ui-button.white-btn:focus, .ui-button.white-btn.ui-state-focus, .custom-table-btn:focus, 
    button.custom-table-btn.ui-state-focus, button[data-action="deselect"]:focus,
    button[data-action="select"]:focus,
    .do-remove-field:focus, .do-remove-field.ui-state-focus,
    button[data-role="plus"]:focus,
    button[data-role="minus"]:focus,
    button[data-role="toggle-search"]:focus,
    button[data-role="quick-view"]:focus,
    button[data-role="payment-overview"]:focus,
    button[data-role="price_history"]:focus,
    button[data-role="email_history"]:focus,
    button[data-role="linked-policies"]:focus,
    button[data-role="email_preview"]:focus,
    button[data-role="trigger-reset"]:focus,
    button[data-role="product-featured"]:focus,
    button[data-role="view_eav_dataset_info"]:focus {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* ============= Green Button Base ============= */
    .green-btn, 
    .qq-btn.green-btn{
        border: 1px solid var(--success) !important;
        background-color: var(--success) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Hover State */
    .green-btn.ui-state-hover, .green-btn:hover, .qq-btn.green-btn:hover {
        border: 1px solid var(--success-hover) !important;
        background-color: var(--success-hover) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Active State */
    .green-btn:active, .green-btn.ui-state-active{
        border: 1px solid var(--success-mid) !important;
        background-color: var(--success-mid) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Focus State */
    .green-btn:focus, 
    .green-btn.ui-state-focus {
        border: 1px solid var(--success-mid) !important;
        background-color: var(--success-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Red Button Base ============= */
    .ui-button.red-btn, .qq-btn.red-btn, button[data-action="delete"] {
        border: 1px solid var(--destructive) !important;
        background-color: var(--destructive) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Hover State */
    .ui-button.red-btn.ui-state-hover, .ui-button.red-btn:hover, .qq-btn.red-btn:hover, button[data-action="delete"]:hover {
        border: 1px solid var(--destructive-hover) !important;
        background-color: var(--destructive-hover) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Active State */
    .ui-button.red-btn:active,
    .ui-button.red-btn.ui-state-active, button[data-action="delete"]:active {
        border: 1px solid var(--destructive-mid) !important;
        background-color: var(--destructive-mid) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Focus State */
    .ui-button.red-btn:focus, button.ui-button.red-btn.ui-state-focus, button[data-action="delete"]:focus {
        border: 1px solid var(--destructive-mid) !important;
        background-color: var(--destructive-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Gray Button Base ============= */
    .ui-button.gray-btn,.swal2-cancel{
        border: 1px solid var(--surface-third) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Hover State */
    .ui-button.gray-btn.ui-state-hover, .ui-button.gray-btn:hover,.swal2-cancel:hover {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Active State */
    .ui-button.gray-btn:active, .ui-button.gray-btn.ui-state-active {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Focus State */
    .ui-button.gray-btn:focus, button.ui-button.gray-btn.ui-state-focus {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* ============= Ghost Info Button Base ============= */
    .ui-button.info-button, button[data-role="price_information"]{
        border: 1px solid var(--border) !important;
        background-color: var(--surface-primary) !important;
        color: var(--info) !important;
    }

    /* Ghost Info Button Hover State */
    .ui-button.info-button.ui-state-hover, .ui-button.info-button:hover, button[data-role="price_information"]:hover {
        border: 1px solid var(--info) !important;
        background-color: var(--surface-third) !important;
        color: var(--color-info) !important;
    }

    /* Ghost Info Button Active State */
    .ui-button.info-button:active, .ui-button.info-button.ui-state-active, button[data-role="price_information"]:active, button[data-role="price_information"].ui-state-active {
        border: 1px solid var(--info-mid) !important;
        background-color: var(--surface-second) !important;
        color: var(--color-info) !important;
    }

    /* Ghost Info Button Focus State */
    .ui-button.info-button:focus, button.ui-button.info-button.ui-state-focus, button[data-role="price_information"]:focus, button[data-role="price_information"].ui-state-focus {
        border: 1px solid var(--info-mid) !important;
        background-color: var(--surface-second) !important;
        color: var(--color-info) !important;
    }



    /* ============= Misc Styles ============= */
    .qq-upload-button{
        padding: 0px !important;
    }
    .qq-upload-button > div{
        line-height: 34px !important;
        height: 34px !important;
    }

    .custom-table-btn{
        background-image: url('/client/images/cog-alt.svg') !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 16px !important;
    }

    body [data-role="expand"] button .ui-button-text{
        color: var(--primary) !important;
    }

    .ui-buttonset{
        overflow: hidden !important;
        border-radius: var(--btn-radius) !important;
    }

    .do-remove-field{
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }

    .drag-icon{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
    }

    /* ============= Custom Secondary Button Base ============= */
    button[data-role="reset-layout"],
    button[data-role="link-to"],
    button[data-role="trigger-search"],
    button[data-role="create-payment"],
    button[data-role="begin-checkout"],
    button[data-role="create_firm"],
    button[data-role="cases_reset"],
    button[data-role*="new"],
    button[data-role="create"],
    button[data-role="create-contract"],
    button[data-role="create_group"],
    .secondary-btn{
        border: 0px solid transparent !important;
        /* background-color: var(--secondary) !important; */
        background: linear-gradient(90deg, #E53613 0%, #FF8538 100%) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:hover,
    button[data-role="link-to"]:hover,
    button[data-role="trigger-search"]:hover,
    button[data-role="create-payment"]:hover,
    button[data-role="begin-checkout"]:hover,
    button[data-role="create_firm"]:hover,
    button[data-role="cases_reset"]:hover,
    button[data-role*="new"]:hover, button[data-role*="new"].ui-state-hover,
    button[data-role="create"].ui-state-hover, button[data-role="create"]:hover,
    button[data-role="create-contract"].ui-state-hover, button[data-role="create-contract"]:hover,
    button[data-role="create_group"]:hover, button[data-role="create_group"].ui-state-hover,
    .secondary-btn.ui-state-hover, .secondary-btn:hover{
        /* border: 1px solid var(--secondary-hover) !important; */
        border-width: 0px !important;
        background: var(--secondary-hover) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:active,
    button[data-role="link-to"]:active,
    button[data-role="trigger-search"]:active,
    button[data-role="create-payment"]:active,
    button[data-role="begin-checkout"]:active,
    button[data-role="create_firm"]:active,
    button[data-role="cases_reset"]:active,
    button[data-role*="new"]:active,
    button[data-role="create"]:active,
    button[data-role="create-contract"]:active,
    button[data-role="create_group"]:active,
    .secondary-btn:active, .secondary-btn.ui-state-active{
        /* border: 1px solid var(--secondary-mid) !important; */
        border-width: 0px !important;
        background: var(--secondary-mid) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:focus,
    button[data-role="link-to"]:focus,
    button[data-role="trigger-search"]:focus,
    button[data-role="create-payment"]:focus,
    button[data-role="begin-checkout"]:focus,
    button[data-role="create_firm"]:focus,
    button[data-role="cases_reset"]:focus,
    button[data-role*="new"]:focus,
    button[data-role="create"]:focus,
    button[data-role="create-contract"]:focus,
    button[data-role="create_group"]:focus,
    .secondary-btn:focus, .secondary-btn.ui-state-focus{
        /* border: 1px solid var(--secondary-mid) !important; */
        border-width: 0px !important;
        background: var(--secondary-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Info Button Base ============= */
    button[data-role="time-btn"]:not(.btn-white),
    button[data-role="edit_policy"],
    button[data-role*="edit"],
    button[data-role="status_id-crud"]{
        border: 1px solid var(--info) !important;
        background-color: var(--info) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):hover,
    button[data-role="edit_policy"]:hover,
    button[data-role="time-btn"].ui-state-hover,
    button[data-role="edit_policy"].ui-state-hover,
    button[data-role*="edit"]:hover,
    button[data-role*="edit"].ui-state-hover,
    button[data-role="status_id-crud"]:hover,
    button[data-role="status_id-crud"].ui-state-hover{
        border: 1px solid var(--info-hover) !important;
        background-color: var(--info-hover) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):active,
    button[data-role="edit_policy"]:active,
    button[data-role="time-btn"].ui-state-active,
    button[data-role="edit_policy"].ui-state-active,
    button[data-role*="edit"]:active,
    button[data-role*="edit"].ui-state-active,
    button[data-role="status_id-crud"]:active,
    button[data-role="status_id-crud"].ui-state-active{
        border: 1px solid var(--info-mid) !important;
        background-color: var(--info-mid) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):focus,
    button[data-role="edit_policy"]:focus,
    button[data-role="time-btn"].ui-state-focus,
    button[data-role="edit_policy"].ui-state-focus,
    button[data-role*="edit"]:focus,
    button[data-role*="edit"].ui-state-focus,
    button[data-role="status_id-crud"]:focus,
    button[data-role="status_id-crud"].ui-state-focus{
        border: 1px solid var(--info-mid) !important;
        background-color: var(--info-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Misc ============= */
    .ui-button-text-icon-primary{
        gap: 4px;
    }

    .ui-button-icon-only{
        width: 32px !important;
        height: 32px !important;
        gap: 0px;
    }

    


    .btngroup[data-role="resize-group"] > button{
        padding: 0 !important;
        border: none !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:hover{
        background-color: var(--surface-third) !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:active{
        background-color: var(--surface-second) !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:focus{
        background-color: var(--surface-second) !important;
    }

    #dataset-filter-toolbar{
        & > label.ui-button[aria-pressed="false"]{
            border: 1px solid var(--border) !important;
            background-color: var(--surface-primary) !important;
            
            & > .ui-button-text{
                color: var(--foreground-primary) !important;
            }
        }

        & > label.ui-button[aria-pressed="true"]{
            border: 1px solid var(--primary) !important;
            background-color: var(--surface-primary) !important;

            & > .ui-button-text{
                color: var(--primary) !important;
            }
        }
    }
}

/* ==== /client/css/admin/theme/slider.css ==== */
/* =====================================
   SLIDER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Slider Labels ============= */
    /* Slider Value Labels */
    .super, .range-slider-value{
        font-size: var(--font-size-base);
        font-family: var(--font-family-sans);
        font-weight: 600;
        color: var(--foreground-primary);
        margin-bottom: 0px;
    }

    /* ============= Toggle Switch ============= */
    /* Toggle Switch Container */
    .slide-toggle-container{
        height: 24px;
        width: 48px;
        border-radius: 100%;
        margin: 0 12px;
    }

    /* Toggle Switch Base */
    .slide-toggle-container .slide-toggle{
        background: var(--input-slider-color);
        padding: 2px;
        height: 24px;
    }

    /* Toggle Switch Thumb */
    .slide-toggle-container .slide-toggle::before{
        content: "";
        display: block;
        height: 20px;
        width: 20px;
        background: var(--input-slider-thumb);
        border-radius: 100%;
        transition: transform 0.2s ease-in-out;
        margin: 0px;
        top: 0px;
        left: 0px;
    }

    /* Toggle Switch Checked State */
    .slide-toggle-container .toggle-control:checked+.slide-toggle::before{
        transform: translateX(24px);
    }

    /* ============= Range Slider ============= */
    /* Range Slider Base */
    input.range-slider{
        background: var(--input-slider-color);
        height: 24px;
        padding: 2px !important;
        max-height: 24px !important;
    }

    /* ============= Range Slider Webkit Styles ============= */
    /* Range Slider Thumb */
    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--input-slider-thumb);
        cursor: pointer;
        -webkit-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
    }

    /* Range Slider Thumb Hover State */
    .range-slider::-webkit-slider-thumb:hover {
        background: var(--input-slider-thumb);
    }

    /* Range Slider Thumb Active State */
    .range-slider:active::-webkit-slider-thumb {
        background: var(--input-slider-thumb);
    }
}

/* ==== /client/css/admin/theme/sections.css ==== */
/* =====================================
   SECTIONS COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Bordered Items ============= */
    /* Bordered Item Container */
    .item-borderd{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);
    }

    /* Bordered Item Header */
    .item-borderd .item-head{
        border-bottom: 1px solid var(--border);
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
        background: var(--surface-primary);
        position: relative;
        padding: 0 12px;
    }

    .item-borderd .item-head .btngroup{
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }

    /* Bordered Item Body */
    .item-borderd .item-body{
        padding: 1em;
    }

    /* ============= Dashboard Link Boxes ============= */
    /* Dashboard Link Box Base */
    .dashboard-link-box{
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);

        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;

        box-shadow: none;
    }

    /* Dashboard Link Name Text */
    .dashboard-link-box .dashboard-link-name{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
    }

    /* Dashboard Link Box Hover State */
    .dashboard-link-box:hover{
        transform: scale(1);
        box-shadow: var(--shadow-lg);
    }

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

    .block-header{
        background-color: var(--surface-second);
        border-bottom: 1px solid var(--border);
        border-top-left-radius: var(--widget-radius);
        border-top-right-radius: var(--widget-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-lg);
    }

    .form-heading{
        background-color: var(--surface-second) !important;
        border-radius: var(--widget-radius) !important;
        color: var(--foreground-primary) !important;
        font-size: var(--font-size-lg) !important;
        padding: 4px 10px;
    }

    .form-heading h4, .form-heading h4 span{
        color: var(--foreground-primary) !important;
    }

    .form-heading span[data-action="close"]{
        font-size: var(--font-size-base) !important;
        color: var(--foreground-second) !important;
        cursor: pointer;
    }

    .form-heading .instance-counter{
        font-size: var(--font-size-base) !important;
        color: var(--foreground-second) !important;
    }

    .manual-control-wrapper{
        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        background: var(--surface-primary);
        padding: 15px !important;
        margin-bottom: 20px !important;
    }

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

    .bu-card.payment-option{

        & > input[type="radio"]{
            margin-top: 4px !important;
        }

        &:has(input[type="radio"]:checked){
            border-color: var(--primary);
        }
    }
}

/* ==== /client/css/admin/theme/input.css ==== */
/* =====================================
   INPUT COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Form Labels ============= */
    label:not(.slide-toggle){
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
        display: inline-block;
        margin-bottom: 4px !important;
    }

    label.noblock{
        display: inline !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
        color: var(--foreground-primary);
        opacity: 0.85;
        font-weight: 400;
    }
    
    /* ============= Input Fields Base ============= */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field),textarea, .swal2-input{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
    }

    /* Input Field Sizing */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field), .swal2-input{
        min-height: 34px;
        padding: 0 12px;
    }

    /* ============= Input Field States ============= */
    /* Input Focus State */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field):focus, textarea:focus, .swal2-input:focus{
        border: 1px solid var(--input-focus-border);
        outline: none;

        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    input[type="checkbox"]{
        margin-top: 10px !important;
    }

    input[type="checkbox"]:after{
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
    }

    input[type="checkbox"]:hover:after{
        background-color: var(--surface-second);
    }

    input[type="checkbox"]:checked:after{
        cursor: pointer;
        background-color: var(--primary);
        border: 1px solid var(--primary);
        color: var(--color-white);
        background-image: url("/client/images/icon_white_check.svg") !important;
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center;
    }

    input[type="checkbox"]:checked:hover:after{
        background-color: var(--primary-hover);
    }

    input[type="checkbox"]:disabled:after{
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* ============= WYSIWYG Editor ============= */
    /* WYSIWYG Container */
    .wysiwyg-container{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        overflow: hidden;
    }

    .wysiwyg-container.wysiwyg-active{
        border: 1px solid var(--input-focus-border);
        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    /* WYSIWYG Toolbar */
    .wysiwyg-toolbar{
        padding: 0px;
        border-color: var(--border);
    }

    /* WYSIWYG Toolbar Icons */
    .wysiwyg-toolbar-icon{
        /* color: var(--foreground-primary); */
        color: transparent !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        position: relative;
    }

    .wysiwyg-toolbar-icon::before{
        position: absolute;
        content: "";
        font-size: 14px;
        color: var(--foreground-primary);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* WYSIWYG Toolbar Icon Hover State */
    .wysiwyg-toolbar-icon:hover{
        background: var(--primary-light);
        /* color: var(--primary); */
        color: transparent;
    }

    .wysiwyg-toolbar-icon:hover::before{
        color: var(--primary);
    }

    /* WYSIWYG Editor Content Area */
    .wysiwyg-editor{
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        line-height: 1.5;
        padding: 12px;
        overflow: auto;
    }

    /* WYSIWYG Popup */
    .wysiwyg-popup{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
    }

    .content-preview ul, .content-preview ol{
        list-style: inside;
    }

    /* ============= File Upload Component ============= */
    /* File Uploader Base */
    .qq-uploader{
        background-color: var(--surface-third);
        border: 1px dashed var(--border);
        border-radius: var(--input-radius);
    }

    /* File Uploader Placeholder Text */
    .qq-uploader:before{
        font-size: var(--font-size-base);
        color: var(--foreground-second);
        font-weight: 600;
    }

    /* ============= File Upload List ============= */
    /* Upload List Container */
    .qq-upload-list{
        box-shadow: none;
    }

    /* Individual Upload Item */
    .qq-upload-list li{
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        margin-bottom: 12px;
        background: var(--surface-second);
        color: var(--foreground-primary);
    }


    /* ============= Radio Button Styles ============= */
    .radio-item{
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: var(--font-size-base);
        color: var(--foreground-primary);
    }

    input[type="radio"]{
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        cursor: pointer;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: 50%;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        position: relative;
        margin-top: -4px !important;
        padding: 0 !important;
    }

    input[type="radio"]::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: transparent;
        border-radius: 50%;
        transition: background-color 0.2s;
        border: none;
    }

    input[type="radio"]:hover{
        background-color: var(--surface-second);
    }

    input[type="radio"]:checked{
        background-color: var(--primary);
        border: 1px solid var(--primary);
    }

    input[type="radio"]:checked::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: var(--color-white);
        border-radius: 50%;
    }

    .manual-control-wrapper .checkbox-parent {
        display: inline-flex !important;

        align-items: center;
        flex-direction: row-reverse;
        justify-content: start;

        margin-top: 0px !important;
    }
    
    .checkbox-item label, .radio-item label, li input[type="radio"] + label{
        height: auto !important;
        line-height: 30px !important;
        vertical-align: top !important;
        margin-bottom: 0px !important;
        margin-right: 16px !important;
        margin-right: 24px !important;
        margin-left: 0px !important;
        text-wrap: nowrap;
        width: fit-content;
    }

    li > input[type='radio']{
        margin-top: 9px !important;
    }

    .radio-label{
        line-height: 30px !important;
    }

    .ui-dialog .radio-label{
        line-height: auto !important;
    }

    .radio-wrapper{
        /* display: flex !important; */
        height: auto !important;
        line-height: 20px !important;
        vertical-align: top !important;
    }

    .form-control {
        margin-bottom: revert-layer !important;
    }
}

/* ==== /client/css/admin/theme/table.css ==== */
/* =====================================
   TABLE COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Overview Table Base ============= */
    /* Overview Table Container */
    .overview-table, .tabulator{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--table-radius);
    }

    .tabulator{
        overflow: auto;
    }

    .overview-table {
        overflow: hidden;
    }

    /* ============= Table Headers ============= */
    /* Table Header Cells */
    .overview-table th, .tabulator-header .tabulator-col{
        background-color: var(--surface-third);
        border: 1px solid var(--border);
        border-left: none;
        border-top: none;

        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        color: var(--foreground-second) !important;
    }

    .overview-table th{
        padding: 12px 10px 9px 10px !important;
    }

    /*
     * Listings give their first column a wider gutter, applied to both the header and
     * the body cells by new-layout.css (".search-table table td:first-child,
     * .search-table table th:first-child { padding-left: 30px }" and friends).
     *
     * That rule lives in @layer base while the blanket ".overview-table th" padding
     * above lives in @layer components, and a later layer wins - so the gutter survived
     * on the body cells but was reset to 10px on the header. The first column's heading
     * then sat 20px to the left of its own content, which is most obvious on Policy
     * Listing where the column holds icon buttons.
     *
     * Re-apply the gutter for header cells, scoped to exactly the containers whose body
     * cells get it, so headers in tables without the gutter are left alone.
     */
    .search-table table th:first-child,
    .padded-table th:first-child,
    .nosearch-table th:first-child{
        padding-left: 30px !important;
    }

    .tabulator-header .tabulator-col{
        padding: 0px !important;
    }

    .tabulator-col-content{
        height: 100%;
        width: 100%;
        display: inline-flex !important;
        align-items: center !important;
    }

    .tabulator-col-title-holder{
        width: 100%;
    }

    table th .ui-icon{
        margin-left: 8px;
        color: var(--foreground-second) !important;
    }

    /* First Header Cell Corner */
    .overview-table th:first-child, .tabulator-header .tabulator-col:first-child{
        border-top-left-radius: var(--table-radius);
    }

    /* Last Header Cell Corner */
    .overview-table th:last-child, .tabulator-header .tabulator-col:last-child{
        border-right: none;
        border-top-right-radius: var(--table-radius);
    }

    .tableHeading{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-bottom: none;
        border-top-left-radius: var(--table-radius);
        border-top-right-radius: var(--table-radius);
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;
        padding: 8px 10px;
    }

    .newTableHeading{
        background-color: var(--surface-primary) !important;
        border: none;
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;

    }

    .newTableHeading .title{
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
        font-weight: 600;
    }

    .tableHeading + table{
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .tableHeading + table th{
        border-radius: 0 !important;
    }

    .tableHeading + table th > .ui-icon {
        position: relative;
    }


    /* ============= Table Data Cells ============= */
    /* Table Data Cells */
    .overview-table td, .tabulator-tableHolder .tabulator-cell{
        border: 1px solid var(--border);
        border-left: none;
        border-top: none;

        background: var(--surface-primary);
        font-size: var(--font-size-sm);
        color: var(--foreground-primary);
    }

    /* First Data Cell */
    .overview-table td:first-child, .tabulator-tableHolder .tabulator-cell:first-child{
        border-left: none;
    }

    /* Last Data Cell */
    .overview-table td:last-child, .tabulator-tableHolder .tabulator-cell:last-child{
        border-right: none;
    }

    /* ============= Table Row States ============= */
    /* Table Row Hover State */
    .overview-table tbody tr:hover td, .tabulator-tableHolder .tabulator-row:hover .tabulator-cell{
        background-color: var(--surface-second);
    }

    /* Last Row Border */
    .overview-table tbody tr:last-child td{
        border-bottom: none;
    }

    /* Last Row Corner Radius */
    .overview-table tr:last-child td:first-child{
        border-bottom-left-radius: var(--table-radius);
    }

    .overview-table tr:last-child td:last-child{
        border-bottom-right-radius: var(--table-radius);
    }

    /* ============= Data Table Styles ============= */
    /* Data Table Border Radius Reset */
    .tableData:not(.ui-corner-all) td, .tableData:not(.ui-corner-all) th, .tableData:not(.ui-corner-all) table{
        border-radius: 0;
    }

    /* Data Table Border Reset */
    .tableData:not(.ui-corner-all) table{
        border-left: none;
        border-right: none;
    }

    /* Data Table Corner Radius */
    .tableData.ui-corner-all{
        border-radius: var(--table-radius);
    }

    /* ============= Table Footer ============= */
    /* Table Footer Cells */

    table tfoot td{
        /* padding: 0 !important; */
        border: none;
        border-top: 1px solid var(--border) !important;
    }

    table tfoot td:empty{
        padding: 0 !important;
    }

    table tfoot tr:has(> td:only-child:empty){
        display: none;
    }

    .totals-row td{
        font-weight: 600 !important;
        background-color: var(--surface-primary) !important;
        padding: 8px 10px !important;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }

    /* ============= Pagination ============= */
    /* Paginator Container */
    .paginator{
        /* padding: 8px 0px; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Paginator Text Elements */
    .paginator span{
        font-size: var(--font-size-base);
        color: var(--foreground-primary);

        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Paginator Input Fields */
    .paginator input{
        max-width: 40px;
        min-height: 24px;
        height: 24px !important;
    }

    /* Page-jump box, sized to match the adjacent .tag pill. Scoped to #dashboardBox
       so it outranks the blanket input rule in input.css, which would otherwise
       force 12px side padding and a 34px min-height onto it. Width fits 4 digits. */
    #dashboardBox .paginator input.page-jump{
        width: 40px;
        max-width: 40px;
        padding: 0 4px;
        min-height: 28px;
        height: 28px !important;
        text-align: center;
    }

    /* ============= Pagination Buttons ============= */
    /* Pagination Button Base */
    .paginator span.page, 
    .paginator span.first, 
    .paginator span.last, 
    .paginator span.previous, 
    .paginator span.next,
    .tabulator-paginator .tabulator-page{
        background: var(--surface-primary) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--btn-radius) !important;
        color: var(--foreground-primary) !important;
        padding: 4px 8px !important;
        cursor: pointer !important;
        user-select: none;
        transition: background 0.2s, border-color 0.2s, color 0.2s;

        height: 24px !important;
        min-height: 24px !important;

        font-size: var(--font-size-base) !important;
        line-height: 100% !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    /* Page Number Button */
    .paginator span.page, .tabulator-pages .tabulator-page{
        background-color: var(--surface-second) !important;
        border-color: transparent !important;
    }

    /* ============= Pagination Button States ============= */
    /* Pagination Button Hover State */
    .paginator span.page:hover, 
    .paginator span.first:hover, 
    .paginator span.last:hover, 
    .paginator span.previous:hover, 
    .paginator span.next:hover,
    .tabulator-page:hover{
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Current Page Button */
    .paginator span.page.current, .tabulator-pages .tabulator-page.active{
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--color-white) !important;
        cursor: default !important;
    }



    /* ============= MISC ============= */
    .tabulator-page span{
        color: inherit !important;
    }

    .tabulator-page .ui-button-text{
        padding: 0 !important;
        line-height: 1 !important;
    }

    .tabulator{
        font-size: 1em;
    }

    .tabulator-placeholder span{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
    }

    .tabulator .tabulator-header{
        border-bottom: none;
    }

    .tabulator-col-content, .tabulator-cell{
        padding: 8px 10px !important;
    }

    .tabulator-tableHolder .tabulator-cell{
        display: inline-flex;
        align-items: center;
    }

    .tabulator-headers .tabulator-col-title{
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        color: var(--foreground-second) !important;
        text-align: left !important;
    }

    .tabulator .tabulator-footer{
        border-top: 1px solid var(--border);
        position: sticky;
        left: 0;
        bottom: 0;
    }

    .view-btn, .edit-btn{
        width: 24px !important;
        height: 24px !important;
        border-radius: var(--btn-radius) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .view-btn .fa, .edit-btn .fa{
        line-height: 0;
    }

    .view-btn{
        background-color: var(--primary) !important;
    }

    .edit-btn{
        background-color: var(--secondary) !important;
    }

    .tabulator-header .tabulator-col:nth-child(n+3), .tabulator-row .tabulator-cell:nth-child(n+3) {
        min-width: 90px !important;
    }

    .tabulator-tableHolder, .tabulator-headers, .tabulator-header{
        overflow: visible;
    }

    .tabulator{
        overflow-x: auto !important;
    }

    div[data-role="multi-placeholder"]{
        background-color: transparent !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color']{
        border-radius: var(--widget-radius) !important;
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color'] > .form-heading{
        background-color: var(--surface-primary) !important;
        padding: 4px 16px !important;
        border-bottom: 1px solid var(--border) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-top: 0 !important;
    }

    div[data-role="multi-placeholder"][data-ds-control="null"][style*='background-color'] > .mi-table-wrapper{
        padding: 16px !important;
    }

    .load-child-table .fa-folder{
        color: var(--secondary) !important;
    }

    table.overview-table.bordered{
        border-collapse: separate !important;
    }


    table.overview-table tbody.compare tr.diff td{
        background-color: var(--destructive-light) !important;
    }

    table.overview-table tbody.compare tr.same td{
        background-color: var(--success-light) !important;
    }


    #equationOverviewWrapper,
    #equationOverviewWrapper > .ui-accordion-content {
        display: contents !important;
    }

    /* =====================================
    LISTING TABLES
    ===================================== */
    #policies-overview-wrapper .tableData,
    #policies-overview-wrapper th,
    #policies-overview-wrapper td,
    div[data-role="claims-overview"] .tableData,
    div[data-role="claims-overview"] th,
    div[data-role="claims-overview"] td,
    div[data-role="settlements-overview"] .tableData,
    div[data-role="settlements-overview"] th,
    div[data-role="settlements-overview"] td,
    div[data-role="claims-recover-overview"] .tableData,
    div[data-role="claims-recover-overview"] th,
    div[data-role="claims-recover-overview"] td,
    #renewals-overview-wrapper .tableData,
    #renewals-overview-wrapper th,
    #renewals-overview-wrapper td,
    #claims-recover-container .tableData,
    #claims-recover-container th,
    #claims-recover-container td,
    #schedules-listing-table,
    #schedules-listing-table th,
    #schedules-listing-table td,
    #reconciliations-wrapper .tableData,
    #reconciliations-wrapper th,
    #reconciliations-wrapper td,
    div[data-role="accounts-accounts"] .tableData,
    div[data-role="accounts-accounts"] th,
    div[data-role="accounts-accounts"] td,
    div[data-role="accounts-companies"] .tableData,
    div[data-role="accounts-companies"] th,
    div[data-role="accounts-companies"] td,
    div[data-role="accounts-banks"] .tableData,
    div[data-role="accounts-banks"] th,
    div[data-role="accounts-banks"] td,
    div[data-role="accounts-acctypes"] .tableData,
    div[data-role="accounts-acctypes"] th,
    div[data-role="accounts-acctypes"] td,
    div[data-role="accounts-groups"] .tableData,
    div[data-role="accounts-groups"] th,
    div[data-role="accounts-groups"] td,
    div[data-role="accounts-types"] .tableData,
    div[data-role="accounts-types"] th,
    div[data-role="accounts-types"] td,
    div[data-role="accounts-currencies"] .tableData,
    div[data-role="accounts-currencies"] th,
    div[data-role="accounts-currencies"] td,
    div[data-role="accounts-workflow"] .tableData,
    div[data-role="accounts-workflow"] th,
    div[data-role="accounts-workflow"] td,
    div[data-role="deposits-preset-settings"] .tableData,
    div[data-role="deposits-preset-settings"] th,
    div[data-role="deposits-preset-settings"] td,
    #firms-overview-wrapper .tableData,
    #firms-overview-wrapper th,
    #firms-overview-wrapper td,
    #authorise_broker_overview .tableData,
    #authorise_broker_overview th,
    #authorise_broker_overview td,
    #consumerOverviewWrapper .tableData,
    #consumerOverviewWrapper th,
    #consumerOverviewWrapper td,
    #cases_broker_listing .overview-table,
    #cases_broker_listing th,
    #cases_broker_listing td,
    table[data-name="policy-logs"] th,
    table[data-name="policy-logs"] td,
    table[data-name="toba-report"] th,
    table[data-name="toba-report"] td,
    #logsOverviewWrapper .tableData,
    #logsOverviewWrapper th,
    #logsOverviewWrapper td,
    #productsListingWrapper .tableData,
    #productsListingWrapper th,
    #productsListingWrapper td,
    #taxesWrapper .tableData,
    #taxesWrapper th,
    #taxesWrapper td,
    div[data-role="insurers-insurers"] .tableData,
    div[data-role="insurers-insurers"] th,
    div[data-role="insurers-insurers"] td,
    div[data-role="contracts-overview"] .tableData,
    div[data-role="contracts-overview"] th,
    div[data-role="contracts-overview"] td,
    #eocListingWrapper .tableData,
    #eocListingWrapper th,
    #eocListingWrapper td,
    #eocGroupListingWrapper .tableData,
    #eocGroupListingWrapper th,
    #eocGroupListingWrapper td,
    #referralsListingWrapper .tableData,
    #referralsListingWrapper th,
    #referralsListingWrapper td,
    #equationOverviewWrapper .tableData,
    #equationOverviewWrapper th,
    #equationOverviewWrapper td,
    #matrix-listing-container .tableData,
    #matrix-listing-container th,
    #matrix-listing-container td,
    #datasetsOverviewWrapper .tableData,
    #datasetsOverviewWrapper th,
    #datasetsOverviewWrapper td,
    #fieldsOverviewWrapper .tableData,
    #fieldsOverviewWrapper th,
    #fieldsOverviewWrapper td,
    #eavObjectsOverviewWrapperDiv .tableData,
    #eavObjectsOverviewWrapperDiv th,
    #eavObjectsOverviewWrapperDiv td,
    #websitesOverviewWrapper .tableData,
    #websitesOverviewWrapper th,
    #websitesOverviewWrapper td,
    #documentsOverviewWrapper .tableData,
    #documentsOverviewWrapper th,
    #documentsOverviewWrapper td,
    #usersOverviewWrapper .tableData,
    #usersOverviewWrapper th,
    #usersOverviewWrapper td,
    #groupsOverviewWrapper .tableData,
    #groupsOverviewWrapper th,
    #groupsOverviewWrapper td,
    #temp-bans-overview .tableData,
    #temp-bans-overview th,
    #temp-bans-overview td,
    #permissionsWrapper th,
    #permissionsWrapper td,
    #idpsOverviewWrapper .tableData,
    #idpsOverviewWrapper th,
    #idpsOverviewWrapper td,
    #appConfigWrapper .tableData,
    #appConfigWrapper th,
    #appConfigWrapper td,
    #casesProductsOverviewWrapper .tableData,
    #casesProductsOverviewWrapper th,
    #casesProductsOverviewWrapper td
    {
        border-radius: 0 !important;
    }

    #policies-overview-wrapper .tableData > .overview-table,
    div[data-role="claims-overview"] .tableData > .overview-table,
    div[data-role="settlements-overview"] .tableData > .overview-table,
    div[data-role="claims-recover-overview"] > .search-table .overview-table,
    #renewals-overview-wrapper .tableData > .overview-table,
    #claims-recover-container .tableData > .overview-table,
    #schedules-listing-table,
    #reconciliations-wrapper .tableData > .overview-table,
    div[data-role="accounts-accounts"] .tableData > .overview-table,
    div[data-role="accounts-companies"] .tableData > .overview-table,
    div[data-role="accounts-banks"] .tableData > .overview-table,
    div[data-role="accounts-acctypes"] .tableData > .overview-table,
    div[data-role="accounts-groups"] .tableData > .overview-table,
    div[data-role="accounts-types"] .tableData > .overview-table,
    div[data-role="accounts-currencies"] .tableData > .overview-table,
    div[data-role="accounts-workflow"] .tableData > .overview-table,
    div[data-role="deposits-preset-settings"] .tableData > .overview-table,
    #firms-overview-wrapper .tableData > .overview-table,
    #authorise_broker_overview .tableData > .overview-table,
    #consumerOverviewWrapper .tableData > .overview-table,
    #cases_broker_listing .overview-table,
    table[data-name="policy-logs"],
    table[data-name="toba-report"],
    #logsOverviewWrapper .tableData > .overview-table,
    #productsListingWrapper .tableData > .overview-table,
    #taxesWrapper .tableData > .overview-table,
    div[data-role="insurers-insurers"] .tableData > .overview-table,
    div[data-role="contracts-overview"] .tableData > .overview-table,
    #eocListingWrapper .tableData > .overview-table,
    #eocGroupListingWrapper .tableData > .overview-table,
    #referralsListingWrapper .tableData > .overview-table,
    #equationOverviewWrapper .tableData > .overview-table,
    #matrix-listing-container .tableData > .overview-table,
    #datasetsOverviewWrapper .tableData > .overview-table,
    #fieldsOverviewWrapper .tableData > .overview-table,
    #eavObjectsOverviewWrapperDiv .tableData > .overview-table,
    #websitesOverviewWrapper .tableData > .overview-table,
    #documentsOverviewWrapper .tableData > .overview-table,
    #usersOverviewWrapper .tableData > .overview-table,
    #groupsOverviewWrapper .tableData > .overview-table,
    #temp-bans-overview .tableData > .overview-table,
    #permissionsWrapper .overview-table,
    #idpsOverviewWrapper .tableData > .overview-table,
    #appConfigWrapper .tableData > .overview-table,
    #casesProductsOverviewWrapper .tableData > .overview-table{
        border: none !important;
        border-radius: 0 !important;
    }

    .inner-search-table table td:first-child, .inner-search-table table th:first-child{
        padding-left: 16px !important;
    }

    .inner-search-table table td:last-child, .inner-search-table table th:last-child{
        padding-right: 16px !important;
    }
}
/* CP-6048: Pay Insurers - keep the Actions column visible when the search
   sidebar narrows the scrollport. The generic .overview-table{overflow:hidden}
   above turns the table itself into the clip container, which disables
   position:sticky on its cells, so it is restored to visible for this table. */
@layer components {
    #schedules-listing-table.overview-table {
        overflow: visible;
    }

    #schedules-listing-table th:last-child,
    #schedules-listing-table td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: var(--surface-primary);
        border-left: 1px solid var(--border);
    }

    #schedules-listing-table thead th:last-child {
        z-index: 3;
        background-color: var(--surface-third);
    }

    /* The fixed thead clone (new-ui/table.js) is position:fixed, so a sticky
       cell inside it resolves right:0 against the viewport and drifts over
       the neighbouring header on narrow viewports. Keep the clone's cell in
       normal flow. */
    #schedules-listing-table .fixed-thead-clone th:last-child {
        position: static;
    }

    /* Match the row hover highlight, which the ID selector above outranks. */
    #schedules-listing-table tbody tr:hover td:last-child {
        background-color: var(--surface-second);
    }
}

/* ==== /client/css/admin/theme/datepicker.css ==== */
/* =====================================
   DATEPICKER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Datepicker Base ============= */
    .ui-datepicker{
        background-color: var(--surface-primary);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        overflow: hidden;
    }

    /* ============= Datepicker Header ============= */
    .ui-datepicker-header{
        background-color: var(--surface-second);
        border: none;
        border-bottom: 1px solid var(--border);
    }

    /* Datepicker Header Divider */
    .ui-datepicker-header:not(:last-of-type){
        border-right: 1px solid var(--border);
    }

    /* Datepicker Title Text */
    .ui-datepicker-title span{
        color: var(--foreground-primary);
        font-size: var(--font-size-md);
        font-family: var(--font-family-sans);
    }

    /* ============= Navigation Arrows ============= */
    /* Hide Default Arrow Text */
    .ui-datepicker-prev span{
        display: none;
    }

    .ui-datepicker-next span{
        display: none;
    }

    /* Previous Arrow Button */
    .ui-datepicker-prev{
        background-image: url("/client/images/icon_chevron-left.svg");
        background-size: 16px 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Next Arrow Button */
    .ui-datepicker-next{
        background-image: url("/client/images/icon_chevron-right.svg");
        background-size: 16px 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* ============= Calendar Grid ============= */
    /* Calendar Header Cells */
    .ui-datepicker-calendar th{
        border-bottom: 1px solid var(--border);
        color: var(--foreground-third);
        font-size: var(--font-size-base);
        font-weight: 600;
    }

    /* Calendar Date Cells */
    .ui-datepicker-calendar td{
        border: 1px solid var(--border);
        width: 35px;
        height: 35px;
    }

    /* Calendar Date Links and Spans */
    .ui-datepicker-calendar td a, .ui-datepicker-calendar td span{
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        line-height: 35px;
        font-weight: 600;

        background-color: var(--surface-second);
    }

    /* ============= Calendar States ============= */
    /* Highlighted Date (Today) */
    .ui-datepicker-calendar td a.ui-state-highlight{
        color: var(--primary);
        border: none;
    }

    /* Date Hover State */
    .ui-datepicker-calendar td a:hover{
        background-color: var(--primary);
        color: var(--color-white);
    }

    /* Other Month Dates - Commented Out */
    /* .ui-datepicker-calendar td.ui-datepicker-other-month{
        border: none;
    } */
}

/* ==== /client/css/admin/theme/slideover.css ==== */
/* =====================================
   SLIDEOVER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Sidebar Search ============= */
    /* Sidebar Search Normal State */
    [data-role="sidebar-search"].normal{
        background-color: var(--surface-primary);
        border-left: 1px solid var(--border);
    }

    /* ============= Search Presets ============= */
    /* Search Presets Container */
    [data-role="search-presets"]{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    /* ============= Preset Header ============= */
    /* Preset Header Container */
    .preset-header{
        border-bottom: 1px solid var(--border);
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Preset Header Title */
    .preset-header h2{
        font-weight: 600;
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
    }

    /* Preset Header Icon */
    .preset-header h2 .fa{
        color: var(--foreground-second);
    }

    /* ============= Preset Controls ============= */
    /* Preset Controls Container */
    .preset-controls{
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Preset Controls Input Info */
    .preset-controls .input-info{
        border-left: 1px solid var(--border);
        right: 6px;
    }

    /* Preset Controls Input Info Link */
    .preset-controls .input-info a{
        color: var(--foreground-second);
        border-top-right-radius: var(--input-radius);
        border-bottom-right-radius: var(--input-radius);
    }

    /* Preset Controls Input Info Link Hover */
    .preset-controls .input-info a:hover{
        color: var(--foreground-primary);
        background-color: transparent;
        /* background-color: var(--surface-second); */
    }

    /* Preset Controls No Presets Message */
    .preset-controls .noPresets{
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--foreground-second);
    }

    /* ============= My Presets Section ============= */
    /* My Presets Parent Container */
    .my-presets-parent{
        padding-bottom: 8px;
    }

    /* My Presets Section Title */
    .my-presets-parent h3{
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--foreground-second);
        border-top: 1px solid var(--border);
        padding-left: 16px;
        padding-right: 16px;
    }

    /* My Presets Icon */
    .my-presets-parent > a > .fa{
        color: var(--foreground-second);
    }

    /* ============= Preset Items ============= */
    /* Preset Item Container */
    .preset-parent{
        padding: 8px 8px;
        border-radius: var(--widget-radius);
        background: transparent;
        margin: 0;
    }

    /* Preset Item Hover State */
    .preset-parent:hover{
        background: var(--surface-second);
    }

    /* Preset Item Link */
    .preset-parent > a{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
        text-decoration: none;
        flex: 1;
    }

    .trigger-btns{
        background-color: var(--surface-second);
        border-top: 1px solid var(--border);
    }
}

/* ==== /client/css/admin/theme/layout.css ==== */
/* =====================================
   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: clip;
    }

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

/* ==== /client/css/admin/theme/toast.css ==== */
@layer components{
    .toast {
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        color: var(--foreground-primary);
        box-shadow: var(--shadow-lg);
        border-radius: var(--widget-radius);
    }

    .toast-warning{
        border-left: 4px solid var(--warning);
        background-color: var(--warning);
        color: var(--color-white);
    }

    .toast-success{
        border-left: 4px solid var(--success);
        background-color: var(--success);
        color: var(--color-white);
    }

    .toast-error{
        border-left: 4px solid var(--destructive);
        background-color: var(--destructive);
        color: var(--color-white);
    }

    .toast-info{
        border-left: 4px solid var(--info);
        background-color: var(--info);
        color: var(--color-white);
    }

    .toast-message{
        font-size: var(--font-size-base);
    }
}

/* ==== /client/css/admin/theme/icons.css ==== */
/* Subset of Tabler Icons (only the glyphs referenced below). Regenerate with:
   pyftsubset client/fonts/tabler-icons.ttf --unicodes=<codepoints used in this file> --flavor=woff2 --no-hinting --drop-tables+=GSUB,GPOS,GDEF */
@font-face {
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/client/fonts/tabler-icons.subset.woff2") format("woff2");
}

.fa-folder::before{
    font-family: "tabler-icons" !important;
    content: '\eaad' !important;
}

.fa-history::before{
    font-family: "tabler-icons" !important;
    content: '\ebea' !important;
}

.fa-comments::before{
    font-family: "tabler-icons" !important;
    content: '\eb6c' !important;
}

.fa-calendar::before{
    font-family: "tabler-icons" !important;
    content: '\fd2f' !important;
}

.fa-expand::before{
    font-family: "tabler-icons" !important;
    content: '\ea27' !important;
}

.fa-compress::before{
    font-family: "tabler-icons" !important;
    content: '\ef38' !important;
}

.fa-search::before{
    font-family: "tabler-icons" !important;
    content: '\eb1c' !important;
}

.fa-search-plus::before{
    font-family: "tabler-icons" !important;
    content: '\eb1c' !important;
}

.fa-refresh::before{
    font-family: "tabler-icons" !important;
    content: '\eb13' !important;
}

.fa-floppy-o::before{
    font-family: "tabler-icons" !important;
    content: '\eb62' !important;
}

.fa-chevron-circle-up::before{
    font-family: "tabler-icons" !important;
    content: '\ea62' !important;
}

.fa-chevron-circle-down::before{
    font-family: "tabler-icons" !important;
    content: '\ea5f' !important;
}

.fa-pencil-square-o::before,.fa-pencil::before{
    font-family: "tabler-icons" !important;
    content: '\eb04' !important;
}

.fa-times-circle::before{
    font-family: "tabler-icons" !important;
    content: '\eb55' !important;
}

.fa-trash::before{
    font-family: "tabler-icons" !important;
    content: '\eb41' !important;
}

.wysiwyg-toolbar-icon[title="Insert link"]::before,
.wysiwyg-toolbar-icon[data-original-title="Insert link"]::before{
    font-family: "tabler-icons" !important;
    content: '\fd17' !important;
}

.wysiwyg-toolbar-icon[title="Bold (Ctrl+B)"]::before,
.wysiwyg-toolbar-icon[data-original-title="Bold (Ctrl+B)"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb7b' !important;
}

.wysiwyg-toolbar-icon[title="Italic (Ctrl+I)"]::before,
.wysiwyg-toolbar-icon[data-original-title="Italic (Ctrl+I)"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb93' !important;
}

.wysiwyg-toolbar-icon[title="Underline (Ctrl+U)"]::before,
.wysiwyg-toolbar-icon[data-original-title="Underline (Ctrl+U)"]::before{
    font-family: "tabler-icons" !important;
    content: '\eba2' !important;
}

.wysiwyg-toolbar-icon[title="Strikethrough (Ctrl+S)"]::before,
.wysiwyg-toolbar-icon[data-original-title="Strikethrough (Ctrl+S)"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb9e' !important;
}

.wysiwyg-toolbar-icon[title="Text color"]::before,
.wysiwyg-toolbar-icon[data-original-title="Text color"]::before{
    font-family: "tabler-icons" !important;
    content: '\f2dc' !important;
}

.wysiwyg-toolbar-icon[title="Background color"]::before,
.wysiwyg-toolbar-icon[data-original-title="Background color"]::before{
    font-family: "tabler-icons" !important;
    content: '\fd2c' !important;
}

.wysiwyg-toolbar-icon[title="Left"]::before,
.wysiwyg-toolbar-icon[data-original-title="Left"]::before{
    font-family: "tabler-icons" !important;
    content: '\ea09' !important;
}

.wysiwyg-toolbar-icon[title="Center"]::before,
.wysiwyg-toolbar-icon[data-original-title="Center"]::before{
    font-family: "tabler-icons" !important;
    content: '\ea07' !important;
}

.wysiwyg-toolbar-icon[title="Right"]::before,
.wysiwyg-toolbar-icon[data-original-title="Right"]::before{
    font-family: "tabler-icons" !important;
    content: '\ea0a' !important;
}

.wysiwyg-toolbar-icon[title="Justify"]::before,
.wysiwyg-toolbar-icon[data-original-title="Justify"]::before{
    font-family: "tabler-icons" !important;
    content: '\ea08' !important;
}

.wysiwyg-toolbar-icon[title="Subscript"]::before,
.wysiwyg-toolbar-icon[data-original-title="Subscript"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb9f' !important;
}

.wysiwyg-toolbar-icon[title="Superscript"]::before,
.wysiwyg-toolbar-icon[data-original-title="Superscript"]::before{
    font-family: "tabler-icons" !important;
    content: '\eba0' !important;
}

.wysiwyg-toolbar-icon[title="Indent"]::before,
.wysiwyg-toolbar-icon[data-original-title="Indent"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb91' !important;
}

.wysiwyg-toolbar-icon[title="Outdent"]::before,
.wysiwyg-toolbar-icon[data-original-title="Outdent"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb92' !important;
}

.wysiwyg-toolbar-icon[title="Ordered list"]::before,
.wysiwyg-toolbar-icon[data-original-title="Ordered list"]::before{
    font-family: "tabler-icons" !important;
    content: '\ef11' !important;
}

.wysiwyg-toolbar-icon[title="Unordered list"]::before,
.wysiwyg-toolbar-icon[data-original-title="Unordered list"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb6b' !important;
}

.wysiwyg-toolbar-icon[title="Remove format"]::before,
.wysiwyg-toolbar-icon[data-original-title="Remove format"]::before{
    font-family: "tabler-icons" !important;
    content: '\eb8b' !important;
}

.wysiwyg-toolbar-icon[title="Submit"]::before,
.wysiwyg-toolbar-icon[data-original-title="Submit"]::before{
    font-family: "tabler-icons" !important;
    content: '\ea5e' !important;
}


.jstree-default a .jstree-icon{
    background: transparent !important;
    position: relative;
}

.jstree-default a .jstree-icon::before{
    font-family: "tabler-icons" !important;
    content: '\eaae' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: var(--secondary);
}

.ui-icon-zoomin{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-zoomin::before{
    font-family: "tabler-icons" !important;
    content: '\fdaa' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-pencil{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-pencil::before{
    font-family: "tabler-icons" !important;
    content: '\eb04' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-mail-open{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-mail-open::before{
    font-family: "tabler-icons" !important;
    content: '\eae4' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-info{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-info::before{
    font-family: "tabler-icons" !important;
    content: '\eac5' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-wrench{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-wrench::before{
    font-family: "tabler-icons" !important;
    content: '\eb40' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-trash{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-trash::before{
    font-family: "tabler-icons" !important;
    content: '\eb41' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-arrowthickstop-1-s{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-arrowthickstop-1-s::before{
    font-family: "tabler-icons" !important;
    content: '\ea96' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-plus{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-plus::before{
    font-family: "tabler-icons" !important;
    content: '\eb0b' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-mail-closed{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-mail-closed::before{
    font-family: "tabler-icons" !important;
    content: '\eae5' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}

.ui-icon-refresh{
    background: transparent !important;
    color: inherit !important;
}

.ui-icon-refresh::before{
    font-family: "tabler-icons" !important;
    content: '\eb13' !important;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-base);
    color: inherit !important;
    text-indent: 0px !important;
}