@mohasinac/appkit 2.4.10 → 2.5.0

package/dist/ui/components/ListingLayout.style.css

@@ -1,491 +1,491 @@
-/* appkit/src/ui/components/ListingLayout.style.css */
-
-/* -- Root -------------------------------------------- */
-
-.appkit-listing-layout {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout--page-offset {
-  padding-bottom: 3rem;
-}
-.appkit-listing-layout--bulk-offset {
-  padding-bottom: 7rem;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout--page-offset,
-  .appkit-listing-layout--bulk-offset {
-    padding-bottom: 0;
-  }
-}
-
-/* -- Status tabs ------------------------------------- */
-
-.appkit-listing-layout__status-tabs {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-x;
-  margin-inline: -1rem;
-  padding-inline: 1rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__status-tabs {
-    margin-inline: -1.5rem;
-    padding-inline: 1.5rem;
-  }
-}
-
-/* -- Sticky toolbar ---------------------------------- */
-
-.appkit-listing-layout__toolbar {
-  position: sticky;
-  z-index: 20;
-  margin-inline: -1rem;
-  padding-inline: 1rem;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(161, 161, 170, 0.35); /* zinc-400/35 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  padding-block: 0.625rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__toolbar {
-    margin-inline: -1.5rem;
-    padding-inline: 1.5rem;
-  }
-}
-
-.dark .appkit-listing-layout__toolbar {
-  background: rgba(2, 6, 23, 0.8); /* slate-950/80 */
-  border-bottom-color: rgba(30, 41, 59, 0.7); /* slate-800/70 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.appkit-listing-layout__toolbar--dashboard {
-  top: 0;
-}
-
-.appkit-listing-layout__toolbar--page {
-  top: var(--header-height, 3.5rem);
-}
-
-/* -- Toolbar rows ------------------------------------ */
-
-.appkit-listing-layout__toolbar-row--desktop {
-  display: none;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__toolbar-row--desktop {
-    display: flex;
-  }
-}
-
-.appkit-listing-layout__toolbar-row--mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__toolbar-row--mobile {
-    display: none;
-  }
-}
-
-.appkit-listing-layout__search {
-  flex: 1;
-  min-width: 0;
-}
-
-.appkit-listing-layout__toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.appkit-listing-layout__view-toggle-wrap {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  border-radius: 9999px;
-  border: 1px solid #e4e4e7; /* zinc-200 */
-  background: #ffffff;
-  padding: 0.125rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.dark .appkit-listing-layout__view-toggle-wrap {
-  border-color: #1e293b; /* slate-700 */
-  background: #0f172a; /* slate-900 */
-}
-
-.appkit-listing-layout__toolbar-pagination {
-  margin-left: auto;
-  flex-shrink: 0;
-  padding-left: 0.75rem;
-  border-left: 1px solid rgba(161, 161, 170, 0.35);
-}
-
-.dark .appkit-listing-layout__toolbar-pagination {
-  border-left-color: rgba(30, 41, 59, 0.7);
-}
-
-/* -- Mobile toolbar rows ----------------------------- */
-
-.appkit-listing-layout__mobile-row-1 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.appkit-listing-layout__mobile-row-2 {
-  display: flex;
-  align-items: stretch;
-  min-height: 2.75rem; /* 44px */
-  gap: 0.5rem;
-  overflow-x: auto;
-}
-
-.appkit-listing-layout__mobile-row-2__inner {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  padding-bottom: 1px;
-}
-
-/* -- Filter button ----------------------------------- */
-
-.appkit-listing-layout__filter-btn {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  border-radius: 9999px;
-  height: 2rem;
-  padding-inline: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: 1px solid #e4e4e7; /* zinc-200 */
-  color: #52525b; /* zinc-600 */
-  transition: border-color 150ms, background 150ms;
-}
-
-.appkit-listing-layout__filter-btn:hover {
-  border-color: #d4d4d8; /* zinc-300 */
-  background: #fafafa; /* zinc-50 */
-}
-
-.appkit-listing-layout__filter-btn--active {
-  border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, transparent);
-  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
-  color: var(--color-primary, #6366f1);
-}
-
-.dark .appkit-listing-layout__filter-btn {
-  border-color: #1e293b; /* slate-700 */
-  color: #cbd5e1; /* slate-300 */
-}
-.dark .appkit-listing-layout__filter-btn:hover {
-  border-color: #334155; /* slate-600 */
-  background: rgba(30, 41, 59, 0.6);
-}
-
-/* -- Filter badge ------------------------------------ */
-
-.appkit-listing-layout__filter-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  font-size: 0.625rem;
-  font-weight: 700;
-  border-radius: 9999px;
-  background: var(--color-primary, #6366f1);
-  color: #ffffff;
-}
-
-.appkit-listing-layout__filter-badge--lg {
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 0.6875rem;
-  margin-left: 0.5rem;
-}
-
-/* -- Bulk action bar --------------------------------- */
-
-.appkit-listing-layout__bulk-bar {
-  display: none;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-  border-top: 1px solid #f4f4f5; /* zinc-100 */
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__bulk-bar {
-    display: block;
-  }
-}
-
-.dark .appkit-listing-layout__bulk-bar {
-  border-top-color: #1e293b; /* slate-800 */
-}
-
-/* -- Body (sidebar + content) ------------------------ */
-
-.appkit-listing-layout__body {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__body {
-    gap: 1.5rem;
-  }
-}
-
-/* -- Desktop filter sidebar -------------------------- */
-
-.appkit-listing-layout__sidebar {
-  display: none;
-  flex-shrink: 0;
-  align-self: flex-start;
-  transition: width 200ms ease-in-out, opacity 200ms ease-in-out;
-  overflow: hidden;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__sidebar {
-    display: block;
-  }
-}
-
-.appkit-listing-layout__sidebar--page,
-.appkit-listing-layout__sidebar--dashboard {
-  position: sticky;
-  top: var(--header-height, 0px);
-}
-
-.appkit-listing-layout__sidebar--open {
-  width: 15rem; /* w-60 */
-  opacity: 1;
-}
-
-@media (min-width: 1280px) {
-  .appkit-listing-layout__sidebar--open { width: 16rem; } /* xl:w-64 */
-}
-@media (min-width: 1536px) {
-  .appkit-listing-layout__sidebar--open { width: 18rem; } /* 2xl:w-72 */
-}
-
-.appkit-listing-layout__sidebar--collapsed {
-  width: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* -- Sidebar panel card ------------------------------ */
-
-.appkit-listing-layout__sidebar-panel {
-  width: 15rem;
-  border-radius: 1rem;
-  overflow: hidden;
-  border: 1px solid rgba(228, 228, 231, 0.8); /* zinc-200/80 */
-  background: #ffffff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-@media (min-width: 1280px) {
-  .appkit-listing-layout__sidebar-panel { width: 16rem; }
-}
-@media (min-width: 1536px) {
-  .appkit-listing-layout__sidebar-panel { width: 18rem; }
-}
-
-.dark .appkit-listing-layout__sidebar-panel {
-  border-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */
-  background: #0f172a; /* slate-900 */
-}
-
-.appkit-listing-layout__sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #f4f4f5; /* zinc-100 */
-}
-
-.dark .appkit-listing-layout__sidebar-header {
-  border-bottom-color: #1e293b; /* slate-800 */
-}
-
-.appkit-listing-layout__sidebar-facets {
-  padding: 1.25rem 0.75rem 0.75rem;
-  max-height: calc(100vh - 15rem);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout__sidebar-footer {
-  padding: 0.5rem 0.75rem 0.75rem;
-  border-top: 1px solid #f4f4f5;
-}
-
-.dark .appkit-listing-layout__sidebar-footer {
-  border-top-color: #1e293b;
-}
-
-/* -- Main content ------------------------------------ */
-
-.appkit-listing-layout__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.appkit-listing-layout__pagination {
-  padding-top: 0.5rem;
-}
-
-/* -- Mobile sticky pagination bar ------------------- */
-
-.appkit-listing-layout__mobile-pagination {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 39;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(12px);
-  border-top: 1px solid rgba(228, 228, 231, 0.8);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 0.75rem;
-  overflow-x: auto;
-  padding-bottom: 1px;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-pagination {
-    display: none;
-  }
-}
-
-.dark .appkit-listing-layout__mobile-pagination {
-  background: rgba(2, 6, 23, 0.9);
-  border-top-color: rgba(30, 41, 59, 0.8);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.appkit-listing-layout__mobile-pagination--dashboard { bottom: 0; }
-.appkit-listing-layout__mobile-pagination--default   { bottom: 3.5rem; }
-.appkit-listing-layout__mobile-pagination--bulk      { bottom: 7rem; }
-
-/* -- Mobile filter overlay --------------------------- */
-
-.appkit-listing-layout__mobile-overlay-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  background: rgba(0, 0, 0, 0.4);
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-overlay-backdrop {
-    display: none;
-  }
-}
-
-.appkit-listing-layout__mobile-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-overlay {
-    display: none;
-  }
-}
-
-.dark .appkit-listing-layout__mobile-overlay {
-  background: #020617; /* slate-950 */
-}
-
-.appkit-listing-layout__mobile-overlay-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #f4f4f5;
-  flex-shrink: 0;
-}
-
-.dark .appkit-listing-layout__mobile-overlay-header {
-  border-bottom-color: #1e293b;
-}
-
-.appkit-listing-layout__mobile-overlay-facets {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem 1rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout__mobile-overlay-footer {
-  flex-shrink: 0;
-  display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-top: 1px solid #f4f4f5;
-  background: #ffffff;
-}
-
-.dark .appkit-listing-layout__mobile-overlay-footer {
-  border-top-color: #1e293b;
-  background: #020617;
-}
-
-/* -- Close button in mobile overlay ----------------- */
-
-.appkit-listing-layout__close-btn {
-  border-radius: 9999px;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.appkit-listing-layout__close-btn:hover {
-  background: #f4f4f5; /* zinc-100 */
-}
-
-.dark .appkit-listing-layout__close-btn:hover {
-  background: #1e293b; /* slate-800 */
-}
+/* appkit/src/ui/components/ListingLayout.style.css */
+
+/* -- Root -------------------------------------------- */
+
+.appkit-listing-layout {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.appkit-listing-layout--page-offset {
+  padding-bottom: 3rem;
+}
+.appkit-listing-layout--bulk-offset {
+  padding-bottom: 7rem;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout--page-offset,
+  .appkit-listing-layout--bulk-offset {
+    padding-bottom: 0;
+  }
+}
+
+/* -- Status tabs ------------------------------------- */
+
+.appkit-listing-layout__status-tabs {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x;
+  margin-inline: -1rem;
+  padding-inline: 1rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-listing-layout__status-tabs {
+    margin-inline: -1.5rem;
+    padding-inline: 1.5rem;
+  }
+}
+
+/* -- Sticky toolbar ---------------------------------- */
+
+.appkit-listing-layout__toolbar {
+  position: sticky;
+  z-index: 20;
+  margin-inline: -1rem;
+  padding-inline: 1rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(161, 161, 170, 0.35); /* zinc-400/35 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  padding-block: 0.625rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-listing-layout__toolbar {
+    margin-inline: -1.5rem;
+    padding-inline: 1.5rem;
+  }
+}
+
+.dark .appkit-listing-layout__toolbar {
+  background: rgba(2, 6, 23, 0.8); /* slate-950/80 */
+  border-bottom-color: rgba(30, 41, 59, 0.7); /* slate-800/70 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.appkit-listing-layout__toolbar--dashboard {
+  top: 0;
+}
+
+.appkit-listing-layout__toolbar--page {
+  top: var(--header-height, 3.5rem);
+}
+
+/* -- Toolbar rows ------------------------------------ */
+
+.appkit-listing-layout__toolbar-row--desktop {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__toolbar-row--desktop {
+    display: flex;
+  }
+}
+
+.appkit-listing-layout__toolbar-row--mobile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__toolbar-row--mobile {
+    display: none;
+  }
+}
+
+.appkit-listing-layout__search {
+  flex: 1;
+  min-width: 0;
+}
+
+.appkit-listing-layout__toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.appkit-listing-layout__view-toggle-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  border-radius: 9999px;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  padding: 0.125rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.dark .appkit-listing-layout__view-toggle-wrap {
+  border-color: var(--appkit-color-slate-800);
+  background: var(--appkit-color-surface);
+}
+
+.appkit-listing-layout__toolbar-pagination {
+  margin-left: auto;
+  flex-shrink: 0;
+  padding-left: 0.75rem;
+  border-left: 1px solid rgba(161, 161, 170, 0.35);
+}
+
+.dark .appkit-listing-layout__toolbar-pagination {
+  border-left-color: rgba(30, 41, 59, 0.7);
+}
+
+/* -- Mobile toolbar rows ----------------------------- */
+
+.appkit-listing-layout__mobile-row-1 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.appkit-listing-layout__mobile-row-2 {
+  display: flex;
+  align-items: stretch;
+  min-height: 2.75rem; /* 44px */
+  gap: 0.5rem;
+  overflow-x: auto;
+}
+
+.appkit-listing-layout__mobile-row-2__inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding-bottom: 1px;
+}
+
+/* -- Filter button ----------------------------------- */
+
+.appkit-listing-layout__filter-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  height: 2rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid var(--appkit-color-border);
+  color: var(--appkit-color-zinc-600);
+  transition: border-color 150ms, background 150ms;
+}
+
+.appkit-listing-layout__filter-btn:hover {
+  border-color: var(--appkit-color-zinc-300);
+  background: var(--appkit-color-zinc-50);
+}
+
+.appkit-listing-layout__filter-btn--active {
+  border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, transparent);
+  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
+  color: var(--color-primary, #6366f1);
+}
+
+.dark .appkit-listing-layout__filter-btn {
+  border-color: var(--appkit-color-slate-800);
+  color: var(--appkit-color-slate-300);
+}
+.dark .appkit-listing-layout__filter-btn:hover {
+  border-color: var(--appkit-color-slate-700);
+  background: rgba(30, 41, 59, 0.6);
+}
+
+/* -- Filter badge ------------------------------------ */
+
+.appkit-listing-layout__filter-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  border-radius: 9999px;
+  background: var(--color-primary, #6366f1);
+  color: var(--appkit-color-text-on-primary);
+}
+
+.appkit-listing-layout__filter-badge--lg {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.6875rem;
+  margin-left: 0.5rem;
+}
+
+/* -- Bulk action bar --------------------------------- */
+
+.appkit-listing-layout__bulk-bar {
+  display: none;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--appkit-color-zinc-100);
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__bulk-bar {
+    display: block;
+  }
+}
+
+.dark .appkit-listing-layout__bulk-bar {
+  border-top-color: var(--appkit-color-slate-800);
+}
+
+/* -- Body (sidebar + content) ------------------------ */
+
+.appkit-listing-layout__body {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__body {
+    gap: 1.5rem;
+  }
+}
+
+/* -- Desktop filter sidebar -------------------------- */
+
+.appkit-listing-layout__sidebar {
+  display: none;
+  flex-shrink: 0;
+  align-self: flex-start;
+  transition: width 200ms ease-in-out, opacity 200ms ease-in-out;
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__sidebar {
+    display: block;
+  }
+}
+
+.appkit-listing-layout__sidebar--page,
+.appkit-listing-layout__sidebar--dashboard {
+  position: sticky;
+  top: var(--header-height, 0px);
+}
+
+.appkit-listing-layout__sidebar--open {
+  width: 15rem; /* w-60 */
+  opacity: 1;
+}
+
+@media (min-width: 1280px) {
+  .appkit-listing-layout__sidebar--open { width: 16rem; } /* xl:w-64 */
+}
+@media (min-width: 1536px) {
+  .appkit-listing-layout__sidebar--open { width: 18rem; } /* 2xl:w-72 */
+}
+
+.appkit-listing-layout__sidebar--collapsed {
+  width: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* -- Sidebar panel card ------------------------------ */
+
+.appkit-listing-layout__sidebar-panel {
+  width: 15rem;
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 1px solid rgba(228, 228, 231, 0.8); /* zinc-200/80 */
+  background: var(--appkit-color-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+@media (min-width: 1280px) {
+  .appkit-listing-layout__sidebar-panel { width: 16rem; }
+}
+@media (min-width: 1536px) {
+  .appkit-listing-layout__sidebar-panel { width: 18rem; }
+}
+
+.dark .appkit-listing-layout__sidebar-panel {
+  border-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */
+  background: var(--appkit-color-surface);
+}
+
+.appkit-listing-layout__sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--appkit-color-zinc-100);
+}
+
+.dark .appkit-listing-layout__sidebar-header {
+  border-bottom-color: var(--appkit-color-slate-800);
+}
+
+.appkit-listing-layout__sidebar-facets {
+  padding: 1.25rem 0.75rem 0.75rem;
+  max-height: calc(100vh - 15rem);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.appkit-listing-layout__sidebar-footer {
+  padding: 0.5rem 0.75rem 0.75rem;
+  border-top: 1px solid var(--appkit-color-zinc-100);
+}
+
+.dark .appkit-listing-layout__sidebar-footer {
+  border-top-color: var(--appkit-color-slate-800);
+}
+
+/* -- Main content ------------------------------------ */
+
+.appkit-listing-layout__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.appkit-listing-layout__pagination {
+  padding-top: 0.5rem;
+}
+
+/* -- Mobile sticky pagination bar ------------------- */
+
+.appkit-listing-layout__mobile-pagination {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 39;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(228, 228, 231, 0.8);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 1px;
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__mobile-pagination {
+    display: none;
+  }
+}
+
+.dark .appkit-listing-layout__mobile-pagination {
+  background: rgba(2, 6, 23, 0.9);
+  border-top-color: rgba(30, 41, 59, 0.8);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.appkit-listing-layout__mobile-pagination--dashboard { bottom: 0; }
+.appkit-listing-layout__mobile-pagination--default   { bottom: 3.5rem; }
+.appkit-listing-layout__mobile-pagination--bulk      { bottom: 7rem; }
+
+/* -- Mobile filter overlay --------------------------- */
+
+.appkit-listing-layout__mobile-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-navbar);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__mobile-overlay-backdrop {
+    display: none;
+  }
+}
+
+.appkit-listing-layout__mobile-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-sidebar);
+  display: flex;
+  flex-direction: column;
+  background: var(--appkit-color-surface);
+}
+
+@media (min-width: 1024px) {
+  .appkit-listing-layout__mobile-overlay {
+    display: none;
+  }
+}
+
+.dark .appkit-listing-layout__mobile-overlay {
+  background: var(--appkit-color-bg);
+}
+
+.appkit-listing-layout__mobile-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--appkit-color-zinc-100);
+  flex-shrink: 0;
+}
+
+.dark .appkit-listing-layout__mobile-overlay-header {
+  border-bottom-color: var(--appkit-color-slate-800);
+}
+
+.appkit-listing-layout__mobile-overlay-facets {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem 1rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.appkit-listing-layout__mobile-overlay-footer {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-top: 1px solid var(--appkit-color-zinc-100);
+  background: var(--appkit-color-surface);
+}
+
+.dark .appkit-listing-layout__mobile-overlay-footer {
+  border-top-color: var(--appkit-color-slate-800);
+  background: var(--appkit-color-bg);
+}
+
+/* -- Close button in mobile overlay ----------------- */
+
+.appkit-listing-layout__close-btn {
+  border-radius: 9999px;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-listing-layout__close-btn:hover {
+  background: var(--appkit-color-zinc-100);
+}
+
+.dark .appkit-listing-layout__close-btn:hover {
+  background: var(--appkit-color-slate-800);
+}