without an explicit scroll wrapper
will still behave correctly because its surrounding card body
(.zp-card__body--flush / .zp-card__body) now scrolls horizontally. */
.zp-card__body { max-width: 100%; }
.zp-card__body:has(> table),
.zp-card__body:has(> .zp-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Keep tables from squishing into unreadable columns — let them
keep their natural width and scroll inside the card. */
.zp-table { min-width: 640px; }
/* Images / media never force overflow. */
img, svg, video, canvas { max-width: 100%; height: auto; }
@media (max-width: 1024px) {
.zp-sidebar {
transform: translateX(-100%);
}
.zp-sidebar.open {
transform: translateX(0);
box-shadow: var(--shadow-lg);
}
.zp-sidebar-backdrop.open { display: block; }
.zp-main { margin-left: 0; }
.zp-toolbar__toggle { display: flex; }
.zp-body { padding: 20px 16px 50px; }
.zp-toolbar { padding: 0 16px; }
}
@media (max-width: 640px) {
.zp-user-info { display: none; }
.zp-product-grid { grid-template-columns: repeat(2, 1fr); }
.zp-cat-grid { grid-template-columns: repeat(2, 1fr); }
.zp-cat-card { padding: 18px 10px 14px; }
.zp-cat-card__img,
.zp-cat-card__placeholder {
width: 120px;
height: 120px;
border-radius: var(--radius-md);
margin-bottom: 10px;
}
.zp-cat-card__placeholder { font-size: 24px; }
.zp-page-title { font-size: 18px; }
/* Tight toolbar so the user menu and balance stay reachable. */
.zp-toolbar { padding: 0 12px; gap: 8px; }
.zp-toolbar__balance { padding: 4px 10px; font-size: 12px; }
.zp-user-btn { padding: 3px 8px 3px 3px; }
.zp-toolbar__search { flex: 1 1 auto; max-width: none; }
.zp-toolbar__search-input { height: 34px; font-size: 13px; }
/* Keep the dropdown anchored to the input but never wider than
the viewport, so it can't spill off-screen on tiny phones. */
.zp-search-dropdown {
max-height: min(60vh, 380px);
max-width: calc(100vw - 24px);
}
/* Body padding fits narrow phones. */
.zp-body { padding: 16px 12px 48px; }
/* Card headers and filter bars wrap instead of clipping CTAs. */
.zp-card__header,
.zp-filter-bar {
flex-wrap: wrap;
align-items: stretch;
}
.zp-card__header > *,
.zp-filter-bar > * { min-width: 0; }
/* Info rows stack label above value on phones. */
.zp-info-row { flex-direction: column; gap: 2px; padding: 8px 0; }
.zp-info-row__label { flex: 0 0 auto; }
/* Auth card: no more 40px padding on tiny screens. */
.zp-auth-card { padding: 28px 22px; border-radius: var(--radius-lg); }
/* Tables stay scrollable but shrink their floor a bit. */
.zp-table { min-width: 560px; }
.zp-table thead th,
.zp-table tbody td { padding: 10px 12px; }
/* Buttons: allow full-width actions to breathe in stacked headers. */
.zp-btn { white-space: nowrap; }
}
@media (max-width: 420px) {
/* Very small phones: drop balance label to icon-only size,
keep user avatar + chevron visible. */
.zp-toolbar__balance { font-size: 11.5px; padding: 3px 8px; }
.zp-page-title { font-size: 17px; }
.zp-card__body { padding: 14px; }
}
/* ─── Thumbnails (zp-thumb) ───────────────────────────────── */
/* Reusable square thumbnail — used anywhere a product / category
image appears in a table or compact card. Pairs with uploads
normalized to 300×300 by App\Services\ImageService. */
.zp-thumb {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
border-radius: 8px;
object-fit: cover;
display: block;
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
}
.zp-thumb--sm { width: 36px; height: 36px; border-radius: 6px; }
.zp-thumb--md { width: 60px; height: 60px; min-width: 60px; min-height: 60px; }
.zp-thumb--lg { width: 60px; height: 60px; border-radius: 10px; }
.zp-thumb--xl { width: 80px; height: 80px; border-radius: 12px; }
/* Placeholder (first-letter badge) — same geometry, different fill.
Used when a product has no image. */
.zp-thumb--placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
color: #fff;
font-weight: 700;
border-color: transparent;
}
/* Desktop hover — scale up in place and lift onto a higher paint
layer so the zoomed image overlaps neighbours instead of pushing them. */
@media (hover: hover) and (pointer: fine) {
.zp-thumb:hover {
transform: scale(2);
box-shadow: var(--shadow-lg);
z-index: 5;
/* Re-sync z-index transition so the lift is instant, not delayed. */
transition: transform 0.18s ease, box-shadow 0.18s ease, z-index 0s;
}
}
/* Keep table rows from clipping the zoomed thumb. `overflow: visible`
is already the default for | but is explicit here so any cell
level override can't amputate the hover preview. */
.zp-table td:has(.zp-thumb) { overflow: visible; }
/* ─── Modal (zp-modal) ────────────────────────────────────── */
/* Lightweight, framework-free modal. Open by toggling .is-open on
the .zp-modal root. Pairs with body.zp-modal-open to lock scroll. */
.zp-modal {
display: none;
position: fixed;
inset: 0;
z-index: 1050;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 23, 42, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: zpFadeIn 0.15s ease-out;
}
.zp-modal.is-open { display: flex; }
.zp-modal__dialog {
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px rgba(0,0,0,0.35);
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: zpModalIn 0.18s ease-out;
}
.zp-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border-light);
}
.zp-modal__title {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
letter-spacing: -0.01em;
}
.zp-modal__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: var(--radius-sm);
color: var(--text-muted);
transition: background var(--transition), color var(--transition);
line-height: 0;
flex-shrink: 0;
}
.zp-modal__close:hover { background: var(--body-bg); color: var(--text-primary); }
.zp-modal__close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.zp-modal__body {
padding: 16px 22px 22px;
overflow-y: auto;
font-size: 13.5px;
color: var(--text-primary);
line-height: 1.55;
white-space: pre-wrap; /* preserve line breaks from admin descriptions */
word-break: break-word;
}
body.zp-modal-open { overflow: hidden; }
@keyframes zpFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zpModalIn {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Clickable product name (opens the description modal) */
.zp-product-name {
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
transition: color var(--transition);
display: inline-flex;
align-items: center;
gap: 5px;
user-select: none;
}
.zp-product-name:hover {
color: var(--brand-primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.zp-product-name:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
border-radius: 3px;
}
.zp-product-name__icon {
opacity: 0.5;
flex-shrink: 0;
transition: opacity var(--transition);
}
.zp-product-name:hover .zp-product-name__icon { opacity: 1; }
@media (max-width: 640px) {
.zp-modal { padding: 12px; }
.zp-modal__dialog { max-height: calc(100vh - 24px); }
.zp-modal__header { padding: 16px 18px 12px; }
.zp-modal__body { padding: 14px 18px 18px; }
}
/* ─── Utility helpers ─────────────────────────────────────── */
.text-muted { color: var(--text-secondary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-primary { color: var(--brand-primary) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|