/* ZPortals - Premium Theme
Vertical-menu (new_theme chrome, premium skin), Unlimited-only portal theme.
Loads only when ZP_ACTIVE_THEME === 'premium' (enqueue is gated in
bootstrap/zp-plugin-hooks.php).
Scoped under .zp-theme-premium so it never affects new_theme pages.
--------------------------------------------------------------------- */
/* ---------- Design tokens (aligned with modern-portal-design-preview.html) ---------- */
.zp-theme-premium {
/* Brand */
--zp-color-primary: #0B2545; /* deep navy */
--zp-color-primary-hover: #14315A; /* primary-700 */
--zp-color-primary-50: #EEF2F8;
--zp-color-primary-foreground: #FFFFFF;
--zp-color-primary-rgb: 11, 37, 69;
--zp-color-accent: #2A6FF2; /* corporate blue */
--zp-color-accent-600: #1F58CC;
--zp-color-accent-50: #E8F0FE;
--zp-color-accent-rgb: 42, 111, 242;
--zp-color-teal: #0FB5A6;
--zp-color-teal-50: #E3F8F5;
/* Surface scale */
--zp-color-surface: #FFFFFF;
--zp-color-surface-2: #F9FAFC;
--zp-color-surface-3: #F1F4F9;
--zp-color-surface-muted: #EEF2F7; /* page background */
--zp-color-border: #E5E9F0;
--zp-color-border-strong: #D5DBE4;
/* Text scale (muted >= 4.5:1 on surface-muted; faint is decorative-only) */
--zp-color-text: #0B1B2B;
--zp-color-text-2: #3D4D63;
--zp-color-text-muted: #5A6A80;
--zp-color-text-soft: #97A2B3;
--zp-color-text-faint: #97A2B3; /* alias */
/* Status (each with -50 tint background and a -text shade that passes
WCAG AA on both white and the tint) */
--zp-color-success: #16A34A;
--zp-color-success-50: #E7F6EC;
--zp-color-success-text: #166534;
--zp-color-warning: #D97706;
--zp-color-warning-50: #FEF3DD;
--zp-color-warning-text: #92400E;
--zp-color-error: #DC2626;
--zp-color-error-50: #FCE8E8;
--zp-color-error-text: #B91C1C;
--zp-color-info: #0FB5A6; /* repurposed to teal */
--zp-color-info-50: #E3F8F5;
--zp-color-info-text: #0F766E;
/* Type - Inter, 14px base */
--zp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--zp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
--zp-font-size-xs: 11px;
--zp-font-size-sm: 12.5px;
--zp-font-size-base: 14px;
--zp-font-size-lg: 15px;
--zp-font-size-xl: 18px;
--zp-font-size-2xl: 22px;
--zp-font-size-3xl: 26px;
--zp-line-height-base: 1.5;
--zp-font-weight-medium: 500;
--zp-font-weight-semibold: 600;
--zp-font-weight-bold: 700;
/* Spacing (4px base) */
--zp-space-1: 4px;
--zp-space-2: 8px;
--zp-space-3: 12px;
--zp-space-4: 16px;
--zp-space-5: 20px;
--zp-space-6: 24px;
--zp-space-7: 28px;
--zp-space-8: 32px;
--zp-space-12: 48px;
/* Shape */
--zp-radius-sm: 8px;
--zp-radius-md: 12px;
--zp-radius-lg: 16px;
--zp-radius-pill: 999px;
/* Shadow (navy-tinted) */
--zp-shadow-sm: 0 1px 2px rgba(11, 27, 65, 0.04);
--zp-shadow-md: 0 1px 3px rgba(11, 27, 65, 0.06), 0 1px 2px rgba(11, 27, 65, 0.04);
--zp-shadow-lg: 0 10px 24px -8px rgba(11, 27, 65, 0.18), 0 4px 8px -4px rgba(11, 27, 65, 0.08);
/* Motion */
--zp-ease: cubic-bezier(.2, .7, .3, 1);
/* Layout */
--zp-content-max: 1440px;
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
font-family: var(--zp-font-family);
font-size: var(--zp-font-size-base);
line-height: var(--zp-line-height-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Full-bleed shell: the portal escapes the WP theme's content container and
spans the whole viewport, square-cornered. --zp-vp-left is measured by JS
in premium topbar.php (0px fallback for centered parents). */
/* Auth pages excluded: they carry .zp-theme-premium but never run the
topbar JS that measures --zp-vp-left, so the 100vw shell would shift them
right and clip under overflow-x:hidden. They keep the base width rules. */
.zp-page-wraper.zp-theme-premium:not(.zp-auth-page) {
width: 100vw !important;
max-width: 100vw !important;
min-height: 100vh;
margin-left: calc(-1 * var(--zp-vp-left, 0px)) !important;
margin-right: 0 !important;
border-radius: 0 !important;
}
html:has(.zp-page-wraper.zp-theme-premium),
body:has(.zp-page-wraper.zp-theme-premium) {
overflow-x: hidden;
}
/* ---------- Vertical sidebar + top bar (premium skin) ----------
The premium theme reuses new_theme's side_nav.php/topbar.php chrome
(vertical menu layout). Their colors are driven by the --menu_* /
--topbar_* custom properties, which style.php remaps to premium
tokens on the wrapper. Rules here are structural polish only. As of
6.4.1 this sheet is printed immediately AFTER new_theme/common/style.css
(commonQuery.php), so equal-specificity rules win by order; !important
remains on some rules for higher-specificity base selectors. */
/* Light-rail chrome: white sidebar with dark text and hairline borders
under the navy top band; the active item keeps the glowing accent pill. */
.zp-page-wraper.zp-theme-premium .zp-side-nav {
background-color: #FFFFFF !important;
background-image: none !important;
border-right: 1px solid var(--zp-color-border) !important;
}
/* Header height matches the 64px top bar exactly so the band/rail seam is
one aligned hairline (36px avatar + 13+13 padding + 1px border = 64). */
.zp-page-wraper.zp-theme-premium .zp-sidebar-header {
border-bottom: 1px solid var(--zp-color-border) !important;
height: 64px;
box-sizing: border-box;
padding: 13px 16px !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-portal-name {
color: var(--zp-color-text) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav {
scrollbar-width: thin;
scrollbar-color: var(--zp-color-border-strong) transparent;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-portal-avatar:not(.zp-sidebar-portal-avatar-img) {
background-color: transparent !important;
background-image: linear-gradient(135deg, var(--zp-color-primary-hover), var(--zp-color-accent)) !important;
color: #FFFFFF !important;
border-radius: var(--zp-radius-sm) !important;
font-family: var(--zp-font-family) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-portal-avatar-img {
background: none !important;
border-radius: var(--zp-radius-sm) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-portal-name {
font-family: var(--zp-font-family);
font-weight: var(--zp-font-weight-semibold);
letter-spacing: -0.01em;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item > a {
border-radius: var(--zp-radius-sm);
margin: 3px 12px;
transition: background-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item > a:hover {
border-color: transparent;
}
/* Active item: gradient pill with an accent glow; replaces the left bar.
Managed menus mark actives three ways (li.active-menu for direct items,
a.active-menu-a for dropdown parents, li.active-menu inside .zp-childmenu
for children) - cover all of them. */
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav a.active-menu-a,
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-menu-item.active-menu > a {
background: linear-gradient(135deg, var(--zp-color-accent), var(--zp-color-accent-600)) !important;
box-shadow: 0 2px 8px rgba(var(--zp-color-accent-rgb), 0.28);
border-radius: var(--zp-radius-sm);
border-color: transparent !important;
}
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a::before {
display: none !important;
}
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a .zp-menu-lable,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav a.active-menu-a .zp-menu-lable,
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-menu-item.active-menu > a .zp-menu-lable,
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a .zp-sb-menu-lable {
color: var(--zpp-active-pill-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a i::before,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav a.active-menu-a i::before,
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-menu-item.active-menu > a i::before {
color: var(--zpp-active-pill-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a svg path,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav a.active-menu-a svg path,
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-menu-item.active-menu > a svg path,
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a svg .ccgp-menu-i,
.zp-page-wraper.zp-theme-premium .zp-menu-item.active-menu > a svg .menuIconColor {
fill: var(--zpp-active-pill-fg, #FFFFFF) !important;
stroke: var(--zpp-active-pill-fg, #FFFFFF) !important;
}
/* Menu icon normalization + submenu indent guide */
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item svg,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item i.zp-menu-icon {
width: 18px !important;
min-width: 18px;
font-size: 15px !important;
opacity: 0.92;
}
/* Base dims icon glyphs/fills separately for the dark rail; on white they
wash out - lift them back up. */
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item i::before,
.zp-page-wraper.zp-theme-premium .zp-sidebar-nav .zp-menu-item svg path {
opacity: 0.8;
}
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-submenu-item-list {
border-left: 1px solid rgba(11, 27, 43, 0.12);
margin-left: 28px;
padding-left: 8px;
}
.zp-page-wraper.zp-theme-premium .zp-childmenu .zp-menu-item > a {
margin: 1px 12px 1px 0;
padding-left: 12px !important;
}
/* Rail section labels: the base 45%-opacity treatment vanishes on white */
.zp-page-wraper.zp-theme-premium .zp-nav-section-label {
color: var(--zp-color-text-soft) !important;
opacity: 1 !important;
padding: 16px 24px 4px !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-user-card {
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-sm) !important;
}
/* Only remaining action is Change Password - the base :last-child red
danger hover is a leftover from when logout lived here */
.zp-page-wraper.zp-theme-premium .zp-sidebar-user-actions a:last-child:hover {
color: var(--zp-color-text) !important;
background-color: var(--zp-color-surface-3) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-user-name {
color: var(--zp-color-text) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-user-email {
color: var(--zp-color-text-muted) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-user-avatar {
background-image: linear-gradient(135deg, var(--zp-color-primary-hover), var(--zp-color-accent)) !important;
color: #FFFFFF !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-logout-btn {
border-radius: var(--zp-radius-sm) !important;
transition: background-color 0.15s var(--zp-ease);
color: var(--zp-color-error-text) !important;
border-color: rgba(220, 38, 38, 0.30) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-logout-btn:hover {
background: var(--zp-color-error-50) !important;
color: var(--zp-color-error-text) !important;
}
/* Drawer close button is drawer-only; the base sheet runs the drawer up to
1000px, so match that or the close control vanishes on tablet portrait. */
@media (min-width: 1001px) {
.zp-page-wraper.zp-theme-premium .zp-sidebar-close { display: none !important; }
}
/* ---------- Record details: responsive field grid + subform table ---------- */
/* Field sections lay out in a responsive multi-column grid. This applies to
BOTH admin layout types: single-content sections and two-column sections
(left/right stack full-width in DOM order, their fields flowing into the
grid), so subforms are never crushed into a half-width column. Subforms,
textareas, and read-more rich text span all columns. */
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-section-content > .zp-left-section,
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-section-content > .zp-right-section {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 4px 24px;
align-items: start;
float: none !important;
width: 100% !important;
}
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-section-content > :is(.zp-left-section, .zp-right-section) > .zp-field-details-section {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) :is(.zp-left-section, .zp-right-section) > .zp-field-details-section:is(.zp-datatype-subform, .zp-datatype-static_subform, .zp-datatype-textarea),
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) :is(.zp-left-section, .zp-right-section) > .zp-field-details-section:has(.zp-subform-record-list),
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) :is(.zp-left-section, .zp-right-section) > .zp-field-details-section:has(.fulldetails) {
grid-column: 1 / -1;
}
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-field-details-section:is(.zp-datatype-subform, .zp-datatype-static_subform) {
overflow-x: auto;
}
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-section-content > .zp-right-section:not(:has(.zp-field-details-section)) {
display: none !important;
}
/* Subform display table: proper bordered card-table instead of the raw grid */
.zp-theme-premium table.zp-subform-record-list {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
overflow: hidden;
}
.zp-theme-premium .zp-subform-record-list thead th {
background: var(--zp-color-surface-2);
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
padding: 8px 12px;
border-bottom: 1px solid var(--zp-color-border);
}
.zp-theme-premium .zp-subform-record-list tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--zp-color-border);
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
vertical-align: top;
background: var(--zp-color-surface);
}
.zp-theme-premium .zp-subform-record-list tbody tr:last-child td {
border-bottom: 0;
}
.zp-theme-premium .zp-subform-record-list thead th {
white-space: nowrap;
}
/* Title-less section headers (edit button only): no divider, no dead height */
.zp-theme-premium .zp-record-details .zp-section-header-container:not(:has(.section-header-text)) {
border-bottom: 0 !important;
padding-bottom: 0 !important;
margin-bottom: var(--zp-space-2) !important;
justify-content: flex-end !important;
min-height: 0 !important;
}
/* Custom page buttons (Survey etc.): proper right-aligned ghost-button row */
.zp-theme-premium .zp-page-content .zp-custom-btn-top-right,
.zp-theme-premium .zp-page-content .zp-custom-btn-top-left {
display: flex;
gap: var(--zp-space-2);
justify-content: flex-end;
margin: 0 0 var(--zp-space-3);
}
.zp-theme-premium .zp-page-content .zp-custom-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px !important;
background: var(--zp-color-surface) !important;
color: var(--zp-color-text-2) !important;
border: 1px solid var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-sm) !important;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
text-decoration: none !important;
line-height: 34px;
}
.zp-theme-premium .zp-page-content .zp-custom-btn:hover {
background: var(--zp-color-surface-2) !important;
color: var(--zp-color-text) !important;
}
/* ---------- Add/Edit surface: ZPModal chrome, form controls, subform editor ----------
The add/edit modal is ZPModal (appended inside .zp-page-wraper, so premium
tokens apply), NOT colorbox - colorbox is only the lookup picker and the
date-filter modal. */
.zp-page-wraper.zp-theme-premium .zp-modal-layer {
background: rgba(11, 27, 43, 0.55) !important;
}
.zp-page-wraper.zp-theme-premium .zp-modal-content {
border-radius: var(--zp-radius-lg) !important;
box-shadow: var(--zp-shadow-lg) !important;
background: var(--zp-color-surface) !important;
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
}
.zp-page-wraper.zp-theme-premium .zp-modal-header {
padding: var(--zp-space-4) var(--zp-space-6) !important;
border-bottom: 1px solid var(--zp-color-border) !important;
flex-shrink: 0;
}
.zp-page-wraper.zp-theme-premium .zp-modal-header-text {
font-size: var(--zp-font-size-lg) !important;
font-weight: var(--zp-font-weight-semibold) !important;
color: var(--zp-color-text) !important;
}
.zp-page-wraper.zp-theme-premium .zp-modal-body-content {
padding: var(--zp-space-4) var(--zp-space-6) var(--zp-space-6) !important;
overflow-y: auto;
flex: 1;
}
/* Base ZPModal duplicates the header text into the footer; nothing else
lives there (form actions are inside the body) - drop it. */
.zp-page-wraper.zp-theme-premium .zp-modal-footer {
display: none !important;
}
.zp-page-wraper.zp-theme-premium .zp-modal-close-button {
width: 32px;
height: 32px;
border-radius: var(--zp-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--zp-color-text-muted) !important;
cursor: pointer;
transition: background-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-modal-close-button:hover {
background: var(--zp-color-surface-2);
color: var(--zp-color-text) !important;
}
/* Form controls: one consistent field treatment on page and in the modal */
.zp-theme-premium .zp-record-add-edit-form input[type="text"],
.zp-theme-premium .zp-record-add-edit-form input[type="email"],
.zp-theme-premium .zp-record-add-edit-form input[type="tel"],
.zp-theme-premium .zp-record-add-edit-form input[type="number"],
.zp-theme-premium .zp-record-add-edit-form input[type="url"],
.zp-theme-premium .zp-record-add-edit-form input[type="date"],
.zp-theme-premium .zp-record-add-edit-form select,
.zp-theme-premium .zp-record-add-edit-form textarea {
min-height: 40px;
border: 1px solid var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-sm) !important;
background: var(--zp-color-surface) !important;
color: var(--zp-color-text) !important;
padding: 0 12px !important;
font-size: var(--zp-font-size-base);
box-sizing: border-box;
}
.zp-theme-premium .zp-record-add-edit-form textarea {
min-height: 84px;
padding: 10px 12px !important;
}
.zp-theme-premium .zp-asterisk {
color: var(--zp-color-error) !important;
}
.zp-theme-premium .zp-field-edit-container {
border: 0 !important;
padding: 0 !important;
}
/* Form footer: right-aligned actions with a real primary button */
.zp-theme-premium .zp-record-add-edit-form .zp-btn-section {
display: flex !important;
justify-content: flex-end;
align-items: center;
gap: var(--zp-space-2);
border-top: 1px solid var(--zp-color-border);
margin-top: var(--zp-space-6) !important;
padding: var(--zp-space-4) 0 0 !important;
float: none !important;
width: 100% !important;
}
.zp-theme-premium input.zp-submit-btn,
.zp-theme-premium .zp-submit-btn {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 0 !important;
border-radius: var(--zp-radius-sm) !important;
height: 38px !important;
padding: 0 18px !important;
font-size: var(--zp-font-size-base) !important;
font-weight: var(--zp-font-weight-medium) !important;
line-height: 38px !important;
cursor: pointer;
}
.zp-theme-premium input.zp-submit-btn:hover,
.zp-theme-premium .zp-submit-btn:hover {
background: var(--zp-color-primary-hover) !important;
color: var(--zp-color-primary-foreground) !important;
}
.zp-theme-premium .zp-edit-cancel-btn {
background: var(--zp-color-surface) !important;
color: var(--zp-color-text-2) !important;
border: 1px solid var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-sm) !important;
height: 38px !important;
padding: 0 16px !important;
line-height: 36px !important;
font-size: var(--zp-font-size-base) !important;
font-weight: var(--zp-font-weight-medium) !important;
text-decoration: none !important;
}
.zp-theme-premium .zp-edit-cancel-btn:hover {
background: var(--zp-color-surface-2) !important;
color: var(--zp-color-text) !important;
}
/* Lookup fields: clear button anchored inside the input, not dangling below */
.zp-theme-premium .zp-lookup-input-group {
position: relative;
}
.zp-theme-premium .zp-lookup-input-group .zp-show-related-records {
padding-right: 36px !important;
}
.zp-theme-premium .zp-lookup-input-group .remove-input {
position: absolute !important;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: var(--zp-radius-pill);
display: inline-flex !important;
align-items: center;
justify-content: center;
color: var(--zp-color-text-muted) !important;
background: transparent;
font-size: 12px;
transition: background-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-lookup-input-group .remove-input:hover {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text) !important;
}
/* Subform editor: card table with usable inputs and clear row actions */
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td {
min-width: 150px;
vertical-align: middle;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td input,
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td select {
min-height: 36px;
width: 100%;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list .zp_subform_last_child {
min-width: 84px;
white-space: nowrap;
}
.zp-theme-premium .zp-add-subform-row,
.zp-theme-premium .zp-remove-subform-row {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--zp-radius-sm);
color: var(--zp-color-text-muted) !important;
background: var(--zp-color-surface-2);
cursor: pointer;
transition: background-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-add-subform-row:hover {
background: var(--zp-color-accent-50);
color: var(--zp-color-accent-600) !important;
}
.zp-theme-premium .zp-remove-subform-row:hover {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text) !important;
}
/* Header cells must match the body's min-width or the columns desync */
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list th {
min-width: 150px;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list th.zp-subform-action-th,
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td.zp_subform_last_child {
min-width: 84px;
}
/* Lookup / linked-record values must read as links, not ghosts */
.zp-theme-premium .zp-field-data a,
.zp-theme-premium .zp-field-data .record-detail-link {
color: var(--zp-color-accent-600) !important;
font-weight: var(--zp-font-weight-medium);
opacity: 1 !important;
text-decoration: none;
}
.zp-theme-premium .zp-field-data a:hover {
text-decoration: underline;
}
/* Section edit pencil: force the stroke so the button never renders empty */
.zp-theme-premium .zp-record-details .section-header-right a svg,
.zp-theme-premium .zp-record-details .section-header-right a svg path {
stroke: var(--zp-color-text-2) !important;
fill: none !important;
opacity: 1 !important;
}
/* Layout guard: section content always spans its card */
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-section-content {
width: 100% !important;
}
/* Attachments: neutral premium surface instead of the legacy cream hero.
The cream background + 40/175px padding live on the CHILD title element
(.section-upload-document-header-title), not the header wrapper - reset
them there or the full-size beige plate survives above the dropzone. */
.zp-theme-premium .section-attachment-container,
.zp-theme-premium .zp-upload-document-header {
background: transparent !important;
}
.zp-theme-premium .section-upload-document-header-title,
.zp-theme-premium .zp-upload-document-header .section-upload-document-header-title {
background: transparent !important;
padding: 0 0 var(--zp-space-2) !important;
border-radius: 0 !important;
text-align: left !important;
font-size: var(--zp-font-size-sm) !important;
font-weight: var(--zp-font-weight-semibold) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--zp-color-text-muted) !important;
}
.zp-theme-premium form.zp-dropzone {
background: var(--zp-color-surface-2) !important;
border: 1px dashed var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-md) !important;
box-shadow: none !important;
padding: var(--zp-space-6) !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
}
.zp-theme-premium form.zp-dropzone:hover {
border-color: var(--zp-color-accent) !important;
background: rgba(var(--zp-color-accent-rgb), 0.04) !important;
}
/* List density: the toolbar chip ("ALL X / count") duplicates the premium
section header (kicker + title), and DataTables' info line already shows
the count - drop it. Rows tighten to enterprise density. */
.zp-theme-premium .zp-list-toolbar { display: none !important; }
.zp-theme-premium .zp-records-list tbody td {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.zp-theme-premium .zp-records-list tbody td .field_value { line-height: 1.45; }
/* Row action links (Details / Edit / Delete) render as compact aligned
actions instead of free-floating glyphs. */
.zp-theme-premium .zp-table tbody td .zp-edit-icon,
.zp-theme-premium .zp-table tbody td .zp-delete-icon,
.zp-theme-premium .zp-table tbody td .zp-detail-icon {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
}
.zp-theme-premium .zp-table tbody td .zp-edit-icon svg,
.zp-theme-premium .zp-table tbody td .zp-delete-icon svg,
.zp-theme-premium .zp-table tbody td .zp-detail-icon svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Navy top band over the light rail: primary surface, hairline bottom
edge, light-on-dark breadcrumb and controls. Sticky so the header
travels with long pages like the sidebar does. */
.zp-page-wraper.zp-theme-premium .zp-top-bar {
height: 64px !important;
padding: 0 var(--zp-space-8) !important;
border-bottom: 1px solid rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.10) !important;
box-shadow: none;
position: sticky;
top: 0;
z-index: 90;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-mid {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.65) !important;
text-decoration: none;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-mid:hover {
color: var(--zpp-chrome-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-side-nav-toggle {
color: var(--zpp-chrome-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-home {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.65) !important;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-sep {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.35) !important;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-current {
color: var(--zpp-chrome-fg, #FFFFFF) !important;
font-weight: var(--zp-font-weight-semibold);
letter-spacing: -0.01em;
}
.zp-page-wraper.zp-theme-premium .zp-breadcrumb-record {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.70) !important;
}
/* The container is the visual pill; the input inside is chromeless (the old
arrangement drew a pill inside a box with text hitting the curve). */
.zp-page-wraper.zp-theme-premium .zp-topbar-search-form {
background: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.10) !important;
border: 1px solid rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.18) !important;
border-radius: var(--zp-radius-pill) !important;
width: 260px;
height: 38px;
transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-topbar-search-form:focus-within {
border-color: var(--zp-color-accent) !important;
box-shadow: 0 0 0 3px rgba(var(--zp-color-accent-rgb), 0.25) !important;
}
.zp-page-wraper.zp-theme-premium .zp-topbar-search-form input {
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: var(--zpp-chrome-fg, #FFFFFF) !important;
font-family: var(--zp-font-family);
font-size: var(--zp-font-size-sm);
padding: 0 4px !important;
}
.zp-page-wraper.zp-theme-premium .zp-topbar-search-form input::placeholder {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.55) !important;
}
.zp-page-wraper.zp-theme-premium .zp-topbar-search-icon,
.zp-page-wraper.zp-theme-premium .js-clr-srch {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.60) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-info {
border: 1px solid rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.18) !important;
border-radius: var(--zp-radius-pill) !important;
transition: background-color 0.15s var(--zp-ease);
padding: 4px 12px 4px 4px !important;
height: 38px;
box-sizing: border-box;
}
.zp-page-wraper.zp-theme-premium .zp-profile-info:hover {
background: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.10) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-pill-avatar {
background-image: linear-gradient(135deg, var(--zp-color-accent), var(--zp-color-accent-600)) !important;
color: var(--zpp-active-pill-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-pill-name {
color: var(--zpp-chrome-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-pill-caret {
color: rgba(var(--zpp-chrome-fg-rgb, 255, 255, 255), 0.60) !important;
}
@keyframes zppMenuIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu {
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-md) !important;
box-shadow: var(--zp-shadow-lg) !important;
font-family: var(--zp-font-family);
animation: zppMenuIn 0.16s var(--zp-ease);
padding: var(--zp-space-4) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-pc-user-name {
color: var(--zp-color-text) !important;
font-size: var(--zp-font-size-base) !important;
font-weight: var(--zp-font-weight-semibold) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-pc-user-email {
color: var(--zp-color-text-muted) !important;
font-size: var(--zp-font-size-sm) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-menu-options {
border-top: 1px solid var(--zp-color-border);
margin-top: var(--zp-space-3);
padding-top: var(--zp-space-2);
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-menu-options a {
color: var(--zp-color-text-2) !important;
border-radius: var(--zp-radius-sm) !important;
padding: 8px 10px !important;
transition: background-color 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-menu-options a:hover {
background: var(--zp-color-surface-2) !important;
}
.zp-page-wraper.zp-theme-premium .zp-profile-menu .zp-logout-button {
color: var(--zp-color-error-text) !important;
}
/* Submenu chevron rotates with open state (script.js swaps the classes) */
.zp-page-wraper.zp-theme-premium .zp-childmenu-toggle .zp-childmenu-toggle-icon {
transition: transform 0.18s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-childmenu-toggle.show-child-dropdown .zp-childmenu-toggle-icon {
transform: rotate(-90deg);
}
/* Account switcher: premium panel surface, capped height with scroll */
.zp-page-wraper.zp-theme-premium .zp-child-account-section {
background: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-sm) !important;
box-shadow: var(--zp-shadow-md) !important;
}
.zp-page-wraper.zp-theme-premium .zp-child-account-item {
color: var(--zp-color-text-2) !important;
}
.zp-page-wraper.zp-theme-premium .zp-child-account-item:hover {
background: var(--zp-color-surface-2) !important;
}
/* Scoped to the interactive trigger; the static header label variant stays
a plain muted sub-line. */
.zp-page-wraper.zp-theme-premium .zp-child-account-curent.zp-show-child-account-js {
color: var(--zp-color-text-2) !important;
background: var(--zp-color-surface-2) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-sm) !important;
margin: 8px 12px !important;
transition: background-color 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-child-account-curent.zp-show-child-account-js:hover,
.zp-page-wraper.zp-theme-premium .zp-child-account-curent.zp-child-account-open {
background: var(--zp-color-surface-3) !important;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-header .zp-child-account-curent {
background: transparent !important;
border: 0 !important;
color: var(--zp-color-text-muted) !important;
}
.zp-page-wraper.zp-theme-premium .zp-child-account-item.active-child-account,
.zp-page-wraper.zp-theme-premium .zp-child-account-item.active-chld-menu {
background: var(--zp-color-accent-50) !important;
color: var(--zp-color-accent-600) !important;
}
.zp-page-wraper.zp-theme-premium .zp-child-account-item-list {
max-height: min(40vh, 320px);
overflow-y: auto;
}
/* Mobile drawer: slide + fade + scroll lock */
@keyframes zppDrawerIn {
from { transform: translateX(-100%); }
to { transform: none; }
}
@keyframes zppFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 768px) {
body.zp-nav-open .zp-page-wraper.zp-theme-premium .zp-side-nav {
animation: zppDrawerIn 0.25s var(--zp-ease);
box-shadow: var(--zp-shadow-lg) !important;
}
body.zp-nav-open #zp-nav-overlay {
animation: zppFadeIn 0.2s var(--zp-ease);
}
body.zp-nav-open {
overflow: hidden;
}
.zp-page-wraper.zp-theme-premium .zp-sidebar-close:hover {
background: var(--zp-color-surface-3) !important;
color: var(--zp-color-text) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.zp-page-wraper.zp-theme-premium *,
.zp-page-wraper.zp-theme-premium *::before,
.zp-page-wraper.zp-theme-premium *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ---------- Keyboard focus (new_theme strips outlines; restore them) ---------- */
.zp-theme-premium :is(a, button, select, [role="button"], [tabindex="0"],
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"]):focus-visible {
outline: 2px solid var(--zp-color-accent-600) !important;
outline-offset: 2px;
}
.zp-theme-premium .zp-side-nav :is(a, button, [role="button"], [tabindex="0"]):focus-visible {
outline-color: var(--menu_active_fc, #FFFFFF) !important;
outline-offset: -2px;
}
.zp-theme-premium input:not([type="checkbox"]):not([type="radio"]):focus,
.zp-theme-premium select:focus,
.zp-theme-premium textarea:focus {
border-color: var(--zp-color-accent-600) !important;
}
/* ---------- Typography: premium font everywhere inside the wrapper ----------
new_theme/common/style.css hardcodes "Plus Jakarta Sans" on ~140 element-level
selectors, mostly WITHOUT fallback stacks - and premium does not load that
font, so anything those rules touch would fall back to the browser's default
serif. A wrapper-wide reset (icons excluded so Font Awesome keeps its glyph
font) makes Inter the single source of truth regardless of what the base
stylesheet declares. */
.zp-page-wraper.zp-theme-premium,
.zp-page-wraper.zp-theme-premium *:not(i):not(svg):not(path):not([class*="fa-"]) {
font-family: var(--zp-font-family) !important;
}
.zp-page-wraper.zp-theme-premium :is(pre, code, kbd, samp) {
font-family: var(--zp-font-mono) !important;
}
.zp-theme-premium .zp-records-list td .field_value {
font-size: var(--zp-font-size-sm) !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-list-page .zp-record-list-section .zp-list-page-kicker {
font-size: 11px;
font-weight: var(--zp-font-weight-bold);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--zp-color-text-muted);
margin: 0 0 4px 0;
}
.zp-page-wraper.zp-theme-premium .zp-record-list-page .zp-record-list-section .section-header-title {
font-size: 22px;
font-weight: var(--zp-font-weight-bold);
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--zp-color-text);
margin: 0;
}
/* profile image card: vertical identity card layout */
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: var(--zp-space-3) !important;
padding: var(--zp-space-8) var(--zp-space-6) !important;
margin: 0 !important;
background: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-md) !important;
box-shadow: var(--zp-shadow-sm) !important;
}
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card .zp-profile-image-wrapper {
width: 72px !important;
height: 72px !important;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow:
0 0 0 3px #fff,
0 0 0 4px rgba(var(--zp-color-accent-rgb), 0.2),
0 4px 16px rgba(var(--zp-color-accent-rgb), 0.30);
}
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card .zp-profile-image-large {
width: 100%;
height: 100%;
object-fit: cover;
}
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card .zp-profile-image-info {
width: 100%;
text-align: center;
}
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card .zp-profile-image-name {
font-size: 18px !important;
font-weight: var(--zp-font-weight-bold) !important;
letter-spacing: -0.01em;
color: var(--zp-color-text) !important;
margin: 0 0 var(--zp-space-1) !important;
line-height: 1.25;
}
.zp-page-wraper.zp-theme-premium .zp-page-content > .zp-profile-image-card .zp-profile-image-email {
font-size: var(--zp-font-size-sm) !important;
color: var(--zp-color-text-muted) !important;
margin: 0 !important;
word-break: break-word;
}
.zp-page-wraper.zp-theme-premium .zp-records-list tbody tr,
.zp-page-wraper.zp-theme-premium .zp-records-list tbody tr:nth-child(even),
.zp-page-wraper.zp-theme-premium .zp-records-list tbody tr:nth-child(odd) {
background-color: transparent !important;
}
.zp-page-wraper.zp-theme-premium .zp-records-list tbody tr:hover {
background-color: var(--zp-color-surface-muted) !important;
}
.zp-page-wraper.zp-theme-premium .zp-btn,
.zp-page-wraper.zp-theme-premium .zp-crm-record-view-btn {
height: 32px !important;
padding: 0 var(--zp-space-3) !important;
border-radius: var(--zp-radius-sm) !important;
font-size: var(--zp-font-size-sm) !important;
line-height: 32px !important;
}
.zp-page-wraper.zp-theme-premium .zp-list-toolbar {
border-bottom: 0 !important;
padding: var(--zp-space-3) 0 !important;
}
.zp-page-wraper.zp-theme-premium .zp-list-chip {
padding: var(--zp-space-2) var(--zp-space-3) !important;
border-radius: var(--zp-radius-pill) !important;
}
/* match element-specific specificity from style.css */
.zp-page-wraper.zp-theme-premium .zp-element-text-block .zp-element-header,
.zp-page-wraper.zp-theme-premium .zp-element-banner .zp-element-header,
.zp-page-wraper.zp-theme-premium .zp-element-video .zp-element-header,
.zp-page-wraper.zp-theme-premium .zp-element-quicklink .zp-element-header,
.zp-page-wraper.zp-theme-premium .zp-element-iframe .zp-element-header,
.zp-page-wraper.zp-theme-premium .zp-element-account-manager .zp-element-header {
padding: var(--zp-space-3) var(--zp-space-4) !important;
border-bottom: 1px solid var(--zp-color-border) !important;
background: var(--zp-color-surface) !important;
min-height: 48px !important;
}
/* record-details: boxed-value pattern, label above + surface-2 container */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section {
padding: 0 !important;
border-bottom: 0 !important;
margin-bottom: var(--zp-space-4) !important;
}
.zp-page-wraper.zp-theme-premium .zp-field-label {
display: block !important;
font-size: 11.5px !important;
font-weight: var(--zp-font-weight-semibold) !important;
color: var(--zp-color-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-bottom: 6px !important;
padding: 0 !important;
}
/* Quiet key-value rows: values sit on the surface with a hairline divider.
Editable fields regain the box on hover/focus - the box IS the "this
becomes an input" affordance. Border stays 1px in both states (transparent
except the divider) so nothing shifts. */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data {
background: transparent;
border: 1px solid transparent;
border-bottom-color: var(--zp-color-border);
border-radius: var(--zp-radius-sm) var(--zp-radius-sm) 0 0;
padding: 10px 12px 10px 2px;
min-height: 40px;
display: flex;
align-items: center;
font-size: var(--zp-font-size-base);
color: var(--zp-color-text);
font-weight: var(--zp-font-weight-medium);
transition: background-color 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease), padding 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data.zp-inline-edit:hover,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data.zp-inline-edit:focus-within {
background: var(--zp-color-surface-2);
border-color: var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding-left: 12px;
cursor: pointer;
}
/* Long-form values keep the boxed container */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section.zp-datatype-textarea .zp-field-data,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data:has(.fulldetails) {
background: var(--zp-color-surface-2);
border-color: var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: 10px 12px;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data > pre {
margin: 0;
background: transparent !important;
border: 0 !important;
padding: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
word-break: break-word;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data .inline-edit-container,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="text"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="email"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="tel"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="number"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="url"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="date"],
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data textarea,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data select {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
width: 100%;
}
/* Inline edit: .inline-edit-container is a SIBLING of .zp-field-data (base
toggles them with .d-none), so the rules above never reach it. */
/* The flex rule on .zp-field-data above out-specifies base .d-none and kept
the read-only value visible under the editor; hidden must stay hidden. */
.zp-theme-premium .d-none {
display: none !important;
}
/* Editing state: drop the legacy navy border-left indicator (remapped to the
primary color under premium it reads as a paint artifact), use a quiet
surface tint instead. */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section.inline-enable {
border-left: 0;
background: var(--zp-color-surface-2);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-2) !important;
}
.zp-theme-premium .inline-edit-container {
display: flex;
align-items: center;
gap: var(--zp-space-2);
margin-top: 0;
}
.zp-theme-premium .inline-edit-container.d-none {
display: none !important;
}
.zp-theme-premium .inline-edit-container .zp-input-field:not(.select2-hidden-accessible) {
flex: 1 1 auto;
width: auto;
min-width: 0;
float: none;
min-height: 38px;
border: 1px solid var(--zp-color-border-strong);
border-radius: var(--zp-radius-sm);
padding: 0 12px;
background: var(--zp-color-surface);
}
.zp-theme-premium .inline-edit-container textarea.zp-input-field {
padding: 8px 12px;
}
.zp-theme-premium .inline-edit-container > .clr { display: none; }
/* Confirm/cancel: bare icon buttons side by side, not 52px global buttons
wrapping out of the legacy 60px float. */
.zp-theme-premium .inline-edit-container .zp-inline-edit-ac-section {
width: auto;
float: none;
display: flex;
align-items: center;
gap: var(--zp-space-1);
flex-shrink: 0;
}
.zp-theme-premium .inline-edit-container .zp-inline-edit-ac-section button {
width: 28px;
height: 28px;
min-width: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* checkbox: render as toggle-row. Knob is bg-image since pseudo-elements don't apply to */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section:has(.zp-field-data input[type="checkbox"]) {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: var(--zp-space-4);
padding: 14px 16px !important;
background: var(--zp-color-surface-2) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-sm) !important;
width: 100% !important;
float: none !important;
margin: 0 0 var(--zp-space-3) 0 !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section:has(.zp-field-data input[type="checkbox"]) .zp-field-label {
font-size: 13.5px !important;
font-weight: var(--zp-font-weight-medium) !important;
color: var(--zp-color-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
flex: 1;
min-width: 0;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-details-section:has(.zp-field-data input[type="checkbox"]) .zp-field-data {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
min-height: 0 !important;
width: auto !important;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 22px;
background-color: var(--zp-color-border-strong);
background-image: radial-gradient(circle, #fff 8px, transparent 9px);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 22px 22px;
border: 0 !important;
border-radius: 999px !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0;
opacity: 1 !important;
transition: background-color 0.18s var(--zp-ease), background-position 0.18s var(--zp-ease);
box-shadow: 0 1px 2px rgba(0,0,0,0.08) inset, 0 1px 1px rgba(0,0,0,0.06) !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="checkbox"]:checked {
background-color: var(--zp-color-accent);
background-position: 18px 50%;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data input[type="checkbox"]:disabled {
cursor: not-allowed;
}
/* .zp-pd-empty-value set by topbar.php JS replacing "-" with "Not provided" */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-field-data.zp-pd-empty-value {
color: var(--zp-color-text-muted) !important;
font-style: italic;
font-weight: var(--zp-font-weight-medium);
}
/* override legacy float-based section layout — full-width cards */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-section-row,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-section-row.zp-sec-width-half,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-section-row.zp-sec-width-full,
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-section-row.zp-normal-section {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important;
margin: 0 0 var(--zp-space-6) 0 !important;
padding: var(--zp-space-6) !important;
background: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-md) !important;
box-shadow: var(--zp-shadow-sm) !important;
}
/* Section header strip (title + edit button) as a top bar inside the card. */
.zp-page-wraper.zp-theme-premium .zp-record-details .zp-section-header-container {
width: 100% !important;
margin: 0 0 var(--zp-space-4) 0 !important;
padding: 0 0 var(--zp-space-3) 0 !important;
border-bottom: 1px solid var(--zp-color-border) !important;
display: flex !important;
align-items: center !important;
gap: var(--zp-space-3) !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-text {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
gap: var(--zp-space-2) !important;
float: none !important;
width: auto !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-title {
float: none !important;
width: auto !important;
font-size: var(--zp-font-size-base) !important;
font-weight: var(--zp-font-weight-semibold) !important;
color: var(--zp-color-text) !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right {
margin-left: auto !important;
flex: 0 0 auto !important;
width: auto !important;
float: none !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right .zp-edit-icon,
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right a {
float: none !important;
margin: 0 !important;
width: 32px;
height: 32px;
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-2) !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s var(--zp-ease);
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right a svg {
width: 18px;
height: 18px;
stroke: currentColor;
/* new_theme decorates this same SVG (5px padding, white bg, shadow); the
padding survived the size override and shrank the glyph to ~6px. */
padding: 0 !important;
margin-right: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right .zp-edit-icon:hover {
background: var(--zp-color-accent-50);
color: var(--zp-color-accent);
}
.zp-page-wraper.zp-theme-premium .zp-record-details .section-header-right svg {
width: 16px;
height: 16px;
}
/* (Legacy 1fr/1fr section grid removed - it defeated the responsive
auto-fill field grid defined in the record-details section above.) */
/* ====================================================================
Integration polish #1 - Dashboard
==================================================================== */
/* Content sits centered on the muted canvas at a readable measure instead of
new_theme's edge-to-edge sprawl - the main silhouette difference below the
chrome. */
.zp-theme-premium .zp-page-content {
width: 100%;
max-width: var(--zp-content-max);
margin-left: auto !important;
margin-right: auto !important;
padding: var(--zp-space-8) var(--zp-space-8) var(--zp-space-12) !important;
box-sizing: border-box;
}
/* Record lists live in a white card on the canvas (matches the record-details
card treatment). Out-specifies the transparent fallback below. */
.zp-theme-premium .zp-page-content .zp-record-list-section {
background: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-lg);
box-shadow: var(--zp-shadow-sm);
padding: var(--zp-space-6) !important;
}
.zp-theme-premium .zp-dashboard-page {
display: flex;
flex-direction: column;
gap: var(--zp-space-6);
}
/* Custom button section (top + bottom action strips) */
.zp-theme-premium .zp-custom-button-section {
display: flex;
flex-wrap: wrap;
gap: var(--zp-space-3);
padding: var(--zp-space-3) var(--zp-space-4);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
}
/* Element rows are a 12-column grid */
.zp-theme-premium .zp-dashboard-element-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--zp-space-4);
margin: 0 !important;
}
.zp-theme-premium .zp-element {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
overflow: hidden;
transition: box-shadow 0.2s var(--zp-ease), border-color 0.2s var(--zp-ease), transform 0.2s var(--zp-ease);
display: flex;
flex-direction: column;
min-height: 0;
}
.zp-theme-premium .zp-element:hover {
box-shadow: var(--zp-shadow-md);
border-color: var(--zp-color-border-strong);
transform: translateY(-1px);
}
/* Column-width helpers - override generic .zp-col-N width:Npct rules.
Scoped to the dashboard's 12-track grid: record-details sections use an
auto-fill grid where "span 12" forced 12 implicit tracks and blew out
the layout (elements squashed or pushed out of view). */
.zp-theme-premium .zp-dashboard-element-row > .zp-element { grid-column: span 12; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-1 { grid-column: span 1; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-2 { grid-column: span 2; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-3 { grid-column: span 3; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-4 { grid-column: span 4; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-5 { grid-column: span 5; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-6 { grid-column: span 6; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-7 { grid-column: span 7; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-8 { grid-column: span 8; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-9 { grid-column: span 9; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-10 { grid-column: span 10; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-11 { grid-column: span 11; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-12 { grid-column: span 12; }
/* Record view / profile: custom elements always take the full section row.
Scoped to the grid-based record containers; other pages' sections are
float layouts where admin-configured half widths must survive. */
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-left-section > .zp-element,
.zp-theme-premium :is(.zp-record-details, .zp-record-edit) .zp-right-section > .zp-element {
grid-column: 1 / -1;
width: 100% !important;
float: none !important;
}
@media (max-width: 1024px) {
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-1,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-2,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-3,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-4 { grid-column: span 6; }
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-5,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-6,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-7,
.zp-theme-premium .zp-dashboard-element-row > .zp-element.zp-col-lg-8 { grid-column: span 6; }
}
@media (max-width: 768px) {
.zp-theme-premium .zp-dashboard-element-row > .zp-element[class*="zp-col-"] { grid-column: span 12 !important; }
}
.zp-theme-premium .zp-element-header {
padding: var(--zp-space-4) var(--zp-space-6);
border-bottom: 1px solid var(--zp-color-border);
font-size: var(--zp-font-size-base);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
letter-spacing: -0.005em;
background: var(--zp-color-surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--zp-space-4);
min-height: 56px;
}
.zp-theme-premium .zp-element-content {
flex: 1;
padding: var(--zp-space-6);
overflow: auto;
}
/* Banner element - image-first; no padding around the visual */
.zp-theme-premium .zp-element-banner .zp-element-content { padding: 0; }
.zp-theme-premium .zp-element-banner {
overflow: hidden;
}
.zp-theme-premium .zp-element-banner .zp-banner-items {
position: relative;
line-height: 0;
}
.zp-theme-premium .zp-element-banner img {
width: 100%;
height: auto;
display: block;
}
/* Text-block element */
.zp-theme-premium .zp-element-text-block .zp-text-pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: var(--zp-font-family);
font-size: var(--zp-font-size-base);
color: var(--zp-color-text);
line-height: var(--zp-line-height-base);
margin: 0;
background: transparent;
border: 0;
padding: 0;
}
/* Video element */
.zp-theme-premium .zp-element-video .zp-video-iframe {
width: 100%;
height: 100%;
min-height: 240px;
border: 0;
border-radius: var(--zp-radius-sm);
}
/* Quicklink element - cards in a grid */
.zp-theme-premium .zp-element-quicklink .zp-element-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--zp-space-3);
}
.zp-theme-premium .zp-quicklink-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--zp-space-2);
padding: var(--zp-space-4);
background: var(--zp-color-surface-muted);
border: 1px solid transparent;
border-radius: var(--zp-radius-md);
text-align: center;
transition: background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease), transform 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-quicklink-item:hover {
background: var(--zp-color-surface);
border-color: var(--zp-color-primary);
transform: translateY(-2px);
}
.zp-theme-premium .zp-quicklink-item svg {
width: 32px;
height: 32px;
fill: var(--zp-color-primary);
}
.zp-theme-premium .zp-quicklink-item a {
color: var(--zp-color-text);
text-decoration: none;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
}
/* Account-manager element */
.zp-theme-premium .zp-element-account-manager .zp-element-content {
display: flex;
flex-direction: column;
gap: var(--zp-space-3);
align-items: stretch;
padding-top: 0;
}
.zp-theme-premium .zp-element-account-manager .zp-acm-image {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
margin: var(--zp-space-4) auto var(--zp-space-2);
border: 3px solid var(--zp-color-surface);
box-shadow: var(--zp-shadow-md);
}
.zp-theme-premium .zp-element-account-manager .zp-acm-first-name {
text-align: center;
font-size: var(--zp-font-size-lg);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
}
.zp-theme-premium .zp-element-account-manager .zp-acm-manager .zp-acm_data {
text-align: center;
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.zp-theme-premium .zp-element-account-manager .zp-acm-item {
display: flex;
align-items: center;
gap: var(--zp-space-3);
padding: var(--zp-space-2) var(--zp-space-3);
background: var(--zp-color-surface-muted);
border-radius: var(--zp-radius-sm);
color: var(--zp-color-text);
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .zp-element-account-manager .zp-acm-item.zp-acm-first-name,
.zp-theme-premium .zp-element-account-manager .zp-acm-item.zp-acm-manager {
background: transparent;
padding: 0;
justify-content: center;
}
.zp-theme-premium .zp-element-account-manager .zp-acm_label svg {
width: 18px;
height: 18px;
fill: var(--zp-color-text-muted);
}
/* Iframe element - fills its allotted height */
.zp-theme-premium .zp-element-iframe .zp-element-content { padding: 0; }
.zp-theme-premium .zp-element-iframe iframe {
width: 100%;
border: 0;
display: block;
}
/* ====================================================================
Integration polish #2 - CRM list pages
==================================================================== */
.zp-theme-premium .zp-record-list-page {
background: transparent;
}
/* List toolbar (above the table) */
.zp-theme-premium .zp-list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--zp-space-3);
flex-wrap: wrap;
padding: var(--zp-space-3) 0;
margin-bottom: var(--zp-space-3);
}
.zp-theme-premium .zp-list-toolbar-left,
.zp-theme-premium .zp-list-toolbar-right {
display: flex;
align-items: center;
gap: var(--zp-space-2);
flex-wrap: wrap;
}
.zp-theme-premium .zp-list-chip {
display: inline-flex;
align-items: center;
gap: var(--zp-space-2);
padding: var(--zp-space-2) var(--zp-space-3);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
}
.zp-theme-premium .zp-list-chip-count {
padding: 2px var(--zp-space-2);
background: rgba(var(--zp-color-accent-rgb), 0.10);
color: var(--zp-color-primary);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
line-height: 1;
}
/* Mass action bar */
.zp-theme-premium .zp-mass-action-bar {
background: rgba(var(--zp-color-accent-rgb), 0.06) !important;
border: 1px solid rgba(var(--zp-color-accent-rgb), 0.20) !important;
border-radius: var(--zp-radius-md) !important;
color: var(--zp-color-text);
}
/* DataTables - strip the default chrome, replace with our own */
.zp-theme-premium .dataTables_wrapper {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
padding: var(--zp-space-2);
overflow: hidden;
}
.zp-theme-premium .dataTables_length,
.zp-theme-premium .dataTables_filter,
.zp-theme-premium .dataTables_info,
.zp-theme-premium .dataTables_paginate {
padding: var(--zp-space-2) var(--zp-space-3);
}
.zp-theme-premium .dataTables_filter input,
.zp-theme-premium .dataTables_length select {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-2) var(--zp-space-3);
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
outline: none;
transition: border-color 0.15s var(--zp-ease);
}
.zp-theme-premium .dataTables_filter input:focus,
.zp-theme-premium .dataTables_length select:focus {
border-color: var(--zp-color-primary);
}
.zp-theme-premium .dataTables_paginate .paginate_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--zp-space-2);
margin: 0 2px;
border-radius: var(--zp-radius-sm);
background: transparent;
border: 1px solid transparent;
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-sm);
cursor: pointer;
transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .dataTables_paginate .paginate_button:hover {
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
}
.zp-theme-premium .dataTables_paginate .paginate_button.current {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
border-color: var(--zp-color-primary);
}
.zp-theme-premium .dataTables_paginate .paginate_button.disabled {
color: var(--zp-color-text-soft);
cursor: default;
background: transparent;
}
/* The actual data table */
.zp-theme-premium .dataTable,
.zp-theme-premium .zp-records-list,
.zp-theme-premium table.table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--zp-color-surface);
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
}
.zp-theme-premium .dataTable thead th,
.zp-theme-premium .zp-records-list thead th,
.zp-theme-premium table.table thead th {
background: var(--zp-color-surface-muted) !important;
border: 0 !important;
border-bottom: 1px solid var(--zp-color-border) !important;
padding: var(--zp-space-3) var(--zp-space-4) !important;
font-size: var(--zp-font-size-xs) !important;
font-weight: var(--zp-font-weight-semibold) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--zp-color-text-muted) !important;
text-align: left;
}
.zp-theme-premium .dataTable tbody td,
.zp-theme-premium .zp-records-list tbody td,
.zp-theme-premium table.table tbody td {
padding: var(--zp-space-3) var(--zp-space-4) !important;
border: 0 !important;
border-bottom: 1px solid var(--zp-color-border) !important;
background: transparent !important;
vertical-align: middle;
}
.zp-theme-premium .dataTable tbody tr:last-child td,
.zp-theme-premium .zp-records-list tbody tr:last-child td,
.zp-theme-premium table.table tbody tr:last-child td { border-bottom: 0 !important; }
.zp-theme-premium .dataTable tbody tr,
.zp-theme-premium .zp-records-list tbody tr,
.zp-theme-premium table.table tbody tr { transition: background 0.12s var(--zp-ease); }
.zp-theme-premium .dataTable tbody tr:hover,
.zp-theme-premium .zp-records-list tbody tr:hover,
.zp-theme-premium table.table tbody tr:hover { background: var(--zp-color-surface-muted) !important; }
.zp-theme-premium .dataTable tbody tr td a {
color: var(--zp-color-primary);
text-decoration: none;
font-weight: var(--zp-font-weight-medium);
}
.zp-theme-premium .dataTable tbody tr td a:hover { text-decoration: underline; }
/* Filter bar - module list filter */
.zp-theme-premium .filternewdesignModule {
display: inline-flex;
align-items: center;
gap: var(--zp-space-2);
padding: var(--zp-space-2) var(--zp-space-3);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
margin: 0 var(--zp-space-2) var(--zp-space-2) 0;
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .filternewdesignModule select,
.zp-theme-premium .filternewdesignModule input {
background: transparent;
border: 0;
outline: none;
color: var(--zp-color-text);
font-size: var(--zp-font-size-sm);
padding: 0;
}
/* ====================================================================
Shared - form controls, buttons, cards
==================================================================== */
/* Buttons */
.zp-theme-premium .btn,
.zp-theme-premium button,
.zp-theme-premium input[type="button"],
.zp-theme-premium input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 38px;
padding: 0 16px;
border-radius: var(--zp-radius-sm);
border: 1px solid transparent;
background: var(--zp-color-surface);
color: var(--zp-color-text);
font-size: 13px;
font-weight: var(--zp-font-weight-semibold);
font-family: var(--zp-font-family);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
/* Primary - accent blue with subtle highlight rim */
.zp-theme-premium .btn-primary,
.zp-theme-premium .btn.btn-primary,
.zp-theme-premium .zp-mass-update-btn {
background: var(--zp-color-accent) !important;
color: #fff !important;
border-color: var(--zp-color-accent) !important;
box-shadow: 0 1px 2px rgba(var(--zp-color-accent-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.zp-theme-premium .btn-primary:hover,
.zp-theme-premium .btn.btn-primary:hover {
background: var(--zp-color-accent-600) !important;
border-color: var(--zp-color-accent-600) !important;
}
/* Ghost - white with border */
.zp-theme-premium .btn-secondary,
.zp-theme-premium .btn-ghost {
background: var(--zp-color-surface) !important;
color: var(--zp-color-text) !important;
border-color: var(--zp-color-border) !important;
}
.zp-theme-premium .btn-secondary:hover,
.zp-theme-premium .btn-ghost:hover {
background: var(--zp-color-surface-2) !important;
border-color: var(--zp-color-border-strong) !important;
}
/* Subtle - surface-3 background, no border */
.zp-theme-premium .btn-subtle {
color: var(--zp-color-text-2) !important;
background: var(--zp-color-surface-3) !important;
border-color: transparent !important;
}
.zp-theme-premium .btn-subtle:hover {
background: var(--zp-color-border) !important;
color: var(--zp-color-text) !important;
}
/* Danger - filled red */
.zp-theme-premium .btn-danger,
.zp-theme-premium .zp-mass-delete-btn {
background: var(--zp-color-error) !important;
color: #fff !important;
border-color: var(--zp-color-error) !important;
}
/* Danger ghost - red text on white */
.zp-theme-premium .btn-danger-ghost {
color: var(--zp-color-error) !important;
background: var(--zp-color-surface) !important;
border-color: var(--zp-color-border) !important;
}
.zp-theme-premium .btn-danger-ghost:hover {
background: var(--zp-color-error-50) !important;
border-color: var(--zp-color-error) !important;
}
.zp-theme-premium .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.zp-theme-premium .btn-lg { height: 44px; padding: 0 20px; font-size: 14px; }
/* icon-only buttons: reset generic button padding */
.zp-theme-premium .zp-desk-inline-icon-btn,
.zp-theme-premium .action-column-button,
.zp-theme-premium .zp-store-qty-btn,
.zp-theme-premium .zp-store-card-wish,
.zp-theme-premium .js-refresh-folder-data,
.zp-theme-premium .zp-record-add,
.zp-theme-premium .zp-record-search,
.zp-theme-premium .js-add-WD-subfolder,
.zp-theme-premium .zp-side-nav-toggle,
.zp-theme-premium .zp-sidebar-close {
padding: 0 !important;
}
/* Inputs - boxed style with surface-2 bg, full focus ring on accent. */
.zp-theme-premium input[type="text"],
.zp-theme-premium input[type="email"],
.zp-theme-premium input[type="number"],
.zp-theme-premium input[type="tel"],
.zp-theme-premium input[type="url"],
.zp-theme-premium input[type="search"],
.zp-theme-premium input[type="password"],
.zp-theme-premium input[type="date"],
.zp-theme-premium input[type="datetime-local"],
.zp-theme-premium textarea,
.zp-theme-premium select {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: 10px 12px;
min-height: 40px;
font-size: var(--zp-font-size-base);
color: var(--zp-color-text);
font-family: var(--zp-font-family);
outline: none;
transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.zp-theme-premium input[type="text"]:focus,
.zp-theme-premium input[type="email"]:focus,
.zp-theme-premium input[type="number"]:focus,
.zp-theme-premium input[type="tel"]:focus,
.zp-theme-premium input[type="url"]:focus,
.zp-theme-premium input[type="search"]:focus,
.zp-theme-premium input[type="password"]:focus,
.zp-theme-premium input[type="date"]:focus,
.zp-theme-premium input[type="datetime-local"]:focus,
.zp-theme-premium textarea:focus,
.zp-theme-premium select:focus {
border-color: var(--zp-color-accent);
box-shadow: 0 0 0 3px var(--zp-color-accent-50);
}
.zp-theme-premium textarea { min-height: 96px; resize: vertical; }
/* scope to explicit label classes so checkbox/radio labels keep sentence case */
.zp-theme-premium .field-label,
.zp-theme-premium .control-label,
.zp-theme-premium .zp-form-label {
display: inline-block;
font-size: 11.5px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.zp-theme-premium .form-group .form-control[readonly],
.zp-theme-premium .form-control.zp-input-readonly,
.zp-theme-premium .form-group .static-value {
background: var(--zp-color-surface-2);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: 10px 12px;
min-height: 40px;
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
}
.zp-theme-premium .card,
.zp-theme-premium .panel,
.zp-theme-premium .zp-card {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
overflow: hidden;
}
.zp-theme-premium .card-header,
.zp-theme-premium .panel-heading {
padding: var(--zp-space-4) var(--zp-space-6);
border-bottom: 1px solid var(--zp-color-border);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--zp-space-4);
background: var(--zp-color-surface);
}
.zp-theme-premium .card-header h3,
.zp-theme-premium .card-header h4,
.zp-theme-premium .panel-title {
margin: 0;
font-size: var(--zp-font-size-base);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
letter-spacing: -0.005em;
}
.zp-theme-premium .card-body,
.zp-theme-premium .panel-body {
padding: var(--zp-space-6);
}
/* Typography baseline lift for inside-page content */
.zp-theme-premium h1, .zp-theme-premium .h1 { font-size: var(--zp-font-size-2xl); font-weight: var(--zp-font-weight-bold); color: var(--zp-color-text); margin: 0 0 var(--zp-space-3); }
.zp-theme-premium h2, .zp-theme-premium .h2 { font-size: var(--zp-font-size-xl); font-weight: var(--zp-font-weight-semibold); color: var(--zp-color-text); margin: 0 0 var(--zp-space-2); }
.zp-theme-premium h3, .zp-theme-premium .h3 { font-size: var(--zp-font-size-lg); font-weight: var(--zp-font-weight-semibold); color: var(--zp-color-text); margin: 0 0 var(--zp-space-2); }
.zp-theme-premium p { color: var(--zp-color-text); }
/* Scroll-to-top button positioned cleanly above the page footer */
.zp-theme-premium .scroll-to-the-top {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
border-radius: 50%;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
position: fixed;
right: var(--zp-space-6);
bottom: var(--zp-space-6);
z-index: 800;
cursor: pointer;
box-shadow: var(--zp-shadow-md);
font-size: var(--zp-font-size-base);
}
/* ====================================================================
Integration polish #3 - Desk
==================================================================== */
.zp-theme-premium .zp-ticket-list,
.zp-theme-premium .zoho-desk-page,
.zp-theme-premium .zp-desk-tw-page {
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
}
/* Desk primary action button (Reply, Send, Close) - lift to brand primary */
.zp-theme-premium .zp-desk-primary-btn {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 1px solid var(--zp-color-primary) !important;
border-radius: var(--zp-radius-sm) !important;
height: 36px;
padding: 0 var(--zp-space-4) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--zp-space-2);
font-weight: var(--zp-font-weight-medium) !important;
cursor: pointer;
transition: background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-desk-primary-btn:hover {
background: var(--zp-color-primary-hover) !important;
border-color: var(--zp-color-primary-hover) !important;
}
/* Inline icon button (e.g., view ticket from list) */
.zp-theme-premium .zp-desk-inline-icon-btn {
width: 32px;
height: 32px;
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-desk-inline-icon-btn:hover {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
}
/* Desk list table action column */
.zp-theme-premium .zp-desk-action-th,
.zp-theme-premium .zp-desk-action-td {
text-align: right !important;
width: 1%;
white-space: nowrap;
}
/* Ticket details header strip - subject + meta inline */
.zp-theme-premium #ticketSubject {
font-size: var(--zp-font-size-xl);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
margin: 0 0 var(--zp-space-2);
}
.zp-theme-premium #ticketNumber,
.zp-theme-premium #ticketContact,
.zp-theme-premium #ticketUpdated {
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text-muted);
}
.zp-theme-premium #ticketNumber { color: var(--zp-color-primary); font-weight: var(--zp-font-weight-medium); }
/* Reply composer */
.zp-theme-premium #zp-reply_editor {
width: 100%;
min-height: 140px;
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-3) var(--zp-space-4);
font-family: var(--zp-font-family);
font-size: var(--zp-font-size-base);
color: var(--zp-color-text);
line-height: var(--zp-line-height-base);
resize: vertical;
transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.zp-theme-premium #zp-reply_editor:focus {
border-color: var(--zp-color-primary);
box-shadow: 0 0 0 3px rgba(var(--zp-color-accent-rgb), 0.12);
outline: none;
}
/* Dropzone / attachment selector - cleaner outlined box */
.zp-theme-premium .zp-select-attachment-container {
background: var(--zp-color-surface);
border: 2px dashed var(--zp-color-border-strong);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-4);
text-align: center;
transition: border-color 0.15s var(--zp-ease), background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-select-attachment-container:hover {
border-color: var(--zp-color-primary);
background: rgba(var(--zp-color-accent-rgb), 0.03);
}
.zp-theme-premium .zp-select-attachment-info {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .uploadText { color: var(--zp-color-text-muted); font-size: var(--zp-font-size-sm); }
/* Thread / conversation bubbles */
.zp-theme-premium #threadMessages-JS {
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
}
.zp-theme-premium .zp-messageContainer-JS,
.zp-theme-premium #zp-messageContainer-JS {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-4);
box-shadow: var(--zp-shadow-sm);
}
.zp-theme-premium .zp-desk-agent-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-semibold);
flex-shrink: 0;
}
.zp-theme-premium .zp-desk-agent-bubble {
background: var(--zp-color-surface-muted);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-3) var(--zp-space-4);
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
}
.zp-theme-premium .showFullMessage {
background: transparent !important;
border: 0 !important;
color: var(--zp-color-primary) !important;
font-size: var(--zp-font-size-sm) !important;
cursor: pointer;
padding: var(--zp-space-1) var(--zp-space-2) !important;
}
.zp-theme-premium .showFullMessage:hover { text-decoration: underline; }
/* Attachments */
.zp-theme-premium .zp-ticket-attachement-section,
.zp-theme-premium .zp-thread-attachments-section {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-4);
}
.zp-theme-premium .zp-ticket-attachment-list .record-row {
border-radius: var(--zp-radius-sm);
transition: background 0.12s var(--zp-ease);
}
.zp-theme-premium .zp-ticket-attachment-list .viewButton {
color: var(--zp-color-primary);
text-decoration: none;
}
.zp-theme-premium .zp-ticket-attachment-list .viewButton:hover { text-decoration: underline; }
/* Add-ticket form */
.zp-theme-premium .add-ticket-page {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-6);
box-shadow: var(--zp-shadow-sm);
}
.zp-theme-premium .zp-field-details-section {
margin-bottom: var(--zp-space-4);
}
.zp-theme-premium .zp-form-field-border {
border-color: var(--zp-color-border) !important;
}
/* Collapsible section header (e.g., advanced fields) */
.zp-theme-premium .js-elapse-collapse {
color: var(--zp-color-primary);
cursor: pointer;
font-weight: var(--zp-font-weight-medium);
user-select: none;
}
/* ====================================================================
Integration polish #4 - Books (invoices, quotes, orders, payments)
==================================================================== */
.zp-theme-premium .zp-books-page {
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
}
.zp-theme-premium .zbooks-record-list,
.zp-theme-premium .zp-table {
background: transparent;
}
.zp-theme-premium .zbooks-record-list .record-heading th {
background: var(--zp-color-surface-muted) !important;
color: var(--zp-color-text-muted) !important;
font-size: var(--zp-font-size-xs) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--zp-font-weight-semibold) !important;
}
/* Currency column always right-aligned for scanability */
.zp-theme-premium .zbooks-record-list td.currency,
.zp-theme-premium .currency {
text-align: right !important;
font-variant-numeric: tabular-nums;
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
}
/* status pills */
.zp-theme-premium .status_badge,
.zp-theme-premium [class*="_status_badge"],
.zp-theme-premium .pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--zp-radius-pill);
font-size: 12px;
font-weight: var(--zp-font-weight-semibold);
line-height: 1.4;
background: var(--zp-color-surface-3);
color: var(--zp-color-text-muted);
}
/* replace FA circle with ::before dot in currentColor */
.zp-theme-premium .status_badge .fa-circle,
.zp-theme-premium [class*="_status_badge"] .fa-circle,
.zp-theme-premium .books-circle-icon { display: none !important; }
.zp-theme-premium .status_badge::before,
.zp-theme-premium [class*="_status_badge"]::before,
.zp-theme-premium .pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.zp-theme-premium .paid_status_badge,
.zp-theme-premium .closed_status_badge,
.zp-theme-premium .accepted_status_badge,
.zp-theme-premium .pill-success {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .overdue_status_badge,
.zp-theme-premium .declined_status_badge,
.zp-theme-premium .void_status_badge,
.zp-theme-premium .cancelled_status_badge,
.zp-theme-premium .pill-danger {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
.zp-theme-premium .pending_status_badge,
.zp-theme-premium .sent_status_badge,
.zp-theme-premium .partially_paid_status_badge,
.zp-theme-premium .pill-warn {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .open_status_badge,
.zp-theme-premium .pill-open {
background: var(--zp-color-accent-50);
color: var(--zp-color-accent-600);
}
.zp-theme-premium .draft_status_badge,
.zp-theme-premium .pill-closed {
background: var(--zp-color-surface-3);
color: var(--zp-color-text-muted);
}
.zp-theme-premium .pill-info {
background: var(--zp-color-info-50);
color: var(--zp-color-info-text);
}
/* Desk pills keep their Tailwind bullet span in the markup; the pill's own
::before dot replaces it. */
.zp-theme-premium .pill > span:empty { display: none !important; }
/* Detail-row buttons (View/PDF/etc.) */
.zp-theme-premium .zp-crm-record-view-btn,
.zp-theme-premium .zp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 var(--zp-space-3);
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border-strong);
color: var(--zp-color-text);
font-size: var(--zp-font-size-sm);
text-decoration: none;
transition: background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-crm-record-view-btn:hover,
.zp-theme-premium .zp-btn:hover {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
border-color: var(--zp-color-primary);
}
.zp-theme-premium .zp-detail-icon { font-size: 14px; }
/* Action column three-dot menu */
.zp-theme-premium .zp-action-column {
position: relative;
text-align: right;
}
/* The .zp-table variants out-specify the base sheet's
.zp-table tbody td.zp-action-column rules, which otherwise pin the trigger
to a 40px dot column and throw the popover up-left (top:-15px right:50px)
outside its own cell. */
.zp-theme-premium .action-column-button,
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-button {
background: transparent !important;
border: 0 !important;
color: var(--zp-color-text-muted);
cursor: pointer;
width: 32px;
height: 32px;
padding: 0;
border-radius: var(--zp-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.zp-theme-premium .action-column-button:hover {
background: var(--zp-color-surface-muted) !important;
color: var(--zp-color-text);
}
.zp-theme-premium .action-column-body,
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body {
position: absolute;
top: 100%;
right: 0;
min-width: 180px;
width: max-content;
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-lg);
padding: var(--zp-space-1);
z-index: 50;
}
.zp-theme-premium .action-column-body a,
.zp-theme-premium .action-column-body button {
display: flex;
align-items: center;
gap: var(--zp-space-2);
padding: var(--zp-space-2) var(--zp-space-3);
border-radius: var(--zp-radius-sm);
color: var(--zp-color-text);
background: transparent !important;
border: 0 !important;
width: 100%;
text-align: left;
text-decoration: none;
font-size: var(--zp-font-size-sm);
height: auto !important;
}
.zp-theme-premium .action-column-body a:hover,
.zp-theme-premium .action-column-body button:hover { background: var(--zp-color-surface-muted) !important; }
/* Quote actions (Accept / Decline) */
.zp-theme-premium .zp-books-action-section {
display: flex;
gap: var(--zp-space-2);
justify-content: flex-end;
margin: var(--zp-space-4) 0;
}
.zp-theme-premium .accept_quotes {
background: var(--zp-color-success) !important;
color: var(--zp-color-primary-foreground) !important;
border-color: var(--zp-color-success) !important;
}
.zp-theme-premium .declined_quotes {
background: var(--zp-color-surface) !important;
color: var(--zp-color-error) !important;
border: 1px solid var(--zp-color-error) !important;
}
.zp-theme-premium .declined_quotes:hover {
background: var(--zp-color-error) !important;
color: var(--zp-color-primary-foreground) !important;
}
/* Invoice/quote template (the printable doc body) */
.zp-theme-premium .pcs-template,
.zp-theme-premium .invoice-page,
.zp-theme-premium .zp-quote-details-page {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
padding: var(--zp-space-8);
margin: var(--zp-space-4) auto;
max-width: 980px;
}
.zp-theme-premium .pcs-template-body {
background: transparent;
}
.zp-theme-premium .pcs-itemtable,
.zp-theme-premium .itemTable,
.zp-theme-premium .pcs-template table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: var(--zp-space-4) 0;
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .pcs-itemtable th {
background: var(--zp-color-surface-muted);
padding: var(--zp-space-2) var(--zp-space-3);
text-align: left;
border-bottom: 1px solid var(--zp-color-border);
font-size: var(--zp-font-size-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--zp-color-text-muted);
}
.zp-theme-premium .pcs-itemtable td,
.zp-theme-premium .pcs-item-row td {
padding: var(--zp-space-3);
border-bottom: 1px solid var(--zp-color-border);
}
.zp-theme-premium .pcs-totals td {
padding: var(--zp-space-2) var(--zp-space-3);
border: 0;
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .pcs-totals tr:last-child td {
font-size: var(--zp-font-size-lg);
font-weight: var(--zp-font-weight-bold);
color: var(--zp-color-text);
border-top: 2px solid var(--zp-color-border);
padding-top: var(--zp-space-3);
}
/* Retainer / unused credit label */
.zp-theme-premium .retainer_label {
display: inline-flex;
align-items: center;
padding: 2px var(--zp-space-2);
background: var(--zp-color-info-50);
color: var(--zp-color-info-text);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-medium);
margin-left: var(--zp-space-2);
}
/* Alert / error banners (API limit, payment errors, etc.) */
.zp-theme-premium .alert {
padding: var(--zp-space-3) var(--zp-space-4);
border-radius: var(--zp-radius-md);
border: 1px solid transparent;
font-size: var(--zp-font-size-sm);
margin: var(--zp-space-3) 0;
}
.zp-theme-premium .alert-danger {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
border-color: rgba(220, 38, 38, 0.20);
}
.zp-theme-premium .alert-warning {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
border-color: var(--zp-color-warning);
}
.zp-theme-premium .alert-success {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
border-color: rgba(22, 163, 74, 0.20);
}
.zp-theme-premium .alert-info {
background: var(--zp-color-info-50);
color: var(--zp-color-info-text);
border-color: var(--zp-color-info);
}
/* ====================================================================
Integration polish #5 - Subscriptions
==================================================================== */
/* Plan grid - responsive 3/2/1 card layout. .zp-subs-product-grid is one CARD
(emitted once per product/plan); the grid container is the section content
(products page) / .sub-plans-page (plans page). */
.zp-theme-premium .products-page .zp-section-content.has-products-grid,
.zp-theme-premium .sub-plans-page,
.zp-theme-premium .plans-upgrade-page .zp-content-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--zp-space-4);
align-items: stretch;
padding: var(--zp-space-1) 0;
}
.zp-theme-premium .products-page .zp-section-content:has(> .zp-subs-product-grid) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--zp-space-4);
align-items: stretch;
padding: var(--zp-space-1) 0;
}
.zp-theme-premium .zp-subs-product-grid {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s var(--zp-ease), border-color 0.2s var(--zp-ease), transform 0.2s var(--zp-ease);
}
.zp-theme-premium .zp-subs-product-grid:hover {
box-shadow: var(--zp-shadow-md);
border-color: var(--zp-color-primary);
transform: translateY(-2px);
}
.zp-theme-premium .zp-subs-product-grid > .clr,
.zp-theme-premium .zp-plan-details > .clr {
display: none;
}
.zp-theme-premium .zp-plan-details {
display: flex;
flex-direction: column;
flex: 1;
}
.zp-theme-premium .zp-product-title {
font-size: var(--zp-font-size-lg);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
margin: 0;
}
.zp-theme-premium .products-page .zp-subs-product-grid > .zp-product-title {
padding: var(--zp-space-5) var(--zp-space-5) 0;
}
.zp-theme-premium .zp-product-desc {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-sm);
line-height: var(--zp-line-height-base);
flex: 1;
}
.zp-theme-premium .products-page .zp-subs-product-grid > .zp-product-desc {
padding: var(--zp-space-3) var(--zp-space-5) 0;
}
.zp-theme-premium .zp-subs-button-section {
display: flex;
gap: var(--zp-space-2);
margin-top: auto;
padding: var(--zp-space-4) var(--zp-space-5) var(--zp-space-5);
}
.zp-theme-premium .zp-view-btn {
flex: 1;
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 1px solid var(--zp-color-primary) !important;
border-radius: var(--zp-radius-sm) !important;
height: 36px;
padding: 0 var(--zp-space-4) !important;
text-align: center;
text-decoration: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-view-btn:hover {
background: var(--zp-color-primary-hover) !important;
border-color: var(--zp-color-primary-hover) !important;
}
/* Plan status pill (base + semantic variants) */
.zp-theme-premium .zp-plan-status-pill {
display: inline-flex;
align-items: center;
gap: var(--zp-space-1);
padding: 2px var(--zp-space-2);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.6;
}
.zp-theme-premium .zp-plan-status-pill .circle-icon { font-size: 8px; }
.zp-theme-premium .zp-status-live {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .zp-status-live .circle-icon { color: var(--zp-color-success-text); }
.zp-theme-premium .zp-status-cancel {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
.zp-theme-premium .zp-status-cancel .circle-icon { color: var(--zp-color-error-text); }
.zp-theme-premium .zp-status-trial,
.zp-theme-premium .zp-status-non-reniew {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .zp-status-trial .circle-icon,
.zp-theme-premium .zp-status-non-reniew .circle-icon { color: var(--zp-color-warning-text); }
/* My Plans / active subscriptions table reuses generic .dataTable polish */
/* ====================================================================
Integration polish #6 - Vault
==================================================================== */
.zp-theme-premium .zp-zoho-vault-page {
display: flex;
flex-direction: column;
gap: var(--zp-space-3);
}
.zp-theme-premium .add-scrate-section {
display: flex;
justify-content: flex-end;
margin-bottom: var(--zp-space-2);
}
.zp-theme-premium .scrateAdd {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 1px solid var(--zp-color-primary) !important;
border-radius: var(--zp-radius-sm) !important;
height: 36px;
padding: 0 var(--zp-space-4) !important;
display: inline-flex;
align-items: center;
gap: var(--zp-space-2);
}
.zp-theme-premium .scrateAdd:hover { background: var(--zp-color-primary-hover) !important; }
/* Chamber/secret accordion */
.zp-theme-premium .panel-group { display: flex; flex-direction: column; gap: var(--zp-space-2); }
.zp-theme-premium .panel-default,
.zp-theme-premium .ccg-accordion {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
overflow: hidden;
}
.zp-theme-premium .ccg-accordion-heading,
.zp-theme-premium .panel-default > .panel-heading {
padding: var(--zp-space-3) var(--zp-space-4);
background: var(--zp-color-surface);
border-bottom: 1px solid transparent;
cursor: pointer;
transition: background 0.15s var(--zp-ease);
}
.zp-theme-premium .ccg-accordion-heading:hover { background: var(--zp-color-surface-muted); }
.zp-theme-premium .panel-default.zp-open > .ccg-accordion-heading,
.zp-theme-premium .panel-default > .panel-collapse.in ~ .ccg-accordion-heading {
border-bottom-color: var(--zp-color-border);
}
.zp-theme-premium .panel-title,
.zp-theme-premium .chamber-name {
margin: 0;
font-size: var(--zp-font-size-base);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
text-decoration: none;
}
.zp-theme-premium .chamber-name { color: var(--zp-color-text); }
.zp-theme-premium .chamber-name:hover { color: var(--zp-color-primary); }
.zp-theme-premium .ch_desc {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-sm);
margin-top: 2px;
}
.zp-theme-premium .panel-collapse,
.zp-theme-premium .ccg-accordion-collapse {
background: var(--zp-color-surface-muted);
}
.zp-theme-premium .panel-body {
padding: var(--zp-space-4);
}
.zp-theme-premium .sub-panel-group {
display: flex;
flex-direction: column;
gap: var(--zp-space-2);
}
.zp-theme-premium .chamber-container {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-3) var(--zp-space-4);
}
/* Password reveal toggle */
.zp-theme-premium .vp-div,
.zp-theme-premium .psclr,
.zp-theme-premium .vpDiv {
display: flex;
align-items: center;
gap: var(--zp-space-2);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-1) var(--zp-space-2);
}
.zp-theme-premium .vPIc {
color: var(--zp-color-text-muted);
cursor: pointer;
padding: var(--zp-space-1);
transition: color 0.15s var(--zp-ease);
}
.zp-theme-premium .vPIc:hover { color: var(--zp-color-primary); }
.zp-theme-premium .encN,
.zp-theme-premium .decN { font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: var(--zp-font-size-sm); }
.zp-theme-premium .encP,
.zp-theme-premium .decP {
font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
font-size: var(--zp-font-size-sm);
background: transparent;
border: 0;
outline: none;
color: var(--zp-color-text);
flex: 1;
min-width: 0;
}
/* ====================================================================
Integration polish #7 - WorkDrive
==================================================================== */
.zp-theme-premium .zwd-document-list,
.zp-theme-premium .zwd-document-list-iframe,
.zp-theme-premium .zwd-custom-document-list {
display: flex;
flex-direction: column;
gap: var(--zp-space-3);
}
/* Title bar with breadcrumb + actions */
.zp-theme-premium .zp-zwd-title-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--zp-space-3);
flex-wrap: wrap;
padding: var(--zp-space-3) var(--zp-space-4);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
}
.zp-theme-premium .zp-zwd_nav_bar {
display: flex;
align-items: center;
gap: var(--zp-space-1);
flex-wrap: wrap;
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .directory_nav {
color: var(--zp-color-text-muted);
text-decoration: none;
padding: var(--zp-space-1) var(--zp-space-2);
border-radius: var(--zp-radius-sm);
transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .directory_nav:hover {
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
}
.zp-theme-premium .title-bar-action {
display: flex;
align-items: center;
gap: var(--zp-space-2);
}
/* Icon-square treatment is WorkDrive-only; on CRM lists .zp-record-add is a
text button ("Add Deal") and must keep its natural width. */
.zp-theme-premium .zp-workdrive-page .js-refresh-folder-data,
.zp-theme-premium .zp-workdrive-page .zp-record-add,
.zp-theme-premium .zp-workdrive-page .zp-record-search,
.zp-theme-premium .zp-workdrive-page .js-add-WD-subfolder {
min-width: 36px;
width: auto;
height: 36px;
padding: 0 var(--zp-space-2);
gap: 6px;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
white-space: nowrap;
text-decoration: none;
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
/* The action icons ship as 40px intrinsic SVGs; the legacy sheet also paints
the sync icon as a floated white 40px chip - flatten both to a plain glyph. */
.zp-theme-premium .zp-workdrive-page .title-bar-action svg,
.zp-theme-premium .zp-workdrive-page .zp-zwd-title-bar .title-bar-action .js-refresh-folder-data svg {
width: 20px;
height: 20px;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
float: none;
flex-shrink: 0;
}
.zp-theme-premium .zp-workdrive-page .zp-record-add:hover,
.zp-theme-premium .zp-workdrive-page .js-refresh-folder-data:hover,
.zp-theme-premium .zp-workdrive-page .zp-record-search:hover,
.zp-theme-premium .zp-workdrive-page .js-add-WD-subfolder:hover {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
}
/* List-page add-record: proper primary button */
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-add-edit-record-js {
display: inline-flex !important;
align-items: center;
gap: 6px;
width: auto !important;
height: 36px !important;
padding: 0 14px !important;
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 0 !important;
border-radius: var(--zp-radius-sm) !important;
font-weight: var(--zp-font-weight-medium);
font-size: var(--zp-font-size-sm);
white-space: nowrap;
line-height: 36px !important;
}
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-add-edit-record-js:hover {
background: var(--zp-color-primary-hover) !important;
color: var(--zp-color-primary-foreground) !important;
}
/* Counts (files / folders) */
.zp-theme-premium .files_count,
.zp-theme-premium .folders_count {
display: inline-flex;
align-items: center;
padding: 2px var(--zp-space-2);
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-medium);
}
/* List view */
.zp-theme-premium .drive-wrapper.drive-list-view .drive-items-table-wrapper {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
overflow: hidden;
}
.zp-theme-premium .zp-document-list,
.zp-theme-premium .drive-items-table-wrapper .zp-table { background: transparent; }
.zp-theme-premium .zp-zwd-file-td {
width: 1%;
padding-right: 0 !important;
}
.zp-theme-premium .zp-zwd-file-icon {
font-size: 18px;
color: var(--zp-color-primary);
width: 24px;
text-align: center;
}
.zp-theme-premium .zp-zwd-file-name {
color: var(--zp-color-text);
text-decoration: none;
font-weight: var(--zp-font-weight-medium);
}
.zp-theme-premium .zp-zwd-file-name:hover { color: var(--zp-color-primary); }
.zp-theme-premium .zp-zwd-file-action-url {
color: var(--zp-color-text-muted);
text-decoration: none;
padding: var(--zp-space-1) var(--zp-space-2);
border-radius: var(--zp-radius-sm);
transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-zwd-file-action-url:hover {
background: var(--zp-color-surface-muted);
color: var(--zp-color-primary);
}
/* Grid view */
.zp-theme-premium .drive-wrapper.drive-grid-view .grid-items-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--zp-space-3);
}
/* Beat legacy zwd_api_thumb.css (.drive-wrapper .drive-item) which pins
width: calc(25% - 23px) + min-height: 195px + inline-block + margin and
collapses each card to a ~22px pill inside the premium grid tracks. */
.zp-theme-premium .drive-item,
.zp-theme-premium .drive-wrapper .drive-item {
width: auto;
min-height: 0;
margin: 0;
display: block;
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
overflow: hidden;
transition: box-shadow 0.2s var(--zp-ease), border-color 0.2s var(--zp-ease), transform 0.2s var(--zp-ease);
}
.zp-theme-premium .drive-item:hover {
box-shadow: var(--zp-shadow-md);
border-color: var(--zp-color-primary);
transform: translateY(-2px);
}
.zp-theme-premium .drive-item-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.zp-theme-premium .drive-item-thumb {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
background: var(--zp-color-surface-muted);
color: var(--zp-color-primary);
font-size: 36px;
}
.zp-theme-premium .drive-item-title {
padding: var(--zp-space-3);
border-top: 1px solid var(--zp-color-border);
}
.zp-theme-premium .drive-item-title .zp-zwd-file {
color: var(--zp-color-text);
text-decoration: none;
font-weight: var(--zp-font-weight-medium);
font-size: var(--zp-font-size-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zp-theme-premium .drive-item-footer {
padding: var(--zp-space-2) var(--zp-space-3);
border-top: 1px solid var(--zp-color-border);
background: var(--zp-color-surface-muted);
}
.zp-theme-premium .drive-item-footer .utilities {
display: flex;
gap: var(--zp-space-1);
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
.zp-theme-premium .drive-item-footer .utilities li,
.zp-theme-premium .drive-item-footer .utilities a {
color: var(--zp-color-text-muted);
transition: color 0.15s var(--zp-ease);
}
.zp-theme-premium .drive-item-footer .utilities a:hover { color: var(--zp-color-primary); }
/* Dropzone upload area (shared by Workdrive upload + Desk attach + others) */
.zp-theme-premium .zp-dropzone {
background: var(--zp-color-surface);
border: 2px dashed var(--zp-color-border-strong);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-6);
text-align: center;
transition: border-color 0.15s var(--zp-ease), background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-dropzone:hover,
.zp-theme-premium .zp-dropzone.dz-drag-hover {
border-color: var(--zp-color-primary);
background: rgba(var(--zp-color-accent-rgb), 0.03);
}
.zp-theme-premium .zp-dropzone .dz-message,
.zp-theme-premium .zp-dropzone .uploadText {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-base);
}
.zp-theme-premium .zp-dropzone .browseText {
color: var(--zp-color-primary);
font-weight: var(--zp-font-weight-medium);
cursor: pointer;
}
/* Base sheet absolutely pins the button row 30px above the bottom of a
min-height:330px dropzone; premium keeps everything in normal flow. */
.zp-theme-premium .zp-dropzone,
.zp-theme-premium #dropzoneFileUpload {
min-height: 0;
}
.zp-theme-premium .zp-dropzone .zp-dropzone-bottom {
position: static;
width: auto;
bottom: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--zp-space-3);
margin-top: var(--zp-space-3);
flex-wrap: wrap;
}
/* Both actions start disabled until a file is added; the filled Upload at
0.55 opacity read as "broken gray" next to the outline Reset. Give the
disabled state one shared muted treatment instead. */
.zp-theme-premium .zp-dropzone-button button:disabled,
.zp-theme-premium #zp-upload-files-btn:disabled,
.zp-theme-premium #zp-reset-files-btn:disabled {
opacity: 1 !important;
background: var(--zp-color-surface-muted) !important;
color: var(--zp-color-text-muted) !important;
border: 1px solid var(--zp-color-border) !important;
cursor: not-allowed;
}
.zp-theme-premium .zp-dropzone-selected-file {
flex: 1;
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-sm);
text-align: left;
}
.zp-theme-premium .zp-dropzone-button {
display: flex;
gap: var(--zp-space-2);
}
.zp-theme-premium #zp-upload-files-btn,
.zp-theme-premium .zp-upload-files-btn {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border-color: var(--zp-color-primary) !important;
}
.zp-theme-premium #zp-reset-files-btn,
.zp-theme-premium .zp-reset-files-btn {
background: var(--zp-color-surface) !important;
color: var(--zp-color-text) !important;
border: 1px solid var(--zp-color-border-strong) !important;
}
/* ====================================================================
Integration polish #8 - Sign
==================================================================== */
.zp-theme-premium .zp-module-sign-document,
.zp-theme-premium .sign-document-records-list {
background: transparent;
}
/* Sign status pill */
.zp-theme-premium .zp-sign-status-badge {
display: inline-flex;
align-items: center;
gap: var(--zp-space-1);
padding: 2px var(--zp-space-2);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-sign-status-badge[data-status="signed"],
.zp-theme-premium .zp-sign-status-badge[data-status="completed"],
.zp-theme-premium .zp-sign-status-badge.zp-sign-status-signed,
.zp-theme-premium .zp-sign-status-badge.completed {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .zp-sign-status-badge[data-status="declined"],
.zp-theme-premium .zp-sign-status-badge.zp-sign-status-declined,
.zp-theme-premium .zp-sign-status-badge[data-status="expired"],
.zp-theme-premium .zp-sign-status-badge.zp-sign-status-expired {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
.zp-theme-premium .zp-sign-status-badge[data-status="sent"],
.zp-theme-premium .zp-sign-status-badge[data-status="inprogress"],
.zp-theme-premium .zp-sign-status-badge.zp-sign-status-sent,
.zp-theme-premium .zp-sign-status-badge[data-status="viewed"],
.zp-theme-premium .zp-sign-status-badge.zp-sign-status-viewed {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .zp-list-action-cell { text-align: right !important; width: 1%; white-space: nowrap; }
/* "Sign now" CTA on a list row */
.zp-theme-premium .zp-sign-now-btn {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 1px solid var(--zp-color-primary) !important;
border-radius: var(--zp-radius-sm) !important;
height: 32px;
padding: 0 var(--zp-space-3) !important;
}
.zp-theme-premium .zp-sign-now-btn:hover {
background: var(--zp-color-primary-hover) !important;
border-color: var(--zp-color-primary-hover) !important;
}
/* Sign details page - recipients + grid */
.zp-theme-premium .zp-sign-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--zp-space-3);
margin-bottom: var(--zp-space-4);
}
.zp-theme-premium .zp-sign-detail-item {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-3) var(--zp-space-4);
}
.zp-theme-premium .zp-sign-detail-item .zp-sign-detail-label {
font-size: var(--zp-font-size-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-sign-detail-item .zp-sign-detail-value {
font-size: var(--zp-font-size-base);
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
margin-top: 2px;
}
.zp-theme-premium .zp-sign-recipients-table { background: transparent; }
/* ====================================================================
Integration polish #9 - Projects
==================================================================== */
.zp-theme-premium .zp-record-list-section {
background: transparent;
}
/* Project row gets a subtle hover (in addition to generic table hover) */
.zp-theme-premium .zp-project-row { cursor: pointer; }
/* Generic project badge - semantic variants. The extra .zp-page-content in
the selector out-specifies projects_styles.php, which prints the same
.zp-projects-page .zp-badge-* rules inline after this stylesheet. */
.zp-theme-premium .zp-page-content .zp-badge,
.zp-theme-premium .zp-badge {
display: inline-flex;
align-items: center;
gap: var(--zp-space-1);
padding: 2px var(--zp-space-2);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-page-content .zp-badge-active,
.zp-theme-premium .zp-page-content .zp-badge-completed,
.zp-theme-premium .zp-page-content .zp-badge-closed,
.zp-theme-premium .zp-page-content .zp-badge-billable {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .zp-page-content .zp-badge-archived,
.zp-theme-premium .zp-page-content .zp-badge-nonbillable,
.zp-theme-premium .zp-page-content .zp-badge-none {
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-page-content .zp-badge-open {
background: var(--zp-color-accent-50);
color: var(--zp-color-accent-600);
}
.zp-theme-premium .zp-page-content .zp-badge-onhold {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .zp-page-content .zp-badge-inprogress {
background: var(--zp-color-info-50);
color: var(--zp-color-info-text);
}
.zp-theme-premium .zp-page-content .zp-badge-high {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
.zp-theme-premium .zp-page-content .zp-badge-medium {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .zp-page-content .zp-badge-low {
background: var(--zp-color-info-50);
color: var(--zp-color-info-text);
}
/* Project detail card */
.zp-theme-premium .zp-project-card {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-6);
box-shadow: var(--zp-shadow-sm);
margin-bottom: var(--zp-space-4);
}
.zp-theme-premium .section-header-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--zp-space-3);
margin-bottom: var(--zp-space-4);
}
.zp-theme-premium .section-header-text {
font-size: var(--zp-font-size-lg);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
}
/* Responsive hide already exists - just make sure the breakpoint is right */
.zp-theme-premium .zp-hide-mobile { display: table-cell; }
@media (max-width: 768px) {
.zp-theme-premium .zp-hide-mobile { display: none !important; }
}
/* ====================================================================
Integration polish #10 - Store (Inventory storefront)
==================================================================== */
/* Store integration uses .zp-content-section as a wrapper around product
grids. Scoped via the store-page class so we don't accidentally flex
.title-description-section (which shares the same .zp-content-section
class on list views) and inflate its vertical rhythm. */
.zp-theme-premium .zp-store-page .zp-content-section {
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
}
.zp-theme-premium .zp-section-row { margin-bottom: var(--zp-space-4); }
/* Product grid */
.zp-theme-premium .zp-store-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--zp-space-4);
}
.zp-theme-premium .zp-store-card {
position: relative;
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s var(--zp-ease), border-color 0.2s var(--zp-ease), transform 0.2s var(--zp-ease);
}
.zp-theme-premium .zp-store-card:hover {
box-shadow: var(--zp-shadow-md);
border-color: var(--zp-color-primary);
transform: translateY(-2px);
}
.zp-theme-premium .zp-store-card-wish {
position: absolute;
top: var(--zp-space-2);
right: var(--zp-space-2);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--zp-color-text-muted);
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: color 0.15s var(--zp-ease), background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-store-card-wish:hover,
.zp-theme-premium .zp-store-card-wish.is-active { color: var(--zp-color-error); }
.zp-theme-premium .zp-store-card-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: var(--zp-color-surface-muted);
}
.zp-theme-premium .zp-store-card-body {
padding: var(--zp-space-3);
display: flex;
flex-direction: column;
gap: var(--zp-space-2);
flex: 1;
}
.zp-theme-premium .zp-store-card-title {
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zp-theme-premium .zp-store-card-price {
font-size: var(--zp-font-size-base);
font-weight: var(--zp-font-weight-bold);
color: var(--zp-color-primary);
font-variant-numeric: tabular-nums;
}
/* Stock pills */
.zp-theme-premium .zp-store-stock-in,
.zp-theme-premium .zp-store-stock-out {
display: inline-flex;
align-items: center;
gap: var(--zp-space-1);
padding: 2px var(--zp-space-2);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-medium);
}
.zp-theme-premium .zp-store-stock-in {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .zp-store-stock-out {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
/* Store buttons */
.zp-theme-premium .zp-store-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--zp-space-2);
height: 36px;
padding: 0 var(--zp-space-4);
border-radius: var(--zp-radius-sm);
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
border: 1px solid var(--zp-color-primary);
text-decoration: none;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
cursor: pointer;
transition: background 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-store-btn:hover {
background: var(--zp-color-primary-hover);
border-color: var(--zp-color-primary-hover);
}
.zp-theme-premium .zp-store-btn-sm { height: 32px; padding: 0 var(--zp-space-3); }
.zp-theme-premium .zp-store-btn-block { width: 100%; }
.zp-theme-premium .zp-store-btn-outline {
background: transparent;
color: var(--zp-color-text);
border: 1px solid var(--zp-color-border-strong);
}
.zp-theme-premium .zp-store-btn-outline:hover {
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
}
.zp-theme-premium .zp-store-btn-danger {
background: var(--zp-color-error);
border-color: var(--zp-color-error);
color: var(--zp-color-primary-foreground);
}
/* Cart line items */
.zp-theme-premium .zp-store-table {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
overflow: hidden;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.zp-theme-premium .zp-store-table th,
.zp-theme-premium .zp-store-table td {
padding: var(--zp-space-3) var(--zp-space-4);
border-bottom: 1px solid var(--zp-color-border);
text-align: left;
}
.zp-theme-premium .zp-store-table tr:last-child td { border-bottom: 0; }
.zp-theme-premium .zp-store-cart-product {
display: flex;
align-items: center;
gap: var(--zp-space-3);
}
.zp-theme-premium .zp-store-cart-product img {
width: 56px;
height: 56px;
border-radius: var(--zp-radius-sm);
object-fit: cover;
}
/* Quantity stepper */
.zp-theme-premium .zp-store-qty-control {
display: inline-flex;
align-items: center;
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface);
overflow: hidden;
}
.zp-theme-premium .zp-store-qty-btn {
width: 32px;
height: 32px;
background: transparent !important;
border: 0 !important;
color: var(--zp-color-text);
cursor: pointer;
}
.zp-theme-premium .zp-store-qty-btn:hover { background: var(--zp-color-surface-muted) !important; }
.zp-theme-premium .zp-store-qty-input {
width: 48px;
height: 32px;
border: 0 !important;
background: transparent !important;
text-align: center;
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
font-variant-numeric: tabular-nums;
}
/* Order summary panel */
.zp-theme-premium .zp-store-summary {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-4);
display: flex;
flex-direction: column;
gap: var(--zp-space-2);
box-shadow: var(--zp-shadow-sm);
}
.zp-theme-premium .zp-store-summary-row {
display: flex;
justify-content: space-between;
color: var(--zp-color-text);
font-size: var(--zp-font-size-sm);
font-variant-numeric: tabular-nums;
}
.zp-theme-premium .zp-store-summary-discount { color: var(--zp-color-success-text); }
.zp-theme-premium .zp-store-summary-total {
padding-top: var(--zp-space-3);
border-top: 1px solid var(--zp-color-border);
font-size: var(--zp-font-size-lg);
font-weight: var(--zp-font-weight-bold);
}
/* Coupon section */
.zp-theme-premium .zp-store-coupon {
display: flex;
gap: var(--zp-space-2);
margin-top: var(--zp-space-3);
}
.zp-theme-premium .zp-store-coupon input {
flex: 1;
}
/* Order status badge - reuses semantics from books status badges */
.zp-theme-premium .zp-store-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--zp-space-2);
border-radius: var(--zp-radius-pill);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--zp-color-surface-muted);
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-store-badge-success {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
}
.zp-theme-premium .zp-store-badge-warning {
background: var(--zp-color-warning-50);
color: var(--zp-color-warning-text);
}
.zp-theme-premium .zp-store-badge-danger {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
}
.zp-theme-premium .zp-store-badge-info {
background: var(--zp-color-accent-50);
color: var(--zp-color-accent-600);
}
/* ====================================================================
Integration polish #11 - Auth pages (login, signup, reset, 2FA)
==================================================================== */
/* auth pages: no portal chrome, centered card. The auth wrapper carries
zp-theme-premium alongside zp-auth-page on the SAME element (compound
selector); this sheet also loads after style.css as of 6.4.1, so these
win by both specificity and order over its .zp-page-wraper.zp-auth-page. */
.zp-page-wraper.zp-theme-premium.zp-auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--zp-space-6);
background: var(--zp-color-surface-muted);
}
/* Split-screen layout: centering above collapses the image panel to 0px,
so the admin's split image never painted under Premium. */
.zp-page-wraper.zp-theme-premium.zp-auth-page.zp-auth-layout-split {
align-items: stretch;
justify-content: flex-start;
padding: 0;
}
.zp-theme-premium.zp-auth-layout-split .zp-auth-split-panel {
flex: 1;
min-height: 100vh;
}
.zp-theme-premium.zp-auth-layout-split .zp-auth-form-panel {
max-width: none;
border: 0;
border-radius: 0;
box-shadow: none;
justify-content: center;
}
.zp-theme-premium .zp-auth-form-panel {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-lg);
box-shadow: var(--zp-shadow-lg);
padding: var(--zp-space-8);
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
}
.zp-theme-premium .zp-auth-logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--zp-space-2);
}
.zp-theme-premium .zp-auth-logo img { max-height: 56px; }
.zp-theme-premium .login-form,
.zp-theme-premium .zp-2fa-form {
display: flex;
flex-direction: column;
gap: var(--zp-space-3);
}
.zp-theme-premium .login-form-header {
font-size: var(--zp-font-size-xl);
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
text-align: center;
margin: 0 0 var(--zp-space-2);
}
.zp-theme-premium .zp-input-group { display: flex; flex-direction: column; gap: 4px; }
.zp-theme-premium .zp-input-group label {
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
color: var(--zp-color-text);
}
/* Currency fields also carry .zp-input-group: the column-flex above stacked
the "$" prefix over the input, and the global number-input border boxed the
input inside the already-bordered group. Restore the single-pill layout. */
.zp-theme-premium .zp-currency-input-group {
flex-direction: row;
align-items: center;
gap: 0;
overflow: hidden;
}
.zp-theme-premium .zp-currency-input-group > .clr { display: none; }
.zp-theme-premium .zp-currency-input-group .zp-currency-symble {
flex-shrink: 0;
float: none;
}
.zp-theme-premium .zp-record-add-edit-form .zp-currency-input-group input[type="number"],
.zp-theme-premium .zp-field-details-section .zp-currency-input-group .zp-input-field,
.zp-theme-premium .zp-currency-input-group .zp-currency-form-control {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
flex: 1 1 auto;
width: auto;
min-width: 0;
float: none;
}
.zp-theme-premium .zp-btn-primary,
.zp-theme-premium .zp-btn-login {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
border: 1px solid var(--zp-color-primary) !important;
height: 40px;
width: 100%;
border-radius: var(--zp-radius-sm) !important;
font-weight: var(--zp-font-weight-semibold) !important;
}
.zp-theme-premium .zp-btn-primary:hover,
.zp-theme-premium .zp-btn-login:hover {
background: var(--zp-color-primary-hover) !important;
border-color: var(--zp-color-primary-hover) !important;
}
.zp-theme-premium .zp-link,
.zp-theme-premium .zp-link-forget-password,
.zp-theme-premium .zp-link-sign-up {
color: var(--zp-color-primary);
text-decoration: none;
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .zp-link:hover { text-decoration: underline; }
.zp-theme-premium .zp-error-message,
.zp-theme-premium .zp-alert-danger {
background: var(--zp-color-error-50);
color: var(--zp-color-error-text);
border: 1px solid rgba(220, 38, 38, 0.20);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-2) var(--zp-space-3);
font-size: var(--zp-font-size-sm);
}
.zp-theme-premium .zp-alert-success,
.zp-theme-premium .zp-color-green {
background: var(--zp-color-success-50);
color: var(--zp-color-success-text);
border: 1px solid rgba(22, 163, 74, 0.20);
border-radius: var(--zp-radius-sm);
padding: var(--zp-space-2) var(--zp-space-3);
font-size: var(--zp-font-size-sm);
}
/* 2FA code group - large character inputs */
.zp-theme-premium .zp-2fa-code-group {
display: flex;
gap: var(--zp-space-2);
justify-content: center;
margin: var(--zp-space-3) 0;
}
.zp-theme-premium .zp-2fa-code-group input {
width: 44px;
height: 52px;
text-align: center;
font-size: var(--zp-font-size-xl);
font-weight: var(--zp-font-weight-semibold);
font-variant-numeric: tabular-nums;
border-radius: var(--zp-radius-sm);
border: 1px solid var(--zp-color-border);
background: var(--zp-color-surface);
}
.zp-theme-premium .zp-2fa-footer-links,
.zp-theme-premium .zp-2fa-alt-methods {
display: flex;
flex-wrap: wrap;
gap: var(--zp-space-3);
justify-content: center;
font-size: var(--zp-font-size-sm);
}
/* ====================================================================
Mobile responsive sweep - phone (<=480), tablet (<=768), small tablet
(<=1024). Sidebar/topbar chrome responsiveness comes from new_theme's
style.css. These rules fill the gaps inside the integration polish.
==================================================================== */
@media (max-width: 1024px) {
/* Two-column collapse for grids that default to 3+ columns. */
.zp-theme-premium .zp-store-grid,
.zp-theme-premium .products-page .zp-section-content.has-products-grid,
.zp-theme-premium .sub-plans-page,
.zp-theme-premium .plans-upgrade-page .zp-content-section {
grid-template-columns: repeat(2, 1fr) !important;
}
.zp-theme-premium .drive-wrapper.drive-grid-view .grid-items-wrapper {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
}
@media (max-width: 768px) {
.zp-page-wraper.zp-theme-premium > .zp-page-content {
padding-left: var(--zp-space-4) !important;
padding-right: var(--zp-space-4) !important;
}
.zp-theme-premium .zp-page-content {
padding-top: var(--zp-space-4);
padding-bottom: var(--zp-space-6);
}
/* Single-column stacking for any card grid. */
.zp-theme-premium .zp-store-grid,
.zp-theme-premium .products-page .zp-section-content.has-products-grid,
.zp-theme-premium .sub-plans-page,
.zp-theme-premium .plans-upgrade-page .zp-content-section {
grid-template-columns: 1fr !important;
}
.zp-theme-premium .drive-wrapper.drive-grid-view .grid-items-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Sign details grid stacks. */
.zp-theme-premium .zp-sign-detail-grid {
grid-template-columns: 1fr;
}
/* Wide tables (CRM list, Books list, cart) get horizontal scroll inside
their wrapper rather than blowing out the viewport. */
.zp-theme-premium .dataTables_wrapper,
.zp-theme-premium .zp-store-table,
.zp-theme-premium .zbooks-record-list {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* .zp-records-list exempted: base CSS turns its rows into stacked
label/value cards on phones - forcing a 600px min-width put those
cards in a sideways scroller. */
.zp-theme-premium .dataTable:not(.zp-records-list) {
min-width: 600px;
}
.zp-theme-premium .zp-store-table {
min-width: 480px;
}
/* Invoice/quote template: drop the print-page padding + center max-width. */
.zp-theme-premium .pcs-template,
.zp-theme-premium .invoice-page,
.zp-theme-premium .zp-quote-details-page {
padding: var(--zp-space-4) !important;
margin: var(--zp-space-3) 0 !important;
max-width: 100% !important;
}
.zp-theme-premium .pcs-itemtable,
.zp-theme-premium .pcs-template table {
font-size: var(--zp-font-size-xs);
}
/* List toolbar stacks vertically. */
.zp-theme-premium .zp-list-toolbar {
flex-direction: column;
align-items: flex-start;
}
.zp-theme-premium .zp-list-toolbar-left,
.zp-theme-premium .zp-list-toolbar-right {
width: 100%;
justify-content: space-between;
}
/* Mass action bar wraps tightly. */
.zp-theme-premium .zp-mass-action-bar {
flex-wrap: wrap;
}
/* Cart product cells get tighter image. */
.zp-theme-premium .zp-store-cart-product img {
width: 40px;
height: 40px;
}
/* Account-manager card avatar shrinks. */
.zp-theme-premium .zp-element-account-manager .zp-acm-image {
width: 64px;
height: 64px;
}
/* Workdrive title bar stacks. */
.zp-theme-premium .zp-zwd-title-bar {
flex-direction: column;
align-items: stretch;
}
.zp-theme-premium .title-bar-action {
justify-content: flex-end;
}
/* Vault chamber accordion: tighten padding so the password reveal row
doesn't blow the layout width. */
.zp-theme-premium .panel-body { padding: var(--zp-space-3); }
.zp-theme-premium .chamber-container { padding: var(--zp-space-2) var(--zp-space-3); }
.zp-theme-premium .vp-div,
.zp-theme-premium .psclr,
.zp-theme-premium .vpDiv {
flex-wrap: wrap;
}
/* Desk thread bubble + attachment cards have generous padding on desktop;
narrow it on phone. */
.zp-theme-premium .zp-messageContainer-JS,
.zp-theme-premium #zp-messageContainer-JS,
.zp-theme-premium .zp-ticket-attachement-section,
.zp-theme-premium .zp-thread-attachments-section {
padding: var(--zp-space-3);
}
.zp-theme-premium #zp-reply_editor {
min-height: 110px;
padding: var(--zp-space-3);
}
/* Add-ticket form padding tightens. */
.zp-theme-premium .add-ticket-page {
padding: var(--zp-space-4);
}
/* Auth card already has reasonable max-width; just trim outer padding. */
.zp-page-wraper.zp-theme-premium.zp-auth-page {
padding: var(--zp-space-4);
}
.zp-theme-premium .zp-auth-form-panel {
padding: var(--zp-space-6);
}
/* Dashboard custom-button strip stacks the buttons. */
.zp-theme-premium .zp-custom-button-section {
flex-direction: column;
align-items: stretch;
}
/* Quote action buttons stack and full-width. */
.zp-theme-premium .zp-books-action-section {
flex-direction: column;
}
.zp-theme-premium .zp-books-action-section .accept_quotes,
.zp-theme-premium .zp-books-action-section .declined_quotes {
width: 100%;
}
}
@media (max-width: 480px) {
/* Workdrive grid: single column on phone. */
.zp-theme-premium .drive-wrapper.drive-grid-view .grid-items-wrapper {
grid-template-columns: 1fr !important;
}
/* Auth card: full-width edge-to-edge on phone, no card chrome. */
.zp-theme-premium .zp-auth-form-panel {
padding: var(--zp-space-4);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
}
/* 2FA code group: shrink so 6 boxes fit in a 320px viewport. */
.zp-theme-premium .zp-2fa-code-group input {
width: 36px;
height: 44px;
font-size: var(--zp-font-size-lg);
}
}
/* ==== Premium block-based dashboard ==== */
.zp-theme-premium .zp-premium-dashboard {
display: grid;
gap: var(--zp-space-6);
}
.zp-theme-premium .zp-premium-dashboard-row {
grid-column: 1 / -1;
}
.zp-theme-premium .zp-premium-dashboard-row-split {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--zp-space-6);
}
/* ---------- Hero block ---------- */
.zp-theme-premium .zp-pd-hero {
position: relative;
/* #163961 mid-stop hardcoded so the gradient reads even when admin picks an off-brand primary */
background: linear-gradient(135deg, var(--zp-color-primary) 0%, #163961 60%, var(--zp-color-accent-600) 130%);
color: #fff;
border-radius: var(--zp-radius-md);
padding: var(--zp-space-8);
overflow: hidden;
box-shadow: var(--zp-shadow-md);
}
.zp-theme-premium .zp-pd-hero::before {
content: '';
position: absolute;
right: -120px; top: -120px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
border-radius: 50%;
pointer-events: none;
}
.zp-theme-premium .zp-pd-hero::after {
content: '';
position: absolute;
right: -60px; bottom: -180px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(var(--zp-color-accent-rgb), 0.14), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.zp-theme-premium .zp-pd-hero-eyebrow {
position: relative;
font-size: 12px;
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.75;
margin-bottom: var(--zp-space-2);
}
.zp-theme-premium .zp-pd-hero-headline {
position: relative;
margin: 0 0 var(--zp-space-3);
font-size: var(--zp-font-size-3xl);
font-weight: var(--zp-font-weight-bold);
letter-spacing: -0.02em;
color: #fff;
line-height: 1.15;
}
.zp-theme-premium .zp-pd-hero-subtitle {
position: relative;
margin: 0;
font-size: 15px;
color: rgba(255, 255, 255, 0.78);
max-width: 620px;
line-height: 1.55;
}
.zp-theme-premium .zp-pd-hero-actions {
position: relative;
z-index: 1;
margin-top: 22px;
display: flex;
gap: var(--zp-space-2);
flex-wrap: wrap;
}
.zp-theme-premium .zp-pd-hero-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 16px;
border-radius: var(--zp-radius-sm);
font-size: 13px;
font-weight: var(--zp-font-weight-semibold);
text-decoration: none;
transition: background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease);
white-space: nowrap;
}
.zp-theme-premium .zp-pd-hero-btn svg { width: 15px; height: 15px; }
.zp-theme-premium .zp-pd-hero-btn.is-primary {
background: #fff;
color: var(--zp-color-primary);
box-shadow: 0 2px 6px rgba(11, 27, 65, 0.15);
}
.zp-theme-premium .zp-pd-hero-btn.is-primary:hover { background: var(--zp-color-surface-3); }
.zp-theme-premium .zp-pd-hero-btn.is-ghost {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.zp-theme-premium .zp-pd-hero-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.18); }
/* Custom hero backgrounds: the renderer only sets inline style when the admin
picked colors, so [style] is the hook to neutralize the teal blob; is-light
(set by the renderer's luminance check) flips the text dark. */
.zp-theme-premium .zp-pd-hero[style]::after {
background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%);
}
.zp-theme-premium .zp-pd-hero.is-light { color: #0B1B2B; }
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-headline { color: #0B1B2B; }
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-subtitle { color: rgba(11, 27, 43, 0.75); }
.zp-theme-premium .zp-pd-hero.is-light::before {
background: radial-gradient(circle, rgba(11, 27, 43, 0.05), transparent 60%);
}
.zp-theme-premium .zp-pd-hero.is-light::after {
background: radial-gradient(circle, rgba(11, 27, 43, 0.04), transparent 65%);
}
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-btn.is-primary {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
}
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-btn.is-primary:hover {
background: var(--zp-color-primary-hover);
}
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-btn.is-ghost {
background: rgba(11, 27, 43, 0.06);
color: #0B1B2B;
border-color: rgba(11, 27, 43, 0.25);
}
.zp-theme-premium .zp-pd-hero.is-light .zp-pd-hero-btn.is-ghost:hover {
background: rgba(11, 27, 43, 0.10);
}
/* ---------- Quick-link cards ---------- */
.zp-theme-premium .zp-pd-cards {
display: grid;
gap: var(--zp-space-4);
}
.zp-theme-premium .zp-pd-cards.cards-2 { grid-template-columns: repeat(2, 1fr); }
.zp-theme-premium .zp-pd-cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
.zp-theme-premium .zp-pd-cards.cards-4 { grid-template-columns: repeat(4, 1fr); }
.zp-theme-premium .zp-pd-card {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-5);
display: flex;
flex-direction: column;
gap: var(--zp-space-4);
box-shadow: var(--zp-shadow-sm);
text-decoration: none;
color: inherit;
transition: border-color 0.2s var(--zp-ease), transform 0.2s var(--zp-ease), box-shadow 0.2s var(--zp-ease);
}
.zp-theme-premium .zp-pd-card:hover {
border-color: var(--zp-color-accent);
transform: translateY(-2px);
box-shadow: var(--zp-shadow-md);
}
.zp-theme-premium .zp-pd-card-ic {
width: 40px;
height: 40px;
border-radius: var(--zp-radius-sm);
display: grid;
place-items: center;
flex-shrink: 0;
}
.zp-theme-premium .zp-pd-card-ic svg { width: 20px; height: 20px; }
.zp-theme-premium .zp-pd-card-ic.is-blue { background: var(--zp-color-accent-50); color: var(--zp-color-accent); }
.zp-theme-premium .zp-pd-card-ic.is-green { background: var(--zp-color-success-50); color: var(--zp-color-success); }
.zp-theme-premium .zp-pd-card-ic.is-amber { background: var(--zp-color-warning-50); color: var(--zp-color-warning); }
.zp-theme-premium .zp-pd-card-ic.is-teal { background: var(--zp-color-info-50); color: var(--zp-color-info); }
.zp-theme-premium .zp-pd-card-title {
font-size: 15px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
margin: 0 0 var(--zp-space-1);
letter-spacing: -0.005em;
}
.zp-theme-premium .zp-pd-card-sub {
font-size: 13px;
color: var(--zp-color-text-muted);
margin: 0;
line-height: 1.5;
}
.zp-theme-premium .zp-pd-card-footer {
margin-top: auto;
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-accent);
}
.zp-theme-premium .zp-pd-card-footer svg {
width: 14px;
height: 14px;
transition: transform 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-pd-card:hover .zp-pd-card-footer svg { transform: translateX(2px); }
/* ---------- Video block ---------- */
.zp-theme-premium .zp-pd-video {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
overflow: hidden;
box-shadow: var(--zp-shadow-sm);
}
.zp-theme-premium .zp-pd-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #0B1B2B;
overflow: hidden;
}
.zp-theme-premium .zp-pd-video-frame iframe,
.zp-theme-premium .zp-pd-video-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.zp-theme-premium .zp-pd-video-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: radial-gradient(ellipse at center, rgba(var(--zp-color-accent-rgb), 0.18), transparent 65%),
linear-gradient(135deg, var(--zp-color-primary), var(--zp-color-primary-hover));
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
}
.zp-theme-premium .zp-pd-video-play {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--zp-color-primary);
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(11, 27, 65, 0.25);
}
.zp-theme-premium .zp-pd-video-play svg { width: 22px; height: 22px; transform: translateX(2px); }
.zp-theme-premium .zp-pd-video-meta {
padding: var(--zp-space-4) var(--zp-space-6);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--zp-space-4);
border-top: 1px solid var(--zp-color-border);
}
.zp-theme-premium .zp-pd-video-meta h3 {
margin: 0 0 2px;
font-size: 15px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
letter-spacing: -0.005em;
}
.zp-theme-premium .zp-pd-video-meta p {
margin: 0;
font-size: 13px;
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-pd-video-duration {
flex-shrink: 0;
font-size: 12px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text-muted);
background: var(--zp-color-surface-3);
padding: 4px 8px;
border-radius: 8px;
font-variant-numeric: tabular-nums;
}
/* ---------- Resource list ---------- */
.zp-theme-premium .zp-pd-resources {
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
display: flex;
flex-direction: column;
}
.zp-theme-premium .zp-pd-resources-header {
padding: var(--zp-space-4) var(--zp-space-6);
border-bottom: 1px solid var(--zp-color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.zp-theme-premium .zp-pd-resources-header h3 {
margin: 0;
font-size: 14px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
letter-spacing: -0.005em;
}
.zp-theme-premium .zp-pd-resources-header .meta {
font-size: 12.5px;
color: var(--zp-color-text-muted);
}
.zp-theme-premium .zp-pd-resources-list {
padding: var(--zp-space-2) 0;
flex: 1;
}
.zp-theme-premium .zp-pd-resource {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 14px;
padding: 14px var(--zp-space-6);
text-decoration: none;
color: inherit;
transition: background 0.1s var(--zp-ease);
}
.zp-theme-premium .zp-pd-resource:hover { background: var(--zp-color-surface-2); }
.zp-theme-premium .zp-pd-resource + .zp-pd-resource { border-top: 1px solid var(--zp-color-border); }
.zp-theme-premium .zp-pd-resource-ic {
width: 36px;
height: 36px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--zp-color-surface-3);
color: var(--zp-color-text-2);
flex-shrink: 0;
}
.zp-theme-premium .zp-pd-resource-ic svg { width: 16px; height: 16px; }
.zp-theme-premium .zp-pd-resource-ic.is-blue { background: var(--zp-color-accent-50); color: var(--zp-color-accent); }
.zp-theme-premium .zp-pd-resource-ic.is-green { background: var(--zp-color-success-50); color: var(--zp-color-success); }
.zp-theme-premium .zp-pd-resource-ic.is-amber { background: var(--zp-color-warning-50); color: var(--zp-color-warning); }
.zp-theme-premium .zp-pd-resource-ic.is-teal { background: var(--zp-color-info-50); color: var(--zp-color-info); }
.zp-theme-premium .zp-pd-resource-text { min-width: 0; }
.zp-theme-premium .zp-pd-resource-title {
font-size: 13.5px;
font-weight: var(--zp-font-weight-semibold);
color: var(--zp-color-text);
margin: 0 0 2px;
}
.zp-theme-premium .zp-pd-resource-sub {
font-size: 12.5px;
color: var(--zp-color-text-muted);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zp-theme-premium .zp-pd-resource-arrow { color: var(--zp-color-text-faint); }
.zp-theme-premium .zp-pd-resource-arrow svg { width: 16px; height: 16px; }
.zp-theme-premium .zp-pd-resource:hover .zp-pd-resource-arrow { color: var(--zp-color-accent); }
/* ---------- Dashboard responsive ---------- */
@media (max-width: 1024px) {
.zp-theme-premium .zp-pd-cards.cards-4 { grid-template-columns: repeat(2, 1fr); }
.zp-theme-premium .zp-premium-dashboard-row-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.zp-theme-premium .zp-pd-hero { padding: var(--zp-space-6) var(--zp-space-5); }
.zp-theme-premium .zp-pd-hero-headline { font-size: 24px; }
.zp-theme-premium .zp-pd-cards.cards-2,
.zp-theme-premium .zp-pd-cards.cards-3,
.zp-theme-premium .zp-pd-cards.cards-4 { grid-template-columns: 1fr; }
.zp-theme-premium .zp-pd-resources-header { padding: 14px var(--zp-space-4); }
.zp-theme-premium .zp-pd-resource { padding: 12px var(--zp-space-4); }
}
/* ---------- Overlay components (appended to , outside .zp-theme-premium) ----------
SweetAlert2, colorbox, select2 dropdowns, and the jQuery UI datepicker render
at body level, so the wrapper-scoped tokens never reach them. This stylesheet
only loads when Premium is active, so body-level selectors are safe. Custom
brand colors arrive via the --zpp-overlay-* vars set on :root by
pages/premium_theme/common/style.php; the var() fallbacks are the defaults. */
/* SweetAlert2 (v10) */
body .swal2-popup {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
border-radius: 16px;
padding: 28px 24px 24px;
box-shadow: 0 10px 24px -8px rgba(11, 27, 65, 0.18), 0 4px 8px -4px rgba(11, 27, 65, 0.08);
color: #0B1B2B;
}
body .swal2-title {
color: #0B1B2B;
font-size: 18px;
font-weight: 600;
}
body .swal2-content,
body .swal2-html-container {
color: #5A6A80;
font-size: 14px;
line-height: 1.5;
}
body .swal2-actions {
gap: 10px;
margin-top: 20px;
}
body .swal2-styled.swal2-confirm {
background: var(--zpp-overlay-primary, #0B2545) !important;
color: var(--zpp-overlay-primary-foreground, #FFFFFF) !important;
border-radius: 8px !important;
font-size: 14px;
font-weight: 500;
padding: 10px 18px;
box-shadow: none !important;
}
body .swal2-styled.swal2-confirm:hover,
body .swal2-styled.swal2-confirm:focus {
background: var(--zpp-overlay-primary-hover, #14315A) !important;
}
body .swal2-styled.swal2-cancel,
body .swal2-styled.swal2-deny {
background: #FFFFFF !important;
color: #3D4D63 !important;
border: 1px solid #D5DBE4 !important;
border-radius: 8px !important;
font-size: 14px;
font-weight: 500;
padding: 10px 18px;
box-shadow: none !important;
}
body .swal2-styled.swal2-cancel:hover,
body .swal2-styled.swal2-deny:hover {
background: #F1F4F9 !important;
}
/* Colorbox (hosts the CRM lookup / add-update modals) */
#cboxOverlay {
background: #0B1B2B;
}
#cboxContent,
#cboxLoadedContent {
background: #FFFFFF;
border-radius: 16px;
}
#colorbox #cboxContent {
box-shadow: 0 10px 24px -8px rgba(11, 27, 65, 0.18), 0 4px 8px -4px rgba(11, 27, 65, 0.08);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#cboxLoadedContent .zp-modal-body {
color: #0B1B2B;
font-size: 14px;
}
#cboxLoadedContent .zp-modal-footer {
border-top: 1px solid #E5E9F0;
padding-top: 12px;
margin-top: 12px;
}
/* select2 (v4.0.3) - controls live inside the wrapper, dropdown appends to body */
.zp-theme-premium .select2-container--default .select2-selection--single {
height: 40px;
background: #FFFFFF;
border: 1px solid #D5DBE4;
border-radius: 8px;
}
.zp-theme-premium .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px;
padding-left: 12px;
color: #0B1B2B;
font-size: 14px;
}
.zp-theme-premium .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
}
.zp-theme-premium .select2-container--default .select2-selection--multiple {
min-height: 40px;
background: #FFFFFF;
border: 1px solid #D5DBE4;
border-radius: 8px;
}
.zp-theme-premium .select2-container--default .select2-selection--multiple .select2-selection__choice {
background: #EEF2F8;
border: 1px solid #D5DBE4;
border-radius: 8px;
color: #0B1B2B;
font-size: 13px;
padding: 2px 8px;
}
.zp-theme-premium .select2-container--default.select2-container--focus .select2-selection--single,
.zp-theme-premium .select2-container--default.select2-container--focus .select2-selection--multiple,
.zp-theme-premium .select2-container--default.select2-container--open .select2-selection--single,
.zp-theme-premium .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--zpp-overlay-accent, #2A6FF2);
box-shadow: 0 0 0 3px rgba(var(--zpp-overlay-accent-rgb, 42, 111, 242), 0.12);
}
.select2-container--default .select2-dropdown {
background: #FFFFFF;
border: 1px solid #D5DBE4;
border-radius: 8px;
box-shadow: 0 10px 24px -8px rgba(11, 27, 65, 0.18), 0 4px 8px -4px rgba(11, 27, 65, 0.08);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #D5DBE4;
border-radius: 8px;
padding: 6px 10px;
outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--zpp-overlay-accent, #2A6FF2);
}
.select2-container--default .select2-results__option {
padding: 8px 12px;
color: #0B1B2B;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--zpp-overlay-accent, #2A6FF2);
color: #FFFFFF;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: #EEF2F8;
color: #0B1B2B;
}
/* jQuery UI datepicker (script-only enqueue; no UI theme css ships with it) */
body .ui-datepicker {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 12px;
box-shadow: 0 10px 24px -8px rgba(11, 27, 65, 0.18), 0 4px 8px -4px rgba(11, 27, 65, 0.08);
padding: 12px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
z-index: 1200 !important;
}
body .ui-datepicker .ui-datepicker-header {
position: relative;
padding: 2px 0 8px;
text-align: center;
border: 0;
background: transparent;
}
body .ui-datepicker .ui-datepicker-title {
font-weight: 600;
color: #0B1B2B;
font-size: 13.5px;
line-height: 26px;
margin: 0 28px;
}
body .ui-datepicker .ui-datepicker-title select {
border: 1px solid #D5DBE4;
border-radius: 8px;
padding: 2px 4px;
font-size: 12.5px;
margin: 0 2px;
}
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 26px;
height: 26px;
border-radius: 8px;
cursor: pointer;
text-align: center;
line-height: 26px;
color: #5A6A80;
}
body .ui-datepicker .ui-datepicker-prev { left: 2px; }
body .ui-datepicker .ui-datepicker-next { right: 2px; }
body .ui-datepicker .ui-datepicker-prev:hover,
body .ui-datepicker .ui-datepicker-next:hover {
background: #F1F4F9;
color: #0B1B2B;
}
body .ui-datepicker .ui-datepicker-prev span,
body .ui-datepicker .ui-datepicker-next span {
display: none;
}
body .ui-datepicker .ui-datepicker-prev::before { content: '\2039'; font-size: 16px; }
body .ui-datepicker .ui-datepicker-next::before { content: '\203A'; font-size: 16px; }
body .ui-datepicker table {
border-collapse: collapse;
margin: 0;
width: auto;
}
body .ui-datepicker th {
font-size: 11px;
color: #97A2B3;
font-weight: 600;
text-transform: uppercase;
padding: 4px;
border: 0;
background: transparent;
}
body .ui-datepicker td {
padding: 1px;
border: 0;
}
body .ui-datepicker td a,
body .ui-datepicker td span {
display: block;
width: 30px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 8px;
color: #0B1B2B;
text-decoration: none;
border: 0;
background: transparent;
}
body .ui-datepicker td a:hover {
background: #F1F4F9;
}
body .ui-datepicker td span.ui-state-default {
color: #97A2B3;
}
body .ui-datepicker td .ui-state-highlight {
background: #E8F0FE;
color: var(--zpp-overlay-accent, #2A6FF2);
font-weight: 600;
}
body .ui-datepicker td .ui-state-active {
background: var(--zpp-overlay-primary, #0B2545);
color: var(--zpp-overlay-primary-foreground, #FFFFFF);
font-weight: 600;
}
body .ui-datepicker .ui-datepicker-buttonpane {
border-top: 1px solid #E5E9F0;
margin-top: 8px;
padding-top: 8px;
}
body .ui-datepicker .ui-datepicker-buttonpane button {
background: #FFFFFF;
border: 1px solid #D5DBE4;
border-radius: 8px;
color: #3D4D63;
font-size: 12.5px;
padding: 4px 10px;
cursor: pointer;
}
body .ui-datepicker .ui-datepicker-buttonpane button:hover {
background: #F1F4F9;
}
/* ---------- Loading + empty states ---------- */
/* Global AJAX overlay: recolor new_theme's blue border-spinner to premium
tokens (overlay is body-level, so this only loads under premium). */
#loadingDiv {
background-color: rgba(246, 248, 251, 0.72);
}
.loader,
#loadingDiv .loader {
border-top-color: #E5E9F0;
border-right-color: #E5E9F0;
border-left-color: #E5E9F0;
border-bottom-color: var(--zpp-overlay-accent, #2A6FF2);
/* Base is 1.1s/turn on a 122px ring - the rim travels fast enough to read
as frantic rather than "working". Only the duration is overridden so the
shared load8 keyframes stay untouched. */
animation-duration: 1.8s;
-webkit-animation-duration: 1.8s;
}
/* Gallery tiles fetch each photo over its own AJAX call, so this spinner is
on screen for a while. Base parks the full-size ring in the top third of
the frame (margin: 48px auto); center it and bring it down to a size that
suits a thumbnail. */
.zp-theme-premium .module-list-gallery .loading-one {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(11, 27, 43, 0.05);
}
.zp-theme-premium .module-list-gallery .loading-one .loader,
.zp-theme-premium .module-list-gallery .zp-module-list-item .loading-one .loader {
font-size: 4px;
margin: 0;
}
/* Empty lists: quiet, centered, on-scale instead of bare table text */
.zp-theme-premium .dataTables_empty,
.zp-theme-premium .noRecordZWDtxt,
.zp-theme-premium #zp-sign-no-records {
padding: var(--zp-space-12) var(--zp-space-6) !important;
text-align: center !important;
color: var(--zp-color-text-muted) !important;
font-size: var(--zp-font-size-base) !important;
font-family: var(--zp-font-family) !important;
}
/* Neutral info alert (markup uses zp-alert-info; new_theme only defines a
typo'd .zp-alert-alert-info, so style it here for premium) */
.zp-theme-premium .zp-alert-info {
background: var(--zp-color-surface-2);
border: 1px solid var(--zp-color-border);
color: var(--zp-color-text-muted);
border-radius: var(--zp-radius-sm);
}
/* ---------- List toolbar buttons + inline-edit affordance ---------- */
/* Icons inside the primary add button inherit the button color instead of
the SVG's baked-in green */
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-add-edit-record-js svg path,
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-add-edit-record-js svg circle,
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-add-edit-record-js svg rect {
fill: currentColor !important;
stroke: none !important;
}
/* Download Data + Filter as quiet ghost buttons beside the primary add */
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-export-data-js,
.zp-theme-premium .zp-page-content .zp-record-filter {
display: inline-flex !important;
align-items: center;
gap: 6px;
width: auto !important;
height: 36px !important;
padding: 0 12px !important;
background: var(--zp-color-surface) !important;
color: var(--zp-color-text-2) !important;
border: 1px solid var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-sm) !important;
font-size: var(--zp-font-size-sm);
white-space: nowrap;
line-height: 36px !important;
}
.zp-theme-premium .zp-page-content:not(.zp-workdrive-page) .zp-record-add.zp-export-data-js:hover,
.zp-theme-premium .zp-page-content .zp-record-filter:hover {
background: var(--zp-color-surface-2) !important;
color: var(--zp-color-text) !important;
}
.zp-theme-premium .zp-page-content .zp-record-filter svg path {
fill: currentColor !important;
}
/* Inline-edit pencils: anchored to their own cell, hover-reveal only.
(Base positions them absolute; premium's cell layout changed the offset
parent, which made every pencil pile up at one x-position.) */
.zp-theme-premium td.zp-inline-edit {
position: relative;
}
.zp-theme-premium td.zp-inline-edit .zp-inline-edit-icon {
opacity: 0 !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.zp-theme-premium td.zp-inline-edit:hover .zp-inline-edit-icon {
opacity: 0.55 !important;
}
/* ---------- Add/Edit record modal (inside colorbox) ---------- */
#cboxLoadedContent .zp-record-add-edit-form,
#cboxLoadedContent .zp-record-add-edit-form *:not(i):not(svg):not(path):not([class*="fa-"]) {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#cboxLoadedContent .zp-record-add-edit-form {
padding: 4px 12px 12px;
}
#cboxLoadedContent .zp-section-header-container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0 14px;
padding: 0 0 10px;
border-bottom: 1px solid #E5E9F0;
}
#cboxLoadedContent .section-header-title {
font-size: 14px;
font-weight: 600;
color: #0B1B2B;
letter-spacing: 0.02em;
}
#cboxLoadedContent .zp-record-add-edit-form input[type="text"],
#cboxLoadedContent .zp-record-add-edit-form input[type="email"],
#cboxLoadedContent .zp-record-add-edit-form input[type="tel"],
#cboxLoadedContent .zp-record-add-edit-form input[type="number"],
#cboxLoadedContent .zp-record-add-edit-form input[type="url"],
#cboxLoadedContent .zp-record-add-edit-form input[type="date"],
#cboxLoadedContent .zp-record-add-edit-form select,
#cboxLoadedContent .zp-record-add-edit-form textarea {
height: 40px;
border: 1px solid #D5DBE4 !important;
border-radius: 8px !important;
padding: 0 12px !important;
background: #FFFFFF !important;
color: #0B1B2B !important;
font-size: 14px;
box-sizing: border-box;
}
#cboxLoadedContent .zp-record-add-edit-form textarea {
height: auto;
min-height: 80px;
padding: 10px 12px !important;
}
#cboxLoadedContent .zp-record-add-edit-form input:focus,
#cboxLoadedContent .zp-record-add-edit-form select:focus,
#cboxLoadedContent .zp-record-add-edit-form textarea:focus {
border-color: var(--zpp-overlay-accent, #2A6FF2) !important;
box-shadow: 0 0 0 3px rgba(var(--zpp-overlay-accent-rgb, 42, 111, 242), 0.12) !important;
outline: none;
}
#cboxLoadedContent .zp-btn-section {
display: flex !important;
justify-content: flex-end;
align-items: center;
gap: 10px;
border-top: 1px solid #E5E9F0;
margin-top: 24px !important;
padding-top: 16px !important;
}
#cboxLoadedContent .zp-submit-btn {
background: var(--zpp-overlay-primary, #0B2545) !important;
color: var(--zpp-overlay-primary-foreground, #FFFFFF) !important;
border: 0 !important;
border-radius: 8px !important;
height: 38px;
padding: 0 18px !important;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
#cboxLoadedContent .zp-submit-btn:hover {
background: var(--zpp-overlay-primary-hover, #14315A) !important;
}
#cboxLoadedContent .zp-edit-cancel-btn {
background: #FFFFFF !important;
color: #3D4D63 !important;
border: 1px solid #D5DBE4 !important;
border-radius: 8px !important;
height: 38px;
line-height: 36px;
padding: 0 16px !important;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
}
#cboxLoadedContent .zp-edit-cancel-btn:hover {
background: #F1F4F9 !important;
}
/* ====================================================================
Design-pass round 2: tables, records, forms, states
==================================================================== */
/* Mobile card mode: base converts list rows to stacked cards under 768px;
give them the premium card treatment. */
@media (max-width: 768px) {
.zp-page-wraper.zp-theme-premium .zp-records-list tbody tr {
background-color: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-md);
box-shadow: var(--zp-shadow-sm);
margin-bottom: var(--zp-space-3);
}
}
/* Sort indicators: kill the sprite-era arrows, draw token chevrons */
.zp-theme-premium table.dataTable thead th.sorting,
.zp-theme-premium table.dataTable thead th.sorting_asc,
.zp-theme-premium table.dataTable thead th.sorting_desc {
background-image: none !important;
position: relative;
padding-right: 22px !important;
cursor: pointer;
}
.zp-theme-premium table.dataTable thead th.sorting::after,
.zp-theme-premium table.dataTable thead th.sorting_asc::after,
.zp-theme-premium table.dataTable thead th.sorting_desc::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
opacity: 0;
transition: opacity 0.15s var(--zp-ease);
}
.zp-theme-premium table.dataTable thead th.sorting:hover::after {
opacity: 0.35;
transform: translateY(-70%) rotate(45deg);
}
.zp-theme-premium table.dataTable thead th.sorting_asc::after {
opacity: 1;
color: var(--zp-color-accent-600);
transform: translateY(-30%) rotate(-135deg);
}
.zp-theme-premium table.dataTable thead th.sorting_desc::after {
opacity: 1;
color: var(--zp-color-accent-600);
transform: translateY(-70%) rotate(45deg);
}
/* Numeric cells: right-aligned tabular figures */
.zp-theme-premium .zp-records-list td:is(.zp-data-type-currency, .zp-data-type-double, .zp-data-type-integer, .zp-data-type-bigint) {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Row selection state + native checkbox accent */
.zp-theme-premium .zp-records-list input[type="checkbox"] {
accent-color: var(--zp-color-accent);
width: 15px;
height: 15px;
}
.zp-theme-premium .zp-records-list tbody tr:has(.zp-mass-row-checkbox:checked) td {
background-color: var(--zp-color-accent-50) !important;
}
/* Server pager: quiet ghost buttons, not primary CTAs */
.zp-theme-premium .cust-pagination-button-section .next-prev-btn {
background: var(--zp-color-surface) !important;
color: var(--zp-color-text-2) !important;
border: 1px solid var(--zp-color-border-strong) !important;
border-radius: var(--zp-radius-sm) !important;
height: 34px !important;
line-height: 32px !important;
padding: 0 14px !important;
font-size: var(--zp-font-size-sm) !important;
font-weight: var(--zp-font-weight-medium) !important;
margin-left: var(--zp-space-2);
}
.zp-theme-premium .cust-pagination-button-section .next-prev-btn:hover {
background: var(--zp-color-surface-2) !important;
color: var(--zp-color-text) !important;
}
/* Modal: neutralize the page-level content padding inside the modal body
and pin the action bar so Save is never off-screen */
.zp-page-wraper.zp-theme-premium .zp-modal-wraper .zp-page-content {
padding: 0 !important;
max-width: none !important;
}
.zp-page-wraper.zp-theme-premium .zp-modal-wraper .zp-btn-section {
position: sticky;
bottom: calc(-1 * var(--zp-space-6));
background: var(--zp-color-surface);
padding: var(--zp-space-3) 0 var(--zp-space-4) !important;
margin-bottom: calc(-1 * var(--zp-space-6)) !important;
z-index: 2;
}
/* Readonly/disabled fields must not masquerade as editable */
.zp-theme-premium .zp-record-add-edit-form :is(input, select, textarea)[readonly],
.zp-theme-premium .zp-record-add-edit-form :is(input, select, textarea)[disabled] {
background: var(--zp-color-surface-2) !important;
color: var(--zp-color-text-2) !important;
border-style: dashed !important;
cursor: not-allowed;
}
/* Validation error state */
.zp-theme-premium :is(input, select, textarea).zp-input-error,
.zp-theme-premium :is(input, select, textarea).zp-required-focus {
border-color: var(--zp-color-error) !important;
box-shadow: 0 0 0 3px var(--zp-color-error-50) !important;
}
/* Button states the system was missing */
.zp-theme-premium :is(button, .btn, .zp-btn, input[type="submit"]):disabled {
opacity: 0.55;
cursor: not-allowed;
}
.zp-theme-premium :is(button, .btn, .zp-btn, input[type="submit"]):active {
transform: translateY(0.5px);
}
.zp-theme-premium .btn-danger:hover,
.zp-theme-premium .zp-mass-delete-btn:hover,
.zp-theme-premium .zp-store-btn-danger:hover {
filter: brightness(0.92);
}
.zp-theme-premium .accept_quotes:hover,
.zp-theme-premium .zp-upload-files-btn:hover,
.zp-theme-premium #zp-upload-files-btn:hover {
filter: brightness(1.08);
}
.zp-theme-premium .zp-reset-files-btn:hover,
.zp-theme-premium #zp-reset-files-btn:hover {
background: var(--zp-color-surface-2) !important;
}
/* No-permission / not-found messages: the last bare-text tell */
.zp-theme-premium p.message,
.zp-theme-premium .message {
display: block;
padding: var(--zp-space-12) var(--zp-space-6);
text-align: center;
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-base);
font-family: var(--zp-font-family);
background: var(--zp-color-surface);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-lg);
}
/* Flash alerts: full-width premium bars instead of centered legacy pills */
.zp-theme-premium .zp-alert {
width: 100% !important;
max-width: none !important;
margin: 0 0 var(--zp-space-4) !important;
text-align: left !important;
border-radius: var(--zp-radius-sm) !important;
padding: var(--zp-space-3) var(--zp-space-4) !important;
font-size: var(--zp-font-size-sm);
border-width: 1px;
border-style: solid;
}
.zp-theme-premium .zp-alert-warning {
background: var(--zp-color-warning-50) !important;
color: var(--zp-color-warning-text) !important;
border-color: rgba(217, 119, 6, 0.25) !important;
}
/* Attachments table joins the premium table system */
.zp-theme-premium .zp-attachment-list thead th {
background: var(--zp-color-surface-2);
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-xs);
font-weight: var(--zp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
padding: 8px 12px;
border-bottom: 1px solid var(--zp-color-border);
}
.zp-theme-premium .zp-attachment-list tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--zp-color-border);
font-size: var(--zp-font-size-sm);
color: var(--zp-color-text);
}
.zp-theme-premium .zp-attachment-list tbody tr:last-child td {
border-bottom: 0;
}
/* Notes: card rows on the premium surface */
.zp-theme-premium .zp-note-item {
background: var(--zp-color-surface) !important;
border: 1px solid var(--zp-color-border) !important;
border-radius: var(--zp-radius-sm) !important;
padding: var(--zp-space-4) !important;
margin-bottom: var(--zp-space-3) !important;
box-shadow: none !important;
}
.zp-theme-premium .zp-note-item h4,
.zp-theme-premium .zp-note-item .zp-note-title {
color: var(--zp-color-text) !important;
font-size: var(--zp-font-size-base) !important;
font-weight: var(--zp-font-weight-semibold) !important;
}
/* Deals stage bar: token treatment replacing the emerald/slate inline theme */
.zp-theme-premium .deal-stage-progress-bar .zp-breadcrumb a {
background: var(--zp-color-surface-3) !important;
color: var(--zp-color-text-muted) !important;
font-family: var(--zp-font-family) !important;
font-size: var(--zp-font-size-sm) !important;
}
.zp-theme-premium .deal-stage-progress-bar .zp-breadcrumb a.active {
background: linear-gradient(135deg, var(--zp-color-accent), var(--zp-color-accent-600)) !important;
color: var(--zpp-active-pill-fg, #FFFFFF) !important;
}
.zp-theme-premium .deal-stage-progress-bar .zp-breadcrumb a:hover:not(.active) {
background: var(--zp-color-surface-muted) !important;
color: var(--zp-color-text-2) !important;
}
.zp-theme-premium #zp-leftarrow-btn,
.zp-theme-premium #zp-rightarrow-btn {
background: var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
}
/* ====================================================================
Expert redesigns: subform editor, skeleton loading, toasts, dots
==================================================================== */
/* Subform editor: one add affordance (header action), hover-reveal delete,
row hover, type-aware column widths.
Load-bearing dependency: the header add button ships with inline
display:none and is hidden by two JS paths; it stays visible under
premium ONLY because an earlier rule (search "zp-add-subform-row" with
display: inline-flex !important) overrides them. If that rule is ever
softened, premium subform editing loses its only add button. */
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list tbody .zp-add-subform-row {
display: none !important;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list .zp-remove-subform-row {
opacity: 0;
transition: opacity 0.15s var(--zp-ease), background-color 0.15s var(--zp-ease);
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list tr:hover .zp-remove-subform-row,
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list .zp-remove-subform-row:focus-visible {
opacity: 1;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list tbody tr:not(.subform-empty-row):hover td {
background: var(--zp-color-surface-2);
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td:has(> input[type="number"]),
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td:has(> .zp-currency-form-control) {
min-width: 104px;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td input[type="number"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.zp-theme-premium .zp-record-add-edit-form .zp-subform-record-list td:has(> input[type="checkbox"]) {
min-width: 56px;
text-align: center;
}
/* Modal skeleton (shown while the add/edit layout is fetched) */
.zpp-modal-skeleton {
padding: var(--zp-space-2) 0 var(--zp-space-4);
}
.zpp-skel-field {
margin-bottom: var(--zp-space-4);
}
.zpp-skel-label,
.zpp-skel-input {
border-radius: var(--zp-radius-sm);
background: linear-gradient(90deg, var(--zp-color-surface-2) 25%, var(--zp-color-surface-3) 50%, var(--zp-color-surface-2) 75%);
background-size: 200% 100%;
animation: zppShimmer 1.4s var(--zp-ease) infinite;
}
.zpp-skel-label {
width: 120px;
height: 12px;
margin-bottom: 8px;
}
.zpp-skel-input {
width: 100%;
height: 40px;
}
@keyframes zppShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.zpp-skel-label,
.zpp-skel-input { animation: none; }
}
/* Success flashes float as auto-dismissing toasts (JS in premium topbar) */
.zp-theme-premium .zp-page-content > .zp-alert-success {
position: fixed;
top: 80px;
right: 24px;
width: auto !important;
max-width: 380px !important;
z-index: 1100;
box-shadow: var(--zp-shadow-lg);
animation: zppMenuIn 0.2s var(--zp-ease);
cursor: pointer;
}
/* One dot mechanism: Subscriptions pills (both the zp-plan-status-pill
variants and the My Plans zp-status-* pills) drop the FA circle glyph
and use the same ::before dot as every other premium pill */
.zp-theme-premium .zp-plan-status-pill,
.zp-theme-premium :is(.zp-status-live, .zp-status-cancel, .zp-status-trial, .zp-status-non-reniew) {
display: inline-flex;
align-items: center;
gap: 6px;
}
.zp-theme-premium .zp-plan-status-pill .circle-icon,
.zp-theme-premium :is(.zp-status-live, .zp-status-cancel, .zp-status-trial, .zp-status-non-reniew) .circle-icon {
display: none !important;
}
.zp-theme-premium .zp-plan-status-pill::before,
.zp-theme-premium :is(.zp-status-live, .zp-status-cancel, .zp-status-trial, .zp-status-non-reniew)::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Inline-edit pencil: full-strength reveal, keyboard reveal included */
.zp-theme-premium td.zp-inline-edit:hover .zp-inline-edit-icon,
.zp-theme-premium .zp-field-data.zp-inline-edit:hover .zp-inline-edit-icon,
.zp-theme-premium .zp-inline-edit:focus-within .zp-inline-edit-icon {
opacity: 1 !important;
}
/* ====================================================================
QA follow-ups: filled buttons after the *_fc token change
(see pages/premium_theme/common/style.php - the fc tokens are now
on-light text colors, so filled buttons set their labels here).
==================================================================== */
.zp-page-wraper.zp-theme-premium .zp-view-btn {
color: var(--zpp-chrome-fg, #FFFFFF) !important;
}
.zp-page-wraper.zp-theme-premium .zoho-subscription-page .zp-view-btn {
border-color: var(--btn_view_bg_color) !important;
}
.zp-page-wraper.zp-theme-premium .reset_filter {
color: #DC2626 !important;
border-color: rgba(220, 38, 38, 0.35) !important;
}
/* Sign-up: the inner .login-form already draws its own card; without this
Premium's .zp-auth-form-panel drew a second card around it. */
.zp-theme-premium.zp-sign-up-page .zp-auth-form-panel {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
max-width: 640px;
}
/* The 4th quicklink tile inherits --btn_delete_fc from new_theme's
.zp-ql-item-index-3 rules; that token is now a red on-light text color,
so pin the tile back to the premium text palette. */
.zp-page-wraper.zp-theme-premium .zp-quicklink-item.zp-ql-item-index-3 a {
color: var(--zp-color-text, #0B1B2B) !important;
}
.zp-page-wraper.zp-theme-premium .zp-quicklink-item.zp-ql-item-index-3 svg {
fill: var(--zp-color-accent, currentColor) !important;
}
/* ====================================================================
6.4.1 mobile/responsive corrections (premium loads last, so these
also override the base sheet's equal-specificity mobile guards).
==================================================================== */
@media (max-width: 1000px) {
/* Split-screen login: don't pin the image panel to a full viewport
height on phones, or the form lands a whole screen down. */
.zp-theme-premium.zp-auth-layout-split .zp-auth-split-panel {
min-height: 220px;
flex: none;
}
/* Mobile list "card" view: the base sheet reserves 48% left padding for
the absolutely-positioned column label; premium's cell padding shorthand
was wiping it, overprinting label and value. */
.zp-theme-premium .zp-records-list tbody tr td {
padding-left: 48% !important;
}
}
/* Wide tables must scroll horizontally at every width, not just <=768. */
.zp-theme-premium .dataTables_wrapper {
overflow-x: auto;
}
/* ...except inside related-module sections: the parent .zp-section-content
already scrolls, and a nested scroll container spawns a phantom vertical
scrollbar on Windows (see the base sheet's matching carve-out). */
.zp-theme-premium .zp-related_module_section-section .zp-section-content .dataTables_wrapper {
overflow: visible;
}
/* Record/profile field grid: never let a 280px track exceed the viewport. */
.zp-theme-premium .zp-left-section,
.zp-theme-premium .zp-right-section {
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
/* Success toast must fit a 360px screen. */
.zp-theme-premium .zp-page-content > .zp-alert-success {
max-width: min(380px, calc(100vw - 32px)) !important;
}
/* ====================================================================
6.4.1 premium theme bug fixes
==================================================================== */
/* Current page chip: the base sheet paints the label with --field_value_fc
and !important, which lands dark-on-dark over premium's navy chip. */
.zp-theme-premium .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.zp-theme-premium .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--zp-color-primary) !important;
border: 1px solid var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
min-width: 32px;
padding: 0 var(--zp-space-2) !important;
}
/* Row action menu. The base sheet's
.zp-table tbody td.zp-action-column .action-column-body a out-specifies the
premium item rule above, so it kept display:block, text-align:justify and
zero side padding inside a 180px-wide sheet. */
.zp-theme-premium .action-column-body,
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body {
min-width: 0;
width: max-content;
padding: var(--zp-space-1) !important;
}
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body a,
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--zp-space-2);
width: 100%;
min-width: 132px;
box-sizing: border-box;
padding: var(--zp-space-2) var(--zp-space-3);
border-radius: var(--zp-radius-sm);
font-size: var(--zp-font-size-sm);
line-height: 1.4;
text-align: left;
text-decoration: none;
white-space: nowrap;
float: none;
}
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body a > svg,
.zp-theme-premium .zp-table tbody td.zp-action-column .action-column-body a > i {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0 !important;
font-size: 14px;
line-height: 1;
text-align: center;
}
/* List-view inline-edit pencil. It ships as .zp-inline-edit-icon
.zp-inline-edit-icon-special, which the base sheet lays out in-flow
(position:relative) inside the cell's flex row - premium's absolute
offsets for the record-details pencil were pushing it out of the cell. */
.zp-theme-premium td.zp-inline-edit .zp-inline-edit-icon-special,
.zp-theme-premium .zp-inline-edit .zp-inline-edit-icon-special {
position: relative !important;
right: auto !important;
top: auto !important;
transform: none !important;
flex: 0 0 auto;
margin-left: var(--zp-space-2);
opacity: 0.35 !important;
}
.zp-theme-premium td.zp-inline-edit:hover .zp-inline-edit-icon-special,
.zp-theme-premium td.zp-inline-edit:focus-within .zp-inline-edit-icon-special,
.zp-theme-premium .zp-inline-edit:hover .zp-inline-edit-icon-special,
.zp-theme-premium .zp-inline-edit:focus-within .zp-inline-edit-icon-special {
opacity: 1 !important;
}
.zp-theme-premium .zp-inline-edit-icon-special svg {
width: 15px;
height: 15px;
display: block;
}
.zp-theme-premium .zp-inline-edit-icon-special svg path {
stroke: var(--zp-color-accent);
}
/* Section titles were sitting on the list card's padding edge. */
.zp-theme-premium .zp-page-content .zp-record-list-section {
padding: var(--zp-space-6) var(--zp-space-8) !important;
}
.zp-theme-premium .zp-events-section .section-header-container {
margin-bottom: var(--zp-space-3);
padding-bottom: var(--zp-space-2);
border-bottom: 1px solid var(--zp-color-border);
}
.zp-theme-premium .action-column-body a,
.zp-theme-premium .action-column-body button {
min-width: 132px;
box-sizing: border-box;
white-space: nowrap;
}
@media (max-width: 768px) {
.zp-theme-premium .zp-page-content .zp-record-list-section {
padding: var(--zp-space-4) !important;
}
}
/* Projects: projects_styles.php prints inline AFTER this sheet and hardcodes
old-theme greys, so these need the extra class to win on specificity. */
.zp-theme-premium .zp-page-content.zp-projects-page .zp-stat-card {
background: var(--zp-color-surface-2);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-stat-label {
color: var(--zp-color-text-muted);
opacity: 1;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-stat-value {
color: var(--zp-color-text);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-progress-track {
background: var(--zp-color-surface-3);
height: 10px;
border-radius: var(--zp-radius-pill);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-progress-fill {
border-radius: var(--zp-radius-pill);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-project-tabs {
border-bottom: 1px solid var(--zp-color-border);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-project-tab {
color: var(--zp-color-text-muted);
border-bottom-width: 2px;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-project-tab:hover {
color: var(--zp-color-text);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-project-tab.active {
color: var(--zp-color-primary);
border-bottom-color: var(--zp-color-primary);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-col-header {
background: var(--zp-color-surface-muted);
border-bottom: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-sm) var(--zp-radius-sm) 0 0;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-col-header span {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-xs);
opacity: 1;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-row,
.zp-theme-premium .zp-page-content.zp-projects-page .zp-tasklist-accordion,
.zp-theme-premium .zp-page-content.zp-projects-page .zp-timelog-entry {
border-bottom-color: var(--zp-color-border);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-row:hover,
.zp-theme-premium .zp-page-content.zp-projects-page .zp-tasklist-header:hover {
background: var(--zp-color-surface-muted);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-row-name,
.zp-theme-premium .zp-page-content.zp-projects-page .zp-tasklist-name {
color: var(--zp-color-text);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-task-row-due {
color: var(--zp-color-text-muted);
}
/* Projects task/bug record pages */
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-avatar {
background: var(--zp-color-surface-3);
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-xs);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment.is-current-user .zp-comment-avatar {
background: var(--zp-color-primary);
color: var(--zp-color-primary-foreground);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-author {
color: var(--zp-color-text);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-author:empty { display: none; }
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-date {
color: var(--zp-color-text-muted);
font-size: var(--zp-font-size-xs);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-text {
background: var(--zp-color-surface-muted);
color: var(--zp-color-text);
border: 1px solid var(--zp-color-border);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment.is-current-user .zp-comment-text {
background: var(--zp-color-accent-50);
border-color: rgba(var(--zp-color-accent-rgb), 0.25);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-comment-text .zp-mention {
color: var(--zp-color-accent-600);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-description-section {
background: var(--zp-color-surface-2);
border: 1px solid var(--zp-color-border);
border-radius: var(--zp-radius-md);
padding: var(--zp-space-4);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-field-label-sm {
color: var(--zp-color-text-muted);
}
/* Upload: the raw file input is the only control here, so give it a real
button instead of the browser default. */
.zp-theme-premium .zp-page-content.zp-projects-page .zp-upload-zone {
border: 1px dashed var(--zp-color-border-strong);
border-radius: var(--zp-radius-md);
background: var(--zp-color-surface-2);
padding: var(--zp-space-4);
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-upload-zone input[type="file"] {
font-size: var(--zp-font-size-sm) !important;
color: var(--zp-color-text-muted);
width: 100%;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-upload-zone input[type="file"]::file-selector-button {
margin-right: var(--zp-space-2);
padding: 6px var(--zp-space-3);
border: 1px solid var(--zp-color-border-strong);
border-radius: var(--zp-radius-sm);
background: var(--zp-color-surface);
color: var(--zp-color-text);
font-family: inherit;
font-size: var(--zp-font-size-sm);
font-weight: var(--zp-font-weight-medium);
cursor: pointer;
}
.zp-theme-premium .zp-page-content.zp-projects-page .zp-upload-zone input[type="file"]::file-selector-button:hover {
background: var(--zp-color-surface-muted);
}
/* Row-action menu icons: only the detail/edit/delete classes get a stroke
from the base sheet, so any other item (Update Card, custom buttons)
rendered a strokeless - invisible - glyph. */
.zp-theme-premium .action-column-body a svg path[stroke],
.zp-theme-premium .action-column-body a svg path:not([fill]) {
stroke: currentColor;
}
.zp-theme-premium .action-column-body a > svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Sign list actions: the eye SVG ships with a hardcoded #2997ff stroke, and
the cell is display:flex so the base text-align never applied. */
.zp-theme-premium .zp-list-action-cell {
justify-content: flex-end;
gap: var(--zp-space-2);
}
.zp-theme-premium .zp-list-action-cell .zp-detail-icon svg {
width: 16px;
height: 16px;
}
.zp-theme-premium .zp-list-action-cell .zp-detail-icon svg path {
stroke: currentColor;
}
.zp-theme-premium .zp-list-action-cell .zp-btn {
height: 32px;
min-width: 32px;
padding: 0 var(--zp-space-2);
}
/* Finance tables: the currency cell is right-aligned, so its header must be
too, or the amount floats away from its column label. */
.zp-theme-premium .zbooks-record-list th.zp-col-currency {
text-align: right !important;
}
/* Pagination current-page chip: also cover lists whose pager sits outside a
.dataTables_wrapper. */
.zp-theme-premium .dataTables_paginate .paginate_button.current,
.zp-theme-premium .dataTables_paginate .paginate_button.current:hover,
.zp-theme-premium .custom-paginate .paginate_button.current {
background: var(--zp-color-primary) !important;
border: 1px solid var(--zp-color-primary) !important;
color: var(--zp-color-primary-foreground) !important;
}
/* List search: the input is absolutely positioned inside the toggle anchor,
so the trigger glyph shows through the open field. */
.zp-theme-premium .zp-record-search:has(.dataTables_filter[style*="block"]) > svg {
visibility: hidden;
}
/* Plan cards: subscription.css is a page-level sheet loaded after this one
and hardcodes emerald; the extra class wins on specificity. */
.zp-theme-premium .zp-subs-product-grid::before {
background: var(--zp-color-primary) !important;
}
.zp-theme-premium .zp-plan-price strong {
color: var(--zp-color-text) !important;
}
.zp-theme-premium .zp-plan-price span {
color: var(--zp-color-text-muted) !important;
}
/* Start Now sits inside a