/*
 * WorkPro v49 unified appearance layer.
 *
 * Every selector below is activated only by a class emitted from the server's
 * fixed whitelist.  Database values never become CSS, selectors, URLs, or
 * arbitrary style declarations.  The layer intentionally remains screen-only
 * so printing and functional form controls retain their normal behaviour.
 */

@media screen {
  body.workpro-appearance {
    --wp-primary: var(--bs-primary, #0d6efd);
    --wp-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --wp-primary-strong: #084298;
    --wp-primary-soft: #e7f1ff;
    --wp-primary-contrast: #ffffff;
    --wp-surface: #f4f7f6;
    --wp-surface-accent: #edf2f7;
    --wp-panel: #ffffff;
    --wp-panel-strong: #ffffff;
    --wp-text: #1f2937;
    --wp-muted: #64748b;
    --wp-border: #dbe4ee;
    --wp-card-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    --wp-card-radius: 1rem;
    --wp-control-radius: 0.65rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary);
    --wp-nav-color: var(--wp-primary-contrast);
    --wp-layout-gap: 1rem;
    background: var(--wp-surface);
    color: var(--wp-text);
  }

  /* Shared, accessible palette values.  Each primary/contrast pairing is
     selected for strong text and button contrast without accepting DB colour. */
  body.workpro-appearance.wp-appearance-v45.wp-palette-ocean {
    --wp-primary: #0b5ed7;
    --wp-primary-rgb: 11, 94, 215;
    --wp-primary-strong: #084298;
    --wp-primary-soft: #e7f1ff;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #0b5ed7;
    --bs-primary-rgb: 11, 94, 215;
  }

  body.workpro-appearance.wp-appearance-v45.wp-palette-emerald {
    --wp-primary: #087f5b;
    --wp-primary-rgb: 8, 127, 91;
    --wp-primary-strong: #056144;
    --wp-primary-soft: #e4f7ef;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #087f5b;
    --bs-primary-rgb: 8, 127, 91;
  }

  body.workpro-appearance.wp-appearance-v45.wp-palette-indigo {
    --wp-primary: #4f46e5;
    --wp-primary-rgb: 79, 70, 229;
    --wp-primary-strong: #3730a3;
    --wp-primary-soft: #edecff;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
  }

  body.workpro-appearance.wp-appearance-v45.wp-palette-rose {
    --wp-primary: #be185d;
    --wp-primary-rgb: 190, 24, 93;
    --wp-primary-strong: #9d174d;
    --wp-primary-soft: #fdeaf2;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #be185d;
    --bs-primary-rgb: 190, 24, 93;
  }

  body.workpro-appearance.wp-appearance-v45.wp-palette-graphite {
    --wp-primary: #343a40;
    --wp-primary-rgb: 52, 58, 64;
    --wp-primary-strong: #212529;
    --wp-primary-soft: #edf0f2;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #343a40;
    --bs-primary-rgb: 52, 58, 64;
  }

  body.workpro-appearance.wp-appearance-v45.wp-palette-gold {
    --wp-primary: #8a5a00;
    --wp-primary-rgb: 138, 90, 0;
    --wp-primary-strong: #684300;
    --wp-primary-soft: #fff5dd;
    --wp-primary-contrast: #ffffff;
    --bs-primary: #8a5a00;
    --bs-primary-rgb: 138, 90, 0;
  }

  /* The normal page and common Bootstrap components receive the selected
     style without changing dimensions, input values, disabled controls, or
     display behaviour. */
  body.workpro-appearance .navbar.bg-primary,
  body.workpro-appearance .navbar.navbar-dark.bg-primary {
    background: var(--wp-nav-background) !important;
    color: var(--wp-nav-color);
  }

  body.workpro-appearance .navbar.bg-primary .navbar-brand,
  body.workpro-appearance .navbar.bg-primary .navbar-text,
  body.workpro-appearance .navbar.bg-primary .nav-link {
    color: var(--wp-nav-color) !important;
  }

  body.workpro-appearance .card,
  body.workpro-appearance .box-container,
  body.workpro-appearance .modal-content,
  body.workpro-appearance .dropdown-menu {
    border-color: var(--wp-border);
    border-radius: var(--wp-card-radius);
    box-shadow: var(--wp-card-shadow);
  }

  body.workpro-appearance .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
  body.workpro-appearance .box-container,
  body.workpro-appearance .modal-content,
  body.workpro-appearance .dropdown-menu {
    background-color: var(--wp-panel);
    -webkit-backdrop-filter: var(--wp-card-backdrop);
    backdrop-filter: var(--wp-card-backdrop);
  }

  body.workpro-appearance .card-header,
  body.workpro-appearance .card-footer {
    border-color: var(--wp-border);
  }

  body.workpro-appearance .btn-primary {
    background-color: var(--wp-primary) !important;
    border-color: var(--wp-primary) !important;
    color: var(--wp-primary-contrast);
  }

  body.workpro-appearance .bg-primary {
    background-color: var(--wp-primary) !important;
    border-color: var(--wp-primary) !important;
  }

  body.workpro-appearance .btn-primary:hover,
  body.workpro-appearance .btn-primary:focus-visible {
    background-color: var(--wp-primary-strong) !important;
    border-color: var(--wp-primary-strong) !important;
    color: var(--wp-primary-contrast);
  }

  body.workpro-appearance .btn-outline-primary {
    color: var(--wp-primary) !important;
    border-color: var(--wp-primary) !important;
  }

  body.workpro-appearance .btn-outline-primary:hover,
  body.workpro-appearance .btn-outline-primary:focus-visible {
    background-color: var(--wp-primary) !important;
    border-color: var(--wp-primary) !important;
    color: var(--wp-primary-contrast) !important;
  }

  body.workpro-appearance .text-primary {
    color: var(--wp-primary) !important;
  }

  body.workpro-appearance .border-primary {
    border-color: var(--wp-primary) !important;
  }

  body.workpro-appearance .form-control,
  body.workpro-appearance .form-select,
  body.workpro-appearance .input-group-text {
    border-radius: var(--wp-control-radius);
  }

  body.workpro-appearance .input-group > .form-control:not(:first-child),
  body.workpro-appearance .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  body.workpro-appearance .input-group > .form-control:not(:last-child),
  body.workpro-appearance .input-group > .form-select:not(:last-child),
  body.workpro-appearance .input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  body.workpro-appearance .form-control:focus,
  body.workpro-appearance .form-select:focus,
  body.workpro-appearance .btn:focus-visible,
  body.workpro-appearance .form-check-input:focus {
    border-color: var(--wp-primary);
    box-shadow: 0 0 0 0.22rem rgba(var(--wp-primary-rgb), 0.24);
  }

  body.workpro-appearance .table > :not(caption) > * > * {
    border-color: var(--wp-border);
  }

  /* v46 menu-card density.  The actual padding and radius are emitted from
     ui_preferences.php using the same fixed four-value whitelist.  These
     variables only add a proportionate desktop minimum height so "ใหญ่" and
     "ใหญ่พิเศษ" remain visibly different even in equal-height card grids.
     No input, display, disabled or menu-access state is changed here. */
  body.workpro-appearance.wp-appearance-v45.wp-menu-card-size-compact {
    --wp-menu-card-min-height: 0;
  }

  body.workpro-appearance.wp-appearance-v45.wp-menu-card-size-standard {
    --wp-menu-card-min-height: 0;
  }

  body.workpro-appearance.wp-appearance-v45.wp-menu-card-size-large {
    --wp-menu-card-min-height: 15.75rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-menu-card-size-extra_large {
    --wp-menu-card-min-height: 18.5rem;
  }
}

/*
 * v49 dashboard surface bridge.
 *
 * The two dashboards have their own page-level CSS and a number of semantic
 * Bootstrap border classes.  The general v48 tokens therefore changed their
 * palette, but did not give the high-traffic dashboard cards a consistently
 * obvious Canva treatment in every saved layout.  These rules are deliberately
 * scoped to a resolved CANVA source, so GPT remains exactly on its existing
 * renderer path.  They are visual-only: no menu, attendance or disabled state
 * is hidden, enabled, reordered or retargeted.
 */
@media screen and (min-width: 768px) {
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #companyDashboardRoot > .d-flex:first-child {
    background: linear-gradient(135deg, var(--wp-panel-strong) 0%, var(--wp-primary-soft) 100%);
    border: 1px solid var(--wp-border);
    border-left: 4px solid var(--wp-primary);
    border-radius: calc(var(--wp-card-radius) + .08rem);
    box-shadow: 0 .55rem 1.45rem rgba(var(--wp-primary-rgb), .10);
    padding: 1rem 1.15rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #companyDashboardRoot .company-dashboard-menu-layout:not(.company-dashboard-menu-layout-outline) .company-dashboard-menu-card:not(.opacity-75),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #companyDashboardRoot .company-dashboard-group-launcher,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot #employee-main-menu .workpro-ui-card-menu:not(.opacity-75),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot .employee-dashboard-attendance-card:not(.opacity-75) {
    background: linear-gradient(145deg, var(--wp-panel) 0%, var(--wp-primary-soft) 150%) !important;
    border-color: rgba(var(--wp-primary-rgb), .30) !important;
    box-shadow: 0 .7rem 1.65rem rgba(15, 23, 42, .10), var(--wp-canva-card-ring) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #companyDashboardRoot .company-dashboard-menu-card .card-body,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot #employee-main-menu .workpro-ui-card-menu .card-body {
    position: relative;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #companyDashboardRoot .company-dashboard-card-icon,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot #employee-main-menu .display-4,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot .employee-dashboard-attendance-card .display-4 {
    align-items: center;
    background: var(--wp-primary-soft);
    border: 1px solid rgba(var(--wp-primary-rgb), .22);
    border-radius: .92rem;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    min-height: 3.45rem;
    min-width: 3.45rem;
    padding: .35rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot .employee-dashboard-welcome-card {
    background: linear-gradient(115deg, var(--wp-panel) 0%, var(--wp-panel) 56%, var(--wp-primary-soft) 135%) !important;
    border: 1px solid var(--wp-border) !important;
    box-shadow: 0 .85rem 2rem rgba(15, 23, 42, .11), var(--wp-canva-card-ring) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva #employeeDashboardRoot .employee-dashboard-welcome-clock {
    background: var(--wp-primary-soft) !important;
    border-color: rgba(var(--wp-primary-rgb), .26) !important;
  }
}

@media screen and (max-width: 767.98px) {
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #companyDashboardRoot > .d-flex:first-child {
    background: linear-gradient(135deg, var(--wp-panel-strong) 0%, var(--wp-primary-soft) 100%);
    border: 1px solid var(--wp-border);
    border-left: 3px solid var(--wp-primary);
    border-radius: calc(var(--wp-card-radius) + .04rem);
    box-shadow: 0 .42rem 1.1rem rgba(var(--wp-primary-rgb), .10);
    padding: .85rem .9rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #companyDashboardRoot .company-dashboard-menu-layout:not(.company-dashboard-menu-layout-outline) .company-dashboard-menu-card:not(.opacity-75),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #companyDashboardRoot .company-dashboard-group-launcher,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot #employee-main-menu .workpro-ui-card-menu:not(.opacity-75),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot .employee-dashboard-attendance-card:not(.opacity-75) {
    background: linear-gradient(150deg, var(--wp-panel) 0%, var(--wp-primary-soft) 170%) !important;
    border-color: rgba(var(--wp-primary-rgb), .28) !important;
    box-shadow: 0 .48rem 1.2rem rgba(15, 23, 42, .09), var(--wp-canva-card-ring) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #companyDashboardRoot .company-dashboard-card-icon,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot #employee-main-menu .display-4,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot .employee-dashboard-attendance-card .display-4 {
    align-items: center;
    background: var(--wp-primary-soft);
    border: 1px solid rgba(var(--wp-primary-rgb), .22);
    border-radius: .76rem;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    min-height: 2.9rem;
    min-width: 2.9rem;
    padding: .28rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot .employee-dashboard-welcome-card {
    background: linear-gradient(150deg, var(--wp-panel) 0%, var(--wp-primary-soft) 160%) !important;
    border: 1px solid var(--wp-border) !important;
    box-shadow: 0 .55rem 1.35rem rgba(15, 23, 42, .10), var(--wp-canva-card-ring) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva #employeeDashboardRoot .employee-dashboard-welcome-clock {
    background: var(--wp-primary-soft) !important;
    border-color: rgba(var(--wp-primary-rgb), .26) !important;
  }
}

/* Desktop style selection: only the desktop class participates above 768px. */
@media screen and (min-width: 768px) {
  body.workpro-appearance.wp-appearance-v45 .workpro-ui-card-menu,
  body.workpro-appearance.wp-appearance-v45 .company-dashboard-menu-card,
  body.workpro-appearance.wp-appearance-v45 [data-workpro-card="menu_card"] {
    min-height: var(--wp-menu-card-min-height, 0);
  }

  body.workpro-appearance.wp-style-desktop-classic {
    --wp-surface: #f4f7f6;
    --wp-surface-accent: #edf2f7;
    --wp-panel: #ffffff;
    --wp-border: #dbe4ee;
    --wp-card-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    --wp-card-radius: 1rem;
    --wp-control-radius: 0.65rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary);
  }

  body.workpro-appearance.wp-style-desktop-modern_glass {
    --wp-surface: linear-gradient(135deg, #edf5ff 0%, #f7f3ff 52%, #eafaf5 100%);
    --wp-surface-accent: #eff6ff;
    --wp-panel: rgba(255, 255, 255, 0.78);
    --wp-border: rgba(255, 255, 255, 0.82);
    --wp-card-shadow: 0 14px 34px rgba(31, 41, 55, 0.13);
    --wp-card-radius: 1.25rem;
    --wp-control-radius: 0.8rem;
    --wp-card-backdrop: blur(14px);
    --wp-nav-background: linear-gradient(115deg, var(--wp-primary-strong), var(--wp-primary));
  }

  body.workpro-appearance.wp-style-desktop-executive {
    --wp-surface: #edf1f5;
    --wp-surface-accent: #e3e9ef;
    --wp-panel: #ffffff;
    --wp-border: #cbd5e1;
    --wp-card-shadow: 0 8px 20px rgba(15, 23, 42, 0.11);
    --wp-card-radius: 0.55rem;
    --wp-control-radius: 0.4rem;
    --wp-card-backdrop: none;
    --wp-nav-background: #172033;
  }

  body.workpro-appearance.wp-style-desktop-soft_editorial {
    --wp-surface: #fbf8f2;
    --wp-surface-accent: #f4efe6;
    --wp-panel: #fffdf9;
    --wp-border: #e9dfcf;
    --wp-card-shadow: 0 8px 24px rgba(91, 76, 58, 0.09);
    --wp-card-radius: 1.4rem;
    --wp-control-radius: 0.75rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary-strong);
  }

  body.workpro-appearance.wp-style-desktop-minimal {
    --wp-surface: #ffffff;
    --wp-surface-accent: #f8fafc;
    --wp-panel: #ffffff;
    --wp-border: #dfe5ec;
    --wp-card-shadow: none;
    --wp-card-radius: 0.35rem;
    --wp-control-radius: 0.35rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary);
  }

  body.workpro-appearance.wp-style-desktop-aurora {
    --wp-surface: linear-gradient(145deg, #eef8ff 0%, #f8efff 48%, #effff7 100%);
    --wp-surface-accent: #eef7ff;
    --wp-panel: rgba(255, 255, 255, 0.88);
    --wp-border: rgba(203, 213, 225, 0.82);
    --wp-card-shadow: 0 16px 34px rgba(70, 50, 120, 0.14);
    --wp-card-radius: 1.45rem;
    --wp-control-radius: 0.9rem;
    --wp-card-backdrop: blur(10px);
    --wp-nav-background: linear-gradient(110deg, #5b4ce6, var(--wp-primary), #168b7a);
  }
}

/* Mobile style selection is independent from the desktop choice. */
@media screen and (max-width: 767.98px) {
  body.workpro-appearance.wp-style-mobile-classic {
    --wp-surface: #f5f7fa;
    --wp-panel: #ffffff;
    --wp-border: #dbe4ee;
    --wp-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    --wp-card-radius: 0.85rem;
    --wp-control-radius: 0.6rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary);
    --wp-layout-gap: 0.8rem;
  }

  body.workpro-appearance.wp-style-mobile-modern_glass {
    --wp-surface: linear-gradient(150deg, #edf5ff 0%, #f9f2ff 100%);
    --wp-panel: rgba(255, 255, 255, 0.82);
    --wp-border: rgba(255, 255, 255, 0.9);
    --wp-card-shadow: 0 10px 24px rgba(31, 41, 55, 0.12);
    --wp-card-radius: 1.05rem;
    --wp-control-radius: 0.75rem;
    --wp-card-backdrop: blur(11px);
    --wp-nav-background: linear-gradient(115deg, var(--wp-primary-strong), var(--wp-primary));
    --wp-layout-gap: 0.85rem;
  }

  body.workpro-appearance.wp-style-mobile-executive {
    --wp-surface: #f0f3f7;
    --wp-panel: #ffffff;
    --wp-border: #cbd5e1;
    --wp-card-shadow: 0 5px 16px rgba(15, 23, 42, 0.09);
    --wp-card-radius: 0.45rem;
    --wp-control-radius: 0.4rem;
    --wp-card-backdrop: none;
    --wp-nav-background: #172033;
    --wp-layout-gap: 0.7rem;
  }

  body.workpro-appearance.wp-style-mobile-soft_editorial {
    --wp-surface: #fcf9f3;
    --wp-panel: #fffdf9;
    --wp-border: #e9dfcf;
    --wp-card-shadow: 0 6px 18px rgba(91, 76, 58, 0.08);
    --wp-card-radius: 1.05rem;
    --wp-control-radius: 0.7rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary-strong);
    --wp-layout-gap: 0.85rem;
  }

  body.workpro-appearance.wp-style-mobile-minimal {
    --wp-surface: #ffffff;
    --wp-panel: #ffffff;
    --wp-border: #dfe5ec;
    --wp-card-shadow: none;
    --wp-card-radius: 0.3rem;
    --wp-control-radius: 0.3rem;
    --wp-card-backdrop: none;
    --wp-nav-background: var(--wp-primary);
    --wp-layout-gap: 0.65rem;
  }

  body.workpro-appearance.wp-style-mobile-aurora {
    --wp-surface: linear-gradient(155deg, #eef9ff 0%, #f8efff 55%, #effff8 100%);
    --wp-panel: rgba(255, 255, 255, 0.9);
    --wp-border: rgba(203, 213, 225, 0.82);
    --wp-card-shadow: 0 10px 26px rgba(70, 50, 120, 0.12);
    --wp-card-radius: 1.15rem;
    --wp-control-radius: 0.8rem;
    --wp-card-backdrop: blur(8px);
    --wp-nav-background: linear-gradient(110deg, #5b4ce6, var(--wp-primary), #168b7a);
    --wp-layout-gap: 0.85rem;
  }
}

/*
 * WorkPro v47: Creator-only compactness controls for the employee dashboard.
 * The six body classes are emitted solely from server-side whitelists.  They
 * resize three clearly scoped visual components; they never hide an action,
 * change its target, or alter permission/attendance state.
 */
@media screen and (min-width: 768px) {
  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-desktop-size-standard {
    --wp-v47-welcome-padding: 1.5rem;
    --wp-v47-welcome-gap: 1.5rem;
    --wp-v47-welcome-avatar: 80px;
    --wp-v47-welcome-avatar-icon: 2rem;
    --wp-v47-welcome-title: clamp(1.55rem, 2.4vw, 2rem);
    --wp-v47-welcome-detail: 1.15rem;
    --wp-v47-welcome-date: 1.1rem;
    --wp-v47-welcome-clock: clamp(1.5rem, 3vw, 1.9rem);
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-desktop-size-shrink_1 {
    --wp-v47-welcome-padding: 1.2rem;
    --wp-v47-welcome-gap: 1.15rem;
    --wp-v47-welcome-avatar: 70px;
    --wp-v47-welcome-avatar-icon: 1.75rem;
    --wp-v47-welcome-title: clamp(1.4rem, 2.1vw, 1.75rem);
    --wp-v47-welcome-detail: 1.03rem;
    --wp-v47-welcome-date: 1rem;
    --wp-v47-welcome-clock: clamp(1.38rem, 2.7vw, 1.7rem);
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-desktop-size-shrink_2 {
    --wp-v47-welcome-padding: 1rem;
    --wp-v47-welcome-gap: .95rem;
    --wp-v47-welcome-avatar: 60px;
    --wp-v47-welcome-avatar-icon: 1.55rem;
    --wp-v47-welcome-title: clamp(1.25rem, 1.9vw, 1.55rem);
    --wp-v47-welcome-detail: .95rem;
    --wp-v47-welcome-date: .93rem;
    --wp-v47-welcome-clock: clamp(1.28rem, 2.4vw, 1.55rem);
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-desktop-size-shrink_3 {
    --wp-v47-welcome-padding: .82rem;
    --wp-v47-welcome-gap: .78rem;
    --wp-v47-welcome-avatar: 52px;
    --wp-v47-welcome-avatar-icon: 1.35rem;
    --wp-v47-welcome-title: clamp(1.12rem, 1.7vw, 1.38rem);
    --wp-v47-welcome-detail: .88rem;
    --wp-v47-welcome-date: .86rem;
    --wp-v47-welcome-clock: clamp(1.18rem, 2.1vw, 1.4rem);
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-desktop-size-standard {
    --wp-v47-alert-padding: 1.5rem;
    --wp-v47-alert-icon: 3.5rem;
    --wp-v47-alert-title: 1.5rem;
    --wp-v47-alert-copy: 1rem;
    --wp-v47-alert-button-size: 1rem;
    --wp-v47-alert-button-y: .65rem;
    --wp-v47-alert-button-x: 2.3rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-desktop-size-shrink_1 {
    --wp-v47-alert-padding: 1.2rem;
    --wp-v47-alert-icon: 3rem;
    --wp-v47-alert-title: 1.3rem;
    --wp-v47-alert-copy: .94rem;
    --wp-v47-alert-button-size: .94rem;
    --wp-v47-alert-button-y: .55rem;
    --wp-v47-alert-button-x: 1.8rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-desktop-size-shrink_2 {
    --wp-v47-alert-padding: 1rem;
    --wp-v47-alert-icon: 2.5rem;
    --wp-v47-alert-title: 1.15rem;
    --wp-v47-alert-copy: .89rem;
    --wp-v47-alert-button-size: .89rem;
    --wp-v47-alert-button-y: .5rem;
    --wp-v47-alert-button-x: 1.45rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-desktop-size-shrink_3 {
    --wp-v47-alert-padding: .82rem;
    --wp-v47-alert-icon: 2.1rem;
    --wp-v47-alert-title: 1.03rem;
    --wp-v47-alert-copy: .84rem;
    --wp-v47-alert-button-size: .86rem;
    --wp-v47-alert-button-y: .45rem;
    --wp-v47-alert-button-x: 1.1rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-desktop-size-standard {
    --wp-v47-attendance-padding: 1.5rem;
    --wp-v47-attendance-icon: 3.5rem;
    --wp-v47-attendance-title: 1.25rem;
    --wp-v47-attendance-copy: .875rem;
    --wp-v47-attendance-button-size: .94rem;
    --wp-v47-attendance-button-y: .5rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-desktop-size-shrink_1 {
    --wp-v47-attendance-padding: 1.15rem;
    --wp-v47-attendance-icon: 2.85rem;
    --wp-v47-attendance-title: 1.12rem;
    --wp-v47-attendance-copy: .82rem;
    --wp-v47-attendance-button-size: .9rem;
    --wp-v47-attendance-button-y: .45rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-desktop-size-shrink_2 {
    --wp-v47-attendance-padding: .92rem;
    --wp-v47-attendance-icon: 2.42rem;
    --wp-v47-attendance-title: 1.02rem;
    --wp-v47-attendance-copy: .78rem;
    --wp-v47-attendance-button-size: .875rem;
    --wp-v47-attendance-button-y: .42rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-desktop-size-shrink_3 {
    --wp-v47-attendance-padding: .75rem;
    --wp-v47-attendance-icon: 2.1rem;
    --wp-v47-attendance-title: .96rem;
    --wp-v47-attendance-copy: .75rem;
    --wp-v47-attendance-button-size: .86rem;
    --wp-v47-attendance-button-y: .38rem;
  }
}

@media screen and (max-width: 767.98px) {
  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-mobile-size-standard {
    --wp-v47-welcome-padding: 1.2rem;
    --wp-v47-welcome-gap: 1rem;
    --wp-v47-welcome-avatar: 64px;
    --wp-v47-welcome-avatar-icon: 1.65rem;
    --wp-v47-welcome-title: 1.45rem;
    --wp-v47-welcome-detail: 1rem;
    --wp-v47-welcome-date: .98rem;
    --wp-v47-welcome-clock: 1.55rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-mobile-size-shrink_1 {
    --wp-v47-welcome-padding: 1rem;
    --wp-v47-welcome-gap: .85rem;
    --wp-v47-welcome-avatar: 58px;
    --wp-v47-welcome-avatar-icon: 1.5rem;
    --wp-v47-welcome-title: 1.3rem;
    --wp-v47-welcome-detail: .93rem;
    --wp-v47-welcome-date: .9rem;
    --wp-v47-welcome-clock: 1.4rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-mobile-size-shrink_2 {
    --wp-v47-welcome-padding: .85rem;
    --wp-v47-welcome-gap: .72rem;
    --wp-v47-welcome-avatar: 50px;
    --wp-v47-welcome-avatar-icon: 1.3rem;
    --wp-v47-welcome-title: 1.18rem;
    --wp-v47-welcome-detail: .87rem;
    --wp-v47-welcome-date: .85rem;
    --wp-v47-welcome-clock: 1.28rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-welcome-card-mobile-size-shrink_3 {
    --wp-v47-welcome-padding: .72rem;
    --wp-v47-welcome-gap: .62rem;
    --wp-v47-welcome-avatar: 44px;
    --wp-v47-welcome-avatar-icon: 1.15rem;
    --wp-v47-welcome-title: 1.08rem;
    --wp-v47-welcome-detail: .82rem;
    --wp-v47-welcome-date: .8rem;
    --wp-v47-welcome-clock: 1.16rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-mobile-size-standard {
    --wp-v47-alert-padding: 1.2rem;
    --wp-v47-alert-icon: 3rem;
    --wp-v47-alert-title: 1.25rem;
    --wp-v47-alert-copy: .94rem;
    --wp-v47-alert-button-size: .94rem;
    --wp-v47-alert-button-y: .58rem;
    --wp-v47-alert-button-x: 1.5rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-mobile-size-shrink_1 {
    --wp-v47-alert-padding: 1rem;
    --wp-v47-alert-icon: 2.55rem;
    --wp-v47-alert-title: 1.12rem;
    --wp-v47-alert-copy: .88rem;
    --wp-v47-alert-button-size: .89rem;
    --wp-v47-alert-button-y: .5rem;
    --wp-v47-alert-button-x: 1.2rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-mobile-size-shrink_2 {
    --wp-v47-alert-padding: .85rem;
    --wp-v47-alert-icon: 2.2rem;
    --wp-v47-alert-title: 1.02rem;
    --wp-v47-alert-copy: .83rem;
    --wp-v47-alert-button-size: .86rem;
    --wp-v47-alert-button-y: .45rem;
    --wp-v47-alert-button-x: 1rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-alert-mobile-size-shrink_3 {
    --wp-v47-alert-padding: .72rem;
    --wp-v47-alert-icon: 1.95rem;
    --wp-v47-alert-title: .96rem;
    --wp-v47-alert-copy: .79rem;
    --wp-v47-alert-button-size: .84rem;
    --wp-v47-alert-button-y: .4rem;
    --wp-v47-alert-button-x: .85rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-mobile-size-standard {
    --wp-v47-attendance-padding: 1.15rem;
    --wp-v47-attendance-icon: 3rem;
    --wp-v47-attendance-title: 1.15rem;
    --wp-v47-attendance-copy: .86rem;
    --wp-v47-attendance-button-size: .9rem;
    --wp-v47-attendance-button-y: .48rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-mobile-size-shrink_1 {
    --wp-v47-attendance-padding: .95rem;
    --wp-v47-attendance-icon: 2.6rem;
    --wp-v47-attendance-title: 1.05rem;
    --wp-v47-attendance-copy: .81rem;
    --wp-v47-attendance-button-size: .875rem;
    --wp-v47-attendance-button-y: .44rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-mobile-size-shrink_2 {
    --wp-v47-attendance-padding: .8rem;
    --wp-v47-attendance-icon: 2.3rem;
    --wp-v47-attendance-title: .98rem;
    --wp-v47-attendance-copy: .77rem;
    --wp-v47-attendance-button-size: .85rem;
    --wp-v47-attendance-button-y: .4rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-attendance-card-mobile-size-shrink_3 {
    --wp-v47-attendance-padding: .68rem;
    --wp-v47-attendance-icon: 2rem;
    --wp-v47-attendance-title: .93rem;
    --wp-v47-attendance-copy: .74rem;
    --wp-v47-attendance-button-size: .84rem;
    --wp-v47-attendance-button-y: .37rem;
  }
}

@media screen {
  /* The legacy v39 welcome-card selectors intentionally remain in the page
     as a fallback.  The v47 selector is more specific and only wins after
     the six new central fields have been migrated and emitted as classes. */
  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-welcome-card {
    --employee-welcome-padding: var(--wp-v47-welcome-padding, 1.5rem) !important;
    --employee-welcome-gap: var(--wp-v47-welcome-gap, 1.5rem) !important;
    --employee-welcome-avatar-size: var(--wp-v47-welcome-avatar, 80px) !important;
    --employee-welcome-avatar-icon-size: var(--wp-v47-welcome-avatar-icon, 2rem) !important;
    --employee-welcome-title-size: var(--wp-v47-welcome-title, 2rem) !important;
    --employee-welcome-detail-size: var(--wp-v47-welcome-detail, 1.15rem) !important;
    --employee-welcome-date-size: var(--wp-v47-welcome-date, 1.1rem) !important;
    --employee-welcome-clock-size: var(--wp-v47-welcome-clock, 1.9rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-post-welcome-notice {
    padding: var(--wp-v47-alert-padding, 1.5rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-post-welcome-notice > .display-4 {
    font-size: var(--wp-v47-alert-icon, 3.5rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-post-welcome-notice > h4 {
    font-size: var(--wp-v47-alert-title, 1.5rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-post-welcome-notice > p {
    font-size: var(--wp-v47-alert-copy, 1rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 .employee-dashboard-post-welcome-notice > .btn {
    font-size: var(--wp-v47-alert-button-size, 1rem) !important;
    padding: var(--wp-v47-alert-button-y, .65rem) var(--wp-v47-alert-button-x, 2.3rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 #employee-daily-attendance .employee-dashboard-attendance-card .card-body {
    padding: var(--wp-v47-attendance-padding, 1.5rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 #employee-daily-attendance .employee-dashboard-attendance-card .display-4 {
    font-size: var(--wp-v47-attendance-icon, 3.5rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 #employee-daily-attendance .employee-dashboard-attendance-card h5 {
    font-size: var(--wp-v47-attendance-title, 1.25rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 #employee-daily-attendance .employee-dashboard-attendance-card p {
    font-size: var(--wp-v47-attendance-copy, .875rem) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-dashboard-component-sizes-v47 #employee-daily-attendance .employee-dashboard-attendance-card .btn {
    font-size: var(--wp-v47-attendance-button-size, .94rem) !important;
    padding-top: var(--wp-v47-attendance-button-y, .5rem) !important;
    padding-bottom: var(--wp-v47-attendance-button-y, .5rem) !important;
  }
}

/*
 * WorkPro v48: local Canva-inspired design renderer.
 *
 * A Creator or a company can choose GPT or Canva independently for desktop
 * and mobile.  Only the server-side whitelist can add the source, style and
 * palette classes below.  There are intentionally no image URLs, external
 * assets, data URLs or values read from the database in this stylesheet.
 * The component rules are visual only: they never change a link, form value,
 * disabled state, permission or responsive display rule.
 */
@media screen {
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48 {
    --wp-canva-panel-highlight: rgba(255, 255, 255, .72);
    --wp-canva-control-background: rgba(255, 255, 255, .92);
    --wp-canva-table-head: var(--wp-primary-soft);
    --wp-canva-table-stripe: rgba(var(--wp-primary-rgb), .035);
    --wp-canva-nav-shadow: 0 9px 24px rgba(15, 23, 42, .16);
    /* A transparent zero-size shadow keeps the combined box-shadow value
       valid even for designs that do not add an inset card ring. */
    --wp-canva-card-ring: 0 0 0 0 transparent;
    --wp-canva-heading-spacing: -.012em;
  }
}

/* Desktop Canva choices.  GPT choices intentionally have no v48 selector,
 * which leaves every v45 desktop token and selector untouched. */
@media screen and (min-width: 768px) {
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva {
    --wp-layout-gap: 1.1rem;
  }

  /* 1. Executive Slate: precise, boardroom-oriented panels. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-executive_slate {
    --wp-surface: linear-gradient(145deg, #eef2f6 0%, #e4eaf0 100%);
    --wp-surface-accent: #e1e8ef;
    --wp-panel: #ffffff;
    --wp-panel-strong: #f7f9fb;
    --wp-border: #cbd5df;
    --wp-card-shadow: 0 9px 22px rgba(30, 41, 59, .10);
    --wp-card-radius: .78rem;
    --wp-control-radius: .48rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(105deg, #172235 0%, #25364d 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #ffffff;
    --wp-canva-table-head: #eaf0f6;
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .9);
    --wp-canva-heading-spacing: -.018em;
  }

  /* 2. Pearl Editorial: calm paper, generous rhythm and soft edges. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-pearl_editorial {
    --wp-surface: linear-gradient(135deg, #fbf8f2 0%, #f4efe6 100%);
    --wp-surface-accent: #f4efe5;
    --wp-panel: #fffefa;
    --wp-panel-strong: #fffaf0;
    --wp-border: #e6dccb;
    --wp-card-shadow: 0 11px 28px rgba(94, 76, 51, .10);
    --wp-card-radius: 1.35rem;
    --wp-control-radius: .78rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #4b4034 0%, var(--wp-primary-strong) 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #fffdf8;
    --wp-canva-table-head: #f7efe3;
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .95);
    --wp-canva-heading-spacing: -.022em;
  }

  /* 3. Azure Glass: clear, light glass panels without external imagery. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-azure_glass {
    --wp-surface: linear-gradient(135deg, #e7f4ff 0%, #eef5ff 45%, #e8f8f4 100%);
    --wp-surface-accent: rgba(229, 242, 255, .84);
    --wp-panel: rgba(255, 255, 255, .78);
    --wp-panel-strong: rgba(255, 255, 255, .9);
    --wp-border: rgba(255, 255, 255, .92);
    --wp-card-shadow: 0 16px 36px rgba(37, 99, 148, .14);
    --wp-card-radius: 1.28rem;
    --wp-control-radius: .82rem;
    --wp-card-backdrop: blur(15px);
    --wp-nav-background: linear-gradient(112deg, #0f4f8b 0%, var(--wp-primary) 58%, #247e8d 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: rgba(255, 255, 255, .78);
    --wp-canva-control-background: rgba(255, 255, 255, .86);
    --wp-canva-table-head: rgba(232, 244, 255, .88);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  /* 4. Forest Ledger: restrained green and structured information panels. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-forest_ledger {
    --wp-surface: linear-gradient(145deg, #f3f7f1 0%, #e7efe8 100%);
    --wp-surface-accent: #e5eee5;
    --wp-panel: #fdfefc;
    --wp-panel-strong: #f7fbf6;
    --wp-border: #cbd9ce;
    --wp-card-shadow: 0 8px 20px rgba(35, 70, 49, .10);
    --wp-card-radius: .7rem;
    --wp-control-radius: .46rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #123b2d 0%, #1d5d45 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #ffffff;
    --wp-canva-table-head: #e7f0e8;
    --wp-canva-card-ring: inset 3px 0 0 rgba(var(--wp-primary-rgb), .48);
    --wp-canva-heading-spacing: -.01em;
  }

  /* 5. Indigo Aurora: vivid but controlled indigo glow. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-indigo_aurora {
    --wp-surface: radial-gradient(circle at 12% 8%, #e7e8ff 0%, transparent 38%), linear-gradient(140deg, #f4f1ff 0%, #eef8ff 52%, #f9efff 100%);
    --wp-surface-accent: #eeecff;
    --wp-panel: rgba(255, 255, 255, .86);
    --wp-panel-strong: rgba(255, 255, 255, .94);
    --wp-border: rgba(205, 205, 239, .88);
    --wp-card-shadow: 0 16px 36px rgba(76, 60, 158, .15);
    --wp-card-radius: 1.45rem;
    --wp-control-radius: .88rem;
    --wp-card-backdrop: blur(12px);
    --wp-nav-background: linear-gradient(108deg, #4338a8 0%, var(--wp-primary) 55%, #6b4ca5 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: rgba(255, 255, 255, .84);
    --wp-canva-control-background: rgba(255, 255, 255, .9);
    --wp-canva-table-head: rgba(237, 236, 255, .93);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  /* 6. Warm Gold: Classic Executive Workspace (selected Canva reference).
     The palette remains independently selectable; when paired with Gold this
     becomes the ivory / graphite / restrained-gold workspace reference. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold {
    --wp-surface: linear-gradient(145deg, #faf7f0 0%, #f3ecdf 100%);
    --wp-surface-accent: #f4ecdd;
    --wp-panel: #fffdf8;
    --wp-panel-strong: #fbf3e5;
    --wp-text: #292522;
    --wp-muted: #746a5d;
    --wp-border: #ddcfb5;
    --wp-card-shadow: 0 8px 20px rgba(57, 45, 25, .09);
    --wp-card-radius: .82rem;
    --wp-control-radius: .56rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #24211d 0%, #3c3125 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #fffefa;
    --wp-canva-control-background: #fffdf8;
    --wp-canva-table-head: #f8edd8;
    --wp-canva-table-stripe: rgba(138, 90, 0, .035);
    --wp-canva-nav-shadow: 0 7px 20px rgba(37, 31, 23, .18);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .95);
    --wp-canva-heading-spacing: -.012em;
    --wp-classic-gold: #a56a00;
    --wp-classic-gold-soft: #fff0cf;
    --bs-table-hover-bg: #fff7e7;
    --bs-table-hover-color: #292522;
  }

  /* Classic Executive Workspace desktop details.  These selectors stay
     within the Warm Gold Canva class and only refine visual hierarchy; no
     state class, form value, link target or attendance action is changed. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .navbar.bg-primary,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .navbar.bg-dark {
    border-bottom: 2px solid rgba(218, 177, 101, .72);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .box-container,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .modal-content,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .dropdown-menu {
    background: linear-gradient(180deg, #fffefa 0%, #fffaf1 100%);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) > .card-header,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .modal-content > .modal-header {
    background: linear-gradient(90deg, #fbf3e5 0%, #fffaf0 100%);
    border-bottom-color: #ddcfb5;
    color: #292522;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) > .card-footer,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .modal-content > .modal-footer {
    background-color: rgba(251, 243, 229, .72);
    border-top-color: #ddcfb5;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .card-title,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold h1,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold h2,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold h3 {
    color: #292522;
    font-weight: 700;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .text-muted {
    color: #746a5d !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .table-responsive {
    border: 1px solid #ddcfb5;
    border-radius: .68rem;
    background-color: #fffdf8;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .table > thead > tr > th {
    border-bottom-color: #d8c49d;
    color: #292522;
    font-weight: 700;
    letter-spacing: .01em;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #fff7e7;
    color: #292522;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .btn-primary {
    box-shadow: 0 3px 8px rgba(var(--wp-primary-rgb), .2);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .btn-outline-primary,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .nav-tabs .nav-link {
    font-weight: 600;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .nav-tabs .nav-link.active,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-style-warm_gold .nav-pills .nav-link.active {
    background-color: var(--wp-primary);
    border-color: var(--wp-primary);
    color: var(--wp-primary-contrast);
  }

  /* Canva palettes remain a fixed six-value set, independent of the design. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-ocean {
    --wp-primary: #0b5ed7; --wp-primary-rgb: 11, 94, 215; --wp-primary-strong: #084298; --wp-primary-soft: #e7f1ff; --wp-primary-contrast: #ffffff; --bs-primary: #0b5ed7; --bs-primary-rgb: 11, 94, 215;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-emerald {
    --wp-primary: #087f5b; --wp-primary-rgb: 8, 127, 91; --wp-primary-strong: #056144; --wp-primary-soft: #e4f7ef; --wp-primary-contrast: #ffffff; --bs-primary: #087f5b; --bs-primary-rgb: 8, 127, 91;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-indigo {
    --wp-primary: #4f46e5; --wp-primary-rgb: 79, 70, 229; --wp-primary-strong: #3730a3; --wp-primary-soft: #edecff; --wp-primary-contrast: #ffffff; --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-rose {
    --wp-primary: #be185d; --wp-primary-rgb: 190, 24, 93; --wp-primary-strong: #9d174d; --wp-primary-soft: #fdeaf2; --wp-primary-contrast: #ffffff; --bs-primary: #be185d; --bs-primary-rgb: 190, 24, 93;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-graphite {
    --wp-primary: #343a40; --wp-primary-rgb: 52, 58, 64; --wp-primary-strong: #212529; --wp-primary-soft: #edf0f2; --wp-primary-contrast: #ffffff; --bs-primary: #343a40; --bs-primary-rgb: 52, 58, 64;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva.wp-canva-desktop-palette-gold {
    --wp-primary: #8a5a00; --wp-primary-rgb: 138, 90, 0; --wp-primary-strong: #684300; --wp-primary-soft: #fff5dd; --wp-primary-contrast: #ffffff; --bs-primary: #8a5a00; --bs-primary-rgb: 138, 90, 0;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .navbar.bg-primary,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .navbar.bg-dark {
    background: var(--wp-nav-background) !important;
    color: var(--wp-nav-color);
    box-shadow: var(--wp-canva-nav-shadow);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .navbar .navbar-brand,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .navbar .navbar-text,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .navbar .nav-link {
    color: var(--wp-nav-color) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .card,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .box-container,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .modal-content,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .dropdown-menu {
    box-shadow: var(--wp-card-shadow), var(--wp-canva-card-ring);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .card-title,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva h1,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva h2,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva h3 {
    letter-spacing: var(--wp-canva-heading-spacing);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .form-control,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .form-select,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .input-group-text {
    background-color: var(--wp-canva-control-background);
    border-color: var(--wp-border);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .table > thead > tr > th {
    background-color: var(--wp-canva-table-head);
    color: var(--wp-text);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-desktop-canva .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--wp-canva-table-stripe);
  }
}

/* Mobile Canva choices are separately tuned for touch density.  As above,
 * a mobile GPT selection activates none of these rules and keeps v45 exact. */
@media screen and (max-width: 767.98px) {
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva {
    --wp-layout-gap: .8rem;
    --wp-canva-nav-shadow: 0 5px 16px rgba(15, 23, 42, .14);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-executive_slate {
    --wp-surface: linear-gradient(155deg, #f0f3f6 0%, #e6ebf1 100%);
    --wp-surface-accent: #e5ebf1;
    --wp-panel: #ffffff;
    --wp-panel-strong: #f7f9fb;
    --wp-border: #cbd5df;
    --wp-card-shadow: 0 5px 15px rgba(30, 41, 59, .09);
    --wp-card-radius: .7rem;
    --wp-control-radius: .46rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(105deg, #172235 0%, #25364d 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #ffffff;
    --wp-canva-table-head: #eaf0f6;
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .9);
    --wp-canva-heading-spacing: -.012em;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-pearl_editorial {
    --wp-surface: linear-gradient(145deg, #fcf9f3 0%, #f4eee4 100%);
    --wp-surface-accent: #f4eee4;
    --wp-panel: #fffefa;
    --wp-panel-strong: #fffaf0;
    --wp-border: #e6dccb;
    --wp-card-shadow: 0 7px 18px rgba(94, 76, 51, .08);
    --wp-card-radius: 1.04rem;
    --wp-control-radius: .68rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #4b4034 0%, var(--wp-primary-strong) 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #fffdf8;
    --wp-canva-table-head: #f7efe3;
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .95);
    --wp-canva-heading-spacing: -.016em;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-azure_glass {
    --wp-surface: linear-gradient(150deg, #eaf5ff 0%, #f3f8ff 47%, #e8f8f3 100%);
    --wp-surface-accent: rgba(232, 244, 255, .84);
    --wp-panel: rgba(255, 255, 255, .84);
    --wp-panel-strong: rgba(255, 255, 255, .93);
    --wp-border: rgba(255, 255, 255, .92);
    --wp-card-shadow: 0 9px 22px rgba(37, 99, 148, .12);
    --wp-card-radius: 1.02rem;
    --wp-control-radius: .72rem;
    --wp-card-backdrop: blur(9px);
    --wp-nav-background: linear-gradient(112deg, #0f4f8b 0%, var(--wp-primary) 58%, #247e8d 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: rgba(255, 255, 255, .8);
    --wp-canva-control-background: rgba(255, 255, 255, .9);
    --wp-canva-table-head: rgba(232, 244, 255, .92);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-forest_ledger {
    --wp-surface: linear-gradient(155deg, #f3f7f1 0%, #e9f0e9 100%);
    --wp-surface-accent: #e7eee7;
    --wp-panel: #fdfefc;
    --wp-panel-strong: #f7fbf6;
    --wp-border: #cbd9ce;
    --wp-card-shadow: 0 5px 15px rgba(35, 70, 49, .09);
    --wp-card-radius: .66rem;
    --wp-control-radius: .44rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #123b2d 0%, #1d5d45 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #ffffff;
    --wp-canva-table-head: #e7f0e8;
    --wp-canva-card-ring: inset 3px 0 0 rgba(var(--wp-primary-rgb), .48);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-indigo_aurora {
    --wp-surface: radial-gradient(circle at 18% 5%, #e8e8ff 0%, transparent 37%), linear-gradient(150deg, #f4f1ff 0%, #eff8ff 56%, #fbf0ff 100%);
    --wp-surface-accent: #efedff;
    --wp-panel: rgba(255, 255, 255, .89);
    --wp-panel-strong: rgba(255, 255, 255, .95);
    --wp-border: rgba(205, 205, 239, .88);
    --wp-card-shadow: 0 10px 24px rgba(76, 60, 158, .13);
    --wp-card-radius: 1.12rem;
    --wp-control-radius: .76rem;
    --wp-card-backdrop: blur(8px);
    --wp-nav-background: linear-gradient(108deg, #4338a8 0%, var(--wp-primary) 55%, #6b4ca5 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: rgba(255, 255, 255, .86);
    --wp-canva-control-background: rgba(255, 255, 255, .92);
    --wp-canva-table-head: rgba(237, 236, 255, .94);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold {
    --wp-surface: linear-gradient(155deg, #faf7f0 0%, #f3ecdf 100%);
    --wp-surface-accent: #f4ecdd;
    --wp-panel: #fffdf8;
    --wp-panel-strong: #fbf3e5;
    --wp-text: #292522;
    --wp-muted: #746a5d;
    --wp-border: #ddcfb5;
    --wp-card-shadow: 0 5px 15px rgba(57, 45, 25, .08);
    --wp-card-radius: .72rem;
    --wp-control-radius: .54rem;
    --wp-card-backdrop: none;
    --wp-nav-background: linear-gradient(104deg, #24211d 0%, #3c3125 100%);
    --wp-nav-color: #ffffff;
    --wp-canva-panel-highlight: #fffefa;
    --wp-canva-control-background: #fffdf8;
    --wp-canva-table-head: #f8edd8;
    --wp-canva-table-stripe: rgba(138, 90, 0, .035);
    --wp-canva-nav-shadow: 0 5px 15px rgba(37, 31, 23, .16);
    --wp-canva-card-ring: inset 0 1px 0 rgba(255, 255, 255, .95);
    --wp-canva-heading-spacing: -.01em;
    --wp-classic-gold: #a56a00;
    --wp-classic-gold-soft: #fff0cf;
    --bs-table-hover-bg: #fff7e7;
    --bs-table-hover-color: #292522;
  }

  /* Mobile 2 of Classic Executive Workspace keeps one calm visual rhythm:
     compact panels and durable 44px-class touch controls without hiding or
     enabling any action. */
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .navbar.bg-primary,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .navbar.bg-dark {
    border-bottom: 2px solid rgba(218, 177, 101, .66);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .box-container,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .modal-content,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .dropdown-menu {
    background: linear-gradient(180deg, #fffefa 0%, #fffaf1 100%);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) > .card-header,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .modal-content > .modal-header {
    background: linear-gradient(90deg, #fbf3e5 0%, #fffaf0 100%);
    border-bottom-color: #ddcfb5;
    color: #292522;
    padding-top: .68rem;
    padding-bottom: .68rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) > .card-footer,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .modal-content > .modal-footer {
    background-color: rgba(251, 243, 229, .72);
    border-top-color: #ddcfb5;
    padding-top: .68rem;
    padding-bottom: .68rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .card-title,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold h1,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold h2,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold h3 {
    color: #292522;
    font-weight: 700;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .text-muted {
    color: #746a5d !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .table-responsive {
    border: 1px solid #ddcfb5;
    border-radius: .58rem;
    background-color: #fffdf8;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .table > thead > tr > th {
    border-bottom-color: #d8c49d;
    color: #292522;
    font-weight: 700;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #fff7e7;
    color: #292522;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold input.form-control,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold select.form-select,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .input-group-text {
    min-height: 2.75rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .btn:not(.btn-sm):not(.btn-close) {
    min-height: 2.75rem;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .btn-primary {
    box-shadow: 0 2px 7px rgba(var(--wp-primary-rgb), .18);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .nav-tabs .nav-link,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .btn-outline-primary {
    font-weight: 600;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .nav-tabs .nav-link.active,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-style-warm_gold .nav-pills .nav-link.active {
    background-color: var(--wp-primary);
    border-color: var(--wp-primary);
    color: var(--wp-primary-contrast);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-ocean {
    --wp-primary: #0b5ed7; --wp-primary-rgb: 11, 94, 215; --wp-primary-strong: #084298; --wp-primary-soft: #e7f1ff; --wp-primary-contrast: #ffffff; --bs-primary: #0b5ed7; --bs-primary-rgb: 11, 94, 215;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-emerald {
    --wp-primary: #087f5b; --wp-primary-rgb: 8, 127, 91; --wp-primary-strong: #056144; --wp-primary-soft: #e4f7ef; --wp-primary-contrast: #ffffff; --bs-primary: #087f5b; --bs-primary-rgb: 8, 127, 91;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-indigo {
    --wp-primary: #4f46e5; --wp-primary-rgb: 79, 70, 229; --wp-primary-strong: #3730a3; --wp-primary-soft: #edecff; --wp-primary-contrast: #ffffff; --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-rose {
    --wp-primary: #be185d; --wp-primary-rgb: 190, 24, 93; --wp-primary-strong: #9d174d; --wp-primary-soft: #fdeaf2; --wp-primary-contrast: #ffffff; --bs-primary: #be185d; --bs-primary-rgb: 190, 24, 93;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-graphite {
    --wp-primary: #343a40; --wp-primary-rgb: 52, 58, 64; --wp-primary-strong: #212529; --wp-primary-soft: #edf0f2; --wp-primary-contrast: #ffffff; --bs-primary: #343a40; --bs-primary-rgb: 52, 58, 64;
  }
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva.wp-canva-mobile-palette-gold {
    --wp-primary: #8a5a00; --wp-primary-rgb: 138, 90, 0; --wp-primary-strong: #684300; --wp-primary-soft: #fff5dd; --wp-primary-contrast: #ffffff; --bs-primary: #8a5a00; --bs-primary-rgb: 138, 90, 0;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .navbar.bg-primary,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .navbar.bg-dark {
    background: var(--wp-nav-background) !important;
    color: var(--wp-nav-color);
    box-shadow: var(--wp-canva-nav-shadow);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .navbar .navbar-brand,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .navbar .navbar-text,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .navbar .nav-link {
    color: var(--wp-nav-color) !important;
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .card,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .box-container,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .modal-content,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .dropdown-menu {
    box-shadow: var(--wp-card-shadow), var(--wp-canva-card-ring);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .card-title,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva h1,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva h2,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva h3 {
    letter-spacing: var(--wp-canva-heading-spacing);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .form-control,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .form-select,
  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .input-group-text {
    background-color: var(--wp-canva-control-background);
    border-color: var(--wp-border);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .table > thead > tr > th {
    background-color: var(--wp-canva-table-head);
    color: var(--wp-text);
  }

  body.workpro-appearance.wp-appearance-v45.wp-canva-design-v48.wp-design-source-mobile-canva .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--wp-canva-table-stripe);
  }
}