/* GENERATED COPY — run CustomerFrontEnd/scripts/sync-shared-design.cjs
 * Source SHA-256: 9350b00d92ad0ce02193d468aa4b7b4906b0898b742bf984052173e61ff508a1
 */
/* CANONICAL SOURCE: CustomerFrontEnd/src/assets/styles/plexe-shared-design.css
 * Edit here, then run: node scripts/sync-shared-design.cjs
 * Customer's measured English defaults. Semantic states and icon/composite
 * controls are explicit exceptions; no navigation geometry is standardized.
 * Load before application styles: important declarations in the first layer
 * take precedence over legacy component and framework overrides.
 */
@layer plexe-shared-design {
  .plexe-design-system {
    --pds-font: var(--app-font-family, "Poppins", "Segoe UI", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Microsoft JhengHei", "Arial Unicode MS", sans-serif);
    font-family: var(--pds-font) !important;
  }

  .plexe-design-system :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--pds-font) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    color: var(--pds-ink) !important;
  }
  .plexe-design-system h1 { font-size: 32px !important; }
  .plexe-design-system h2 { font-size: 1.6rem !important; }
  .plexe-design-system h3 { font-size: 16px !important; }
  .plexe-design-system h4 { font-size: clamp(1.275rem, calc(1.275rem + .3vw), 1.5rem) !important; }
  .plexe-design-system h5 { font-size: 20px !important; color: var(--pds-body) !important; }
  .plexe-design-system h6 { font-size: 16px !important; color: var(--pds-body) !important; }
  .plexe-design-system p:where(:not(.error, .text-danger, .text-success, .text-warning)) {
    font: 400 12px/18px var(--pds-font) !important;
    color: var(--pds-body) !important;
    letter-spacing: normal !important;
  }
  /* Classed navigation links and action links keep their own roles. */
  .plexe-design-system :where(a:not([class]), .pds-inline-link) {
    font: 400 12px/18px var(--pds-font) !important;
    color: var(--pds-link) !important;
    text-decoration: underline !important;
    letter-spacing: normal !important;
  }
  .plexe-design-system :where(a:not([class]), .pds-inline-link):hover { color: var(--pds-link-hover) !important; }
  .plexe-design-system :where(h1, h2, h3, h4, h5, h6) a {
    font: inherit !important;
    color: inherit !important;
  }
  .plexe-design-system :where(label, .form-label, .col-form-label, .cf-label) {
    font: 400 16px/24px var(--pds-font) !important;
    color: var(--pds-muted) !important;
  }

  /* Shared text-button roles. Icon-only, navigation and pagination controls
   * opt out so their compact layouts remain usable. */
  .plexe-design-system :where(.btn, .cf-button, .plexe-button, .pds-button,
      .plexe-btn, .plexe-btn-primary, .plexe-btn-secondary, .plexe-blue-btn,
      .plexe-blue-outline-btn, .plexe-orange-outline-btn, .create-application-action,
      button.secondary, .site-shell a.secondary, button.secondary-action, button.danger,
      .site-shell button:not([class]), .site-shell button[class=''],
      .tabs button, .filters button, .side-card button):not(:where(
        .admin-icon-button, .admin-action, .check-filter, .pagination-number,
        .pagination-link, .searchbar button, .home-style-search button,
        .icon-button, .btn-icon, .dropdown-toggle-split)) {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 24px !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    font: 600 14px/20px var(--pds-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .plexe-design-system :where(.btn-primary, .cf-button--primary, .plexe-button--primary,
      .pds-primary, .plexe-btn-primary, .plexe-blue-btn, .create-application-action,
      .site-shell button:not([class]), .site-shell button[class=''],
      .plexe-button:not(.plexe-button--secondary, .plexe-button--outline,
        .plexe-button--ghost, .plexe-button--danger, .secondary, .danger)) {
    background: var(--pds-primary) !important;
    border-color: var(--pds-primary) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: var(--pds-shadow) !important;
  }
  .plexe-design-system :where(.btn-secondary, .cf-button--secondary,
      .plexe-button--secondary, .pds-secondary, .plexe-btn-secondary,
      button.secondary, .site-shell a.secondary, button.secondary-action) {
    background: var(--pds-disabled) !important;
    border-color: var(--pds-disabled) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system :where(.btn-outline-primary, .cf-button--ghost,
      .plexe-button--outline, .plexe-button--ghost, .pds-ghost,
      .plexe-blue-outline-btn, .plexe-orange-outline-btn,
      .tabs button, .filters button:not(.check-filter), .side-card button) {
    background: transparent !important;
    border-color: var(--pds-primary) !important;
    color: var(--pds-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system :where(.btn-outline-primary, .cf-button--ghost,
      .plexe-button--outline, .plexe-button--ghost, .pds-ghost,
      .plexe-blue-outline-btn, .plexe-orange-outline-btn,
      .tabs button, .filters button:not(.check-filter), .side-card button):is(:hover, :focus, :active, .selected) {
    background: var(--pds-primary) !important;
    color: var(--pds-on-primary) !important;
  }
  .plexe-design-system :where(.btn.btn-sm, .cf-button--small, .plexe-button--small, .pds-small) {
    padding: 8px 16px !important;
    font-size: 12px !important;
    min-height: 0 !important;
  }
  .plexe-design-system :where(.btn-danger, .cf-button--danger, .plexe-button--danger,
      .pds-danger, button.danger:not(.admin-icon-button)) {
    background: var(--pds-danger) !important;
    border-color: var(--pds-danger) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system :where(.btn-danger, .cf-button--danger, .plexe-button--danger,
      .pds-danger, button.danger:not(.admin-icon-button)):hover {
    background: var(--pds-danger-hover) !important;
    border-color: var(--pds-danger-border-hover) !important;
  }
  .plexe-design-system :where(.btn-primary, .cf-button--primary, .plexe-button--primary,
      .pds-primary, .plexe-btn-primary, .plexe-blue-btn, .create-application-action,
      .site-shell button:not([class]), .site-shell button[class=''], .plexe-button):is(:disabled, .disabled) {
    background: var(--pds-disabled) !important;
    border-color: var(--pds-disabled) !important;
    color: var(--pds-muted) !important;
    opacity: .65 !important;
    cursor: pointer !important;
    pointer-events: none;
  }

  .plexe-design-system :where(.form-control, .cf-input, .pds-input,
      .site-shell input:not([type]), .site-shell input:is([type='text'], [type='email'],
        [type='search'], [type='tel'], [type='number'], [type='url'], [type='password']),
      .form-select, .cf-select, .pds-select, .site-shell select,
      .site-shell .guide-search, .site-shell .searchbar, .site-shell .home-style-search):not(.form-floating > *) {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid var(--pds-field-border) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    color: var(--pds-ink) !important;
    font: 400 14px/21px var(--pds-font) !important;
    padding: 6px 12px !important;
    box-shadow: none !important;
  }
  .plexe-design-system :where(.form-select, .cf-select, .pds-select, .site-shell select):not(.form-floating > *) {
    appearance: none !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
  }
  .plexe-design-system :where(.form-control, .cf-input, .pds-input, .form-select, .cf-select,
      .pds-select, .site-shell input, .site-shell select,
      .site-shell .guide-search, .site-shell .searchbar, .site-shell .home-style-search):is(:focus, :focus-within) {
    background-color: var(--pds-soft) !important;
    border-color: var(--pds-primary) !important;
    box-shadow: var(--pds-ring) !important;
    outline: 0 !important;
  }
  .plexe-design-system .site-shell :is(.guide-search input, .searchbar input,
      .home-style-search input, .home-style-search .guide-search) {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  .plexe-design-system :is(.form-control, .cf-input, .site-shell input, .site-shell select):is(.invalid-control, .is-invalid) {
    background-color: var(--pds-invalid-fill) !important;
    border-color: var(--pds-invalid-border) !important;
    box-shadow: 0 0 0 3px var(--pds-invalid-ring) !important;
  }

  /* Help card standard. Map actual surfaces, never card headers, layout grids,
   * menus or controls. New components opt in with .pds-card.
   * Keep each component's padding, dimensions and responsive layout. */
  .plexe-design-system {
    --pds-card-radius: 16px;
    --pds-card-shadow: 0 4px 5px rgba(99, 105, 121, 0.15), 0 1px 3px rgba(99, 105, 121, 0.16);
  }

  .plexe-design-system :where(
      .pds-card, .card, .plexe-card,
      .cf-card, .bg-white.box-shadow, .partner-shell-v2__content,
      .agent-shell-v2__content, .dashboard-surface, .dashboard-summary-card,
      .command-card, .analytics-card, .insight-card,
      .assignment-center-card, .download-report-panel, .mobile-dashboard-card,
      .mobile-insight-card, .mobile-mini-chart-card, .case-summary-card,
      .customer-action-status-card, .cancelled-summary-card, .application-workflow-filter-card,
      .completed-filter-card, .all-kanban-card, .content-panel,
      .container-card, .account-card, .offer-card,
      .disconnect-card, .review-card, .dashboard-metric-card,
      .loan-summary-panel, .repayments-card, .early-repayment-card,
      .customer-extra-repayment-card, .extra-repayment-detail-card, .extra-repayment-summary-card,
      .repayment-items-card, .transaction-card, .empty-transaction-card,
      .cash-flow-card, .associate-card, .associates-panel,
      .checkout-card, .completion-card, .result-summary-card,
      .summary-card, .term-card, .utility-panel,
      .api-panel, .api-stat, .portal-event-card,
      .portal-login__card, .site-shell .section, .site-shell .detail-list,
      .site-shell .article-layout > article, .site-shell .two-column > div, .site-shell .results-panel,
      .site-shell .search-screen .filters, .site-shell .category-card, .site-shell .result-card,
      .site-shell .side-card, .site-shell .need-help-card, .site-shell .on-this-page-card,
      .site-shell .helpful-card, .site-shell .check-card, .site-shell .release-card,
      .site-shell .contact-card, .site-shell .blog-card, .site-shell .post-card,
      .editor-panel, .ai-panel, .tool-card,
      .seo-card, .advanced-panel,
      .plaid-public-card, .persona-public-card, .extra-repayment-banner,
      .extra-repayment-page .state-card, .portal-doc-header,
      .editor-shell .panel, .manager-shell .panel,
      .blog-shell .post-card, .blog-shell .blog-hero):where(:not(.cancelled-summary-card)) {
    background-color: var(--wl-panel-background-color, var(--pds-surface)) !important;
    border: 1px solid var(--wl-input-border-color, var(--pds-border)) !important;
    border-radius: var(--pds-card-radius) !important;
    box-shadow: var(--pds-card-shadow) !important;
  }

  /* Status cards keep their semantic colors from the component stylesheet. */
  .plexe-design-system :where(.cancelled-summary-card) {
    border-radius: var(--pds-card-radius) !important;
    box-shadow: var(--pds-card-shadow) !important;
  }

  /* A card inside any mapped card is flat, through wrappers and at any depth.
   * Layer priority also prevents legacy hover rules from restoring elevation.
   * Dialogs remain overlays; only their embedded cards are flattened. */
  .plexe-design-system :where(.modal-content,
      .pds-card, .card, .plexe-card,
      .cf-card, .bg-white.box-shadow, .partner-shell-v2__content,
      .agent-shell-v2__content, .dashboard-surface, .dashboard-summary-card,
      .command-card, .analytics-card, .insight-card,
      .assignment-center-card, .download-report-panel, .mobile-dashboard-card,
      .mobile-insight-card, .mobile-mini-chart-card, .case-summary-card,
      .customer-action-status-card, .cancelled-summary-card, .application-workflow-filter-card,
      .completed-filter-card, .all-kanban-card, .content-panel,
      .container-card, .account-card, .offer-card,
      .disconnect-card, .review-card, .dashboard-metric-card,
      .loan-summary-panel, .repayments-card, .early-repayment-card,
      .customer-extra-repayment-card, .extra-repayment-detail-card, .extra-repayment-summary-card,
      .repayment-items-card, .transaction-card, .empty-transaction-card,
      .cash-flow-card, .associate-card, .associates-panel,
      .checkout-card, .completion-card, .result-summary-card,
      .summary-card, .term-card, .utility-panel,
      .api-panel, .api-stat, .portal-event-card,
      .portal-login__card, .site-shell .section, .site-shell .detail-list,
      .site-shell .article-layout > article, .site-shell .two-column > div, .site-shell .results-panel,
      .site-shell .search-screen .filters, .site-shell .category-card, .site-shell .result-card,
      .site-shell .side-card, .site-shell .need-help-card, .site-shell .on-this-page-card,
      .site-shell .helpful-card, .site-shell .check-card, .site-shell .release-card,
      .site-shell .contact-card, .site-shell .blog-card, .site-shell .post-card,
      .editor-panel, .ai-panel, .tool-card,
      .seo-card, .advanced-panel,
      .plaid-public-card, .persona-public-card, .extra-repayment-banner,
      .extra-repayment-page .state-card, .portal-doc-header,
      .editor-shell .panel, .manager-shell .panel,
      .blog-shell .post-card, .blog-shell .blog-hero) :where(
      .pds-card, .card, .plexe-card,
      .cf-card, .bg-white.box-shadow, .partner-shell-v2__content,
      .agent-shell-v2__content, .dashboard-surface, .dashboard-summary-card,
      .command-card, .analytics-card, .insight-card,
      .assignment-center-card, .download-report-panel, .mobile-dashboard-card,
      .mobile-insight-card, .mobile-mini-chart-card, .case-summary-card,
      .customer-action-status-card, .cancelled-summary-card, .application-workflow-filter-card,
      .completed-filter-card, .all-kanban-card, .content-panel,
      .container-card, .account-card, .offer-card,
      .disconnect-card, .review-card, .dashboard-metric-card,
      .loan-summary-panel, .repayments-card, .early-repayment-card,
      .customer-extra-repayment-card, .extra-repayment-detail-card, .extra-repayment-summary-card,
      .repayment-items-card, .transaction-card, .empty-transaction-card,
      .cash-flow-card, .associate-card, .associates-panel,
      .checkout-card, .completion-card, .result-summary-card,
      .summary-card, .term-card, .utility-panel,
      .api-panel, .api-stat, .portal-event-card,
      .portal-login__card, .site-shell .section, .site-shell .detail-list,
      .site-shell .article-layout > article, .site-shell .two-column > div, .site-shell .results-panel,
      .site-shell .search-screen .filters, .site-shell .category-card, .site-shell .result-card,
      .site-shell .side-card, .site-shell .need-help-card, .site-shell .on-this-page-card,
      .site-shell .helpful-card, .site-shell .check-card, .site-shell .release-card,
      .site-shell .contact-card, .site-shell .blog-card, .site-shell .post-card,
      .editor-panel, .ai-panel, .tool-card,
      .seo-card, .advanced-panel,
      .plaid-public-card, .persona-public-card, .extra-repayment-banner,
      .extra-repayment-page .state-card, .portal-doc-header,
      .editor-shell .panel, .manager-shell .panel,
      .blog-shell .post-card, .blog-shell .blog-hero),
  .plexe-design-system .pds-card--flat {
    box-shadow: none !important;
  }

  /* Selection and status are semantic states, not elevation. */
  .plexe-design-system :where(.term-card-active, .portal-event-card:has(input:checked)) {
    border-color: var(--pds-primary) !important;
  }
  .plexe-design-system .portal-event-card:has(input:checked) {
    background-color: var(--cf-color-primary-soft, #e9f6ff) !important;
  }
  .plexe-design-system :where(.dashboard-summary-card.is-active,
      .application-workflow-filter-card.is-active, .customer-action-status-card.is-active,
      .completed-filter-card.active) {
    border-color: var(--pds-primary) !important;
    background-color: var(--partner-primary-soft, #dbe6f4) !important;
  }
  .plexe-design-system .cancelled-summary-card.is-active {
    border-width: 2px !important;
    outline: 1px solid var(--pds-primary);
    outline-offset: 2px;
  }
  .plexe-design-system :where(.pds-card, .term-card, .cf-card,
      .cancelled-summary-card, .dashboard-summary-card, .completed-filter-card,
      .application-workflow-filter-card, .customer-action-status-card, .all-kanban-card,
      .site-shell .result-card, .site-shell .blog-card,
      .site-shell .post-card, .blog-shell .post-card):focus-visible {
    outline: 2px solid var(--pds-primary) !important;
    outline-offset: 3px;
  }

  /* Preserve the spacing of the original shared roles. */
  .plexe-design-system :where(.card.p-4, .cf-card, .pds-card,
      .site-shell .section, .site-shell .detail-list,
      .partner-shell-v2__content, .agent-shell-v2__content) {
    padding: 24px !important;
  }
}