@redacto.io/consent-sdk-react 3.4.0 → 3.6.0

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -0,0 +1,1000 @@
+/**
+ * CSS Injection Utility for Privacy Center SDK
+ * 
+ * Injects CSS that cannot be done with inline styles:
+ * - Keyframe animations
+ * - Pseudo-elements (::after, ::before)
+ * - Checkbox checked states
+ * - Focus states for form elements
+ */
+
+let stylesInjected = false;
+
+export const injectPCStyles = () => {
+  if (stylesInjected || typeof document === 'undefined') {
+    return;
+  }
+
+  const STYLE_ID = 'redacto-privacy-center-styles';
+  
+  // Check if styles are already injected
+  if (document.getElementById(STYLE_ID)) {
+    stylesInjected = true;
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  // Inject CSS variables first
+  const variablesStyle = document.createElement('style');
+  variablesStyle.id = 'redacto-privacy-center-variables';
+  if (!document.getElementById('redacto-privacy-center-variables')) {
+    // CSS variables will be injected via a separate import or inline
+    // For now, we'll rely on the host app or inject them here
+    variablesStyle.textContent = `
+      :root, [data-theme="light"] {
+        --pc-primary: #3b82f6;
+        --pc-primary-hover: #2563eb;
+        --pc-primary-active: #1d4ed8;
+        --pc-secondary: #6b7280;
+        --pc-secondary-hover: #4b5563;
+        --pc-success: #10b981;
+        --pc-error: #ef4444;
+        --pc-warning: #f59e0b;
+        --pc-warning-bg: #fef9c3;
+        --pc-warning-border: #fcd34d;
+        --pc-warning-text: #92400e;
+        --pc-info: #3b82f6;
+        --pc-bg-shell: #ffffff;
+        --pc-bg-primary: #ffffff;
+        --pc-bg-secondary: #f9fafb;
+        --pc-bg-tertiary: #f3f4f6;
+        --pc-bg-hover: #f9fafb;
+        --pc-bg-active: #f3f4f6;
+        --pc-bg-overlay: rgba(0, 0, 0, 0.5);
+        --pc-text-primary: #111827;
+        --pc-text-secondary: #6b7280;
+        --pc-text-tertiary: #9ca3af;
+        --pc-text-inverse: #ffffff;
+        --pc-text-disabled: #d1d5db;
+        --pc-border-color: #e5e7eb;
+        --pc-border-color-hover: #d1d5db;
+        --pc-border-color-focus: #3b82f6;
+        --pc-border-radius-sm: 0.375rem;
+        --pc-border-radius-md: 0.4375rem;
+        --pc-border-radius-lg: 0.625rem;
+        --pc-border-radius-xl: 0.875rem;
+        --pc-border-radius-2xl: 1.25rem;
+        --pc-border-radius-3xl: 2rem;
+        --pc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        --pc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        --pc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        --pc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        --pc-sidebar-shadow: 12px 0 28px rgba(15, 23, 42, 0.08), 1px 0 0 rgba(15, 23, 42, 0.04);
+        --pc-spacing-xs: 0.25rem;
+        --pc-spacing-sm: 0.5rem;
+        --pc-spacing-md: 0.875rem;
+        --pc-spacing-lg: 1.25rem;
+        --pc-spacing-xl: 1.75rem;
+        --pc-spacing-2xl: 2.5rem;
+        --pc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        --pc-font-size-xs: 0.75rem;
+        --pc-font-size-sm: 0.8125rem;
+        --pc-font-size-base: 0.9375rem;
+        --pc-font-size-lg: 1.0625rem;
+        --pc-font-size-xl: 1.1875rem;
+        --pc-font-size-2xl: 1.375rem;
+        --pc-font-size-3xl: 1.75rem;
+        --pc-font-weight-normal: 400;
+        --pc-font-weight-medium: 500;
+        --pc-font-weight-semibold: 600;
+        --pc-font-weight-bold: 700;
+        --pc-transition-fast: 150ms ease-in-out;
+        --pc-transition-base: 200ms ease-in-out;
+        --pc-transition-slow: 300ms ease-in-out;
+        --pc-z-dropdown: 1000;
+        --pc-z-sticky: 1020;
+        --pc-z-fixed: 1030;
+        --pc-z-modal-backdrop: 1200;
+        --pc-z-modal: 1210;
+        --pc-z-popover: 1060;
+        --pc-z-tooltip: 1070;
+        --pc-icon-filter: 0;
+        --pc-sidebar-mobile-width: 280px;
+        --pc-sidebar-collapsed-width: 80px;
+        --pc-sidebar-expanded-width: 300px;
+        --pc-sidebar-expanded-width-2xl: 320px;
+      }
+      [data-theme="dark"] {
+        --pc-primary: #60a5fa;
+        --pc-primary-hover: #3b82f6;
+        --pc-primary-active: #2563eb;
+        --pc-secondary: #9ca3af;
+        --pc-secondary-hover: #6b7280;
+        --pc-success: #34d399;
+        --pc-error: #f87171;
+        --pc-warning: #fbbf24;
+        --pc-warning-bg: #78350f;
+        --pc-warning-border: #fbbf24;
+        --pc-warning-text: #fef3c7;
+        --pc-info: #60a5fa;
+        --pc-bg-shell: #111827;
+        --pc-bg-primary: #1b2435;
+        --pc-bg-secondary: #243044;
+        --pc-bg-tertiary: #31405a;
+        --pc-bg-hover: #243044;
+        --pc-bg-active: #31405a;
+        --pc-bg-overlay: rgba(0, 0, 0, 0.7);
+        --pc-text-primary: #f9fafb;
+        --pc-text-secondary: #d1d5db;
+        --pc-text-tertiary: #9ca3af;
+        --pc-text-inverse: #111827;
+        --pc-text-disabled: #6b7280;
+        --pc-border-color: rgba(148, 163, 184, 0.18);
+        --pc-border-color-hover: rgba(148, 163, 184, 0.28);
+        --pc-border-color-focus: #60a5fa;
+        --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
+        --pc-icon-filter: 1;
+      }
+    `;
+    document.head.appendChild(variablesStyle);
+  }
+
+  style.textContent = `
+    /* Privacy Center SDK Styles */
+    
+    /* Theme Transition Animations */
+    /* Smooth transitions for all color-related properties (scoped to SDK root).
+       IMPORTANT: Avoid !important so component-specific transitions (e.g. transform)
+       can win and animations remain smooth. */
+    .pc-root,
+    .pc-root *,
+    .pc-root *::before,
+    .pc-root *::after {
+      transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                  color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                  border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                  fill 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                  stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Exclude certain elements from transitions */
+    svg *,
+    img,
+    video,
+    canvas {
+      transition: none !important;
+    }
+    
+    /* Sun and Moon Rising Animation */
+    @keyframes pc-sun-moon-rise {
+      0% {
+        bottom: -150px;
+        opacity: 0;
+        transform: translateX(-50%) scale(0.5) rotate(-10deg);
+      }
+      15% {
+        opacity: 1;
+        transform: translateX(-50%) scale(1) rotate(0deg);
+      }
+      70% {
+        opacity: 1;
+        transform: translateX(-50%) scale(1.1) rotate(5deg);
+      }
+      100% {
+        bottom: calc(100vh + 50px);
+        opacity: 0;
+        transform: translateX(-50%) scale(0.7) rotate(10deg);
+      }
+    }
+    
+    /* Sun specific glow animation */
+    @keyframes pc-sun-glow {
+      0%, 100% {
+        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.7)) 
+                drop-shadow(0 0 60px rgba(251, 191, 36, 0.4));
+      }
+      50% {
+        filter: drop-shadow(0 0 50px rgba(251, 191, 36, 0.9)) 
+                drop-shadow(0 0 100px rgba(251, 191, 36, 0.6));
+      }
+    }
+    
+    /* Moon specific glow animation */
+    @keyframes pc-moon-glow {
+      0%, 100% {
+        filter: drop-shadow(0 0 30px rgba(224, 231, 255, 0.7)) 
+                drop-shadow(0 0 60px rgba(224, 231, 255, 0.4));
+      }
+      50% {
+        filter: drop-shadow(0 0 50px rgba(224, 231, 255, 0.9)) 
+                drop-shadow(0 0 100px rgba(224, 231, 255, 0.6));
+      }
+    }
+    
+    .pc-theme-transition-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      will-change: opacity;
+      overflow: hidden;
+    }
+    
+    .pc-theme-transition-icon {
+      will-change: transform, opacity, bottom, filter;
+    }
+    
+    .pc-theme-transition-light {
+      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
+                 pc-sun-glow 1s ease-in-out;
+    }
+    
+    .pc-theme-transition-dark {
+      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
+                 pc-moon-glow 1s ease-in-out;
+    }
+    
+    /* Keyframe Animations */
+    @keyframes pc-spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes pc-fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes pc-slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes pc-slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    /* Checkbox Styles */
+    .pc-checkbox {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      border: 2px solid var(--pc-border-color) !important;
+      border-radius: var(--pc-border-radius-sm) !important;
+      background-color: var(--pc-bg-primary) !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      transition: all 0.2s ease !important;
+      flex-shrink: 0 !important;
+    }
+
+    .pc-checkbox:checked {
+      background-color: var(--pc-primary) !important;
+      border-color: var(--pc-primary) !important;
+    }
+
+    .pc-checkbox:hover:not(:disabled) {
+      border-color: var(--pc-primary) !important;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
+    }
+
+    .pc-checkbox:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 4px !important;
+      height: 8px !important;
+      border: solid var(--pc-text-inverse) !important;
+      border-width: 0 2px 2px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .pc-checkbox-sm:checked::after {
+      width: 3px !important;
+      height: 6px !important;
+      border-width: 0 1.5px 1.5px 0 !important;
+    }
+
+    .pc-checkbox:focus {
+      outline: 2px solid var(--pc-border-color-focus) !important;
+      outline-offset: 2px !important;
+    }
+
+    .pc-checkbox:disabled {
+      opacity: 0.5 !important;
+      cursor: not-allowed !important;
+    }
+
+    /* Input Focus Styles - Removed focus ring and border change */
+    .pc-input:focus,
+    .pc-textarea:focus,
+    .pc-select:focus {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    /* Button Hover States */
+    .pc-button-primary:hover:not(:disabled) {
+      background-color: var(--pc-primary-hover) !important;
+    }
+
+    .pc-button-secondary:hover:not(:disabled) {
+      background-color: var(--pc-secondary-hover) !important;
+    }
+
+    .pc-button-outline:hover:not(:disabled) {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    .pc-button-text:hover:not(:disabled) {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    .pc-button-danger:hover:not(:disabled) {
+      background-color: #dc2626 !important;
+    }
+
+    /* Responsive modal footer actions (stack buttons on small screens) */
+    .pc-modal-footer-actions {
+      display: flex;
+      gap: var(--pc-spacing-sm);
+      justify-content: flex-end;
+      width: 100%;
+    }
+
+    @media (max-width: 480px) {
+      .pc-modal-footer-actions {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+      .pc-modal-footer-actions > button {
+        width: 100% !important;
+      }
+    }
+
+    /* Button Focus States */
+    .pc-button:focus-visible {
+      outline: 2px solid var(--pc-border-color-focus) !important;
+      outline-offset: 2px !important;
+    }
+
+    /* Table Row Hover */
+    .pc-table-row:hover {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    /* Action Icon Hover */
+    .pc-action-icon:hover:not(:disabled) {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    /* Modal Overlay Animation */
+    .pc-modal-overlay {
+      animation: pc-fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
+    }
+
+    /* Dropdown Animation - Support both top and bottom positioning */
+    .pc-select-dropdown {
+      animation: pc-slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
+    }
+    
+    /* Responsive dropdown - allow width to be set via inline styles */
+    .pc-select-dropdown {
+      box-sizing: border-box !important;
+    }
+    
+    /* Ensure options don't wrap and dropdown is compact */
+    .pc-select-option {
+      white-space: nowrap !important;
+    }
+    
+    /* Responsive dropdown positioning for small screens */
+    @media (max-width: 639px) {
+      .pc-select-dropdown {
+        left: 0 !important;
+        right: auto !important;
+      }
+    }
+    
+    /* For very small screens, ensure dropdown doesn't overflow viewport */
+    @media (max-width: 480px) {
+      .pc-select-dropdown {
+        max-width: calc(100vw - 2rem) !important;
+      }
+    }
+
+    /* Tooltip Animation */
+    .pc-tooltip {
+      animation: pc-slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
+    }
+
+    /* Accordion Transition */
+    .pc-accordion-body {
+      transition: max-height 0.3s ease, padding 0.3s ease !important;
+    }
+
+    /* Scrollbar Styles (for better UX) */
+    .pc-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    .pc-scrollbar::-webkit-scrollbar-track {
+      background: var(--pc-bg-secondary);
+      border-radius: 4px;
+    }
+
+    .pc-scrollbar::-webkit-scrollbar-thumb {
+      background: var(--pc-border-color);
+      border-radius: 4px;
+    }
+
+    .pc-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: var(--pc-border-color-hover);
+    }
+
+    /* Ensure SDK components have proper z-index */
+    .pc-select-dropdown {
+      z-index: var(--pc-z-dropdown) !important;
+    }
+
+    .pc-tooltip {
+      z-index: 1300 !important;
+    }
+
+    .pc-modal-overlay {
+      z-index: var(--pc-z-modal-backdrop) !important;
+    }
+
+    .pc-modal {
+      z-index: var(--pc-z-modal) !important;
+    }
+
+    /* Responsive Utilities */
+    @media (max-width: 639px) {
+      .pc-hidden-xs {
+        display: none !important;
+      }
+      .pc-block-xs {
+        display: block !important;
+      }
+      .pc-flex-xs {
+        display: flex !important;
+      }
+    }
+
+    @media (min-width: 640px) {
+      .pc-hidden-sm {
+        display: none !important;
+      }
+      .pc-block-sm {
+        display: block !important;
+      }
+      .pc-flex-sm {
+        display: flex !important;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .pc-hidden-md {
+        display: none !important;
+      }
+      .pc-block-md {
+        display: block !important;
+      }
+      .pc-flex-md {
+        display: flex !important;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .pc-hidden-lg {
+        display: none !important;
+      }
+      .pc-block-lg {
+        display: block !important;
+      }
+      .pc-flex-lg {
+        display: flex !important;
+      }
+    }
+
+    /* Status badge: responsive, light bg, little radius */
+    .pc-status-badge {
+      border-radius: 9999px;
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    @media (max-width: 480px) {
+      .pc-status-badge {
+        padding: 0.2rem 0.4rem !important;
+        font-size: 0.6875rem !important;
+      }
+    }
+    @media (min-width: 481px) and (max-width: 639px) {
+      .pc-status-badge {
+        padding: 0.22rem 0.45rem !important;
+        font-size: 0.7rem !important;
+      }
+    }
+
+    /* Responsive Typography */
+    .pc-text-responsive {
+      font-size: 0.875rem;
+    }
+    @media (min-width: 768px) {
+      .pc-text-responsive {
+        font-size: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-text-responsive {
+        font-size: 1.125rem;
+      }
+    }
+
+    /* Responsive Container */
+    .pc-container-responsive {
+      width: 100%;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
+    @media (min-width: 640px) {
+      .pc-container-responsive {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-container-responsive {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        max-width: 1280px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
+    /* Responsive Grid */
+    .pc-grid-responsive {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 0.75rem;
+    }
+    @media (min-width: 640px) {
+      .pc-grid-responsive {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-grid-responsive {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+      }
+    }
+
+    /* Responsive Flex Direction */
+    .pc-flex-responsive {
+      flex-direction: column;
+    }
+    @media (min-width: 640px) {
+      .pc-flex-responsive {
+        flex-direction: row;
+        align-items: flex-start;
+      }
+    }
+
+    /* Responsive Spacing */
+    .pc-spacing-responsive {
+      gap: 0.5rem;
+    }
+    @media (min-width: 768px) {
+      .pc-spacing-responsive {
+        gap: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-spacing-responsive {
+        gap: 1.5rem;
+      }
+    }
+
+    /* Responsive Padding */
+    .pc-padding-responsive {
+      padding: 0.75rem;
+    }
+    @media (min-width: 640px) {
+      .pc-padding-responsive {
+        padding: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-padding-responsive {
+        padding: 1.5rem;
+      }
+    }
+
+    /* Responsive Width */
+    .pc-w-full-mobile {
+      width: 100%;
+    }
+    @media (min-width: 640px) {
+      .pc-w-full-mobile {
+        width: auto;
+      }
+    }
+
+    /* Ensure proper box-sizing for all SDK elements */
+    .pc-root,
+    .pc-root *,
+    .pc-root *::before,
+    .pc-root *::after {
+      box-sizing: border-box;
+    }
+
+    /* Base reset for SDK components */
+    .pc-root {
+      font-family: var(--pc-font-family);
+      font-size: var(--pc-font-size-base);
+      line-height: 1.5;
+      color: var(--pc-text-primary);
+      background-color: var(--pc-bg-shell);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* Ensure tables are responsive */
+    .pc-table-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Responsive table */
+    @media (max-width: 767px) {
+      .pc-table-responsive {
+        font-size: 0.875rem;
+      }
+      .pc-table-responsive th,
+      .pc-table-responsive td {
+        padding: 0.5rem 0.25rem;
+      }
+    }
+
+    /* Sidebar responsive styles */
+    /* Mobile: Hidden by default, shown when mobile menu is open */
+    @media (max-width: 767px) {
+      .pc-sidebar {
+        width: var(--pc-sidebar-mobile-width) !important;
+        transform: translateX(-100%) !important;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+      }
+      .pc-sidebar[data-mobile-open="true"] {
+        transform: translateX(0) !important;
+      }
+    }
+
+    /* Mobile overlay fade */
+    .pc-mobile-overlay {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      will-change: opacity;
+    }
+    .pc-mobile-overlay[data-open="true"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    
+    /* Medium screens (768px+): Sidebar visible, collapsed by default */
+    @media (min-width: 768px) {
+      .pc-sidebar {
+        transform: translateX(0) !important;
+        /* Default to collapsed width */
+        width: var(--pc-sidebar-collapsed-width) !important;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        will-change: width;
+      }
+      /* Expand only when collapse state is toggled off */
+      .pc-sidebar:not(.pc-sidebar-collapsed) {
+        width: var(--pc-sidebar-expanded-width) !important;
+      }
+      /* Explicitly set collapsed width */
+      .pc-sidebar.pc-sidebar-collapsed {
+        width: var(--pc-sidebar-collapsed-width) !important;
+      }
+    }
+    
+    /* Large screens (1024px+): Same behavior as medium */
+    @media (min-width: 1024px) {
+      .pc-sidebar:not(.pc-sidebar-collapsed) {
+        width: var(--pc-sidebar-expanded-width) !important;
+      }
+    }
+    
+    /* Extra large screens (1280px+): Same behavior */
+    @media (min-width: 1280px) {
+      .pc-sidebar:not(.pc-sidebar-collapsed) {
+        width: var(--pc-sidebar-expanded-width) !important;
+      }
+    }
+    
+    @media (min-width: 1536px) {
+      .pc-sidebar:not(.pc-sidebar-collapsed) {
+        width: var(--pc-sidebar-expanded-width-2xl) !important;
+      }
+    }
+
+    /* Desktop sidebar toggle affordance:
+       fixed top-layer button aligned to the sidebar border. */
+    .pc-sidebar-toggle-desktop {
+      left: calc(var(--pc-sidebar-collapsed-width) - 14px);
+      transform: translateY(-50%);
+      transition: opacity 0.2s ease, left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    @media (min-width: 768px) {
+      .pc-sidebar {
+        isolation: isolate;
+      }
+      .pc-sidebar-toggle-desktop[data-visible="false"] {
+        opacity: 0;
+        pointer-events: none;
+      }
+      .pc-sidebar-toggle-desktop[data-visible="true"] {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .pc-sidebar-toggle-desktop[data-collapsed="false"] {
+        left: calc(var(--pc-sidebar-expanded-width) - 14px);
+      }
+    }
+    @media (min-width: 1536px) {
+      .pc-sidebar-toggle-desktop[data-collapsed="false"] {
+        left: calc(var(--pc-sidebar-expanded-width-2xl) - 14px);
+      }
+    }
+
+    /* Ensure menu items are always vertical */
+    .pc-sidebar-menu-container {
+      display: flex !important;
+      flex-direction: column !important;
+    }
+
+    /* Ensure menu items stack vertically, not horizontally */
+    .pc-sidebar-menu-container > * {
+      display: block !important;
+      width: 100% !important;
+      flex-shrink: 0 !important;
+    }
+
+    /* Collapsed menu items should be centered and vertical */
+    .pc-sidebar.pc-sidebar-collapsed .pc-sidebar-menu-container > * {
+      width: 100% !important;
+    }
+
+    /* Prevent horizontal layout of menu items */
+    .pc-sidebar-menu-container > * > * {
+      display: block !important;
+    }
+
+    /* Ensure menu items are always vertical */
+    .pc-sidebar .pc-menu-container {
+      display: flex !important;
+      flex-direction: column !important;
+    }
+
+    /* Responsive Header Layout */
+    .pc-header-responsive {
+      flex-direction: column !important;
+    }
+    @media (min-width: 768px) {
+      .pc-header-responsive {
+        flex-direction: row !important;
+        align-items: flex-start !important;
+        justify-content: space-between !important;
+      }
+    }
+
+    /* Responsive Title Section */
+    .pc-title-responsive {
+      width: 100% !important;
+    }
+    @media (min-width: 768px) {
+      .pc-title-responsive {
+        flex: 1 !important;
+        min-width: 200px !important;
+        width: auto !important;
+      }
+    }
+
+    /* Responsive Export Button */
+    .pc-export-button-responsive {
+      width: 100% !important;
+    }
+    @media (min-width: 768px) {
+      .pc-export-button-responsive {
+        width: auto !important;
+        flex-shrink: 0 !important;
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-export-button-responsive button {
+        width: auto !important;
+      }
+    }
+
+    /* Responsive Filters Layout */
+    .pc-filters-responsive {
+      flex-direction: column !important;
+    }
+    @media (min-width: 768px) {
+      .pc-filters-responsive {
+        flex-direction: row !important;
+        align-items: flex-start !important;
+        justify-content: space-between !important;
+        width: 100% !important;
+        flex-wrap: wrap !important;
+      }
+    }
+
+    /* Responsive Search Input */
+    .pc-search-responsive {
+      width: 100% !important;
+    }
+    @media (min-width: 768px) {
+      .pc-search-responsive {
+        width: auto !important;
+        min-width: 160px !important;
+        max-width: 340px !important;
+      }
+    }
+
+    /* Responsive Filters Row */
+    .pc-filters-row-responsive {
+      flex-direction: column !important;
+      width: 100% !important;
+      margin-left: 0 !important;
+    }
+    @media (min-width: 768px) {
+      .pc-filters-row-responsive {
+        flex-direction: row !important;
+        width: auto !important;
+        flex-shrink: 0 !important;
+        margin-left: auto !important;
+        margin-right: 0 !important;
+        gap: 1rem !important;
+        align-items: center !important;
+        justify-content: flex-end !important;
+        flex-wrap: wrap !important;
+      }
+    }
+
+    /* Consent Manager filter selects: full width on mobile, responsive on medium, fixed on desktop */
+    .pc-filter-select {
+      width: 100% !important;
+      min-width: 0 !important;
+    }
+    /* Medium screens (e.g. tablets): allow shrink + wrap to avoid overflow */
+    @media (min-width: 768px) and (max-width: 1023px) {
+      .pc-search-responsive {
+        flex: 1 1 200px !important;
+        max-width: none !important;
+      }
+      .pc-filters-row-responsive {
+        width: 100% !important;
+        margin-left: 0 !important;
+        justify-content: flex-start !important;
+      }
+      .pc-filter-select {
+        flex: 1 1 200px !important;
+        width: auto !important;
+        min-width: 180px !important;
+        max-width: 240px !important;
+      }
+    }
+    /* Desktop: keep equal, sufficient width */
+    @media (min-width: 1024px) {
+      .pc-filter-select {
+        width: 240px !important;
+        min-width: 240px !important;
+        flex: 0 0 auto !important;
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-filters-row-responsive > *:not(:first-child) {
+
+      }
+      .pc-filter-button-wrapper {
+        width: auto !important;
+        min-width: auto !important;
+      }
+      /* Tabs container should only take space it needs */
+      .pc-filters-row-responsive > *:first-child {
+        min-width: auto !important;
+        width: auto !important;
+      }
+    }
+
+    /* Override the generic first-child sizing for our filter selects */
+    @media (min-width: 1024px) {
+      .pc-filters-row-responsive > .pc-filter-select:first-child {
+        width: 240px !important;
+        min-width: 240px !important;
+      }
+    }
+
+    /* Case Details Modal Responsive Styles */
+    .pc-case-details-content {
+      padding: 1rem !important;
+    }
+    @media (min-width: 640px) {
+      .pc-case-details-content {
+        padding: 1.5rem !important;
+      }
+    }
+
+    .pc-case-details-grid {
+      grid-template-columns: 1fr !important;
+    }
+    @media (min-width: 640px) {
+      .pc-case-details-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-case-details-grid {
+        grid-template-columns: repeat(4, 1fr) !important;
+      }
+    }
+  `;
+
+  document.head.appendChild(style);
+  stylesInjected = true;
+};