/* ========================================================= Pawabase DataTable (PBDT) Frontend UI Skin Goal: professional, theme-proof UI that looks consistent across themes. ========================================================= */ /* ========================================================= GLOBAL FALLBACK TOKENS Tooltip is appended to , so variables must exist globally too. ========================================================= */ :root{ --pbdt-bg:#ffffff; --pbdt-surface:#ffffff; --pbdt-surface-2:#f8fafc; --pbdt-border:#e5e7eb; --pbdt-text:#111827; --pbdt-muted:#6b7280; --pbdt-primary:#2563eb; --pbdt-primary-2:#1d4ed8; --pbdt-ring:transparent; --pbdt-row-alt:#f9fafb; --pbdt-shadow:0 16px 50px rgba(0,0,0,.18); /* system */ --pbdt-radius-sm:10px; --pbdt-radius-md:14px; --pbdt-radius-lg:22px; /* spacing */ --pbdt-s-1:8px; --pbdt-s-2:12px; --pbdt-s-3:16px; --pbdt-s-4:24px; /* type */ --pbdt-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; --pbdt-fs-12:12px; --pbdt-fs-14:14px; --pbdt-fs-16:16px; --pbdt-fs-20:20px; --pbdt-fs-24:24px; --pbdt-lh:1.45; } /* Dark theme tokens (optional; JS applies pbdt-theme-dark class) */ .pbdt-theme-dark{ --pbdt-bg:#0b1220; --pbdt-surface:#0b1220; --pbdt-surface-2:#0a0f1a; --pbdt-border:#1f2937; --pbdt-text:#e5e7eb; --pbdt-muted:#9ca3af; --pbdt-row-alt:#0a0f1a; --pbdt-shadow:0 22px 70px rgba(0,0,0,.45); } /* Minimal theme */ .pbdt-theme-minimal{ --pbdt-surface-2:#fafafa; --pbdt-border:#edf0f2; --pbdt-row-alt:#fafafa; } /* ========================================================= HARD RESET (theme-proof) Scoped ONLY to PBDT root; keep it strong but contained. ========================================================= */ .pbdt-root, .pbdt-root *{ box-sizing:border-box; } /* ========================================================= THEME ISOLATION FOR CONTROLS Many themes apply global button styles via broad selectors. We reset ONLY PBDT controls, then restyle via our CSS variables. ========================================================= */ /* Reset our buttons/controls so theme rules can't leak in */ .pbdt-root .pbdt-btn, .pbdt-root .pbdt-filter-btn, .pbdt-root .pbdt-actions-btn, .pbdt-modal-overlay .pbdt-modal-close{ all: unset; box-sizing: border-box; font: inherit; line-height: 1; -webkit-tap-highlight-color: transparent; } /* Re-apply basic interactive affordances */ .pbdt-root .pbdt-btn, .pbdt-root .pbdt-filter-btn, .pbdt-root .pbdt-actions-btn, .pbdt-modal-overlay .pbdt-modal-close{ display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; } .pbdt-root table{ border-collapse:separate !important; border-spacing:0 !important; width:max-content !important; min-width:100% !important; table-layout:fixed !important; } .pbdt-root thead{ display:table-header-group !important; } .pbdt-root tbody{ display:table-row-group !important; } .pbdt-root tr{ display:table-row !important; } .pbdt-root th, .pbdt-root td{ display:table-cell !important; float:none !important; clear:none !important; position:static; background:transparent; border:0; vertical-align:middle; } /* prevent theme flex tables */ .pbdt-root table, .pbdt-root thead, .pbdt-root tbody, .pbdt-root tr{ flex:none !important; justify-content:initial !important; align-items:initial !important; } /* ========================================================= ROOT WRAPPER ========================================================= */ .pbdt-root{ font-family:var(--pbdt-font); font-size:var(--pbdt-fs-14); line-height:var(--pbdt-lh); color:var(--pbdt-text); /* nice card */ background:var(--pbdt-surface); border:1px solid var(--pbdt-border); border-radius:var(--pbdt-radius-lg); overflow:hidden; /* makes tooltip + sticky layers safe */ position:relative; isolation:isolate; } /* ========================================================= GLOBAL BUTTON (non-footer) ========================================================= */ .pbdt-root .pbdt-btn{ padding: var(--pbdt-btn-pad-y, 9px) var(--pbdt-btn-pad-x, 14px); border-radius: var(--pbdt-btn-radius, var(--pbdt-radius-md)); border: var(--pbdt-btn-border-w, 1px) solid var(--pbdt-btn-border, var(--pbdt-border)); background: var(--pbdt-btn-bg, var(--pbdt-surface-2)); color: var(--pbdt-btn-color, var(--pbdt-text)); font-weight: var(--pbdt-btn-font-weight, 900); font-size: var(--pbdt-btn-font-size, var(--pbdt-fs-12)); box-shadow: var(--pbdt-btn-shadow-val, none); cursor:pointer; transition:filter .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .pbdt-root .pbdt-btn:hover{ background: var(--pbdt-btn-hover-bg, var(--pbdt-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-btn-hover-color, var(--pbdt-btn-color, var(--pbdt-text))); border-color: var(--pbdt-btn-hover-border, rgba(37,99,235,.25)); filter:brightness(.98); } .pbdt-root .pbdt-btn:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color: var(--pbdt-btn-active-border, rgba(37,99,235,.35)); } .pbdt-root .pbdt-btn.is-active{ background: var(--pbdt-btn-active-bg, var(--pbdt-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-btn-active-color, var(--pbdt-btn-color, var(--pbdt-text))); border-color: var(--pbdt-btn-active-border, var(--pbdt-btn-border, var(--pbdt-border))); } .pbdt-root .pbdt-btn[disabled]{ opacity: var(--pbdt-btn-disabled-opacity, .45); cursor:not-allowed; } /* ========================================================= GLOBAL BUTTON (modal) The modal is mounted in , outside .pbdt-root, so we mirror the button styles here. ========================================================= */ .pbdt-modal-overlay .pbdt-btn{ padding: var(--pbdt-btn-pad-y, 9px) var(--pbdt-btn-pad-x, 14px); border-radius: var(--pbdt-btn-radius, var(--pbdt-radius-md)); border: var(--pbdt-btn-border-w, 1px) solid var(--pbdt-btn-border, var(--pbdt-border)); background: var(--pbdt-btn-bg, var(--pbdt-surface-2)); color: var(--pbdt-btn-color, var(--pbdt-text)); font-weight: var(--pbdt-btn-font-weight, 900); font-size: var(--pbdt-btn-font-size, var(--pbdt-fs-12)); box-shadow: var(--pbdt-btn-shadow-val, none); cursor:pointer; text-decoration:none; transition:filter .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .pbdt-modal-overlay .pbdt-btn:hover{ background: var(--pbdt-btn-hover-bg, var(--pbdt-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-btn-hover-color, var(--pbdt-btn-color, var(--pbdt-text))); border-color: var(--pbdt-btn-hover-border, rgba(37,99,235,.25)); filter:brightness(.98); } .pbdt-modal-overlay .pbdt-btn:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color: var(--pbdt-btn-active-border, rgba(37,99,235,.35)); } .pbdt-modal-overlay .pbdt-btn.is-active{ background: var(--pbdt-btn-active-bg, var(--pbdt-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-btn-active-color, var(--pbdt-btn-color, var(--pbdt-text))); border-color: var(--pbdt-btn-active-border, var(--pbdt-btn-border, var(--pbdt-border))); } .pbdt-modal-overlay .pbdt-btn[disabled]{ opacity: var(--pbdt-btn-disabled-opacity, .45); cursor:not-allowed; } /* ========================================================= STICKY TOP AREA ========================================================= */ .pbdt-top{ position:sticky; top:0; z-index:10; background:var(--pbdt-surface); } /* ========================================================= FILTERS ROW ========================================================= */ .pbdt-filters-row{ padding:var(--pbdt-s-2) var(--pbdt-s-3); border-bottom:1px solid var(--pbdt-border); background:var(--pbdt-surface); } .pbdt-filters{ display:flex; gap:var(--pbdt-s-2); align-items:center; flex-wrap:wrap; } .pbdt-filter{ position:relative; } .pbdt-filter-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:220px; max-width:min(360px, 100%); } /* Filter button styling: either inherit global button styles or use custom filter vars */ .pbdt-root[data-filter-style="global"] .pbdt-filter-btn{ padding: var(--pbdt-btn-pad-y, 10px) var(--pbdt-btn-pad-x, 12px); border-radius: var(--pbdt-btn-radius, var(--pbdt-radius-md)); border: var(--pbdt-btn-border-w, 1px) solid var(--pbdt-btn-border, var(--pbdt-border)); background: var(--pbdt-btn-bg, var(--pbdt-surface-2)); color: var(--pbdt-btn-color, var(--pbdt-text)); font-weight: var(--pbdt-btn-font-weight, 800); font-size: var(--pbdt-btn-font-size, var(--pbdt-fs-14)); box-shadow: var(--pbdt-btn-shadow-val, none); } .pbdt-root[data-filter-style="custom"] .pbdt-filter-btn{ padding: var(--pbdt-filter-btn-pad-y, 10px) var(--pbdt-filter-btn-pad-x, 12px); border-radius: var(--pbdt-filter-btn-radius, var(--pbdt-radius-md)); border: var(--pbdt-filter-btn-border-w, 1px) solid var(--pbdt-filter-btn-border, var(--pbdt-border)); background: var(--pbdt-filter-btn-bg, var(--pbdt-surface-2)); color: var(--pbdt-filter-btn-color, var(--pbdt-text)); font-weight: var(--pbdt-filter-btn-font-weight, 800); font-size: var(--pbdt-filter-btn-font-size, var(--pbdt-fs-14)); box-shadow: var(--pbdt-filter-btn-shadow-val, none); } .pbdt-root[data-filter-style="global"] .pbdt-filter-btn:hover{ background: var(--pbdt-btn-hover-bg, var(--pbdt-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-btn-hover-color, var(--pbdt-btn-color, var(--pbdt-text))); border-color: var(--pbdt-btn-hover-border, rgba(37,99,235,.25)); filter:brightness(.98); } .pbdt-root[data-filter-style="global"] .pbdt-filter-btn:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color: var(--pbdt-btn-active-border, rgba(37,99,235,.35)); } .pbdt-root[data-filter-style="custom"] .pbdt-filter-btn:hover{ background: var(--pbdt-filter-btn-hover-bg, var(--pbdt-filter-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-filter-btn-hover-color, var(--pbdt-filter-btn-color, var(--pbdt-text))); border-color: var(--pbdt-filter-btn-hover-border, rgba(37,99,235,.25)); filter:brightness(.98); } .pbdt-root[data-filter-style="custom"] .pbdt-filter-btn:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color: var(--pbdt-filter-btn-hover-border, rgba(37,99,235,.35)); } .pbdt-filter-btn-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pbdt-filter-caret{ opacity:.75; font-size:12px; } .pbdt-filter-caret::before{ content:"▾"; display:inline-block; line-height:1; } .pbdt-filter-menu{ display:none; position:absolute; left:0; top:calc(100% + 8px); width:320px; max-width:min(360px, 92vw); max-height:340px; overflow:auto; border-radius:var(--pbdt-radius-md); border:1px solid var(--pbdt-filter-menu-border, var(--pbdt-border)); background:var(--pbdt-filter-menu-bg, var(--pbdt-surface)); box-shadow:var(--pbdt-shadow); z-index:10000; padding:12px; } .pbdt-filter-menu.open{ display:block; } .pbdt-filter-menu-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 10px; margin-bottom:10px; border-bottom:1px solid var(--pbdt-border); } .pbdt-filter-menu-title{ font-weight:900; font-size:var(--pbdt-fs-12); letter-spacing:.02em; color:var(--pbdt-muted); text-transform:uppercase; } .pbdt-filter-clear{ border:1px solid transparent; background:transparent; color:var(--pbdt-muted); font-weight:900; cursor:pointer; padding:6px 10px; border-radius:var(--pbdt-radius-sm); transition:background .12s ease, border-color .12s ease; } .pbdt-filter-clear:hover{ background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.20); color:var(--pbdt-primary); } .pbdt-filter-options{ display:flex; flex-direction:column; gap:10px; } .pbdt-filter-opt{ display:flex; gap:10px; align-items:flex-start; font-size:var(--pbdt-fs-14); color:var(--pbdt-text); cursor:pointer; user-select:none; } .pbdt-filter-opt input{ margin-top:2px; accent-color:var(--pbdt-primary); } /* ========================================================= TOOLBAR (Rows + Search inline) ========================================================= */ .pbdt-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--pbdt-s-2); flex-wrap:wrap; padding:var(--pbdt-s-3); border-bottom:1px solid var(--pbdt-border); background:var(--pbdt-surface); } .pbdt-toolbar .pbdt-left{ display:flex; align-items:center; gap:var(--pbdt-s-2); flex-wrap:wrap; } .pbdt-toolbar .pbdt-right{ margin-left:auto; display:flex; align-items:center; gap:var(--pbdt-s-2); } .pbdt-perpage{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--pbdt-text); } .pbdt-perpage-label{ font-size:var(--pbdt-fs-12); color:var(--pbdt-muted); font-weight:900; letter-spacing:.02em; text-transform:uppercase; } .pbdt-perpage-select{ padding:10px 12px; border-radius:var(--pbdt-radius-md); border:1px solid var(--pbdt-border); background:var(--pbdt-surface-2); color:var(--pbdt-text); font-weight:800; font-size:var(--pbdt-fs-14); transition:border-color .12s ease, box-shadow .12s ease; } .pbdt-perpage-select:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color:rgba(37,99,235,.35); } .pbdt-search{ width:280px; max-width:100%; padding:10px 12px; border-radius:var(--pbdt-radius-md); border:1px solid var(--pbdt-border); background:var(--pbdt-surface-2); color:var(--pbdt-text); font-size:var(--pbdt-fs-14); transition:border-color .12s ease, box-shadow .12s ease; } .pbdt-search:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color:rgba(37,99,235,.35); } .pbdt-meta{ font-size:var(--pbdt-fs-12); color:var(--pbdt-muted); font-weight:800; } /* ========================================================= HEADER ========================================================= */ .pbdt-head{ border-bottom:1px solid var(--pbdt-border); background:var(--pbdt-surface); overflow:hidden; } .pbdt-head-inner{ overflow:hidden; } .pbdt-table-head th{ padding:14px 12px; font-size:var(--pbdt-fs-12); color:var(--pbdt-muted); font-weight:950; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; background:var(--pbdt-surface); border-bottom:1px solid var(--pbdt-border); } .pbdt-th{ user-select:none; } .pbdt-th-arrow{ margin-left:8px; font-size:11px; opacity:.8; } /* alignment helpers */ .pbdt-root th.pbdt-align-left, .pbdt-root td.pbdt-align-left{ text-align:left !important; } .pbdt-root th.pbdt-align-center, .pbdt-root td.pbdt-align-center{ text-align:center !important; } .pbdt-root th.pbdt-align-right, .pbdt-root td.pbdt-align-right{ text-align:right !important; } /* ========================================================= BODY / ROWS ========================================================= */ .pbdt-body{ max-height:520px; overflow:auto; background:var(--pbdt-surface); } .pbdt-table-body td{ padding:14px 12px; font-size:var(--pbdt-fs-14); color:var(--pbdt-text); border-bottom:1px solid var(--pbdt-border); background:var(--pbdt-surface); vertical-align:middle !important; /* keep centered */ } .pbdt-zebra .pbdt-table-body tr:nth-child(even) td{ background:var(--pbdt-row-alt); } .pbdt-compact .pbdt-table-body td{ padding:10px 12px; } /* subtle row hover */ .pbdt-table-body tbody tr:hover td{ background:rgba(37,99,235,.04); } /* ========================================================= CELLS ========================================================= */ .pbdt-cell{ width:100%; word-break:break-word; } .pbdt-num{ font-variant-numeric:tabular-nums; } /* Media */ .pbdt-media{ display:flex; align-items:center; justify-content:center; } .pbdt-img{ max-width:120px; height:auto; object-fit:contain; border-radius:var(--pbdt-radius-sm); } /* Links */ .pbdt-link{ font-weight:900; color:var(--pbdt-link-color, var(--pbdt-primary)); text-decoration:none !important; } .pbdt-link:hover{ color:var(--pbdt-link-hover-color, var(--pbdt-primary-2)); text-decoration:none !important; } /* Button links */ .pbdt-linkbtn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 12px; border-radius:var(--pbdt-radius-md); border:1px solid rgba(37,99,235,.25); background:rgba(37,99,235,.08); color:var(--pbdt-primary); font-weight:900; text-decoration:none !important; transition:filter .12s ease, border-color .12s ease; } /* Ensure themes can't re-introduce underlines on any styled link/button */ .pbdt-root a.pbdt-btn, .pbdt-modal-overlay a.pbdt-btn, .pbdt-root a.pbdt-link, .pbdt-modal-overlay a.pbdt-link, .pbdt-root a.pbdt-linkbtn, .pbdt-modal-overlay a.pbdt-linkbtn{ text-decoration:none !important; } .pbdt-linkbtn:hover{ filter:brightness(.98); border-color:rgba(37,99,235,.35); } /* ========================================================= CLAMP ========================================================= */ .pbdt-full{ display:none; } .pbdt-clamp-on .pbdt-cell.clampable{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ========================================================= EMPTY / LOADING / ERROR ========================================================= */ .pbdt-empty{ text-align:center !important; padding:48px 12px !important; color:var(--pbdt-muted) !important; font-weight:800; } .pbdt-loading, .pbdt-error{ padding:48px 16px; text-align:center; color:var(--pbdt-muted); font-weight:800; } /* ========================================================= FOOTER / PAGINATION ========================================================= */ .pbdt-footer{ border-top: var(--pbdt-footer-border-width, 1px) solid var(--pbdt-footer-border-color, var(--pbdt-border)); padding: var(--pbdt-footer-pad-t, var(--pbdt-s-2)) var(--pbdt-footer-pad-r, var(--pbdt-s-3)) var(--pbdt-footer-pad-b, var(--pbdt-s-2)) var(--pbdt-footer-pad-l, var(--pbdt-s-3)); background: var(--pbdt-footer-bg, var(--pbdt-surface)); color: var(--pbdt-footer-color, var(--pbdt-text)); font-size: var(--pbdt-footer-font-size, var(--pbdt-fs-12)); } .pbdt-pagination{ display:flex; align-items:center; gap: var(--pbdt-footer-gap, 10px); flex-wrap:wrap; justify-content: flex-start; } /* alignment mapping */ .pbdt-root[data-footer-justify="left"] .pbdt-pagination{ justify-content:flex-start; } .pbdt-root[data-footer-justify="center"] .pbdt-pagination{ justify-content:center; } .pbdt-root[data-footer-justify="right"] .pbdt-pagination{ justify-content:flex-end; } .pbdt-root[data-footer-justify="space-between"] .pbdt-pagination{ justify-content:space-between; } /* Footer buttons (pagination) */ .pbdt-footer .pbdt-btn{ padding: var(--pbdt-footer-btn-pad-y, 9px) var(--pbdt-footer-btn-pad-x, 12px); border-radius: var(--pbdt-footer-btn-radius, var(--pbdt-radius-md)); border: var(--pbdt-footer-btn-border-w, 1px) solid var(--pbdt-footer-btn-border, var(--pbdt-border)); background: var(--pbdt-footer-btn-bg, var(--pbdt-surface-2)); color: var(--pbdt-footer-btn-color, var(--pbdt-text)); font-weight: var(--pbdt-footer-btn-font-weight, 900); font-size: var(--pbdt-footer-btn-font-size, var(--pbdt-fs-12)); box-shadow: var(--pbdt-footer-btn-shadow-val, none); cursor:pointer; transition:filter .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .pbdt-footer .pbdt-btn:hover{ background: var(--pbdt-footer-btn-hover-bg, var(--pbdt-footer-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-footer-btn-hover-color, var(--pbdt-footer-btn-color, var(--pbdt-text))); border-color: var(--pbdt-footer-btn-hover-border, rgba(37,99,235,.25)); filter:brightness(.98); } .pbdt-footer .pbdt-btn:focus{ outline:none; box-shadow:0 0 0 4px var(--pbdt-ring); border-color: var(--pbdt-footer-btn-active-border, rgba(37,99,235,.35)); } .pbdt-footer .pbdt-btn.is-active{ background: var(--pbdt-footer-btn-active-bg, var(--pbdt-footer-btn-bg, var(--pbdt-surface-2))); color: var(--pbdt-footer-btn-active-color, var(--pbdt-footer-btn-color, var(--pbdt-text))); border-color: var(--pbdt-footer-btn-active-border, var(--pbdt-footer-btn-border, var(--pbdt-border))); } .pbdt-footer .pbdt-btn[disabled]{ opacity: var(--pbdt-footer-btn-disabled-opacity, .45); cursor:not-allowed; } .pbdt-page-info{ font-size:var(--pbdt-footer-font-size, var(--pbdt-fs-12)); color:var(--pbdt-muted); font-weight:800; } /* ========================================================= ACTIONS BUTTON (View more) ========================================================= */ .pbdt-actions-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } /* ========================================================= MODAL (Row details) ========================================================= */ .pbdt-modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); padding:18px; z-index:999999; } .pbdt-modal{ width:min(900px, 96vw); max-height:min(82vh, 780px); overflow:auto; background:var(--pbdt-surface); color:var(--pbdt-text); border:1px solid var(--pbdt-border); border-radius:var(--pbdt-radius-lg); box-shadow:var(--pbdt-shadow); position:relative; padding:26px 26px 22px; } .pbdt-modal-overlay .pbdt-modal-close{ position:absolute; top:var(--pbdt-popup-close-top, 16px); right:var(--pbdt-popup-close-right, 16px); width:var(--pbdt-popup-close-size, 44px); height:var(--pbdt-popup-close-size, 44px); border-radius:var(--pbdt-popup-close-radius, 999px); border:var(--pbdt-popup-close-border-w, 0px) solid var(--pbdt-popup-close-border, transparent); background:var(--pbdt-popup-close-bg); color:var(--pbdt-popup-close-color); box-shadow: var(--pbdt-popup-close-shadow-val, none); font-size:var(--pbdt-popup-close-icon-size, 24px); font-weight:950; line-height:1; transition:filter .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease; } .pbdt-modal-overlay .pbdt-modal-close:hover{ filter:brightness(.98); background:var(--pbdt-popup-close-hover-bg, var(--pbdt-popup-close-bg)); color:var(--pbdt-popup-close-hover-color, var(--pbdt-popup-close-color)); border-color:var(--pbdt-popup-close-hover-border, var(--pbdt-popup-close-border)); } .pbdt-modal-overlay .pbdt-modal-close:focus, .pbdt-modal-overlay .pbdt-modal-close:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--pbdt-popup-close-focus, var(--pbdt-ring)); } .pbdt-modal-title{ font-weight:950; font-size:var(--pbdt-fs-24); margin:0 0 6px; padding-right:64px; } .pbdt-modal-subtitle{ font-size:var(--pbdt-fs-14); color:var(--pbdt-muted); margin:0 0 18px; } /* Details table */ .pbdt-details-table{ border:1px solid rgba(37,99,235,.18); border-radius:var(--pbdt-radius-md); overflow:hidden; background:var(--pbdt-surface-2); } .pbdt-drow{ display:grid; grid-template-columns: 240px 1fr; gap:16px; padding:16px; border-top:1px solid rgba(37,99,235,.14); align-items:center; } .pbdt-drow:first-child{ border-top:none; } .pbdt-dkey{ font-weight:950; font-size:var(--pbdt-fs-14); color:var(--pbdt-text); } .pbdt-dval{ font-size:var(--pbdt-fs-14); color:var(--pbdt-text); } /* images/links in modal */ .pbdt-dval .pbdt-media{ justify-content:flex-start; } .pbdt-dval .pbdt-img{ max-width:160px; border-radius:var(--pbdt-radius-md); } /* ========================================================= TOOLTIP (clamp hover) Must be theme-proof; it's outside root. ========================================================= */ .pbdt-tooltip{ position:fixed; z-index:2147483647; display:none; max-width:min(560px, 92vw); max-height:min(420px, 60vh); overflow:auto; background:var(--pbdt-surface, #fff); color:var(--pbdt-text, #111827); border:1px solid var(--pbdt-border, #e5e7eb); border-radius:var(--pbdt-radius-md, 14px); padding:12px; pointer-events:none; isolation:isolate; contain:paint; mix-blend-mode:normal; transform:translateZ(0); filter:drop-shadow(0 12px 30px rgba(0,0,0,.18)); } .pbdt-tooltip-title{ font-size:var(--pbdt-fs-12, 12px); font-weight:950; letter-spacing:.02em; text-transform:uppercase; color:var(--pbdt-muted, #6b7280); margin-bottom:8px; } .pbdt-tooltip-body{ font-size:var(--pbdt-fs-14, 14px); color:var(--pbdt-text, #111827); line-height:1.5; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 720px){ .pbdt-toolbar{ padding:var(--pbdt-s-2); } .pbdt-search{ width:min(100%, 460px); } .pbdt-filter-btn{ min-width:min(100%, 460px); } .pbdt-filter-menu{ width:min(92vw, 360px); } .pbdt-drow{ grid-template-columns: 1fr; } .pbdt-dkey{ color:var(--pbdt-muted); text-transform:uppercase; letter-spacing:.02em; font-size:var(--pbdt-fs-12); } } /* ========================================================= PBDT Frontend CSS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Hotfix Patch v2 (2026-01-23) Paste at END of assets/frontend.css Fixes: - Remove any vertical gap between header and first data row - Force Rows-per-page select + Search input on the same line ========================================================= */ /* ---------- (A) Close the header/body gap ---------- */ /* Some themes add margins/padding/line-height to wrappers; nuke them */ .pbdt-head, .pbdt-head-inner, .pbdt-body{ margin:0 !important; padding:0 !important; } /* Remove any extra separator border on the head wrapper itself */ .pbdt-head{ border-bottom:0 !important; } /* Ensure the header cells draw the only separator line */ .pbdt-table-head th{ border-bottom:1px solid var(--pbdt-border, #e5e7eb) !important; } /* If a spacer row exists as the first tbody row (used for sizing), collapse it */ .pbdt-table-body tbody tr:first-child{ height:auto; } .pbdt-table-body tbody tr:first-child td{ padding-top:0 !important; } /* If there is an actual spacer element between header and body, collapse it */ .pbdt-head + *{ margin-top:0 !important; } /* Overlap the body table by 1px so borders touch with no visible gap */ .pbdt-body table{ margin-top:-1px !important; } /* ---------- (B) Rows + Search inline ---------- */ /* Force toolbar to be a single row layout */ .pbdt-toolbar{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:12px !important; } /* Force children not to become 100% width blocks */ .pbdt-toolbar .pbdt-perpage, .pbdt-toolbar .pbdt-search, .pbdt-toolbar .pbdt-meta{ display:inline-flex !important; width:auto !important; max-width:none !important; } /* If your markup places perpage + search inside wrapper(s), keep them inline too */ .pbdt-toolbar .pbdt-left, .pbdt-toolbar .pbdt-controls, .pbdt-toolbar .pbdt-row{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; gap:12px !important; width:auto !important; } /* Ensure search doesn't drop to next line due to width rules */ .pbdt-search{ flex:0 0 320px !important; min-width:260px !important; width:320px !important; } /* On very small screens, allow wrapping (mobile) */ @media (max-width: 720px){ .pbdt-toolbar{ flex-wrap:wrap !important; } .pbdt-search{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; } } /* ========================================================= PBDT Frontend CSS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Hotfix Patch v3 (2026-01-23) Paste at END of assets/frontend.css Fix: Header bottom border should span FULL container width (no cut-off). ========================================================= */ /* The header table may be wider than the viewport (horizontal scroll). The TH border only runs under the columns, so it can look "short" inside the rounded card. Instead, draw the separator line on the header container itself (full width), and remove the TH border. */ .pbdt-table-head th{ border-bottom:0 !important; } .pbdt-head{ border-bottom:1px solid var(--pbdt-border, #e5e7eb) !important; } /* Keep body touching the header line */ .pbdt-body table{ margin-top:0 !important; } /* If any 1px overlap from earlier patches remains, neutralize it */ .pbdt-body{ border-top:0 !important; } /* ========================================================= PBDT Frontend CSS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Hotfix Patch v4 (2026-01-23) Paste at END of assets/frontend.css Fixes: - First row height should match other rows (undo earlier first-row padding override) - Header text vertically centered ========================================================= */ /* 1) Header vertical centering */ .pbdt-root th{ vertical-align:middle !important; padding-top:14px !important; padding-bottom:14px !important; } /* 2) Ensure all body rows (including first) use the same padding/height */ .pbdt-table-body td{ padding-top:14px !important; padding-bottom:14px !important; vertical-align:middle !important; } /* If any earlier patch forced first row padding-top to 0, undo it */ .pbdt-table-body tbody tr:first-child td{ padding-top:14px !important; padding-bottom:14px !important; } /* Optional: if a theme adds extra line-height to headings inside cells, normalize */ .pbdt-root .pbdt-cell, .pbdt-root .pbdt-cell *{ line-height:1.45; } /* ========================================================= PBDT Frontend CSS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Hotfix Patch v5 (2026-01-23) Paste at END of assets/frontend.css Fix: Remove extra blank space INSIDE .pbdt-head / .pbdt-head-inner so header container height matches the actual THEAD height. ========================================================= */ /* Some themes or previous rules can leave a min-height / fixed height / padding on the header wrappers. Force them to shrink-wrap the header table. */ .pbdt-head, .pbdt-head-inner{ height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; line-height:normal !important; } /* Ensure the header table itself participates normally in height calc */ .pbdt-table-head{ display:table !important; margin:0 !important; } /* If any pseudo element is creating space, disable it */ .pbdt-head::before, .pbdt-head::after, .pbdt-head-inner::before, .pbdt-head-inner::after{ content:none !important; } /* If the theme sets THEAD/TR/TH to block with extra height, normalize */ .pbdt-root thead, .pbdt-root thead tr{ height:auto !important; min-height:0 !important; } /* Last resort: clip any phantom overflow */ .pbdt-head-inner{ overflow:hidden !important; } /* Ensure header obeys column alignment just like body cells */ .pbdt-root .pbdt-table-head th.pbdt-align-left { text-align: left !important; } .pbdt-root .pbdt-table-head th.pbdt-align-center { text-align: center !important; } .pbdt-root .pbdt-table-head th.pbdt-align-right { text-align: right !important; } /* And keep header vertically centered */ .pbdt-root .pbdt-table-head th { vertical-align: middle !important; } /* --- Header alignment: keep label+arrow visually centered --- */ .pbdt-root .pbdt-th-inner{ display:inline-flex; align-items:center; gap:8px; max-width:100%; } .pbdt-root .pbdt-th-arrow{ margin-left:0 !important; } /* === Phase 1: Settings-driven styling (CSS variables) === */ .pbdt-root{ --pbdt-table-width: 100%; } /* The outer container element is .pbdt-table (shortcode wrapper). We apply width/max-width/shadow/radius/bg using CSS variables that JS sets on that container. */ .pbdt-table{ width: var(--pbdt-table-width, 100%); max-width: var(--pbdt-table-max-width, none); } .pbdt-table > .pbdt-root{ box-shadow: var(--pbdt-table-shadow, none); border-radius: var(--pbdt-radius, var(--pbdt-radius-lg)); background: var(--pbdt-table-bg, var(--pbdt-surface)); } /* Ensure table head/body inherit background radius */ .pbdt-table > .pbdt-root, .pbdt-table > .pbdt-root .pbdt-top{ background: var(--pbdt-table-bg, var(--pbdt-surface)); } /* cells */ .pbdt-root .pbdt-table-body td{ font-family: var(--pbdt-cell-font-family, inherit); font-size: var(--pbdt-cell-font-size, 14px); font-weight: var(--pbdt-cell-font-weight, 400); line-height: var(--pbdt-cell-line-height, 1.4); color: var(--pbdt-cell-color, inherit); text-align: var(--pbdt-cell-align, left); padding: var(--pbdt-cell-pad-t,10px) var(--pbdt-cell-pad-r,12px) var(--pbdt-cell-pad-b,10px) var(--pbdt-cell-pad-l,12px); min-height: var(--pbdt-row-minh, 0px); vertical-align: middle; } /* WYSIWYG/Text HTML content should not introduce extra spacing or top-alignment */ .pbdt-root .pbdt-table-body td .pbdt-cell p{ margin: 0; } /* rows (zebra + hover controlled by data attributes set by JS) */ .pbdt-root .pbdt-table-body tr td{ background: var(--pbdt-row-odd-bg, transparent); } .pbdt-root[data-zebra="1"] .pbdt-table-body tr:nth-child(even) td{ background: var(--pbdt-row-even-bg, var(--pbdt-row-odd-bg, transparent)); } .pbdt-root[data-hover="1"] .pbdt-table-body tbody tr:hover td{ background: var(--pbdt-row-hover-bg, rgba(37,99,235,.04)); } /* header */ .pbdt-root .pbdt-table-head th{ background: var(--pbdt-head-bg, rgba(0,0,0,0.06)); color: var(--pbdt-head-color, inherit); font-size: var(--pbdt-head-font-size, 14px); font-weight: var(--pbdt-head-font-weight, 600); text-align: var(--pbdt-head-align, center); padding: var(--pbdt-head-pad-t,12px) var(--pbdt-head-pad-r,12px) var(--pbdt-head-pad-b,12px) var(--pbdt-head-pad-l,12px); } /* Optional fixed header height (0 = auto) */ .pbdt-root[data-head-height]:not([data-head-height="0"]) .pbdt-table-head th{ height: var(--pbdt-head-height, auto); } /* borders (apply to BOTH head and body tables) */ .pbdt-root .pbdt-table-head th, .pbdt-root .pbdt-table-body td{ border-style: var(--pbdt-border-style, solid); border-width: 0; } /* all */ .pbdt-root[data-border-mode="all"] .pbdt-table-head th, .pbdt-root[data-border-mode="all"] .pbdt-table-body td{ border-width: var(--pbdt-border-width, 1px); border-color: var(--pbdt-row-border, rgba(0,0,0,0.12)); } /* rows */ .pbdt-root[data-border-mode="rows"] .pbdt-table-head th, .pbdt-root[data-border-mode="rows"] .pbdt-table-body td{ border-bottom-width: var(--pbdt-border-width, 1px); border-bottom-color: var(--pbdt-row-border, rgba(0,0,0,0.12)); } /* columns */ .pbdt-root[data-border-mode="columns"] .pbdt-table-head th, .pbdt-root[data-border-mode="columns"] .pbdt-table-body td{ border-right-width: var(--pbdt-border-width, 1px); border-right-color: var(--pbdt-col-border, rgba(0,0,0,0.12)); } /* popup vars (NOTE: modal is mounted in , so JS copies vars onto overlay) */ .pbdt-modal{ width: min(92vw, var(--pbdt-popup-w, 720px)); max-height: var(--pbdt-popup-maxh, 80vh); overflow:auto; background: var(--pbdt-popup-bg, #fff); color: var(--pbdt-popup-color, #000); padding: var(--pbdt-popup-pad-t,16px) var(--pbdt-popup-pad-r,16px) var(--pbdt-popup-pad-b,16px) var(--pbdt-popup-pad-l,16px); } /* Make the "Page X of Y" text follow Footer text color */ .pbdt-root .pbdt-footer .pbdt-page-info, .pbdt-root .pbdt-footer .pbdt-pagination-info, .pbdt-root .pbdt-footer .pbdt-pagination-status, .pbdt-root .pbdt-footer .pbdt-page-of { color: inherit !important; opacity: 1 !important; /* in case it's being muted */ } .pbdt-root .pbdt-filter-btn { display: inline-flex; align-items: center; gap: 10px; /* ← increase or decrease this */ } /* ========================================================= MOBILE LAYOUT ENHANCEMENTS (v14+) Controlled by table settings saved in _pbdt_settings. JS sets data-is-mobile + data-mobile-* attributes on .pbdt-root. ========================================================= */ /* Prevent background scroll when modal is open */ body.pbdt-modal-open{ overflow:hidden; } /* 1) Top header rearrangement: center + stack controls */ .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-filters{ justify-content:center !important; } .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-toolbar{ flex-direction:column !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; } .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-toolbar .pbdt-left, .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-toolbar .pbdt-right{ width:100% !important; justify-content:center !important; margin-left:0 !important; } .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-search, .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-filter-btn{ width:100% !important; max-width:520px !important; } /* Keep dropdown menus within viewport */ .pbdt-root[data-is-mobile="1"][data-mobile-stack="1"] .pbdt-filter-menu{ width:min(92vw, 420px) !important; } /* When enabled, dropdown menus are centered by JS; ensure they never exceed viewport */ .pbdt-root[data-is-mobile="1"][data-mobile-center-filtermenu="1"] .pbdt-filter-menu{ max-width:92vw !important; } /* 2) Footer sizing on mobile is controlled via per-table "Mobile Footer (Overrides)" settings in the backend. (JS applies CSS vars on .pbdt-root when on mobile.) */ /* 3) Full width popup on mobile */ .pbdt-root[data-is-mobile="1"][data-mobile-fullpopup="1"] ~ .pbdt-modal-overlay, .pbdt-modal-overlay[data-pbdt-mobile="1"]{ padding:0 !important; } /* Because the modal overlay is mounted in , we style it via body class + overlay vars. JS also adds body.pbdt-modal-open; we keep the modal usable on small screens. */ @media (max-width: 900px){ body.pbdt-modal-open .pbdt-modal-overlay{ padding:10px; } } @media (max-width: 720px){ body.pbdt-modal-open .pbdt-modal{ width:96vw; max-height:88vh; padding:18px 16px 16px; } } /* If the table requested full width popup, make it feel like a bottom sheet on small screens */ @media (max-width: 720px){ body.pbdt-modal-open .pbdt-modal-overlay[data-mobile-fullpopup="1"]{ align-items:flex-end; padding:0 !important; } body.pbdt-modal-open .pbdt-modal-overlay[data-mobile-fullpopup="1"] .pbdt-modal{ width:100vw; max-height:92vh; border-radius:16px 16px 0 0; padding:18px 16px 16px; } }