@keenmate/pure-admin-core 2.0.2 → 2.1.0

package/dist/css/main.css

@@ -5401,6 +5401,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   transition: box-shadow 0.1s ease-out;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .pa-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -5451,7 +5452,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header > h4,
 .pa-card__header > h5,
 .pa-card__header > h6 {
-  flex-shrink: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .pa-card__header > p {
   flex: 1;
@@ -5517,6 +5521,11 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header--wrap {
   flex-wrap: wrap;
 }
+.pa-card__header--wrap > h1, .pa-card__header--wrap > h2, .pa-card__header--wrap > h3, .pa-card__header--wrap > h4, .pa-card__header--wrap > h5, .pa-card__header--wrap > h6 {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
 .pa-card__header--wrap > p {
   white-space: normal;
   flex-basis: 100%;
@@ -6627,7 +6636,6 @@ a.pa-card p {
   background-color: var(--pa-btn-secondary-bg);
   color: var(--pa-btn-secondary-text);
   font-size: 1.2rem;
-  font-weight: 600;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
@@ -6699,10 +6707,17 @@ a.pa-card p {
   color: var(--pa-btn-dark-text);
   border-color: var(--pa-btn-dark-bg);
 }
-.pa-badge--ellipsis-left {
+.pa-badge.text-truncate {
+  display: inline-block;
+}
+.pa-badge--ellipsis-start {
   direction: rtl;
   text-align: left;
 }
+[dir=rtl] .pa-badge--ellipsis-start {
+  direction: ltr;
+  text-align: right;
+}
 
 /* ========================================
    Composite Badge
@@ -7598,6 +7613,94 @@ a.pa-card p {
   z-index: 7000;
 }
 
+.pa-btn-split {
+  position: relative;
+  display: inline-flex;
+}
+[dir=rtl] .pa-btn-split {
+  flex-direction: row-reverse;
+}
+.pa-btn-split .pa-btn {
+  border-radius: 0;
+}
+.pa-btn-split .pa-btn:first-child {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+  border-inline-end: none;
+}
+.pa-btn-split__toggle {
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
+  border-inline-end: none;
+  padding-inline: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  min-width: 3.5rem;
+}
+.pa-btn-split__toggle.pa-btn--xs {
+  width: 3.1rem;
+  min-width: 3.1rem;
+}
+.pa-btn-split__toggle.pa-btn--sm {
+  width: 3.3rem;
+  min-width: 3.3rem;
+}
+.pa-btn-split__toggle.pa-btn--lg {
+  width: 3.8rem;
+  min-width: 3.8rem;
+}
+.pa-btn-split__toggle.pa-btn--xl {
+  width: 4.1rem;
+  min-width: 4.1rem;
+}
+.pa-btn-split__chevron {
+  transition: transform 0.1s ease-out;
+}
+.pa-btn-split--open .pa-btn-split__chevron {
+  transform: rotate(180deg);
+}
+.pa-btn-split__menu {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: max-content;
+  background: var(--pa-card-bg);
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
+  box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  padding: 0.4rem 0;
+}
+.pa-btn-split__menu--open {
+  display: block;
+}
+.pa-btn-split__item {
+  display: block;
+  width: 100%;
+  padding: 0.8rem 1.6rem;
+  border: none;
+  background: none;
+  text-align: start;
+  font-size: 1.4rem;
+  color: var(--pa-text-color);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pa-btn-split__item:hover {
+  background-color: var(--pa-accent-hover);
+}
+.pa-btn-split__item--danger {
+  color: var(--pa-btn-danger-bg);
+}
+.pa-btn-split__item--danger:hover {
+  background-color: var(--pa-btn-danger-bg);
+  color: var(--pa-btn-danger-text);
+}
+
 /* ========================================
    Loader Components
    Spinners, dots, bars, pulse, ring, wave loaders and animations
@@ -7841,6 +7944,10 @@ a.pa-card p {
 .pa-tooltip--help {
   cursor: help;
 }
+.pa-tooltip--keyword {
+  border-bottom: 1px dotted currentColor;
+  cursor: help;
+}
 .pa-tooltip::before, .pa-tooltip::after {
   position: absolute;
   opacity: 0;
@@ -7892,21 +7999,29 @@ a.pa-card p {
 .pa-tooltip:hover::before, .pa-tooltip:hover::after {
   transform: translateX(-50%) translateY(0);
 }
-.pa-tooltip--right::before {
+.pa-tooltip--end::before {
   bottom: auto;
-  left: calc(100% + 8px);
+  left: auto;
+  inset-inline-start: calc(100% + 8px);
   top: 50%;
   transform: translateX(-4px) translateY(-50%);
 }
-.pa-tooltip--right::after {
+.pa-tooltip--end::after {
   bottom: auto;
-  left: calc(100% + 3px);
+  left: auto;
+  inset-inline-start: calc(100% + 3px);
   top: 50%;
   transform: translateX(-4px) translateY(-50%);
   border-top-color: transparent;
-  border-right-color: var(--pa-tooltip-bg);
+  border-inline-end-color: var(--pa-tooltip-bg);
+}
+.pa-tooltip--end:hover::before, .pa-tooltip--end:hover::after {
+  transform: translateX(0) translateY(-50%);
 }
-.pa-tooltip--right:hover::before, .pa-tooltip--right:hover::after {
+[dir=rtl] .pa-tooltip--end::before, [dir=rtl] .pa-tooltip--end::after {
+  transform: translateX(4px) translateY(-50%);
+}
+[dir=rtl] .pa-tooltip--end:hover::before, [dir=rtl] .pa-tooltip--end:hover::after {
   transform: translateX(0) translateY(-50%);
 }
 .pa-tooltip--bottom::before {
@@ -7926,23 +8041,29 @@ a.pa-card p {
 .pa-tooltip--bottom:hover::before, .pa-tooltip--bottom:hover::after {
   transform: translateX(-50%) translateY(0);
 }
-.pa-tooltip--left::before {
+.pa-tooltip--start::before {
   bottom: auto;
   left: auto;
-  right: calc(100% + 8px);
+  inset-inline-end: calc(100% + 8px);
   top: 50%;
   transform: translateX(4px) translateY(-50%);
 }
-.pa-tooltip--left::after {
+.pa-tooltip--start::after {
   bottom: auto;
   left: auto;
-  right: calc(100% + 3px);
+  inset-inline-end: calc(100% + 3px);
   top: 50%;
   transform: translateX(4px) translateY(-50%);
   border-top-color: transparent;
-  border-left-color: var(--pa-tooltip-bg);
+  border-inline-start-color: var(--pa-tooltip-bg);
 }
-.pa-tooltip--left:hover::before, .pa-tooltip--left:hover::after {
+.pa-tooltip--start:hover::before, .pa-tooltip--start:hover::after {
+  transform: translateX(0) translateY(-50%);
+}
+[dir=rtl] .pa-tooltip--start::before, [dir=rtl] .pa-tooltip--start::after {
+  transform: translateX(-4px) translateY(-50%);
+}
+[dir=rtl] .pa-tooltip--start:hover::before, [dir=rtl] .pa-tooltip--start:hover::after {
   transform: translateX(0) translateY(-50%);
 }
 .pa-tooltip--primary::before {
@@ -7951,17 +8072,17 @@ a.pa-card p {
 .pa-tooltip--primary::after {
   border-top-color: var(--pa-btn-primary-bg);
 }
-.pa-tooltip--primary.pa-tooltip--right::after {
+.pa-tooltip--primary.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-btn-primary-bg);
+  border-inline-end-color: var(--pa-btn-primary-bg);
 }
 .pa-tooltip--primary.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-btn-primary-bg);
 }
-.pa-tooltip--primary.pa-tooltip--left::after {
+.pa-tooltip--primary.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-btn-primary-bg);
+  border-inline-start-color: var(--pa-btn-primary-bg);
 }
 .pa-tooltip--success::before {
   background-color: var(--pa-btn-success-bg);
@@ -7969,17 +8090,17 @@ a.pa-card p {
 .pa-tooltip--success::after {
   border-top-color: var(--pa-btn-success-bg);
 }
-.pa-tooltip--success.pa-tooltip--right::after {
+.pa-tooltip--success.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-btn-success-bg);
+  border-inline-end-color: var(--pa-btn-success-bg);
 }
 .pa-tooltip--success.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-btn-success-bg);
 }
-.pa-tooltip--success.pa-tooltip--left::after {
+.pa-tooltip--success.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-btn-success-bg);
+  border-inline-start-color: var(--pa-btn-success-bg);
 }
 .pa-tooltip--warning::before {
   background-color: var(--pa-btn-warning-bg);
@@ -7988,17 +8109,17 @@ a.pa-card p {
 .pa-tooltip--warning::after {
   border-top-color: var(--pa-btn-warning-bg);
 }
-.pa-tooltip--warning.pa-tooltip--right::after {
+.pa-tooltip--warning.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-btn-warning-bg);
+  border-inline-end-color: var(--pa-btn-warning-bg);
 }
 .pa-tooltip--warning.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-btn-warning-bg);
 }
-.pa-tooltip--warning.pa-tooltip--left::after {
+.pa-tooltip--warning.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-btn-warning-bg);
+  border-inline-start-color: var(--pa-btn-warning-bg);
 }
 .pa-tooltip--danger::before {
   background-color: var(--pa-btn-danger-bg);
@@ -8006,17 +8127,17 @@ a.pa-card p {
 .pa-tooltip--danger::after {
   border-top-color: var(--pa-btn-danger-bg);
 }
-.pa-tooltip--danger.pa-tooltip--right::after {
+.pa-tooltip--danger.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-btn-danger-bg);
+  border-inline-end-color: var(--pa-btn-danger-bg);
 }
 .pa-tooltip--danger.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-btn-danger-bg);
 }
-.pa-tooltip--danger.pa-tooltip--left::after {
+.pa-tooltip--danger.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-btn-danger-bg);
+  border-inline-start-color: var(--pa-btn-danger-bg);
 }
 .pa-tooltip--color-1::before {
   background-color: var(--pa-color-1);
@@ -8025,17 +8146,17 @@ a.pa-card p {
 .pa-tooltip--color-1::after {
   border-top-color: var(--pa-color-1);
 }
-.pa-tooltip--color-1.pa-tooltip--right::after {
+.pa-tooltip--color-1.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-1);
+  border-inline-end-color: var(--pa-color-1);
 }
 .pa-tooltip--color-1.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-1);
 }
-.pa-tooltip--color-1.pa-tooltip--left::after {
+.pa-tooltip--color-1.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-1);
+  border-inline-start-color: var(--pa-color-1);
 }
 .pa-tooltip--color-2::before {
   background-color: var(--pa-color-2);
@@ -8044,17 +8165,17 @@ a.pa-card p {
 .pa-tooltip--color-2::after {
   border-top-color: var(--pa-color-2);
 }
-.pa-tooltip--color-2.pa-tooltip--right::after {
+.pa-tooltip--color-2.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-2);
+  border-inline-end-color: var(--pa-color-2);
 }
 .pa-tooltip--color-2.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-2);
 }
-.pa-tooltip--color-2.pa-tooltip--left::after {
+.pa-tooltip--color-2.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-2);
+  border-inline-start-color: var(--pa-color-2);
 }
 .pa-tooltip--color-3::before {
   background-color: var(--pa-color-3);
@@ -8063,17 +8184,17 @@ a.pa-card p {
 .pa-tooltip--color-3::after {
   border-top-color: var(--pa-color-3);
 }
-.pa-tooltip--color-3.pa-tooltip--right::after {
+.pa-tooltip--color-3.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-3);
+  border-inline-end-color: var(--pa-color-3);
 }
 .pa-tooltip--color-3.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-3);
 }
-.pa-tooltip--color-3.pa-tooltip--left::after {
+.pa-tooltip--color-3.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-3);
+  border-inline-start-color: var(--pa-color-3);
 }
 .pa-tooltip--color-4::before {
   background-color: var(--pa-color-4);
@@ -8082,17 +8203,17 @@ a.pa-card p {
 .pa-tooltip--color-4::after {
   border-top-color: var(--pa-color-4);
 }
-.pa-tooltip--color-4.pa-tooltip--right::after {
+.pa-tooltip--color-4.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-4);
+  border-inline-end-color: var(--pa-color-4);
 }
 .pa-tooltip--color-4.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-4);
 }
-.pa-tooltip--color-4.pa-tooltip--left::after {
+.pa-tooltip--color-4.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-4);
+  border-inline-start-color: var(--pa-color-4);
 }
 .pa-tooltip--color-5::before {
   background-color: var(--pa-color-5);
@@ -8101,17 +8222,17 @@ a.pa-card p {
 .pa-tooltip--color-5::after {
   border-top-color: var(--pa-color-5);
 }
-.pa-tooltip--color-5.pa-tooltip--right::after {
+.pa-tooltip--color-5.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-5);
+  border-inline-end-color: var(--pa-color-5);
 }
 .pa-tooltip--color-5.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-5);
 }
-.pa-tooltip--color-5.pa-tooltip--left::after {
+.pa-tooltip--color-5.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-5);
+  border-inline-start-color: var(--pa-color-5);
 }
 .pa-tooltip--color-6::before {
   background-color: var(--pa-color-6);
@@ -8120,17 +8241,17 @@ a.pa-card p {
 .pa-tooltip--color-6::after {
   border-top-color: var(--pa-color-6);
 }
-.pa-tooltip--color-6.pa-tooltip--right::after {
+.pa-tooltip--color-6.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-6);
+  border-inline-end-color: var(--pa-color-6);
 }
 .pa-tooltip--color-6.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-6);
 }
-.pa-tooltip--color-6.pa-tooltip--left::after {
+.pa-tooltip--color-6.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-6);
+  border-inline-start-color: var(--pa-color-6);
 }
 .pa-tooltip--color-7::before {
   background-color: var(--pa-color-7);
@@ -8139,17 +8260,17 @@ a.pa-card p {
 .pa-tooltip--color-7::after {
   border-top-color: var(--pa-color-7);
 }
-.pa-tooltip--color-7.pa-tooltip--right::after {
+.pa-tooltip--color-7.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-7);
+  border-inline-end-color: var(--pa-color-7);
 }
 .pa-tooltip--color-7.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-7);
 }
-.pa-tooltip--color-7.pa-tooltip--left::after {
+.pa-tooltip--color-7.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-7);
+  border-inline-start-color: var(--pa-color-7);
 }
 .pa-tooltip--color-8::before {
   background-color: var(--pa-color-8);
@@ -8158,17 +8279,17 @@ a.pa-card p {
 .pa-tooltip--color-8::after {
   border-top-color: var(--pa-color-8);
 }
-.pa-tooltip--color-8.pa-tooltip--right::after {
+.pa-tooltip--color-8.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-8);
+  border-inline-end-color: var(--pa-color-8);
 }
 .pa-tooltip--color-8.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-8);
 }
-.pa-tooltip--color-8.pa-tooltip--left::after {
+.pa-tooltip--color-8.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-8);
+  border-inline-start-color: var(--pa-color-8);
 }
 .pa-tooltip--color-9::before {
   background-color: var(--pa-color-9);
@@ -8177,17 +8298,17 @@ a.pa-card p {
 .pa-tooltip--color-9::after {
   border-top-color: var(--pa-color-9);
 }
-.pa-tooltip--color-9.pa-tooltip--right::after {
+.pa-tooltip--color-9.pa-tooltip--end::after {
   border-top-color: transparent;
-  border-right-color: var(--pa-color-9);
+  border-inline-end-color: var(--pa-color-9);
 }
 .pa-tooltip--color-9.pa-tooltip--bottom::after {
   border-top-color: transparent;
   border-bottom-color: var(--pa-color-9);
 }
-.pa-tooltip--color-9.pa-tooltip--left::after {
+.pa-tooltip--color-9.pa-tooltip--start::after {
   border-top-color: transparent;
-  border-left-color: var(--pa-color-9);
+  border-inline-start-color: var(--pa-color-9);
 }
 .pa-tooltip--auto-flip-bottom::before {
   bottom: auto !important;
@@ -8219,34 +8340,50 @@ a.pa-card p {
 .pa-tooltip--auto-flip-top:hover::before, .pa-tooltip--auto-flip-top:hover::after {
   transform: translateX(-50%) translateY(0) !important;
 }
-.pa-tooltip--auto-flip-right::before {
-  left: calc(100% + 8px) !important;
+.pa-tooltip--auto-flip-end::before {
+  left: auto !important;
   right: auto !important;
+  inset-inline-start: calc(100% + 8px) !important;
   transform: translateX(-4px) translateY(-50%) !important;
 }
-.pa-tooltip--auto-flip-right::after {
-  left: calc(100% + 3px) !important;
+.pa-tooltip--auto-flip-end::after {
+  left: auto !important;
   right: auto !important;
+  inset-inline-start: calc(100% + 3px) !important;
   transform: translateX(-4px) translateY(-50%) !important;
-  border-left-color: transparent !important;
-  border-right-color: var(--pa-tooltip-bg) !important;
+  border-inline-start-color: transparent !important;
+  border-inline-end-color: var(--pa-tooltip-bg) !important;
 }
-.pa-tooltip--auto-flip-right:hover::before, .pa-tooltip--auto-flip-right:hover::after {
+.pa-tooltip--auto-flip-end:hover::before, .pa-tooltip--auto-flip-end:hover::after {
   transform: translateX(0) translateY(-50%) !important;
 }
-.pa-tooltip--auto-flip-left::before {
-  right: calc(100% + 8px) !important;
+[dir=rtl] .pa-tooltip--auto-flip-end::before, [dir=rtl] .pa-tooltip--auto-flip-end::after {
+  transform: translateX(4px) translateY(-50%) !important;
+}
+[dir=rtl] .pa-tooltip--auto-flip-end:hover::before, [dir=rtl] .pa-tooltip--auto-flip-end:hover::after {
+  transform: translateX(0) translateY(-50%) !important;
+}
+.pa-tooltip--auto-flip-start::before {
   left: auto !important;
+  right: auto !important;
+  inset-inline-end: calc(100% + 8px) !important;
   transform: translateX(4px) translateY(-50%) !important;
 }
-.pa-tooltip--auto-flip-left::after {
-  right: calc(100% + 3px) !important;
+.pa-tooltip--auto-flip-start::after {
   left: auto !important;
+  right: auto !important;
+  inset-inline-end: calc(100% + 3px) !important;
   transform: translateX(4px) translateY(-50%) !important;
-  border-right-color: transparent !important;
-  border-left-color: var(--pa-tooltip-bg) !important;
+  border-inline-end-color: transparent !important;
+  border-inline-start-color: var(--pa-tooltip-bg) !important;
 }
-.pa-tooltip--auto-flip-left:hover::before, .pa-tooltip--auto-flip-left:hover::after {
+.pa-tooltip--auto-flip-start:hover::before, .pa-tooltip--auto-flip-start:hover::after {
+  transform: translateX(0) translateY(-50%) !important;
+}
+[dir=rtl] .pa-tooltip--auto-flip-start::before, [dir=rtl] .pa-tooltip--auto-flip-start::after {
+  transform: translateX(-4px) translateY(-50%) !important;
+}
+[dir=rtl] .pa-tooltip--auto-flip-start:hover::before, [dir=rtl] .pa-tooltip--auto-flip-start:hover::after {
   transform: translateX(0) translateY(-50%) !important;
 }
 
@@ -11347,6 +11484,64 @@ web-multiselect {
     background-color: transparent;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
+  .pa-table--responsive-grid tbody tr:hover td {
+    background-color: transparent;
+  }
+}
+
+/* ========================================
+   Filter Card
+   Expandable filter card with inline filters and collapsible advanced section
+   Based on table-filters pattern from pure-admin demos
+   ======================================== */
+.pa-filter-card__row {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.pa-filter-card__filters {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+.pa-filter-card__filters > * {
+  flex: 1;
+  min-width: 200px;
+}
+
+.pa-filter-card__actions {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pa-filter-card__advanced {
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid var(--pa-border-color);
+}
+
+.pa-filter-card__advanced-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.8rem;
+  margin-top: 1.2rem;
+}
+
+.pa-filter-card--loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.pa-filter-card--disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
 /* ========================================
@@ -12869,8 +13064,8 @@ code {
   font-size: 1.2rem;
   color: var(--pa-text-color-2);
   font-weight: 500;
-  text-align: right;
-  padding-right: 0.8rem;
+  text-align: end;
+  padding-inline-end: 0.8rem;
   padding-top: 6px;
 }
 .pa-timeline__scroll-container {
@@ -14754,6 +14949,12 @@ code {
   text-align: center;
   justify-content: center;
 }
+.pa-desc-table--value-end .pa-desc-table__value {
+  text-align: end;
+}
+.pa-desc-table--value-center .pa-desc-table__value {
+  text-align: center;
+}
 .pa-desc-table--truncate .pa-desc-table__label, .pa-desc-table--truncate .pa-desc-table__value {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -14770,6 +14971,21 @@ code {
     grid-column: 2;
   }
 }
+@container (max-width: 300px) {
+  .pa-desc-table, .pa-desc-table--cols-2, .pa-desc-table--fixed, .pa-desc-table--fixed.pa-desc-table--cols-2 {
+    grid-template-columns: 1fr;
+  }
+  .pa-desc-table .pa-desc-table__label {
+    border-inline-end: none;
+    border-bottom: none;
+  }
+  .pa-desc-table .pa-desc-table__value {
+    border-inline-end: none;
+  }
+  .pa-desc-table .pa-desc-table__value--full {
+    grid-column: 1;
+  }
+}
 @media (max-width: 768px) {
   .pa-desc-table, .pa-desc-table--cols-2 {
     grid-template-columns: auto 1fr;
@@ -15014,9 +15230,19 @@ code {
 }
 .pa-banded--label-end .pa-banded__label {
   justify-content: flex-end;
+  text-align: end;
 }
 .pa-banded--label-center .pa-banded__label {
   justify-content: center;
+  text-align: center;
+}
+.pa-banded--value-end .pa-banded__value {
+  justify-content: flex-end;
+  text-align: end;
+}
+.pa-banded--value-center .pa-banded__value {
+  justify-content: center;
+  text-align: center;
 }
 .pa-banded--truncate .pa-banded__label, .pa-banded--truncate .pa-banded__value {
   overflow: hidden;