@keenmate/pure-admin-core 1.1.3 → 1.3.0

package/dist/css/main.css

@@ -4033,176 +4033,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 {
@@ -4271,176 +4341,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 {
@@ -4509,176 +4649,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 {
@@ -4747,176 +4957,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 {
@@ -10327,6 +10607,287 @@ web-multiselect {
   border: 1px solid var(--pa-border-color);
   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-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);
+  background: var(--pa-card-header-bg);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.pa-table-container__title {
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--pa-text-color-1);
+}
+.pa-table-container__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+.pa-table-container__actions .pa-btn {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+
+.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-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.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-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-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-card__header .pa-btn {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+.pa-table-card__title {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+  flex: 1;
+}
+.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-card__actions {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+.pa-table-card__body {
+  flex: 1;
+  min-width: 0;
+}
+.pa-table-card__body--scrollable {
+  overflow-x: auto;
+}
+.pa-table-card__body .pa-table {
+  border-radius: 0;
+}
+.pa-table-card__body .pa-table th:first-child,
+.pa-table-card__body .pa-table td:first-child {
+  padding-left: 1rem;
+}
+.pa-table-card__body .pa-table th:last-child,
+.pa-table-card__body .pa-table td:last-child {
+  padding-right: 1rem;
+}
+.pa-table-card__body .pa-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.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-table-card--primary {
+  border-color: var(--pa-accent);
+}
+.pa-table-card--primary .pa-table-card__header {
+  background-color: var(--pa-accent);
+  color: var(--pa-btn-primary-text);
+}
+.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-table-card--success {
+  border-color: var(--pa-success-bg);
+}
+.pa-table-card--success .pa-table-card__header {
+  background-color: var(--pa-success-bg);
+  color: var(--pa-btn-success-text);
+}
+.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-table-card--warning {
+  border-color: var(--pa-warning-bg);
+}
+.pa-table-card--warning .pa-table-card__header {
+  background-color: var(--pa-warning-bg);
+  color: var(--pa-btn-warning-text);
+}
+.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-table-card--danger {
+  border-color: var(--pa-danger-bg);
+}
+.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%;
@@ -10363,6 +10924,16 @@ web-multiselect {
 .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;
 }
@@ -13302,39 +13873,302 @@ code {
 }
 
 /* ========================================
-   Settings Panel Component
-   Floating panel for global settings management
+   Detail Panel Components
+   Inline split-view and overlay detail panels
    ======================================== */
-.pa-settings-panel {
-  position: fixed;
-  right: -320px;
-  top: 15vh;
-  z-index: 10000;
-  width: 320px;
-  transition: right 0.3s ease;
+:root {
+  --pa-local-detail-panel-width: 40rem;
+  --pa-local-detail-panel-max-width: 64rem;
 }
-.pa-settings-panel__toggle {
-  position: absolute;
-  right: 320px;
-  top: 0;
-  width: 40px;
-  height: 40px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  font-size: 2rem;
+
+: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;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
+  gap: 0;
+  width: 100%;
 }
-.pa-settings-panel__toggle:hover {
-  background: rgba(0, 123, 255, 0.12);
-  width: 45px;
-  right: 325px;
+.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
+   ======================================== */
+.pa-settings-panel {
+  position: fixed;
+  right: -320px;
+  top: 15vh;
+  z-index: 10000;
+  width: 320px;
+  transition: right 0.3s ease;
+}
+.pa-settings-panel__toggle {
+  position: absolute;
+  right: 320px;
+  top: 0;
+  width: 40px;
+  height: 40px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px 0 0 4px;
+  cursor: pointer;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.pa-settings-panel__toggle:hover {
+  background: rgba(0, 123, 255, 0.12);
+  width: 45px;
+  right: 325px;
 }
 .pa-settings-panel__content {
   background: var(--pa-subtle-bg);
@@ -13412,6 +14246,281 @@ 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