@keenmate/pure-admin-theme-corporate 1.1.1 → 1.2.0

package/dist/corporate.css

@@ -1531,176 +1531,246 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   .pa-col-sm-5 {
     flex: 0 0 5%;
     max-width: 5%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-10 {
     flex: 0 0 10%;
     max-width: 10%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-15 {
     flex: 0 0 15%;
     max-width: 15%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-20 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-25 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-30 {
     flex: 0 0 30%;
     max-width: 30%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-35 {
     flex: 0 0 35%;
     max-width: 35%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-40 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-45 {
     flex: 0 0 45%;
     max-width: 45%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-50 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-55 {
     flex: 0 0 55%;
     max-width: 55%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-60 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-65 {
     flex: 0 0 65%;
     max-width: 65%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-70 {
     flex: 0 0 70%;
     max-width: 70%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-75 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-80 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-85 {
     flex: 0 0 85%;
     max-width: 85%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-90 {
     flex: 0 0 90%;
     max-width: 90%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-95 {
     flex: 0 0 95%;
     max-width: 95%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-100 {
     flex: 0 0 100%;
     max-width: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-sm-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-offset-sm-5 {
@@ -1769,176 +1839,246 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   .pa-col-md-5 {
     flex: 0 0 5%;
     max-width: 5%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-10 {
     flex: 0 0 10%;
     max-width: 10%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-15 {
     flex: 0 0 15%;
     max-width: 15%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-20 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-25 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-30 {
     flex: 0 0 30%;
     max-width: 30%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-35 {
     flex: 0 0 35%;
     max-width: 35%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-40 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-45 {
     flex: 0 0 45%;
     max-width: 45%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-50 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-55 {
     flex: 0 0 55%;
     max-width: 55%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-60 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-65 {
     flex: 0 0 65%;
     max-width: 65%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-70 {
     flex: 0 0 70%;
     max-width: 70%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-75 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-80 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-85 {
     flex: 0 0 85%;
     max-width: 85%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-90 {
     flex: 0 0 90%;
     max-width: 90%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-95 {
     flex: 0 0 95%;
     max-width: 95%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-100 {
     flex: 0 0 100%;
     max-width: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-md-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-offset-md-5 {
@@ -2007,176 +2147,246 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   .pa-col-lg-5 {
     flex: 0 0 5%;
     max-width: 5%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-10 {
     flex: 0 0 10%;
     max-width: 10%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-15 {
     flex: 0 0 15%;
     max-width: 15%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-20 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-25 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-30 {
     flex: 0 0 30%;
     max-width: 30%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-35 {
     flex: 0 0 35%;
     max-width: 35%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-40 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-45 {
     flex: 0 0 45%;
     max-width: 45%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-50 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-55 {
     flex: 0 0 55%;
     max-width: 55%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-60 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-65 {
     flex: 0 0 65%;
     max-width: 65%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-70 {
     flex: 0 0 70%;
     max-width: 70%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-75 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-80 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-85 {
     flex: 0 0 85%;
     max-width: 85%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-90 {
     flex: 0 0 90%;
     max-width: 90%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-95 {
     flex: 0 0 95%;
     max-width: 95%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-100 {
     flex: 0 0 100%;
     max-width: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-lg-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-offset-lg-5 {
@@ -2245,176 +2455,246 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   .pa-col-xl-5 {
     flex: 0 0 5%;
     max-width: 5%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-10 {
     flex: 0 0 10%;
     max-width: 10%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-15 {
     flex: 0 0 15%;
     max-width: 15%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-20 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-25 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-30 {
     flex: 0 0 30%;
     max-width: 30%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-35 {
     flex: 0 0 35%;
     max-width: 35%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-40 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-45 {
     flex: 0 0 45%;
     max-width: 45%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-50 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-55 {
     flex: 0 0 55%;
     max-width: 55%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-60 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-65 {
     flex: 0 0 65%;
     max-width: 65%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-70 {
     flex: 0 0 70%;
     max-width: 70%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-75 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-80 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-85 {
     flex: 0 0 85%;
     max-width: 85%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-90 {
     flex: 0 0 90%;
     max-width: 90%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-95 {
     flex: 0 0 95%;
     max-width: 95%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-100 {
     flex: 0 0 100%;
     max-width: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-col-xl-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     min-width: 0;
   }
   .pa-offset-xl-5 {
@@ -2912,6 +3192,168 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 2.4rem 1.6rem;
 }
 
+.pa-card--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-card--color-1 .pa-card__header {
+  background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+
+.pa-card--color-1 .pa-card__header h1,
+.pa-card--color-1 .pa-card__header h2,
+.pa-card--color-1 .pa-card__header h3,
+.pa-card--color-1 .pa-card__header h4,
+.pa-card--color-1 .pa-card__header h5,
+.pa-card--color-1 .pa-card__header h6 {
+  color: var(--pa-color-1-text);
+}
+
+.pa-card--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-card--color-2 .pa-card__header {
+  background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+
+.pa-card--color-2 .pa-card__header h1,
+.pa-card--color-2 .pa-card__header h2,
+.pa-card--color-2 .pa-card__header h3,
+.pa-card--color-2 .pa-card__header h4,
+.pa-card--color-2 .pa-card__header h5,
+.pa-card--color-2 .pa-card__header h6 {
+  color: var(--pa-color-2-text);
+}
+
+.pa-card--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-card--color-3 .pa-card__header {
+  background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+
+.pa-card--color-3 .pa-card__header h1,
+.pa-card--color-3 .pa-card__header h2,
+.pa-card--color-3 .pa-card__header h3,
+.pa-card--color-3 .pa-card__header h4,
+.pa-card--color-3 .pa-card__header h5,
+.pa-card--color-3 .pa-card__header h6 {
+  color: var(--pa-color-3-text);
+}
+
+.pa-card--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-card--color-4 .pa-card__header {
+  background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+
+.pa-card--color-4 .pa-card__header h1,
+.pa-card--color-4 .pa-card__header h2,
+.pa-card--color-4 .pa-card__header h3,
+.pa-card--color-4 .pa-card__header h4,
+.pa-card--color-4 .pa-card__header h5,
+.pa-card--color-4 .pa-card__header h6 {
+  color: var(--pa-color-4-text);
+}
+
+.pa-card--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-card--color-5 .pa-card__header {
+  background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+
+.pa-card--color-5 .pa-card__header h1,
+.pa-card--color-5 .pa-card__header h2,
+.pa-card--color-5 .pa-card__header h3,
+.pa-card--color-5 .pa-card__header h4,
+.pa-card--color-5 .pa-card__header h5,
+.pa-card--color-5 .pa-card__header h6 {
+  color: var(--pa-color-5-text);
+}
+
+.pa-card--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-card--color-6 .pa-card__header {
+  background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+
+.pa-card--color-6 .pa-card__header h1,
+.pa-card--color-6 .pa-card__header h2,
+.pa-card--color-6 .pa-card__header h3,
+.pa-card--color-6 .pa-card__header h4,
+.pa-card--color-6 .pa-card__header h5,
+.pa-card--color-6 .pa-card__header h6 {
+  color: var(--pa-color-6-text);
+}
+
+.pa-card--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-card--color-7 .pa-card__header {
+  background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+
+.pa-card--color-7 .pa-card__header h1,
+.pa-card--color-7 .pa-card__header h2,
+.pa-card--color-7 .pa-card__header h3,
+.pa-card--color-7 .pa-card__header h4,
+.pa-card--color-7 .pa-card__header h5,
+.pa-card--color-7 .pa-card__header h6 {
+  color: var(--pa-color-7-text);
+}
+
+.pa-card--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-card--color-8 .pa-card__header {
+  background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+
+.pa-card--color-8 .pa-card__header h1,
+.pa-card--color-8 .pa-card__header h2,
+.pa-card--color-8 .pa-card__header h3,
+.pa-card--color-8 .pa-card__header h4,
+.pa-card--color-8 .pa-card__header h5,
+.pa-card--color-8 .pa-card__header h6 {
+  color: var(--pa-color-8-text);
+}
+
+.pa-card--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-card--color-9 .pa-card__header {
+  background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+
+.pa-card--color-9 .pa-card__header h1,
+.pa-card--color-9 .pa-card__header h2,
+.pa-card--color-9 .pa-card__header h3,
+.pa-card--color-9 .pa-card__header h4,
+.pa-card--color-9 .pa-card__header h5,
+.pa-card--color-9 .pa-card__header h6 {
+  color: var(--pa-color-9-text);
+}
+
 .pa-card__tabs {
   display: flex;
   border-bottom: 1px solid var(--pa-border-color);
@@ -5535,6 +5977,7 @@ a.pa-card p {
 
 .pa-tooltip--color-1::before {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 
 .pa-tooltip--color-1::after {
@@ -5558,6 +6001,7 @@ a.pa-card p {
 
 .pa-tooltip--color-2::before {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 
 .pa-tooltip--color-2::after {
@@ -5581,6 +6025,7 @@ a.pa-card p {
 
 .pa-tooltip--color-3::before {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 
 .pa-tooltip--color-3::after {
@@ -5604,6 +6049,7 @@ a.pa-card p {
 
 .pa-tooltip--color-4::before {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 
 .pa-tooltip--color-4::after {
@@ -5627,6 +6073,7 @@ a.pa-card p {
 
 .pa-tooltip--color-5::before {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 
 .pa-tooltip--color-5::after {
@@ -5650,6 +6097,7 @@ a.pa-card p {
 
 .pa-tooltip--color-6::before {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 
 .pa-tooltip--color-6::after {
@@ -5673,6 +6121,7 @@ a.pa-card p {
 
 .pa-tooltip--color-7::before {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 
 .pa-tooltip--color-7::after {
@@ -5696,6 +6145,7 @@ a.pa-card p {
 
 .pa-tooltip--color-8::before {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 
 .pa-tooltip--color-8::after {
@@ -5719,6 +6169,7 @@ a.pa-card p {
 
 .pa-tooltip--color-9::before {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 
 .pa-tooltip--color-9::after {
@@ -5992,38 +6443,47 @@ a.pa-card p {
 
 .pa-tooltip-floating.pa-tooltip--color-1 {
   background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-2 {
   background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-3 {
   background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-4 {
   background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-5 {
   background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-6 {
   background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-7 {
   background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-8 {
   background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
 }
 
 .pa-tooltip-floating.pa-tooltip--color-9 {
   background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
 }
 
 /* ========================================
@@ -6832,6 +7292,7 @@ a.pa-card p {
 .pa-input-group__prepend {
   background-color: var(--pa-input-group-prepend-bg);
   color: var(--pa-input-group-prepend-text);
+  border-color: var(--pa-input-group-prepend-bg);
   border-right: none;
 }
 
@@ -6843,6 +7304,7 @@ a.pa-card p {
 .pa-input-group__append {
   background-color: var(--pa-input-group-append-bg);
   color: var(--pa-input-group-append-text);
+  border-color: var(--pa-input-group-append-bg);
   border-left: none;
 }
 
@@ -6852,11 +7314,11 @@ a.pa-card p {
 }
 
 .pa-input-group__prepend + .pa-input-group__prepend {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-prepend-bg);
 }
 
 .pa-input-group__append + .pa-input-group__append {
-  border-left: 1px solid var(--pa-border-color);
+  border-left: 1px solid var(--pa-input-group-append-bg);
 }
 
 .pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
@@ -7496,235 +7958,21 @@ input:indeterminate + .pa-checkbox__box::after {
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
  * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-/*
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
  */
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-  /* Colors */
-  --drp-accent-color: #007bff;
-  --drp-primary-bg: #007bff;
-  --drp-primary-bg-hover: rgb(51, 149.4, 255);
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #e1e5e9;
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #f8f9fa;
-  /* Spacing */
-  --drp-spacing-xs: 0.4rem;
-  --drp-spacing-sm: 0.8rem;
-  --drp-spacing-md: 1.2rem;
-  --drp-spacing-base: 1.6rem;
-  --drp-spacing-lg: 2.4rem;
-  --drp-spacing-xl: 3.2rem;
-  /* Typography */
-  --drp-font-size-xs: 1.2rem;
-  --drp-font-size-sm: 1.4rem;
-  --drp-font-size-base: 1.6rem;
-  --drp-font-size-lg: 1.8rem;
-  --drp-font-weight-normal: 400;
-  --drp-font-weight-medium: 500;
-  --drp-font-weight-semibold: 600;
-  /* Animations */
-  --drp-transition-fast: 0.1s;
-  --drp-transition-normal: 0.15s;
-  --drp-easing-snappy: ease-out;
-  --drp-easing-smooth: ease;
-  /* Shadows */
-  --drp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --drp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --drp-shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12);
-  /* Border radius */
-  --drp-border-radius: 4px;
-  --drp-border-radius-sm: 2px;
-  --drp-border-radius-lg: 8px;
-  /* Border width */
-  --drp-border-width-base: 1px;
-  --drp-border-width-medium: 2px;
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-color-1);
-  --drp-input-border-color: #ced4da;
-  --drp-input-border-color-hover: #007bff;
-  --drp-input-border-color-focus: #007bff;
-  --drp-input-placeholder-color: var(--pa-text-color-2);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-color-2);
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
-  --drp-input-focus-shadow-size: 3px;
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-color-2);
-  --drp-input-icon-opacity: 1;
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: 1.2rem;
-  --drp-input-size-xs-padding-v: 0.8rem;
-  --drp-input-size-xs-padding-h: 0.8rem;
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: 1.2rem;
-  --drp-input-size-sm-padding-v: 0.8rem;
-  --drp-input-size-sm-padding-h: 0.8rem;
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: 1.4rem;
-  --drp-input-size-md-padding-v: 0.8rem;
-  --drp-input-size-md-padding-h: 0.8rem;
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: 1.6rem;
-  --drp-input-size-lg-padding-v: 0.8rem;
-  --drp-input-size-lg-padding-h: 0.8rem;
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: 1.8rem;
-  --drp-input-size-xl-padding-v: 0.8rem;
-  --drp-input-size-xl-padding-h: 0.8rem;
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-  /* ===== CALENDAR CONTAINER ===== */
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #e1e5e9;
-  --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
-  --drp-calendar-border-radius: 4px;
-  --drp-calendar-padding: 1.6rem;
-  --drp-calendar-z-index: 1000;
-  /* ===== HEADER ===== */
-  --drp-header-padding: 0.8rem 1.2rem;
-  --drp-header-font-size: 1.6rem;
-  --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
-  /* ===== NAVIGATION ===== */
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #e1e5e9;
-  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
-  --drp-nav-border-hover: #007bff;
-  /* ===== WEEKDAY HEADER ===== */
-  --drp-weekday-font-size: 1.2rem;
-  --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: 0.4rem;
-  /* ===== CALENDAR GRID ===== */
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: 1.4rem;
-  --drp-day-border-radius: 2px;
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-day-border-hover: transparent;
-  /* Today indicator */
-  --drp-day-today-border: #007bff;
-  /* Selected state */
-  --drp-day-selected-bg: #007bff;
-  --drp-day-selected-color: #ffffff;
-  /* Range state */
-  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
-  --drp-day-range-text: var(--pa-text-color-1);
-  /* Focused state */
-  --drp-day-focused-outline: #007bff;
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: 0.65;
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: 0.5;
-  /* ===== BADGES ===== */
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #007bff;
-  --drp-badge-success: #28a745;
-  --drp-badge-warning: #ffc107;
-  --drp-badge-danger: #dc3545;
-  --drp-badge-info: #17a2b8;
-  /* Number badges */
-  --drp-badge-number-bg: #dc3545;
-  --drp-badge-number-color: #ffffff;
-  /* Count badges */
-  --drp-badge-count-bg: #007bff;
-  --drp-badge-count-color: #ffffff;
-  /* Text badges */
-  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
-  --drp-badge-text-color: var(--pa-text-color-1);
-  /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #f8f9fa;
-  --drp-summary-border-color: #e1e5e9;
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #007bff;
-  --drp-summary-padding: 0.8rem 1.2rem;
-  --drp-summary-font-size: 1.4rem;
-  --drp-summary-font-weight: 500;
-  /* ===== BUTTONS ===== */
-  /* Today button */
-  --drp-button-today-bg: #6c757d;
-  --drp-button-today-bg-hover: #545b62;
-  --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #e1e5e9;
-  /* Clear button */
-  --drp-button-clear-bg: #6c757d;
-  --drp-button-clear-bg-hover: #545b62;
-  --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #e1e5e9;
-  /* Cancel button */
-  --drp-button-cancel-bg: #6c757d;
-  --drp-button-cancel-bg-hover: #545b62;
-  --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #e1e5e9;
-  /* Apply button */
-  --drp-button-apply-bg: #007bff;
-  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
-  --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #007bff;
-  /* Button sizing */
-  --drp-button-padding: 0.8rem 1rem;
-  --drp-button-font-size: 1.4rem;
-  --drp-button-border-radius: 4px;
-  --drp-button-gap: 0.8rem;
-  /* ===== UNIFIED NAVIGATION ===== */
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-color-1);
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
-  /* ===== ROLLING SELECTOR ===== */
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #e1e5e9;
-  --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
-  --drp-rolling-item-selected-bg: #007bff;
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-color-1);
-  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
-  /* ===== LOADING OVERLAY ===== */
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #007bff;
-  --drp-loading-spinner-size: 1.6rem;
-  /* ===== MULTIPLE MONTHS ===== */
-  --drp-months-gap: 2.4rem;
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }
 
 .pa-file-input {
@@ -8719,158 +8967,516 @@ web-daterangepicker {
   background-color: var(--pa-table-bg);
 }
 
-.pa-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 1.4rem;
-  background-color: var(--pa-table-bg);
+.pa-table-container--panel {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  margin-bottom: 1.6rem;
+  transition: box-shadow 0.1s ease-out;
 }
 
-.pa-table th,
-.pa-table td {
-  padding: 0.8rem 0.8rem;
-  text-align: left;
+.pa-table-container--panel:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.pa-table-container__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  min-height: 4rem;
   border-bottom: 1px solid var(--pa-border-color);
-  vertical-align: middle;
-  line-height: 1.2;
+  background: var(--pa-card-header-bg);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
-.pa-table th {
-  background-color: var(--pa-table-header-bg);
+.pa-table-container__title {
+  font-size: 1.6rem;
   font-weight: 600;
+  margin: 0;
   color: var(--pa-text-color-1);
-  border-bottom: 2px solid var(--pa-border-color);
 }
 
-.pa-table td {
-  color: var(--pa-text-color-1);
-  background-color: var(--pa-table-bg);
-  height: 3.5rem0.8rem;
+.pa-table-container__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
 }
 
-.pa-table td .pa-btn {
+.pa-table-container__actions .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
 }
 
-.pa-table:not(.pa-table--responsive) tbody tr:last-child td {
-  border-bottom: none;
+.pa-table-card {
+  background: var(--pa-card-bg);
+  border: 1px solid var(--pa-border-color);
+  border-radius: 8px;
+  margin-bottom: 1.6rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.1s ease-out;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.pa-table--striped tbody tr:nth-child(even) td {
-  background-color: var(--pa-table-stripe);
+.pa-table-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.pa-table--xs th, .pa-table--xs td {
-  padding: 0.6rem 0.8rem;
+.pa-table-card__header {
+  padding: 0.5rem 1rem;
+  min-height: 4rem;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom: 1px solid var(--pa-border-color);
+  background: var(--pa-card-header-bg);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
 }
 
-.pa-table--xs td {
-  height: 3.1rem0.7rem;
+.pa-table-card__header h1, .pa-table-card__header h2, .pa-table-card__header h3, .pa-table-card__header h4, .pa-table-card__header h5, .pa-table-card__header h6, .pa-table-card__header p {
+  margin: 0;
+  padding: 0;
 }
 
-.pa-table--sm th, .pa-table--sm td {
-  padding: 0.8rem 1rem;
+.pa-table-card__header h1, .pa-table-card__header h2, .pa-table-card__header h3, .pa-table-card__header h4, .pa-table-card__header h5, .pa-table-card__header h6 {
+  color: var(--pa-text-color-1);
+  font-size: 1.6rem;
+  font-weight: 600;
 }
 
-.pa-table--sm td {
-  height: 3.3rem0.8rem;
+.pa-table-card__header .pa-btn {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
 }
 
-.pa-table--lg th, .pa-table--lg td {
-  padding: 0.8rem 1.4rem;
+.pa-table-card__title {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+  flex: 1;
 }
 
-.pa-table--lg td {
-  height: 3.8rem0.8rem;
+.pa-table-card__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  color: var(--pa-text-color-1);
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
-.pa-table--xl th, .pa-table--xl td {
-  padding: 0.8rem 1.6rem;
+.pa-table-card__actions {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
 }
 
-.pa-table--xl td {
-  height: 4.1rem0.8rem;
+.pa-table-card__body {
+  flex: 1;
+  min-width: 0;
 }
 
-.pa-table tbody tr:hover {
-  background-color: var(--pa-table-hover-bg);
+.pa-table-card__body--scrollable {
+  overflow-x: auto;
 }
 
-.pa-table tbody tr:hover td {
-  background-color: var(--pa-table-hover-bg);
+.pa-table-card__body .pa-table {
+  border-radius: 0;
 }
 
-.pa-table td .pa-btn-group {
-  margin-bottom: 0;
-  flex-wrap: nowrap;
+.pa-table-card__body .pa-table th:first-child,
+.pa-table-card__body .pa-table td:first-child {
+  padding-left: 1rem;
 }
 
-.pa-table .col-auto {
-  width: 1%;
-  white-space: nowrap;
+.pa-table-card__body .pa-table th:last-child,
+.pa-table-card__body .pa-table td:last-child {
+  padding-right: 1rem;
 }
 
-.pa-pager {
-  display: flex;
-  margin: 1.6rem 0;
+.pa-table-card__body .pa-table tbody tr:last-child td {
+  border-bottom: none;
 }
 
-.pa-card__body .pa-pager:first-child {
-  margin-top: 0;
+.pa-table-card__footer {
+  padding: 1.2rem 1rem;
+  border-top: 1px solid var(--pa-border-color);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: var(--pa-card-footer-bg);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.pa-card__body .pa-pager:last-child {
-  margin-bottom: 0;
+.pa-table-card--primary {
+  border-color: var(--pa-accent);
 }
 
-.pa-pager {
-  justify-content: center;
+.pa-table-card--primary .pa-table-card__header {
+  background-color: var(--pa-accent);
+  color: var(--pa-btn-primary-text);
 }
 
-.pa-pager--left {
-  justify-content: flex-start;
+.pa-table-card--primary .pa-table-card__header h1, .pa-table-card--primary .pa-table-card__header h2, .pa-table-card--primary .pa-table-card__header h3, .pa-table-card--primary .pa-table-card__header h4, .pa-table-card--primary .pa-table-card__header h5, .pa-table-card--primary .pa-table-card__header h6 {
+  color: var(--pa-btn-primary-text);
 }
 
-.pa-pager--center {
-  justify-content: center;
+.pa-table-card--success {
+  border-color: var(--pa-success-bg);
 }
 
-.pa-pager--right {
-  justify-content: flex-end;
+.pa-table-card--success .pa-table-card__header {
+  background-color: var(--pa-success-bg);
+  color: var(--pa-btn-success-text);
 }
 
-.pa-pager__container {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  white-space: nowrap;
+.pa-table-card--success .pa-table-card__header h1, .pa-table-card--success .pa-table-card__header h2, .pa-table-card--success .pa-table-card__header h3, .pa-table-card--success .pa-table-card__header h4, .pa-table-card--success .pa-table-card__header h5, .pa-table-card--success .pa-table-card__header h6 {
+  color: var(--pa-btn-success-text);
 }
 
-.pa-pager__controls {
-  display: flex;
-  gap: 0.4rem;
+.pa-table-card--warning {
+  border-color: var(--pa-warning-bg);
 }
 
-.pa-pager__info {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
+.pa-table-card--warning .pa-table-card__header {
+  background-color: var(--pa-warning-bg);
+  color: var(--pa-btn-warning-text);
 }
 
-.pa-pager__input {
-  width: 6.4rem !important;
-  text-align: center;
+.pa-table-card--warning .pa-table-card__header h1, .pa-table-card--warning .pa-table-card__header h2, .pa-table-card--warning .pa-table-card__header h3, .pa-table-card--warning .pa-table-card__header h4, .pa-table-card--warning .pa-table-card__header h5, .pa-table-card--warning .pa-table-card__header h6 {
+  color: var(--pa-btn-warning-text);
 }
 
-.pa-pager__text {
-  color: var(--pa-text-color-2);
-  font-size: 1.4rem;
+.pa-table-card--danger {
+  border-color: var(--pa-danger-bg);
 }
 
-.pa-load-more {
-  display: flex;
-  margin: 1.6rem 0;
+.pa-table-card--danger .pa-table-card__header {
+  background-color: var(--pa-danger-bg);
+  color: var(--pa-btn-danger-text);
+}
+
+.pa-table-card--danger .pa-table-card__header h1, .pa-table-card--danger .pa-table-card__header h2, .pa-table-card--danger .pa-table-card__header h3, .pa-table-card--danger .pa-table-card__header h4, .pa-table-card--danger .pa-table-card__header h5, .pa-table-card--danger .pa-table-card__header h6 {
+  color: var(--pa-btn-danger-text);
+}
+
+.pa-table-card--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-table-card--color-1 .pa-table-card__header {
+  background-color: var(--pa-color-1);
+  color: var(--pa-color-1-text);
+}
+
+.pa-table-card--color-1 .pa-table-card__header h1, .pa-table-card--color-1 .pa-table-card__header h2, .pa-table-card--color-1 .pa-table-card__header h3, .pa-table-card--color-1 .pa-table-card__header h4, .pa-table-card--color-1 .pa-table-card__header h5, .pa-table-card--color-1 .pa-table-card__header h6 {
+  color: var(--pa-color-1-text);
+}
+
+.pa-table-card--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-table-card--color-2 .pa-table-card__header {
+  background-color: var(--pa-color-2);
+  color: var(--pa-color-2-text);
+}
+
+.pa-table-card--color-2 .pa-table-card__header h1, .pa-table-card--color-2 .pa-table-card__header h2, .pa-table-card--color-2 .pa-table-card__header h3, .pa-table-card--color-2 .pa-table-card__header h4, .pa-table-card--color-2 .pa-table-card__header h5, .pa-table-card--color-2 .pa-table-card__header h6 {
+  color: var(--pa-color-2-text);
+}
+
+.pa-table-card--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-table-card--color-3 .pa-table-card__header {
+  background-color: var(--pa-color-3);
+  color: var(--pa-color-3-text);
+}
+
+.pa-table-card--color-3 .pa-table-card__header h1, .pa-table-card--color-3 .pa-table-card__header h2, .pa-table-card--color-3 .pa-table-card__header h3, .pa-table-card--color-3 .pa-table-card__header h4, .pa-table-card--color-3 .pa-table-card__header h5, .pa-table-card--color-3 .pa-table-card__header h6 {
+  color: var(--pa-color-3-text);
+}
+
+.pa-table-card--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-table-card--color-4 .pa-table-card__header {
+  background-color: var(--pa-color-4);
+  color: var(--pa-color-4-text);
+}
+
+.pa-table-card--color-4 .pa-table-card__header h1, .pa-table-card--color-4 .pa-table-card__header h2, .pa-table-card--color-4 .pa-table-card__header h3, .pa-table-card--color-4 .pa-table-card__header h4, .pa-table-card--color-4 .pa-table-card__header h5, .pa-table-card--color-4 .pa-table-card__header h6 {
+  color: var(--pa-color-4-text);
+}
+
+.pa-table-card--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-table-card--color-5 .pa-table-card__header {
+  background-color: var(--pa-color-5);
+  color: var(--pa-color-5-text);
+}
+
+.pa-table-card--color-5 .pa-table-card__header h1, .pa-table-card--color-5 .pa-table-card__header h2, .pa-table-card--color-5 .pa-table-card__header h3, .pa-table-card--color-5 .pa-table-card__header h4, .pa-table-card--color-5 .pa-table-card__header h5, .pa-table-card--color-5 .pa-table-card__header h6 {
+  color: var(--pa-color-5-text);
+}
+
+.pa-table-card--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-table-card--color-6 .pa-table-card__header {
+  background-color: var(--pa-color-6);
+  color: var(--pa-color-6-text);
+}
+
+.pa-table-card--color-6 .pa-table-card__header h1, .pa-table-card--color-6 .pa-table-card__header h2, .pa-table-card--color-6 .pa-table-card__header h3, .pa-table-card--color-6 .pa-table-card__header h4, .pa-table-card--color-6 .pa-table-card__header h5, .pa-table-card--color-6 .pa-table-card__header h6 {
+  color: var(--pa-color-6-text);
+}
+
+.pa-table-card--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-table-card--color-7 .pa-table-card__header {
+  background-color: var(--pa-color-7);
+  color: var(--pa-color-7-text);
+}
+
+.pa-table-card--color-7 .pa-table-card__header h1, .pa-table-card--color-7 .pa-table-card__header h2, .pa-table-card--color-7 .pa-table-card__header h3, .pa-table-card--color-7 .pa-table-card__header h4, .pa-table-card--color-7 .pa-table-card__header h5, .pa-table-card--color-7 .pa-table-card__header h6 {
+  color: var(--pa-color-7-text);
+}
+
+.pa-table-card--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-table-card--color-8 .pa-table-card__header {
+  background-color: var(--pa-color-8);
+  color: var(--pa-color-8-text);
+}
+
+.pa-table-card--color-8 .pa-table-card__header h1, .pa-table-card--color-8 .pa-table-card__header h2, .pa-table-card--color-8 .pa-table-card__header h3, .pa-table-card--color-8 .pa-table-card__header h4, .pa-table-card--color-8 .pa-table-card__header h5, .pa-table-card--color-8 .pa-table-card__header h6 {
+  color: var(--pa-color-8-text);
+}
+
+.pa-table-card--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-table-card--color-9 .pa-table-card__header {
+  background-color: var(--pa-color-9);
+  color: var(--pa-color-9-text);
+}
+
+.pa-table-card--color-9 .pa-table-card__header h1, .pa-table-card--color-9 .pa-table-card__header h2, .pa-table-card--color-9 .pa-table-card__header h3, .pa-table-card--color-9 .pa-table-card__header h4, .pa-table-card--color-9 .pa-table-card__header h5, .pa-table-card--color-9 .pa-table-card__header h6 {
+  color: var(--pa-color-9-text);
+}
+
+.pa-table-card--plain {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.pa-table-card--plain:hover {
+  box-shadow: none;
+}
+
+.pa-table-card--plain .pa-table-card__header {
+  background: transparent;
+  border-bottom: none;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pa-table-card--plain .pa-table-card__footer {
+  background: transparent;
+  border-top: none;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pa-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.4rem;
+  background-color: var(--pa-table-bg);
+}
+
+.pa-table th,
+.pa-table td {
+  padding: 0.8rem 0.8rem;
+  text-align: left;
+  border-bottom: 1px solid var(--pa-border-color);
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
+.pa-table th {
+  background-color: var(--pa-table-header-bg);
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  border-bottom: 2px solid var(--pa-border-color);
+}
+
+.pa-table td {
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-table-bg);
+  height: 3.5rem0.8rem;
+}
+
+.pa-table td .pa-btn {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+
+.pa-table:not(.pa-table--responsive) tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.pa-table--striped tbody tr:nth-child(even) td {
+  background-color: var(--pa-table-stripe);
+}
+
+.pa-table--bordered {
+  border: 1px solid var(--pa-border-color);
+}
+
+.pa-table--bordered th,
+.pa-table--bordered td {
+  border: 1px solid var(--pa-border-color);
+}
+
+.pa-table--bordered:not(.pa-table--bordered--responsive) tbody tr:last-child td {
+  border-bottom: 1px solid var(--pa-border-color);
+}
+
+.pa-table--xs th, .pa-table--xs td {
+  padding: 0.6rem 0.8rem;
+}
+
+.pa-table--xs td {
+  height: 3.1rem0.7rem;
+}
+
+.pa-table--sm th, .pa-table--sm td {
+  padding: 0.8rem 1rem;
+}
+
+.pa-table--sm td {
+  height: 3.3rem0.8rem;
+}
+
+.pa-table--lg th, .pa-table--lg td {
+  padding: 0.8rem 1.4rem;
+}
+
+.pa-table--lg td {
+  height: 3.8rem0.8rem;
+}
+
+.pa-table--xl th, .pa-table--xl td {
+  padding: 0.8rem 1.6rem;
+}
+
+.pa-table--xl td {
+  height: 4.1rem0.8rem;
+}
+
+.pa-table tbody tr:hover {
+  background-color: var(--pa-table-hover-bg);
+}
+
+.pa-table tbody tr:hover td {
+  background-color: var(--pa-table-hover-bg);
+}
+
+.pa-table td .pa-btn-group {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+}
+
+.pa-table .col-auto {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.pa-pager {
+  display: flex;
+  margin: 1.6rem 0;
+}
+
+.pa-card__body .pa-pager:first-child {
+  margin-top: 0;
+}
+
+.pa-card__body .pa-pager:last-child {
+  margin-bottom: 0;
+}
+
+.pa-pager {
+  justify-content: center;
+}
+
+.pa-pager--left {
+  justify-content: flex-start;
+}
+
+.pa-pager--center {
+  justify-content: center;
+}
+
+.pa-pager--right {
+  justify-content: flex-end;
+}
+
+.pa-pager__container {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  white-space: nowrap;
+}
+
+.pa-pager__controls {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.pa-pager__info {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-pager__input {
+  width: 6.4rem !important;
+  text-align: center;
+}
+
+.pa-pager__text {
+  color: var(--pa-text-color-2);
+  font-size: 1.4rem;
+}
+
+.pa-load-more {
+  display: flex;
+  margin: 1.6rem 0;
 }
 
 .pa-card__body .pa-load-more:first-child {
@@ -12064,7 +12670,285 @@ code {
 .pa-popconfirm--compact .pa-popconfirm__actions {
   padding: 0.4rem 0.8rem;
 }
-
+
+/* ========================================
+   Detail Panel Components
+   Inline split-view and overlay detail panels
+   ======================================== */
+:root {
+  --pa-local-detail-panel-width: 40rem;
+  --pa-local-detail-panel-max-width: 64rem;
+}
+
+:where(.pa-detail-view__panel) {
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+}
+
+.pa-detail-view {
+  display: flex;
+  gap: 0;
+  width: 100%;
+}
+
+.pa-detail-view__main {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.pa-detail-view__panel {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-left: 0 solid var(--pa-border-color);
+}
+
+.pa-detail-view__panel--open {
+  width: var(--pa-local-detail-panel-width);
+  min-width: 28rem;
+  max-width: var(--pa-local-detail-panel-max-width);
+  border-left-width: 1px;
+  overflow: visible;
+}
+
+.pa-detail-view--overlay {
+  position: relative;
+  overflow: hidden;
+}
+
+.pa-detail-view--overlay .pa-detail-view__panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 2;
+}
+
+.pa-detail-view__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+}
+
+.pa-detail-view__overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pa-detail-panel--overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: var(--pa-detail-panel-z-index);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.pa-detail-panel--overlay.pa-detail-panel--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+
+.pa-detail-panel--overlay.pa-detail-panel--open .pa-detail-panel__content {
+  transform: translateX(0);
+}
+
+.pa-detail-panel__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--pa-card-bg);
+  position: relative;
+}
+
+.pa-detail-panel--overlay .pa-detail-panel__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  transform: translateX(100%);
+}
+
+.pa-detail-panel__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  cursor: pointer;
+}
+
+.pa-detail-panel__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  min-height: 0;
+}
+
+.pa-detail-panel__title {
+  flex: 1;
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pa-detail-panel__close {
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pa-text-color-2);
+  border-radius: 4px;
+}
+
+.pa-detail-panel__close:hover {
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
+}
+
+.pa-detail-panel__close:focus {
+  outline: 2px solid var(--pa-accent);
+  outline-offset: 2px;
+}
+
+.pa-detail-panel__tabs {
+  flex-shrink: 0;
+  padding: 0 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+}
+
+.pa-detail-panel__tabs .pa-tabs__item {
+  color: var(--pa-text-color-2);
+  border-bottom-color: transparent;
+}
+
+.pa-detail-panel__tabs .pa-tabs__item:hover {
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-accent-light);
+}
+
+.pa-detail-panel__tabs .pa-tabs__item--active {
+  color: var(--pa-text-color-1);
+  border-bottom-color: var(--pa-accent);
+}
+
+.pa-detail-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.2rem 1.6rem;
+}
+
+.pa-detail-panel__footer {
+  flex-shrink: 0;
+  padding: 1.2rem 1.6rem;
+  border-top: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-detail-panel-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.pa-detail-panel-resize:hover, .pa-detail-panel-resize--active {
+  background-color: var(--pa-accent);
+  opacity: 0.3;
+}
+
+.pa-detail-panel-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.pa-table tbody tr.is-selected {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+
+.pa-table tbody tr.is-selected:hover {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+
+@media (max-width: 768px) {
+  .pa-detail-view__panel {
+    display: none;
+  }
+  .pa-detail-panel--mobile-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: var(--pa-detail-panel-z-index);
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open .pa-detail-panel__content {
+    transform: translateX(0);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 90vw;
+    max-width: none;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+    transform: translateX(100%);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--pa-detail-panel-overlay-bg);
+    cursor: pointer;
+  }
+}
 /* ========================================
    Settings Panel Component
    Floating panel for global settings management
@@ -12191,6 +13075,338 @@ code {
   transform: rotate(180deg);
 }
 
+/* ========================================
+   Data Display Components
+   Read-only label-value field pairs
+   ======================================== */
+.pa-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.pa-field__label {
+  display: block;
+  font-size: 1.2rem;
+  font-weight: 600;
+  opacity: 0.55;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.pa-field__value {
+  display: block;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.pa-field--full {
+  grid-column: 1/-1;
+}
+
+.pa-field--copy-btn .pa-field__value {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-field--copy-btn .pa-field__copy {
+  flex-shrink: 0;
+  padding: 0.4rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.pa-field--copy-btn .pa-field__copy:hover {
+  opacity: 1;
+  background: rgba(128, 128, 128, 0.1);
+}
+
+.pa-field--copy-click .pa-field__value {
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.pa-field--copy-click .pa-field__value:hover {
+  opacity: 0.7;
+}
+
+.pa-field--copy-click .pa-field__value::after {
+  content: "Click to copy";
+  font-size: 1rem;
+  opacity: 0;
+  margin-left: 0.8rem;
+  transition: opacity 0.15s;
+}
+
+.pa-field--copy-click .pa-field__value:hover::after {
+  opacity: 0.6;
+}
+
+.pa-field--copy-hover .pa-field__value {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-field--copy-hover .pa-field__copy {
+  flex-shrink: 0;
+  padding: 0.4rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.pa-field--copy-hover:hover .pa-field__copy {
+  opacity: 0.5;
+}
+
+.pa-field--copy-hover:hover .pa-field__copy:hover {
+  opacity: 1;
+  background: rgba(128, 128, 128, 0.1);
+}
+
+.pa-field--copied .pa-field__value::after {
+  content: "Copied!" !important;
+  opacity: 1 !important;
+  color: var(--pa-color-4, #28a745);
+}
+
+.pa-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.pa-field-group__title {
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid #e1e5e9;
+  margin: 0;
+}
+
+.pa-field-group + .pa-field-group {
+  margin-top: 2.4rem;
+}
+
+.pa-fields + .pa-fields {
+  margin-top: 2.4rem;
+}
+
+.pa-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  border-left: 3px solid #007bff;
+  padding-left: 1.6rem;
+}
+
+.pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
+  display: grid;
+  gap: 1.6rem 1.6rem;
+}
+
+.pa-fields--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.pa-fields--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.pa-fields--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 768px) {
+  .pa-fields--cols-2, .pa-fields--cols-3, .pa-fields--cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
+.pa-fields--horizontal .pa-field {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 1.6rem;
+}
+
+.pa-fields--horizontal .pa-field__label {
+  flex: 0 0 auto;
+  min-width: 8rem;
+  max-width: 40%;
+}
+
+.pa-fields--horizontal .pa-field__value {
+  flex: 1;
+  min-width: 0;
+}
+
+.pa-fields--table .pa-field {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 1.6rem;
+}
+
+.pa-fields--table .pa-field__label {
+  flex: 0 0 auto;
+  min-width: 8rem;
+  max-width: 40%;
+}
+
+.pa-fields--table .pa-field__value {
+  flex: 1;
+  min-width: 0;
+}
+
+.pa-fields--bordered .pa-field {
+  padding-bottom: 0.8rem;
+  border-bottom: 1px solid #e1e5e9;
+}
+
+.pa-fields--bordered .pa-field:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.pa-fields--striped .pa-field:nth-child(odd) {
+  background: var(--pa-table-stripe);
+  padding: 0.8rem;
+  border-radius: 4px;
+}
+
+.pa-fields--striped .pa-field:nth-child(even) {
+  padding: 0.8rem;
+}
+
+.pa-fields--compact {
+  gap: 0.4rem;
+}
+
+.pa-fields--compact .pa-field {
+  gap: 0.4rem;
+}
+
+.pa-fields--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.6rem;
+}
+
+.pa-fields--inline .pa-field {
+  flex: 0 0 auto;
+}
+
+.pa-fields--relaxed {
+  gap: 2.4rem;
+}
+
+.pa-fields--row {
+  flex-direction: row;
+}
+
+.pa-fields--row .pa-field {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .pa-fields--row {
+    flex-direction: column;
+  }
+}
+.pa-fields--filled {
+  background: rgba(128, 128, 128, 0.06);
+  padding: 1.6rem;
+  border-radius: 4px;
+}
+
+.pa-fields--color-1 {
+  border-left-color: var(--pa-color-1);
+}
+
+.pa-fields--color-1.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-1) 10%, transparent);
+}
+
+.pa-fields--color-2 {
+  border-left-color: var(--pa-color-2);
+}
+
+.pa-fields--color-2.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-2) 10%, transparent);
+}
+
+.pa-fields--color-3 {
+  border-left-color: var(--pa-color-3);
+}
+
+.pa-fields--color-3.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-3) 10%, transparent);
+}
+
+.pa-fields--color-4 {
+  border-left-color: var(--pa-color-4);
+}
+
+.pa-fields--color-4.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-4) 10%, transparent);
+}
+
+.pa-fields--color-5 {
+  border-left-color: var(--pa-color-5);
+}
+
+.pa-fields--color-5.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-5) 10%, transparent);
+}
+
+.pa-fields--color-6 {
+  border-left-color: var(--pa-color-6);
+}
+
+.pa-fields--color-6.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-6) 10%, transparent);
+}
+
+.pa-fields--color-7 {
+  border-left-color: var(--pa-color-7);
+}
+
+.pa-fields--color-7.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-7) 10%, transparent);
+}
+
+.pa-fields--color-8 {
+  border-left-color: var(--pa-color-8);
+}
+
+.pa-fields--color-8.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-8) 10%, transparent);
+}
+
+.pa-fields--color-9 {
+  border-left-color: var(--pa-color-9);
+}
+
+.pa-fields--color-9.pa-fields--filled {
+  background: color-mix(in srgb, var(--pa-color-9) 10%, transparent);
+}
+
+.pa-fields--no-border {
+  border-left: none;
+  padding-left: 0;
+}
+
 /* ========================================
    Utility Components
    Font utilities, compact mode, component showcase
@@ -12725,6 +13941,15 @@ html.font-size-4xl {
   white-space: nowrap;
 }
 
+.pa-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.pa-link:hover {
+  text-decoration: underline;
+}
+
 .component-showcase {
   display: flex;
   flex-wrap: wrap;
@@ -15727,18 +16952,6 @@ html.font-size-4xl {
   --pa-table-hover-accent-color: #0ea5e9;
   --pa-modal-overlay-bg: rgba(30, 41, 59, 0.5);
   --pa-modal-content-bg: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.08);
-  --pa-alert-success-border: rgba(16, 185, 129, 0.2);
-  --pa-alert-success-text: #10b981;
-  --pa-alert-danger-bg: rgba(239, 68, 68, 0.08);
-  --pa-alert-danger-border: rgba(239, 68, 68, 0.2);
-  --pa-alert-danger-text: #ef4444;
-  --pa-alert-warning-bg: rgba(245, 158, 11, 0.08);
-  --pa-alert-warning-border: rgba(245, 158, 11, 0.2);
-  --pa-alert-warning-text: #f59e0b;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.08);
-  --pa-alert-info-border: rgba(6, 182, 212, 0.2);
-  --pa-alert-info-text: #06b6d4;
   --pa-badge-success-bg: #d4edda;
   --pa-badge-success-text: #155724;
   --pa-badge-warning-bg: #fff3cd;
@@ -15758,6 +16971,9 @@ html.font-size-4xl {
   --pa-popover-text-dark: #000000;
   --pa-loader-overlay-bg: rgba(255, 255, 255, 0.8);
   --pa-profile-overlay-bg: rgba(0, 0, 0, 0.3);
+  --pa-detail-panel-overlay-bg: rgba(0, 0, 0, 0.3);
+  --pa-detail-panel-selected-bg: rgba(14, 165, 233, 0.08);
+  --pa-detail-panel-z-index: 4500;
   --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.5);
   --pa-command-palette-item-hover-bg: rgba(14, 165, 233, 0.05);
   --pa-command-palette-item-active-bg: rgba(14, 165, 233, 0.1);
@@ -15780,34 +16996,31 @@ html.font-size-4xl {
   --pa-color-7: #64748b;
   --pa-color-8: #334155;
   --pa-color-9: #ec4899;
+  --pa-color-1-text: #ffffff;
+  --pa-color-2-text: #ffffff;
+  --pa-color-3-text: #ffffff;
+  --pa-color-4-text: #1a1a1a;
+  --pa-color-5-text: #ffffff;
+  --pa-color-6-text: #ffffff;
+  --pa-color-7-text: #ffffff;
+  --pa-color-8-text: #ffffff;
+  --pa-color-9-text: #ffffff;
+  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 15%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
+  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 15%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
+  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 15%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
+  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 15%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
   --pa-input-group-prepend-bg: #f1f5f9;
   --pa-input-group-prepend-text: #334155;
   --pa-input-group-append-bg: #f1f5f9;
   --pa-input-group-append-text: #334155;
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #e2e8f0;
-  --drp-primary-bg: #f8fafc;
-  --drp-primary-bg-hover: #f1f5f9;
-  --drp-text-color-1: #334155;
-  --drp-text-bg: #64748b;
-  --drp-button-bg: transparent;
-  --drp-button-color: #334155;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #0ea5e9;
-  --drp-button-clear-color: #64748b;
-  --drp-button-cancel-color: #64748b;
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #f8fafc;
-  --ms-primary-bg-hover: #f1f5f9;
-  --ms-border-color: #e2e8f0;
-  --ms-text-color-1: #334155;
-  --ms-text-color-2: #64748b;
-  --ms-text-color-3: #94a3b8;
-  --ms-text-color-4: #cbd5e1;
-  --ms-hint-bg: #f1f5f9;
-  --ms-actions-bg: #f1f5f9;
-  --ms-selected-popover-bg: #ffffff;
 }
 
 .pa-mode-dark {
@@ -15873,14 +17086,18 @@ html.font-size-4xl {
   --pa-command-palette-item-hover-bg: #334155;
   --pa-command-palette-item-active-bg: rgba(14, 165, 233, 0.2);
   --pa-command-palette-highlight-bg: rgba(14, 165, 233, 0.3);
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
   --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
-  --pa-alert-warning-text: #ffffff;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 45%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 70%, transparent);
   --pa-alert-danger-text: #ffffff;
-  --pa-alert-danger-bg: rgba(239, 68, 68, 0.3);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 45%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 70%, transparent);
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 45%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 70%, transparent);
+  --pa-alert-info-text: #ffffff;
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 45%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 70%, transparent);
 }
 .pa-mode-dark .pa-alert code {
   color: inherit;
@@ -15932,34 +17149,6 @@ html.font-size-4xl {
   --base-tooltip-bg: #475569;
   --base-tooltip-text-color: #f1f5f9;
 }
-.pa-mode-dark web-daterangepicker {
-  --drp-dropdown-bg: #1e293b;
-  --drp-border-color: #475569;
-  --drp-primary-bg: #0f172a;
-  --drp-primary-bg-hover: #334155;
-  --drp-text-color-1: #f1f5f9;
-  --drp-text-bg: #94a3b8;
-  --drp-button-bg: transparent;
-  --drp-button-color: #f1f5f9;
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #0ea5e9;
-  --drp-button-clear-color: #94a3b8;
-  --drp-button-cancel-color: #94a3b8;
-}
-.pa-mode-dark web-multiselect {
-  --ms-dropdown-bg: #1e293b;
-  --ms-input-bg: #334155;
-  --ms-primary-bg: #0f172a;
-  --ms-primary-bg-hover: #334155;
-  --ms-border-color: #475569;
-  --ms-text-color-1: #f1f5f9;
-  --ms-text-color-2: #94a3b8;
-  --ms-text-color-3: #64748b;
-  --ms-text-color-4: #475569;
-  --ms-hint-bg: #0f172a;
-  --ms-actions-bg: #0f172a;
-  --ms-selected-popover-bg: #1e293b;
-}
 
 .pa-mode-dark .pa-header__dropdown li a {
   color: #f1f5f9 !important;