/*
 * PRM Portal — utility classes
 * Loaded once by prmThemeLayout. These complement SLDS utilities, never replace them.
 * Use SLDS classes (slds-grid, slds-p-around_medium…) FIRST. Reach for these only when SLDS lacks an equivalent.
 */
@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Light.woff2") format("woff2"),
       url("../fonts/Moderat-Light.woff") format("woff"),
       url("../fonts/Moderat-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Light-Italic.woff2") format("woff2"),
       url("../fonts/Moderat-Light-Italic.woff") format("woff"),
       url("../fonts/Moderat-Light-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Regular.woff2") format("woff2"),
       url("../fonts/Moderat-Regular.woff") format("woff"),
       url("../fonts/Moderat-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Regular-Italic.woff2") format("woff2"),
       url("../fonts/Moderat-Regular-Italic.woff") format("woff"),
       url("../fonts/Moderat-Regular-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Bold.woff2") format("woff2"),
       url("../fonts/Moderat-Bold.woff") format("woff"),
       url("../fonts/Moderat-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Moderat";
  src: url("../fonts/Moderat-Bold-Italic.woff2") format("woff2"),
       url("../fonts/Moderat-Bold-Italic.woff") format("woff"),
       url("../fonts/Moderat-Bold-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
body {
  font-family: var(--prm-font-family);
  font-weight: var(--prm-font-weight-400);
  font-size: var(--prm-font-m-size);
  font-style: regular;
}
h2{
  font-family: var(--prm-font-family);
  font-size :21px ;
  line-height :28px;
  font-weight: 700;
  font-style:bold;
 }

/* Card shell — PRM brand card with consistent radius + border */
.prm-card {
    background: var(--prm-white, #FFFFFF);   
    border-radius: var(--prm-m-radius);
    padding: 1.5rem;
}
.prm-home__cards-item a:hover{
    text-decoration: none !important;
}
.prm-content {
    padding: 0 24px;
}
.prm-other-support__cards-item a,
.prm-other-support__cards-item a:link:not(.slds-button, .slds-dropdown__item > a),
.prm-other-support__cards-item a:visited:not(.slds-button, .slds-dropdown__item > a){
    text-decoration:none;
}

@media (max-width: 678px) {
    .prm-content {
        padding: 0 12px;
    }
}

/* Pill button shape (when using a raw <button>) */
.prm-pill {
    border-radius: var(--prm-radius-pill, 999px);
}

.prm-page-title {    
    font-size: 33px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0;
    color: var(--prm-black);
    margin: 0 0 24px;
    padding: 0;
}

/* Section heading */
.prm-section-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--prm-text);
    margin: 0 0 0.75rem;
}

/* Subtle muted text */
.prm-muted {
    color: var(--prm-text-muted, #5B6478);
}

/* Tabular numbers for figures and IDs */
.prm-tabular {
    font-variant-numeric: tabular-nums;
}

/* Focus ring — applied to interactive non-SLDS elements that need keyboard outline */
.prm-focusable:focus-visible {
    outline: 2px solid var(--prm-cyan, #00E5DC);
    outline-offset: 2px;
}

/* Visually hidden (for screen-reader-only labels) */
.prm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.prm-loading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
}

.prm-spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid rgba(229, 39, 158, 0.25);   /* light pink track */
    border-top-color: #E5279E;                     /* vivid pink arc */
    animation: prm-spin 0.9s linear infinite;
}
.prm-spinner_sm {
    width: 1.75rem;
    height: 1.75rem;
    border-width: 2px;
}

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

/* ---------------------------------------------------------------------
 * Counter line — the "10 of 30 showing" style under a page title.
 * Black body-sm with tabular-nums so the digits don't shift width.
 * Used by every paginated list page (Customers, Services,
 * Commissions, Partner cases, Commission detail).
 * --------------------------------------------------------------------- */
.prm-counter {
    margin: 0;
    color: #000000;
    font-size: 0.875rem;
    line-height: 1.25rem;  
}

/* ---------------------------------------------------------------------
 * Page header pattern — title on the left, optional action button on
 * the right, consistent 24px gap below before the next section. Used
 * by detail/list pages that have a header-action button (e.g. Partner
 * cases "New case", Commission detail "Download"). The 24px below
 * comes from `margin-bottom`, replacing the title's default mb so the
 * spacing rule lives in one place.
 * --------------------------------------------------------------------- */
.prm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.prm-page-header .prm-page-title {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .prm-page-header {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
 * Status text colours — used in lightning-datatable cells via
 * cellAttributes.class. The classes need to live in this globally
 * loaded stylesheet (not the page LWC's scoped CSS) because
 * lightning-datatable renders cells inside its own shadow DOM, which
 * page-scoped LWC styles can't reach.
 *
 * Active   → green (success)
 * Inactive → orange (warning) — matches the Services list Figma
 * --------------------------------------------------------------------- */
/* !important is needed to win against lightning-datatable's own cell text
 * colour rules — without it the table's default text colour overrides
 * the cellAttributes.class colour we set on the Status column. */
.prm-status-active,
.prm-status-inactive {
    font-weight: 400 !important;
}

.prm-status-active {
    color: var(--prm-status-active-color) !important;
}

.prm-status-inactive {
    color: var(--prm-status-inactive-color) !important;
}
/**************************************************/
/*****************Data Table***********************/
/**************************************************/
.slds-cell-fixed {
    background-color:var(--slds-c-datatable-heading-color-background);
}
.slds-table th.slds-has-focus, .slds-table th:focus {

    box-shadow:none
}
.slds-th__action:focus, .slds-th__action:hover{
    background-color:var(--slds-c-datatable-heading-color-background);
}
.slds-table thead th{
    color:var(--prm-navy);
}

.slds-table th,
.slds-table td {
    padding:12px 24px;
}
.slds-th__action{
    height: auto;
    min-height: 48px;
    padding: 0 24px;
}
.slds-table_header-fixed_container {
    padding-top: 48px
}   
.slds-dropdown {
    overflow:hidden;
    border-radius: 20px;
    border:1px solid #D5D5D5;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
}
.slds-dropdown__item>a{
    padding:12px 16px;
}
.slds-dropdown__item>a:active
{    
    background-color:var(--color-1-200);
    color: var(--dxp-g-text);
}
.slds-th__action:focus,
.slds-dropdown__item>a:focus,
.slds-table [role=gridcell]:focus{
    -webkit-box-shadow: none;
    box-shadow: none;
}

.slds-has-focus .slds-th__action,
.slds-has-focus.slds-is-resizable .slds-th__action,
.slds-has-focus.slds-is-resizable .slds-th__action:focus,
.slds-has-focus.slds-is-resizable .slds-th__action:focus:hover,
.slds-has-focus.slds-is-resizable .slds-th__action:hover,
.slds-is-resizable .slds-th__action:focus,
.slds-is-resizable .slds-th__action:focus:hover {
    background-color: var(--prm-table-head-bg);
    -webkit-box-shadow:none;
    box-shadow: none;
}
.slds-cell-fixed.slds-is-sortable a{
    color:var(--slds-c-datatable-heading-text-color) !important;
}
.slds-is-sortable .slds-th__action:hover,
.slds-is-sortable .slds-th__action:focus{
    background-color: var(--prm-table-head-bg);
    
}
.slds-cell-fixed.slds-is-sortable a:active,
.slds-cell-fixed.slds-is-sortable a:focus,
.slds-cell-fixed.slds-is-sortable a:hover{
    text-decoration:none;
}

.slds-is-sortable .slds-th__action .slds-is-sortable__icon{   
    width:14px;
    height:14px;
}
.slds-is-sortable .slds-th__action:hover .slds-is-sortable__icon,
.slds-is-sortable .slds-th__action:focus .slds-is-sortable__icon{
    fill:inherit;

}
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus>td:not(.slds-has-focus),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus>th:not(.slds-has-focus),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover>td:not(.slds-has-focus),
.slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover>th:not(.slds-has-focus),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus>td:not(.slds-has-focus),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus>th:not(.slds-has-focus),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover>td:not(.slds-has-focus),
.slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover>th:not(.slds-has-focus) {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Drop the SLDS focus glow on datatable action buttons (the Title link button
   and the download button-icon). Scoped to .slds-table so the focus ring is
   kept on buttons elsewhere in the portal. */
.slds-table .slds-button:focus,
.slds-table lightning-button::part(button):focus,
.slds-table lightning-button-icon::part(button):focus,
.slds-table lightning-button-menu::part(button):focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.slds-table .fix-safari_perf .slds-dropdown-trigger .slds-button_icon-border{
    border: none;
}
.slds-table .fix-safari_perf .slds-dropdown-trigger .slds-button_icon-border svg{
    width: 16px;
    height: 16px;
}
.slds-table .fix-safari_perf .slds-dropdown-trigger .slds-dropdown{
    padding: 0;
    margin: 0;
}
c-prm-data-table th a, a:link:not(.slds-button, .slds-dropdown__item > a){
    --dxp-s-link-text-decoration-hover:none;
}
c-prm-data-table .slds-table--bordered tbody td, 
c-prm-data-table .slds-table--bordered tbody th,
c-prm-data-table .slds-table_bordered tbody td,
c-prm-data-table .slds-table_bordered tbody th{
    border-top: 1px solid var(--component-radio-tab-tab-hovered-border);
}
c-prm-data-table .slds-table--header-fixed tbody tr:first-child td,
c-prm-data-table .slds-table--header-fixed tbody tr:first-child th,
c-prm-data-table .slds-table_header-fixed tbody tr:first-child td,
c-prm-data-table .slds-table_header-fixed tbody tr:first-child th{
     border-top-color: var(--component-radio-tab-tab-hovered-border);
}
c-prm-data-table .slds-resizable__divider:before{
        background-color:var(--prm-1-50-color);
}
/* ---------------------------------------------------------------------
 * Download action icon in the Commission detail table (and any other cell
 * tagged with .prm-download-icon-cell via cellAttributes.class). Scoping
 * to that class keeps the recolour off every other lightning-icon /
 * button-icon in the portal. Specificity (0,2,0) beats SLDS's plain
 * .slds-button__icon (0,1,0), so no !important needed.
 * --------------------------------------------------------------------- */
.prm-download-icon-cell .slds-button__icon,
.prm-download-icon-cell lightning-icon {
    --sds-c-icon-color-foreground-default: var(--icon-base);
    fill: var(--icon-base);
}

.prm-download-icon-cell .slds-button:hover .slds-button__icon,
.prm-download-icon-cell .slds-button:focus-visible .slds-button__icon,
.prm-download-icon-cell lightning-button-icon:hover .slds-button__icon,
.prm-download-icon-cell lightning-button-icon:focus-visible .slds-button__icon {
    --sds-c-icon-color-foreground-default: #4e56b3;
    fill: #4e56b3;
}
/* ---------------------------------------------------------------------
 * Modal sizing — lightning/modal's default "medium" container is
 * width:70% / max-width:75rem (~1200px), which is too wide for our
 * content (e.g. the file-preview popup). Cap medium modals at 800px.
 * The container keeps its own `margin: 0 auto`, so it stays centred.
 * Scoped to `_medium` so any intentionally large modal is unaffected.
 * --------------------------------------------------------------------- */
@media (min-width: 48em) {
    .slds-modal_medium .slds-modal__container {
        max-width: 800px !important;
    }
}
/**************************************************/
/*****************Tab set *************************/
/**************************************************/
.slds-tabs_default .slds-tabs_default__item {
    font-size: inherit;
}

.slds-tabs_default__nav .slds-tabs_default__item a{
    text-decoration:none !important;
    color :var(--dxp-g-brand) !important;
}


.slds-tabs_default__item.slds-is-active::after{
    background-color:var(--dxp-g-brand);
    height:4px;
}
.slds-tabs_default__item:hover::after{
    background-color:transparent;
}

.slds-tabs_default__item:hover{
     background-color:var(--prm-table-head-bg);
}
/**************************************************/
/*****************Knowledge *************************/
/**************************************************/

.prm-knowledge__search .slds-input{
    width: 100%;
    height: 3.25rem;
    padding: 0 1.25rem 0 3rem;
    border: 1px solid var(--prm-border, #D9DEE8);
    border-radius: var(--prm-radius-pill, 9999px);
    background: #FFFFFF;
    font-family: var(--prm-font-family, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--prm-text, #0E1430);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.prm-list__header .slds-form-element{
    margin-bottom:0;
}
.prm-team__search .slds-form-element{
    margin-bottom:0;
}
.prm-team__search .slds-input{
    height: 40px;
    border: 1px solid #FFFFFF;
    border-radius: 32px;
    width: 365px;
}
.prm-list__header .slds-form-element .slds-form-element__control .slds-input{
    height: 40px;
    border: 1px solid rgba(10, 9, 9, 0.2);
    border-radius: 32px;
    font-family: "Moderat";
}

.prm-list__header .slds-form-element .slds-form-element__control .slds-input::placeholder,
.prm-knowledge__search .slds-input::placeholder {
    color: rgba(10, 9, 9, 0.2);
    opacity: 1;
}

.prm-list__header .slds-input__icon,
.prm-knowledge__search .slds-input__icon {
    fill: var(--icon-base);
}
.prm-list__table {
    --dxp-c-link-text-color: var(--prm-link);
}
.prm-list__table {
    --slds-g-color-neutral-base-70: transparent;
    --lwc-colorGray5: transparent;
}
/*****************************************************/
/********************** Modal************************/
/****************************************************/
.slds-form-element__label,
.slds-checkbox .slds-checkbox__label .slds-form-element__label,
.slds-input,
.slds-combobox__input{
    font-size :14px;
    
}
.slds-input{
   color:var(--prm-border-input);
}
.slds-input,
.slds-combobox__input{
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left:var(--slds-c-input-spacing-inline-start,16px);
}
.slds-input-has-icon_left .slds-input{
    --slds-c-input-spacing-inline-start: 2rem;
}
.slds-form-element {
    margin-bottom: 12px;
}
.slds-checkbox .slds-checkbox_faux{
    width:24px;
    height:24px;
}
.slds-combobox__input.slds-input_faux.fix-slds-input_faux{
    line-height:20px;
}
c-prm-custom-modal .slds-input_faux.slds-is-disabled{    
    background: var(--inactive-fill);
    border: 1px solid var(--inactive-border);
    --slds-g-color-neutral-base-50:#707070;
}
c-prm-custom-modal .slds-icon-text-default{
    --slds-c-icon-color-foreground:#707070;
}
c-prm-custom-modal .slds-listbox_vertical .slds-listbox__option.slds-has-focus{
    box-shadow:none;
}
c-prm-custom-modal .slds-textarea{
    border-radius:20px;
    --dxp-s-form-element-color-border:var(--component-input-default-border);
    
}
c-prm-custom-modal .slds-combobox__input{
   --slds-c-input-color-border:var(--component-input-default-border); 
}
/**********************************************/
/****************Button ***********************/
/**********************************************/
c-prm-button .slds-button_outline-brand:active:not(c-prm-button.prm-edit-button .slds-button_outline-brand:active),
c-prm-button .slds-button_outline-brand:focus
{      
      box-shadow: 0 0 0 3px var(--prm-white),
                  0 0 0 5px var(--dxp-g-brand) !important;
      outline: none;
}  
c-prm-button .slds-button_brand:active,
c-prm-button .slds-button_brand:focus
{      
      box-shadow: 0 0 0 3px var(--prm-white),
                  0 0 0 5px var(--prm-navy) !important;
      outline: none;
}
c-prm-button .slds-button_brand:focus{
    background: var(--component-button-primary-default-fill);    
    border: 2px solid var(--component-button-primary-default-border);
    color: var(--component-button-primary-default-label);    
}
c-prm-button .slds-button_outline-brand:focus{
    background: var(--component-button-secondary-default-fill);
    border: 2px solid var(--component-button-secondary-default-border);
    color: var(--component-button-secondary-default-label);
}
.slds-button_brand:disabled,
.slds-button_outline-brand:disabled{
    color:var(--component-button-disabled-label);
    background-color:var(--component-button-disabled-label);    
}

 /*******Edit,Modal and Action Button*********/
.prm-action-button .slds-button_brand,
.prm-action-button .slds-button_outline-brand,
c-prm-button.prm-edit-button .slds-button{
    --dxp-s-button-font-size:14px;
    --dxp-s-button-line-height:20px;
    --slds-c-button-spacing-block-start: 10px;
    --slds-c-button-spacing-block-end: 10px;
    --slds-c-button-outline-brand-spacing-inline-start:16px;
    --slds-c-button-outline-brand-spacing-inline-end:16px;
}
c-prm-button.prm-edit-button .slds-button:focus{
    --slds-c-button-color-background-hover:var(--component-button-secondary-default-fill);
    --slds-c-button-text-color-hover:var(--component-button-secondary-default-label);
    --slds-c-button-shadow-focus:none;
}
c-prm-button.prm-edit-button .slds-button_outline-brand:active{    
    background-color: var(--component-button-primary-default-fill);
    border:2px solid var(--component-button-primary-default-border);
}
.prm-create-case__drop-zone .prm-action-button .slds-button_outline-brand{
    border:2px solid;
}
c-prm-button.prm-modal-button .slds-button,
c-prm-button.prm-modal-button .slds-button_brand{
    --dxp-s-button-font-size:16px;
    --dxp-s-button-line-height:24px;
    --slds-c-button-spacing-block-start: 12px;
    --slds-c-button-spacing-block-end: 12px;
    --slds-c-button-outline-brand-spacing-inline-start:24px;
    --slds-c-button-outline-brand-spacing-inline-end:24px;
    --slds-c-button-brand-spacing-inline-start:24px;
    --slds-c-button-brand-spacing-inline-end:24px;
}
c-prm-partner-case-detail-page .prm-content c-prm-button .slds-button_outline-brand:not(c-prm-partner-case-detail-page .prm-content c-prm-button .slds-button_outline-brand:hover){
    background-color:transparent;
}

/*Exising report*/
.prm-report-container .filters-container .slds-form-element{
	margin-bottom: 0
}
.prm-report-container lightning-button-group {
    border: 1px solid var(--prm-navy, #0A1F8F);
    height: 32px;
    border-radius: 20px;
}
.prm-report-container .data-button{
    border: none;
}
.prm-report-container lightning-button-group.slds-button-group {
       width: max-content;
}
.prm-report-container .slds-button-group .slds-button{
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    border: none;
}
.prm-report-container .slds-button.slds-button_first.slds-button_first {
     border-right: 1px solid var(--prm-navy, #0A1F8F);
     border-radius: 20px 0 0 20px;
}
.prm-report-container .slds-button.slds-button_last.slds-button_last {
    margin-left: -1px;
    border-left: 1px solid var(--prm-navy, #0A1F8F);
    border-radius: 0 20px 20px 0;
}
.prm-report-container .slds-combobox__input.slds-input_faux.fix-slds-input_faux{
    height: 32px;
}
.prm-report-container .slds-input.slds-combobox__input.slds-combobox__input-value, .prm-report-container .slds-combobox__form-elemen{
    height: 32px;
}
.prm-report-container .slds-truncate{
    overflow: inherit;
}
.prm-report-container .slds-input, .prm-report-container .slds-combobox__input{
    padding-top: 5px;
}
.prm-report-container .slds-input[disabled]{
    height: 32px;
    padding-bottom: 5px;
}
.prm-report-container .slds-form-element__label{   
    font-family: Moderat;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
}
.prm-csv-button .slds-button{
    padding: 10px 16px;
}
[kx-scope=button][kx-type=underline]:focus:after, [kx-scope=button][kx-type=underline]:hover:after{
    --slds-kx-button-underline-scale-x: 0;
}
.prm-knowledge__card_filled .prm-action-button .slds-button_brand{
    --slds-c-button-brand-color-background-hover:  var(--prm-white, #FFFFFF);;       
    --slds-c-button-brand-color-border-hover:      var(--prm-white, #FFFFFF);
    --slds-c-button-brand-text-color-hover:        var(--prm-navy, #0A1F8F);
}