📄 admin-sidebar.css
📁 Path: /home/skhata/new.chandrapharma.com/public/css/admin-sidebar.css
📊 Size: 69.44 KB
🔒 Perm: 0644
📝 MIME: text/plain
/* ═══════════════════════════════════════════════════════════════════
STP Admin — Design System v15
Style: Clean · Modern · Professional (Shopify × Linear × Vercel)
Font : Inter (Google Fonts — loaded via AdminServiceProvider head hook)
Palette: #111827 sidebar · #6366f1 accent · #f4f5f7 canvas
═══════════════════════════════════════════════════════════════════ */
/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
/* Canvas / surfaces */
--bg: #f4f5f7;
--sf: #ffffff;
--sf2: #f9fafb;
--sf3: #f3f4f6;
/* Sidebar */
--sb: #111827;
--sb2: #1f2937;
--sbt: #f9fafb;
--sbm: #9ca3af;
--sba: #818cf8;
--sbac: rgba(99,102,241,.15);
/* Text */
--tx: #111827;
--ts: #374151;
--mu: #6b7280;
--pl: #9ca3af;
/* Borders */
--bd: #e5e7eb;
--bd2: #d1d5db;
/* Accent — indigo */
--ac: #6366f1;
--ach: #4f46e5;
--acl: #eef2ff;
--acm: #c7d2fe;
/* Semantic */
--ok: #059669; --okl: #d1fae5; --okm: #6ee7b7;
--dn: #dc2626; --dnl: #fee2e2; --dnm: #fca5a5;
--wn: #d97706; --wnl: #fef3c7; --wnm: #fcd34d;
--in: #2563eb; --inl: #dbeafe; --inm: #93c5fd;
/* Radii */
--r: 7px;
--r2: 10px;
--r3: 14px;
/* Shadows */
--sh0: 0 1px 2px rgba(0,0,0,.04);
--sh1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--sh2: 0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
--sh3: 0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
/* Typography */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── GLOBAL BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
font-family: var(--font) !important;
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--tx) !important;
background: var(--bg) !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
letter-spacing: -0.01em !important;
}
/* Force light mode everywhere */
.dark body, .dark .fi-layout, .dark .fi-main-ctn,
.dark .fi-sidebar, .dark .fi-topbar, .dark * {
background-color: inherit !important;
color: inherit !important;
}
/* ══════════════════════════════════════════════════════════════════
1. LAYOUT SHELL
══════════════════════════════════════════════════════════════════ */
.fi-layout, .fi-main-ctn, .fi-body, div.fi-body {
background: var(--bg) !important;
}
/* ══════════════════════════════════════════════════════════════════
2. TOP BAR
══════════════════════════════════════════════════════════════════ */
.fi-topbar, header.fi-topbar {
background: var(--sf) !important;
border-bottom: 1px solid var(--bd) !important;
box-shadow: var(--sh0) !important;
height: 56px !important;
z-index: 50 !important;
}
.fi-topbar-nav, nav.fi-topbar-nav {
height: 56px !important;
padding: 0 20px !important;
align-items: center !important;
gap: 10px !important;
}
/* Global search */
.fi-global-search-field input,
.fi-topbar input[type="search"] {
background: var(--sf2) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r) !important;
height: 34px !important;
font-size: 13.5px !important;
padding: 0 12px 0 36px !important;
color: var(--tx) !important;
box-shadow: none !important;
font-family: var(--font) !important;
transition: border-color .15s, box-shadow .15s !important;
}
.fi-global-search-field input:focus {
border-color: var(--ac) !important;
background: var(--sf) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
outline: none !important;
}
/* Topbar icon buttons */
.fi-topbar-item button, .fi-icon-btn {
width: 34px !important;
height: 34px !important;
border-radius: var(--r) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
color: var(--mu) !important;
transition: background .12s, color .12s !important;
}
.fi-topbar-item button:hover, .fi-icon-btn:hover {
background: var(--sf3) !important;
color: var(--tx) !important;
}
/* ══════════════════════════════════════════════════════════════════
3. SIDEBAR
══════════════════════════════════════════════════════════════════ */
.fi-sidebar, aside.fi-sidebar, nav.fi-sidebar-nav {
background: var(--sb) !important;
border-right: none !important;
box-shadow: 1px 0 0 rgba(255,255,255,.05) !important;
}
.fi-sidebar-header {
background: var(--sb) !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
height: 56px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
}
/* Brand */
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a,
.fi-sidebar-header span {
color: #fff !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* Nav items */
.fi-sidebar-item, .fi-sidebar-nav-item { padding: 1px 10px !important; }
.fi-sidebar-item-button,
.fi-sidebar-nav-item button,
.fi-sidebar-item a {
display: flex !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
padding: 7px 10px !important;
border-radius: var(--r) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--sbm) !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
transition: background .12s, color .12s !important;
white-space: nowrap !important;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-nav-item button:hover,
.fi-sidebar-item a:hover {
background: rgba(255,255,255,.06) !important;
color: var(--sbt) !important;
}
.fi-sidebar-item-button.fi-active,
.fi-active > .fi-sidebar-item-button {
background: var(--sbac) !important;
color: #fff !important;
}
.fi-sidebar-item-icon, .fi-sidebar-item-button svg {
width: 16px !important; height: 16px !important;
flex-shrink: 0 !important; opacity: .7 !important;
}
.fi-sidebar-item-button:hover svg,
.fi-active > .fi-sidebar-item-button svg { opacity: 1 !important; color: var(--sba) !important; }
/* Scrollbar */
.fi-sidebar ::-webkit-scrollbar { width: 3px !important; }
.fi-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08) !important; border-radius: 3px !important; }
/* ══════════════════════════════════════════════════════════════════
4. MAIN CONTENT AREA
══════════════════════════════════════════════════════════════════ */
.fi-main, main.fi-main, div.fi-main {
padding: 0 !important;
background: var(--bg) !important;
max-width: 100% !important;
}
.fi-page, div.fi-page { padding: 0 !important; margin: 0 !important; }
.fi-page > section,
section.flex.flex-col.gap-y-8,
section[class*="gap-y"],
section[class*="py-8"] {
padding: 0 20px 24px !important;
gap: 16px !important;
row-gap: 16px !important;
}
.fi-page > section > .grid { gap: 16px !important; }
/* ══════════════════════════════════════════════════════════════════
5. PAGE HEADER
══════════════════════════════════════════════════════════════════ */
.fi-header, header.fi-header {
background: var(--sf) !important;
border-bottom: 1px solid var(--bd) !important;
padding: 14px 20px !important;
margin: 0 0 20px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
box-shadow: var(--sh0) !important;
}
.fi-header-heading, h1.fi-header-heading {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--tx) !important;
letter-spacing: -.03em !important;
line-height: 1.25 !important;
margin: 0 !important;
}
.fi-header-subheading, p.fi-header-subheading {
font-size: 13px !important;
color: var(--mu) !important;
margin: 2px 0 0 !important;
}
.fi-breadcrumbs, .fi-breadcrumbs-list {
font-size: 12.5px !important;
color: var(--mu) !important;
gap: 4px !important;
align-items: center !important;
}
.fi-breadcrumbs-item a { color: var(--mu) !important; text-decoration: none !important; }
.fi-breadcrumbs-item a:hover { color: var(--ac) !important; }
.fi-breadcrumbs-separator { color: var(--pl) !important; margin: 0 3px !important; }
.fi-breadcrumbs-item:last-child { color: var(--ts) !important; font-weight: 500 !important; }
.fi-header-actions, .fi-ac-ctn {
margin-left: auto !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
/* ══════════════════════════════════════════════════════════════════
6. SECTION CARDS — WordPress-style
══════════════════════════════════════════════════════════════════ */
.fi-section, div.fi-section {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
box-shadow: var(--sh1) !important;
/* NOTE: intentionally no overflow:hidden here — it was clipping any
Select/dropdown popover that opens near the bottom of a card (they
render as position:absolute children that escape normal flow but
still get sliced by an ancestor's overflow:hidden). Corner-rounding
is instead applied directly to the header/content below, which
achieves the same rounded-card look without eating dropdowns. */
}
.fi-section-header, div.fi-section-header {
padding: 8px 10px !important;
border-bottom: 1px solid var(--bd) !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
background: var(--sf) !important;
border-top-left-radius: var(--r2) !important;
border-top-right-radius: var(--r2) !important;
}
/* Section icon */
.fi-section-header-icon,
.fi-section-header > svg,
.fi-section-header .fi-icon {
width: 18px !important;
height: 18px !important;
color: var(--ac) !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.fi-section-header-heading,
h3.fi-section-heading,
.fi-section-heading {
font-size: 14px !important;
font-weight: 650 !important;
color: var(--tx) !important;
letter-spacing: -.02em !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.fi-section-description {
font-size: 12.5px !important;
color: var(--mu) !important;
margin-top: 2px !important;
line-height: 1.45 !important;
}
.fi-section-content,
div.fi-section-content,
.fi-section-content-ctn,
div.fi-section-content-ctn {
border-bottom-left-radius: var(--r2) !important;
border-bottom-right-radius: var(--r2) !important;
padding: 6px 10px 10px !important;
}
.fi-section-collapse-btn {
color: var(--mu) !important;
padding: 2px !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}
/* ══════════════════════════════════════════════════════════════════
7. BUTTONS — solid, polished
══════════════════════════════════════════════════════════════════ */
.fi-btn, button.fi-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 34px !important;
padding: 0 14px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
border-radius: var(--r) !important;
border: 1px solid transparent !important;
cursor: pointer !important;
transition: all .13s !important;
white-space: nowrap !important;
text-decoration: none !important;
font-family: var(--font) !important;
box-shadow: var(--sh0) !important;
}
.fi-btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
/* Primary — solid indigo */
.fi-btn.fi-btn-color-primary, .fi-btn-primary {
background: var(--ac) !important;
color: #fff !important;
border-color: var(--ach) !important;
}
.fi-btn.fi-btn-color-primary:hover { background: var(--ach) !important; border-color: #4338ca !important; }
/* Success — solid green */
.fi-btn.fi-btn-color-success {
background: var(--ok) !important;
color: #fff !important;
border-color: #047857 !important;
}
.fi-btn.fi-btn-color-success:hover { background: #047857 !important; }
/* Danger */
.fi-btn.fi-btn-color-danger {
background: var(--dnl) !important;
color: var(--dn) !important;
border-color: var(--dnm) !important;
}
.fi-btn.fi-btn-color-danger:hover { background: var(--dn) !important; color: #fff !important; border-color: var(--dn) !important; }
/* Warning */
.fi-btn.fi-btn-color-warning {
background: var(--wnl) !important;
color: #92400e !important;
border-color: var(--wnm) !important;
}
/* Gray / secondary */
.fi-btn.fi-btn-color-gray, .fi-btn-secondary {
background: var(--sf) !important;
color: var(--ts) !important;
border-color: var(--bd2) !important;
}
.fi-btn.fi-btn-color-gray:hover { background: var(--sf3) !important; }
/* Sizes */
.fi-btn.fi-size-sm { height: 28px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.fi-btn.fi-size-xs { height: 24px !important; padding: 0 8px !important; font-size: 12px !important; }
.fi-btn.fi-size-lg { height: 40px !important; padding: 0 20px !important; font-size: 14.5px !important; }
/* Icon-only */
.fi-icon-btn, .fi-btn.fi-btn-icon {
width: 34px !important; height: 34px !important;
padding: 0 !important; justify-content: center !important;
}
/* Full-width */
.fi-btn[style*="width:100%"],
.fi-btn.w-full {
width: 100% !important;
}
/* ══════════════════════════════════════════════════════════════════
8. FORMS — clean, spacious, readable
══════════════════════════════════════════════════════════════════ */
/* Field wrapper */
.fi-fo-field-wrp {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
/* Form grid */
.fi-fo-component-ctn, .fi-fo-grid, div.fi-fo-grid {
gap: 16px !important;
row-gap: 16px !important;
}
/* Label */
.fi-fo-field-wrp-label,
label.fi-fo-label,
.fi-fo-label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--ts) !important;
letter-spacing: -.005em !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Helper text */
.fi-fo-field-wrp-hint, .fi-fo-hint {
font-size: 12px !important;
color: var(--mu) !important;
margin-top: 3px !important;
line-height: 1.45 !important;
}
/* Input wrapper */
.fi-input-wrp, div.fi-input-wrp {
border-radius: var(--r) !important;
border: 1px solid var(--bd) !important;
background: var(--sf) !important;
box-shadow: var(--sh0) !important;
--tw-ring-shadow: 0 0 0 0 transparent !important;
transition: border-color .15s, box-shadow .15s !important;
}
.fi-input-wrp:focus-within {
border-color: var(--ac) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.fi-input-wrp[data-invalid], .fi-input-wrp.fi-input-wrp-invalid {
border-color: var(--dn) !important;
box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important;
}
/* Input element */
.fi-input, input.fi-input {
padding: 7px 12px !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
color: var(--tx) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
font-family: var(--font) !important;
--tw-ring-shadow: 0 0 0 0 transparent !important;
width: 100% !important;
}
/* Total height ≈ 38px — comfortable without being bulky */
.fi-input::placeholder { color: var(--pl) !important; font-style: normal !important; }
/* Textarea */
.fi-fo-field-wrp textarea, textarea.fi-input {
padding: 8px 12px !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
border: none !important;
background: transparent !important;
resize: vertical !important;
min-height: 80px !important;
font-family: var(--font) !important;
}
/* Native select */
.fi-fo-field-wrp select, select.fi-select-input, .fi-select {
padding: 7px 32px 7px 12px !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
border-radius: var(--r) !important;
border: 1px solid var(--bd) !important;
background: var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important;
-webkit-appearance: none !important;
appearance: none !important;
color: var(--tx) !important;
box-shadow: var(--sh0) !important;
font-family: var(--font) !important;
cursor: pointer !important;
transition: border-color .15s !important;
}
.fi-fo-field-wrp select:focus {
border-color: var(--ac) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
outline: none !important;
}
/* Toggle */
.fi-toggle-button, button[role="switch"] {
height: 22px !important;
width: 40px !important;
border-radius: 11px !important;
}
input[type="checkbox"].fi-checkbox-input {
width: 16px !important;
height: 16px !important;
accent-color: var(--ac) !important;
cursor: pointer !important;
border-radius: 4px !important;
}
/* Validation */
.fi-fo-field-wrp-error-message, .fi-fo-field-error {
font-size: 12px !important;
color: var(--dn) !important;
margin-top: 4px !important;
}
/* Rich editor */
.trix-editor, .ql-editor {
font-size: 13.5px !important;
min-height: 130px !important;
padding: 12px !important;
font-family: var(--font) !important;
line-height: 1.6 !important;
}
/* ── FileUpload / Filepond — Glowra-style clean design ── */
/* Strip ALL wrappers between Filament and filepond — only filepond renders its own border */
.fi-fo-file-upload,
.fi-fo-file-upload > div,
.fi-fo-file-upload .fi-input-wrp,
.fi-fo-field-wrp:has(.filepond--root) .fi-input-wrp {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Root */
.filepond--root {
font-family: var(--font) !important;
margin-bottom: 0 !important;
font-size: 13px !important;
}
/* Drop panel */
.filepond--panel-root {
background-color: var(--sf) !important;
border: 2px dashed var(--bd2) !important;
border-radius: var(--r2) !important;
transition: border-color .15s, background .15s !important;
}
.filepond--root:hover .filepond--panel-root,
.filepond--root[data-hopper-state="drag-over"] .filepond--panel-root {
border-color: var(--ac) !important;
background-color: var(--acl) !important;
}
/* Drop label */
.filepond--drop-label {
color: var(--mu) !important;
min-height: 140px !important;
}
.filepond--drop-label label {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--ts) !important;
cursor: pointer !important;
line-height: 1.5 !important;
padding: 20px 16px !important;
}
.filepond--label-action {
color: var(--ac) !important;
font-weight: 600 !important;
text-decoration: none !important;
font-size: 12.5px !important;
background: var(--acl) !important;
border: 1px solid var(--acm) !important;
border-radius: 20px !important;
padding: 3px 12px !important;
display: inline-block !important;
margin-top: 2px !important;
transition: all .12s !important;
}
.filepond--label-action:hover {
background: var(--ac) !important;
color: #fff !important;
border-color: var(--ac) !important;
text-decoration: none !important;
}
/* ── Side-by-side image columns with vertical divider ── */
.stp-img-left {
border-right: 1px solid var(--bd) !important;
padding-right: 14px !important;
}
.stp-img-right {
padding-left: 14px !important;
}
/* Shared filepond item panel styling */
.stp-gallery-upload .filepond--item-panel {
border-radius: var(--r) !important;
background: var(--sf3) !important;
}
.stp-gallery-upload .filepond--image-preview-wrapper,
.stp-gallery-upload .filepond--image-preview {
border-radius: var(--r) !important;
}
/* Integrated layout */
.filepond--root[data-style-panel-layout~="integrated"] .filepond--panel-root {
border-radius: var(--r2) !important;
}
.filepond--root[data-style-panel-layout~="integrated"] .filepond--drop-label {
min-height: unset !important;
height: 100% !important;
}
/* File items */
.filepond--item { border-radius: var(--r) !important; }
.filepond--file { border-radius: var(--r) !important; background: var(--sf3) !important; }
.filepond--file-action-button { border-radius: 50% !important; }
/* Progress ring */
.filepond--file-status-sub { color: rgba(255,255,255,.7) !important; }
/* Drag hover state */
.filepond--root[data-hopper-state="drag-over"] .filepond--drop-label {
color: var(--ac) !important;
}
/* Remove browser file input look */
.filepond--browser { position: absolute !important; opacity: 0 !important; }
/* Date/time */
.fi-fo-date-time-picker input {
padding: 7px 12px !important;
font-size: 13.5px !important;
}
/* Form actions bar */
.fi-form-actions, .fi-form-actions-sticky {
padding: 12px 18px !important;
background: var(--sf) !important;
border-top: 1px solid var(--bd) !important;
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
/* ══════════════════════════════════════════════════════════════════
9. PRODUCT FORM — WordPress-style specific overrides
══════════════════════════════════════════════════════════════════ */
/* The large title input at top of product form */
.fi-fo-field-wrp input[style*="font-size:1.25rem"],
.fi-fo-field-wrp input[style*="font-size: 1.25rem"] {
font-size: 1.4rem !important;
font-weight: 650 !important;
letter-spacing: -.03em !important;
padding: 6px 0 10px !important;
border-bottom: 2px solid var(--bd) !important;
border-radius: 0 !important;
}
.fi-fo-field-wrp input[style*="font-size:1.25rem"]:focus,
.fi-fo-field-wrp input[style*="font-size: 1.25rem"]:focus {
border-bottom-color: var(--ac) !important;
}
/* Sidebar sections — slightly tighter */
.fi-page .fi-fo-grid > div:last-child .fi-section-content,
.fi-page .fi-fo-grid > div:last-child div.fi-section-content-ctn {
padding: 10px !important;
}
/* Full-width action button inside form */
.fi-fo-actions { width: 100% !important; }
.fi-fo-actions .fi-btn { width: 100% !important; padding: 0 !important; height: 40px !important; font-size: 14px !important; }
/* ══════════════════════════════════════════════════════════════════
10. TABLES — crisp, data-dense but breathable
══════════════════════════════════════════════════════════════════ */
.fi-ta, div.fi-ta {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
overflow: hidden !important;
box-shadow: var(--sh1) !important;
}
/* Toolbar */
.fi-ta-header-toolbar, .fi-ta-header-ctn, div.fi-ta-header-toolbar {
padding: 12px 16px !important;
border-bottom: 1px solid var(--bd) !important;
background: var(--sf) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
/* Search */
.fi-ta-search-field input, .fi-ta-search input {
height: 34px !important;
font-size: 13.5px !important;
padding: 0 10px 0 34px !important;
border-radius: var(--r) !important;
border: 1px solid var(--bd) !important;
background: var(--sf2) !important;
color: var(--tx) !important;
box-shadow: none !important;
font-family: var(--font) !important;
transition: border-color .15s !important;
}
.fi-ta-search-field input:focus {
border-color: var(--ac) !important;
background: var(--sf) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
outline: none !important;
}
/* Table */
.fi-ta-table, table.fi-ta-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 13.5px !important;
}
/* Headers */
.fi-ta-header-cell, th.fi-ta-header-cell, thead th {
padding: 9px 14px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--mu) !important;
background: var(--sf2) !important;
border-bottom: 1px solid var(--bd) !important;
white-space: nowrap !important;
}
.fi-ta-header-cell button {
display: flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--mu) !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
font-family: var(--font) !important;
}
.fi-ta-header-cell button:hover { color: var(--tx) !important; }
/* Rows */
.fi-ta-row, tr.fi-ta-row {
border-bottom: 1px solid var(--bd) !important;
transition: background .1s !important;
}
.fi-ta-row:last-child { border-bottom: none !important; }
.fi-ta-row:hover { background: #fafbfe !important; }
/* Cells */
.fi-ta-cell, td.fi-ta-cell {
padding: 3px 14px !important;
font-size: 13.5px !important;
color: var(--ts) !important;
vertical-align: middle !important;
line-height: 1.35 !important;
border: none !important;
}
.fi-ta-cell > div, .fi-ta-cell .fi-ta-cell-content { padding: 0 !important; }
/* Product thumbnail in table */
.fi-ta-col-image img,
.fi-ta-image { border-radius: var(--r) !important; }
/* Empty state */
.fi-ta-empty-state {
padding: 48px 20px !important;
text-align: center !important;
}
.fi-ta-empty-state-heading {
font-size: 15px !important;
font-weight: 650 !important;
color: var(--ts) !important;
letter-spacing: -.02em !important;
}
.fi-ta-empty-state-description {
font-size: 13px !important;
color: var(--mu) !important;
margin-top: 6px !important;
}
/* Pagination */
.fi-pagination, .fi-ta-pagination, nav.fi-pagination {
padding: 10px 14px !important;
border-top: 1px solid var(--bd) !important;
background: var(--sf) !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: wrap !important;
}
.fi-pagination-item button, .fi-pagination button {
min-width: 30px !important;
height: 30px !important;
padding: 0 8px !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: var(--r) !important;
border: 1px solid var(--bd) !important;
background: var(--sf) !important;
color: var(--ts) !important;
cursor: pointer !important;
font-family: var(--font) !important;
transition: all .12s !important;
}
.fi-pagination-item button:hover { background: var(--sf3) !important; border-color: var(--bd2) !important; }
.fi-pagination-item button[aria-current="page"], .fi-pagination button.fi-active {
background: var(--ac) !important;
color: #fff !important;
border-color: var(--ac) !important;
}
.fi-pagination-info, .fi-ta-pagination-info {
font-size: 12.5px !important;
color: var(--mu) !important;
margin-right: auto !important;
}
/* ══════════════════════════════════════════════════════════════════
11. BADGES
══════════════════════════════════════════════════════════════════ */
.fi-badge, span.fi-badge, .fi-ta-col-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 2px 9px !important;
font-size: 11.5px !important;
font-weight: 650 !important;
border-radius: 20px !important;
line-height: 1.5 !important;
white-space: nowrap !important;
letter-spacing: .01em !important;
border: none !important;
font-family: var(--font) !important;
}
.fi-badge-color-success, .fi-badge[class*="success"] { background: var(--okl) !important; color: #065f46 !important; }
.fi-badge-color-danger, .fi-badge[class*="danger"] { background: var(--dnl) !important; color: #991b1b !important; }
.fi-badge-color-warning, .fi-badge[class*="warning"] { background: var(--wnl) !important; color: #92400e !important; }
.fi-badge-color-primary, .fi-badge[class*="primary"] { background: var(--acl) !important; color: #3730a3 !important; }
.fi-badge-color-info, .fi-badge[class*="info"] { background: var(--inl) !important; color: #1e40af !important; }
.fi-badge-color-gray, .fi-badge[class*="gray"] { background: var(--sf3) !important; color: var(--ts) !important; border: 1px solid var(--bd) !important; }
/* ══════════════════════════════════════════════════════════════════
12. TABS
══════════════════════════════════════════════════════════════════ */
.fi-tabs, .fi-tabs-list, [role="tablist"] {
display: flex !important;
gap: 0 !important;
padding: 0 !important;
background: transparent !important;
border-bottom: 1px solid var(--bd) !important;
margin-bottom: 16px !important;
overflow-x: auto !important;
}
.stp-lang-tabbar [role="tablist"] {
border-bottom: none !important;
margin-bottom: 0 !important;
}
[role="tab"], .fi-tabs-item, button.fi-tabs-item {
padding: 9px 16px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--mu) !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
cursor: pointer !important;
white-space: nowrap !important;
font-family: var(--font) !important;
transition: color .12s, border-color .12s !important;
margin-bottom: -1px !important;
}
[role="tab"]:hover { color: var(--tx) !important; }
[role="tab"][aria-selected="true"],
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
color: var(--ac) !important;
border-bottom-color: var(--ac) !important;
font-weight: 650 !important;
}
/* ══════════════════════════════════════════════════════════════════
13. DROPDOWNS
══════════════════════════════════════════════════════════════════ */
.fi-dropdown-panel, .fi-dropdown-list {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
box-shadow: var(--sh3) !important;
padding: 5px !important;
min-width: 170px !important;
z-index: 100 !important;
}
.fi-dropdown-list-item button, .fi-dropdown-item, .fi-ac-btn {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
padding: 7px 11px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--ts) !important;
background: transparent !important;
border: none !important;
border-radius: var(--r) !important;
cursor: pointer !important;
text-align: left !important;
font-family: var(--font) !important;
transition: background .1s !important;
}
.fi-dropdown-list-item button:hover, .fi-dropdown-item:hover, .fi-ac-btn:hover {
background: var(--sf2) !important;
color: var(--tx) !important;
}
.fi-dropdown-list-item button svg, .fi-ac-btn svg {
width: 15px !important;
height: 15px !important;
color: var(--mu) !important;
flex-shrink: 0 !important;
}
.fi-dropdown-list-item button.fi-danger,
.fi-ac-btn.fi-color-danger, [class*="danger"].fi-ac-btn { color: var(--dn) !important; }
.fi-dropdown-list-item button.fi-danger:hover { background: var(--dnl) !important; }
/* ══════════════════════════════════════════════════════════════════
14. MODALS
══════════════════════════════════════════════════════════════════ */
.fi-modal-window, .fi-modal {
background: var(--sf) !important;
border-radius: var(--r2) !important;
box-shadow: var(--sh3) !important;
border: 1px solid var(--bd) !important;
overflow: hidden !important;
}
.fi-modal-header {
padding: 14px 18px !important;
border-bottom: 1px solid var(--bd) !important;
background: var(--sf) !important;
}
.fi-modal-heading {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--tx) !important;
letter-spacing: -.025em !important;
}
.fi-modal-body, .fi-modal-content { padding: 18px !important; }
.fi-modal-footer {
padding: 12px 18px !important;
border-top: 1px solid var(--bd) !important;
background: var(--sf2) !important;
display: flex !important;
gap: 8px !important;
justify-content: flex-end !important;
}
.fi-modal-close-overlay { background: rgba(0,0,0,.35) !important; }
/* ══════════════════════════════════════════════════════════════════
15. NOTIFICATIONS
══════════════════════════════════════════════════════════════════ */
.fi-no-notification {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
box-shadow: var(--sh2) !important;
padding: 12px 16px !important;
}
.fi-no-notification-title { font-weight: 650 !important; font-size: 14px !important; color: var(--tx) !important; }
.fi-no-notification-body { font-size: 13px !important; color: var(--mu) !important; margin-top: 3px !important; }
/* ══════════════════════════════════════════════════════════════════
16. STAT WIDGETS
══════════════════════════════════════════════════════════════════ */
.fi-wi-stats-overview-stat, .fi-wi-stats-overview-stat-wrapper {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
padding: 18px 20px !important;
box-shadow: var(--sh1) !important;
}
.fi-wi-stats-overview-stat-label {
font-size: 12px !important;
font-weight: 650 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
color: var(--mu) !important;
margin-bottom: 8px !important;
}
.fi-wi-stats-overview-stat-value {
font-size: 28px !important;
font-weight: 750 !important;
color: var(--tx) !important;
letter-spacing: -.04em !important;
line-height: 1.1 !important;
}
.fi-wi-stats-overview-stat-description {
font-size: 12.5px !important;
color: var(--mu) !important;
margin-top: 5px !important;
}
.fi-wi-chart {
background: var(--sf) !important;
border: 1px solid var(--bd) !important;
border-radius: var(--r2) !important;
padding: 18px 20px !important;
box-shadow: var(--sh1) !important;
}
/* ══════════════════════════════════════════════════════════════════
17. FILTERS
══════════════════════════════════════════════════════════════════ */
.fi-ta-filters-form, .fi-ta-filter-form, .fi-ta-filters {
padding: 12px 14px !important;
border-bottom: 1px solid var(--bd) !important;
background: var(--sf2) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: flex-end !important;
}
/* ══════════════════════════════════════════════════════════════════
18. ACTION GROUP
══════════════════════════════════════════════════════════════════ */
.fi-ac-group-btn {
background: var(--sf) !important;
border: 1px solid var(--bd2) !important;
border-radius: var(--r) !important;
color: var(--ts) !important;
padding: 0 12px !important;
height: 34px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
font-family: var(--font) !important;
transition: all .12s !important;
}
.fi-ac-group-btn:hover { background: var(--sf3) !important; border-color: var(--bd2) !important; }
/* ══════════════════════════════════════════════════════════════════
19. REQUIRED FIELD ASTERISK
══════════════════════════════════════════════════════════════════ */
.fi-fo-label sup,
label sup,
.fi-fo-field-wrp-label sup {
color: var(--dn) !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-left: 2px !important;
vertical-align: baseline !important;
position: relative !important;
top: -3px !important;
}
/* ══════════════════════════════════════════════════════════════════
19b. GLOBAL LANGUAGE TOGGLE — single pill at top of form
══════════════════════════════════════════════════════════════════ */
/* ToggleButtons pill container */
.stp-lang-global-toggle {
margin-bottom: 2px !important;
}
.stp-lang-global-toggle [role="group"],
.stp-lang-global-toggle .fi-fo-toggle-buttons {
display: inline-flex !important;
background: var(--sf3) !important;
border: 1px solid var(--bd) !important;
border-radius: 20px !important;
padding: 3px !important;
gap: 2px !important;
}
/* Individual option labels (Filament wraps radio in <label>) */
.stp-lang-global-toggle label.fi-toggle-buttons-option,
.stp-lang-global-toggle .fi-toggle-buttons-option {
border: none !important;
background: transparent !important;
border-radius: 16px !important;
overflow: hidden !important;
cursor: pointer !important;
}
.stp-lang-global-toggle .fi-toggle-buttons-option-label,
.stp-lang-global-toggle label.fi-toggle-buttons-option > span {
display: block !important;
padding: 4px 18px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--mu) !important;
border-radius: 16px !important;
line-height: 1.5 !important;
transition: all .12s !important;
white-space: nowrap !important;
user-select: none !important;
}
/* Active pill */
.stp-lang-global-toggle .fi-toggle-buttons-option:has(input:checked) .fi-toggle-buttons-option-label,
.stp-lang-global-toggle label.fi-toggle-buttons-option:has(input:checked) > span {
background: var(--sf) !important;
color: var(--ac) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}
/* Hide the actual radio input */
.stp-lang-global-toggle input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ══════════════════════════════════════════════════════════════════
19c. IMAGES SECTION — Glowra-style layout
══════════════════════════════════════════════════════════════════ */
/*
* CORRECTED: the actual 2-col grid is neither .fi-section-content (display:block —
* grid-template-columns on it was a no-op) nor .fi-fo-grid. It's Filament's generic
* component grid wrapper, which uses CSS custom properties for column count:
* .fi-fo-component-ctn { grid-template-columns: var(--cols-default); }
* lg:grid-cols-[--cols-lg] variant kicks in at the lg breakpoint.
* Scoped to .stp-images-section so it doesn't affect other 2-col sections.
*/
.stp-images-section .fi-fo-component-ctn {
grid-template-columns: 160px 1fr !important;
align-items: start !important;
gap: 24px !important;
}
/* Legacy selectors kept (harmless) in case a future Filament version renders
the split through .fi-section-content / .fi-fo-grid instead. */
.stp-images-section .fi-section-content,
.stp-images-section .fi-fo-grid {
grid-template-columns: 160px 1fr !important;
align-items: start !important;
gap: 0 !important;
}
/* Gallery column: flush-left, no inherited padding from Filament's field wrapper */
.stp-images-section .stp-img-right {
padding-left: 0 !important;
}
/* ── Thumbnail: fixed-width square, capped at 150×150px ── */
.stp-images-section .stp-thumb-upload .filepond--root {
width: 100% !important;
max-width: 150px !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
max-height: 150px !important;
overflow: hidden !important;
}
.stp-images-section .stp-thumb-upload .filepond--panel-root {
background-color: var(--sf2) !important;
border: 2px dashed var(--bd2) !important;
border-radius: var(--r2) !important;
transition: border-color .15s, background .15s !important;
}
.stp-images-section .stp-thumb-upload .filepond--root:hover .filepond--panel-root,
.stp-images-section .stp-thumb-upload .filepond--root[data-hopper-state="drag-over"] .filepond--panel-root {
border-color: var(--ac) !important;
background-color: var(--acl) !important;
}
/* Drop label fills the fixed-height root */
.stp-images-section .stp-thumb-upload .filepond--drop-label {
min-height: 0 !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
}
.stp-images-section .stp-thumb-upload .filepond--drop-label label {
padding: 16px 8px !important;
font-size: 11.5px !important;
gap: 6px !important;
text-align: center !important;
color: var(--mu) !important;
}
/* Browse: clean inline link, no pill */
.stp-images-section .stp-thumb-upload .filepond--label-action {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-top: 0 !important;
font-size: 11.5px !important;
color: var(--ac) !important;
font-weight: 600 !important;
text-decoration: underline !important;
display: inline !important;
border-radius: 0 !important;
}
/* ── Gallery: no outer container border ── */
.stp-images-section .stp-gallery-upload .filepond--panel-root {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/*
* Gallery flex layout.
* JS (admin-gallery.js) moves .filepond--drop-label to the end of the DOM
* and resets inline positioning. CSS provides the flex context and visual styles.
* Selectors are written WITHOUT [data-style-panel-layout] so they always match.
*/
.stp-images-section .stp-gallery-upload .filepond--root {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
align-content: flex-start !important;
min-height: 100px !important;
overflow: visible !important;
position: relative !important;
background: transparent !important;
box-shadow: none !important;
}
/* Panel: stays absolute behind everything */
.stp-images-section .stp-gallery-upload .filepond--panel {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* List scroller: flows as flex item (order 1 = first) */
.stp-images-section .stp-gallery-upload .filepond--list-scroller {
order: 1 !important;
position: static !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
height: auto !important;
overflow: visible !important;
flex-shrink: 0 !important;
z-index: 1 !important;
}
.stp-images-section .stp-gallery-upload .filepond--list {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
display: flex !important;
flex-wrap: wrap !important;
}
/* Items: 88×88 squares in flex list */
.stp-images-section .stp-gallery-upload .filepond--item {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 88px !important;
height: 88px !important;
margin: 0 8px 8px 0 !important;
flex-shrink: 0 !important;
}
/* Add-slot: order 2 = after items (JS also moves it in DOM) */
.stp-images-section .stp-gallery-upload .filepond--drop-label {
order: 2 !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
z-index: 1 !important;
flex-shrink: 0 !important;
width: 88px !important;
height: 88px !important;
min-height: 0 !important;
border: 2px dashed var(--bd2) !important;
border-radius: var(--r) !important;
background: var(--sf2) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 8px 8px 0 !important;
cursor: pointer !important;
transition: border-color .15s, background .15s !important;
}
.stp-images-section .stp-gallery-upload .filepond--drop-label:hover {
border-color: var(--ac) !important;
background: var(--acl) !important;
}
/* Hide verbose "Drag & Drop your files or Browse" — show "+" icon only */
.stp-images-section .stp-gallery-upload .filepond--drop-label label {
font-size: 0 !important;
padding: 0 !important;
cursor: pointer !important;
}
.stp-images-section .stp-gallery-upload .filepond--drop-label label::before {
content: '+' !important;
font-size: 26px !important;
font-weight: 300 !important;
color: var(--bd2) !important;
line-height: 1 !important;
display: block !important;
}
.stp-images-section .stp-gallery-upload .filepond--drop-label:hover label::before {
color: var(--ac) !important;
}
/* ══════════════════════════════════════════════════════════════════
19d. LANGUAGE TAB BAR — pill-toggle style (legacy, kept for compat)
══════════════════════════════════════════════════════════════════ */
/* The wrapper div Filament renders around the Tabs */
.stp-lang-tabs-bar > div,
[class*="stp-lang-tabs-bar"] > div { margin-bottom: 0 !important; }
/* Tab list pill container */
.stp-lang-tabs-bar [role="tablist"],
.fi-tabs.stp-lang-tabs-bar [role="tablist"] {
display: inline-flex !important;
background: var(--sf3) !important;
border: 1px solid var(--bd) !important;
border-radius: 20px !important;
padding: 3px !important;
gap: 2px !important;
border-bottom: 1px solid var(--bd) !important;
margin-bottom: 12px !important;
width: auto !important;
}
/* Individual language tab pill */
.stp-lang-tabs-bar [role="tab"],
.fi-tabs.stp-lang-tabs-bar [role="tab"] {
padding: 4px 14px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
border-radius: 16px !important;
border: none !important;
border-bottom: none !important;
color: var(--mu) !important;
background: transparent !important;
margin-bottom: 0 !important;
line-height: 1.5 !important;
transition: all .12s !important;
white-space: nowrap !important;
letter-spacing: -.01em !important;
}
.stp-lang-tabs-bar [role="tab"]:hover { color: var(--tx) !important; background: rgba(0,0,0,.04) !important; }
.stp-lang-tabs-bar [role="tab"][aria-selected="true"],
.fi-tabs.stp-lang-tabs-bar [role="tab"][aria-selected="true"] {
background: var(--sf) !important;
color: var(--ac) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
border-bottom: none !important;
font-weight: 650 !important;
}
/* Translate button wrapper */
.stp-lang-tabbar {
display: flex !important;
align-items: center !important;
border-bottom: 1px solid var(--bd) !important;
margin-bottom: 14px !important;
gap: 0 !important;
padding: 0 !important;
}
.stp-lang-tabbar [role="tablist"] {
display: flex !important;
flex: 1 !important;
border-bottom: none !important;
margin-bottom: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.stp-translate-inline {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
margin-left: auto !important;
padding: 0 10px !important;
flex-shrink: 0 !important;
}
.stp-translate-btn {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
height: 26px !important;
padding: 0 10px !important;
border-radius: 20px !important;
border: 1px solid var(--acm) !important;
background: var(--acl) !important;
color: #4338ca !important;
font-size: 11.5px !important;
font-weight: 650 !important;
cursor: pointer !important;
white-space: nowrap !important;
font-family: var(--font) !important;
transition: all .15s !important;
}
.stp-translate-btn:hover { background: var(--ac) !important; color: #fff !important; border-color: var(--ac) !important; }
.stp-translate-btn.loading { background: var(--sf3) !important; color: var(--mu) !important; border-color: var(--bd) !important; cursor: not-allowed !important; }
.stp-translate-btn.success { background: var(--okl) !important; color: #065f46 !important; border-color: var(--okm) !important; }
.stp-translate-btn.error { background: var(--dnl) !important; color: #991b1b !important; border-color: var(--dnm) !important; }
.stp-translate-sep { width: 1px !important; height: 16px !important; background: var(--bd) !important; margin: 0 2px !important; }
/* ══════════════════════════════════════════════════════════════════
19e. FILEPOND — action buttons visible only on item hover
══════════════════════════════════════════════════════════════════ */
/* Hide edit / delete / abort buttons by default */
.filepond--file-action-button {
opacity: 0 !important;
transition: opacity .15s, transform .15s !important;
pointer-events: none !important;
}
/* Reveal on hover */
.filepond--item:hover .filepond--file-action-button {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Always show during upload / error so user can cancel */
.filepond--item[data-filepond-item-state*="processing"] .filepond--file-action-button,
.filepond--item[data-filepond-item-state="load-invalid"] .filepond--file-action-button,
.filepond--item[data-filepond-item-state="processing-error"] .filepond--file-action-button {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ══════════════════════════════════════════════════════════════════
20. MISC UTILITIES
══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mu); }
.fi-loading-indicator { color: var(--ac) !important; }
[x-cloak] { display: none !important; }
hr.fi-divider, .fi-divider { border-color: var(--bd) !important; margin: 0 !important; }
*:focus-visible {
outline: 2px solid var(--ac) !important;
outline-offset: 2px !important;
}
/* Icon columns */
.fi-ta-col-icon svg, .fi-icon-column svg { width: 16px !important; height: 16px !important; }
/* Choices.js */
.choices__inner {
min-height: 38px !important;
padding: 4px 10px !important;
font-size: 13.5px !important;
border-radius: var(--r) !important;
border: 1px solid var(--bd) !important;
background: var(--sf) !important;
font-family: var(--font) !important;
}
@media (max-width: 768px) {
.fi-page > section, section[class*="gap-y"] { padding: 0 12px 16px !important; }
.fi-ta-cell, td.fi-ta-cell { padding: 8px 10px !important; }
.fi-header, header.fi-header { padding: 12px 14px !important; }
}
/* ══════════════════════════════════════════════════════════════════
20. SPLIT-PANEL MANAGERS (Categories / Brands) — persistent form
on the left, live list on the right, both on one page.
══════════════════════════════════════════════════════════════════ */
.stp-split-panel {
display: grid;
grid-template-columns: 340px 1fr;
align-items: start;
gap: 20px;
}
@media (max-width: 1024px) {
.stp-split-panel { grid-template-columns: 1fr; }
}
.stp-split-panel-form {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--r2);
box-shadow: var(--sh1);
padding: 16px;
/* NOTE: intentionally not position:sticky — combined with CSS Grid
track auto-sizing it corrupts the row height (the sibling list
panel ends up rendered on top of this form instead of below it).
Not worth chasing further for a "stays visible while scrolling"
nicety. */
align-self: start;
}
@media (min-width: 1025px) {
.stp-split-panel-form {
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
}
.stp-split-panel-title {
font-size: 15px;
font-weight: 650;
color: var(--tx);
letter-spacing: -.01em;
margin: 0 0 14px;
}
.stp-split-panel-form .fi-fo-field-wrp { margin-bottom: 4px; }
/* Thumbnail/logo uploads on Categories & Brands split-panel forms —
these fields are full-width by default (no 160px grid column like the
Product Images section), so cap them directly at 150×150px. */
.stp-thumb-upload-sm .filepond--root {
width: 150px !important;
max-width: 150px !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
max-height: 150px !important;
overflow: hidden !important;
}
/* Branding uploads (General Settings → Header Logo / Favicon) — same fix
as above: an "integrated" panelLayout FilePond needs a definite height
on .filepond--root for its drop-label's height:100% to resolve against,
or the control silently collapses to 0px. Logo gets a wide box (logos
are usually landscape); favicon stays square. */
.stp-branding-logo .filepond--root {
width: 100% !important;
max-width: 240px !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
overflow: hidden !important;
}
.stp-branding-favicon .filepond--root {
width: 100% !important;
max-width: 120px !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
overflow: hidden !important;
}
.stp-seo-og-image .filepond--root {
width: 100% !important;
max-width: 280px !important;
aspect-ratio: 1200 / 630 !important;
height: auto !important;
overflow: hidden !important;
}
.stp-split-panel-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--bd);
}
.stp-split-panel-submit { flex: 1; justify-content: center; }
.stp-split-panel-list {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--r2);
box-shadow: var(--sh1);
overflow: hidden;
}
/* ── Toolbar (search + count) ───────────────────────────────────── */
.stp-tree-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--bd);
}
.stp-tree-search {
position: relative;
flex: 1;
max-width: 420px;
}
.stp-tree-search-icon {
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--mu);
pointer-events: none;
}
.stp-tree-search input {
width: 100%;
height: 36px;
padding: 0 12px 0 34px;
font-size: 13px;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--sf2);
color: var(--tx);
transition: border-color .15s, background .15s;
}
.stp-tree-search input:focus {
outline: none;
border-color: var(--ac);
background: var(--sf);
box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.stp-tree-count {
font-size: 12px;
color: var(--mu);
white-space: nowrap;
}
/* ── Tree rows ───────────────────────────────────────────────────── */
.stp-tree-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid var(--bd);
transition: background .1s;
}
.stp-tree-row:last-child { border-bottom: none; }
.stp-tree-row:hover { background: var(--sf2); }
.stp-tree-chevron {
flex-shrink: 0;
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
color: var(--mu);
border-radius: 5px;
cursor: pointer;
}
.stp-tree-chevron:hover { background: var(--sf3); color: var(--tx); }
.stp-tree-chevron svg { width: 14px; height: 14px; transition: transform .12s; }
.stp-tree-chevron-empty { visibility: hidden; cursor: default; }
.stp-tree-thumb {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 6px;
overflow: hidden;
background: var(--sf3);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--bd);
}
.stp-tree-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stp-tree-thumb svg { width: 14px; height: 14px; color: var(--bd2); }
.stp-tree-info {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.stp-tree-name {
font-size: 13.5px;
font-weight: 600;
color: var(--tx);
}
.stp-tree-slug {
font-size: 11.5px;
color: var(--mu);
font-family: ui-monospace, SFMono-Regular, monospace;
}
.stp-tree-subcount {
font-size: 11px;
color: var(--ac);
}
.stp-tree-empty {
padding: 40px 14px;
text-align: center;
font-size: 13px;
color: var(--mu);
}
/* ── Badges ──────────────────────────────────────────────────────── */
.stp-badge {
flex-shrink: 0;
font-size: 10.5px;
font-weight: 600;
color: var(--ac);
background: var(--acl, #eef2ff);
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
}
.stp-badge-muted { color: var(--mu); background: var(--sf3); }
/* ── Row actions ─────────────────────────────────────────────────── */
.stp-tree-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 2px;
}
.stp-icon-btn {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
color: var(--mu);
cursor: pointer;
transition: background .1s, color .1s;
}
.stp-icon-btn svg { width: 14px; height: 14px; }
.stp-icon-btn:hover { background: var(--sf3); color: var(--tx); }
.stp-icon-btn-danger:hover { background: #fef2f2; color: #dc2626; }
/* ── Preview modal (Brands "view" action) ───────────────────────── */
.stp-preview-image {
width: 72px; height: 72px;
object-fit: cover;
border-radius: var(--r);
border: 1px solid var(--bd);
margin-bottom: 14px;
}
.stp-preview-fields { display: flex; flex-direction: column; gap: 10px; }
.stp-preview-fields dt {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .04em; color: var(--mu); margin-bottom: 2px;
}
.stp-preview-fields dd { font-size: 13.5px; color: var(--tx); }
/* ── Order detail: single-sheet invoice layout ───────────────────── */
.stp-invoice {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--r3);
box-shadow: var(--sh1);
padding: 32px 36px;
}
.stp-invoice + .stp-invoice { margin-top: 20px; }
.stp-invoice-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
padding-bottom: 20px;
border-bottom: 2px solid var(--tx);
margin-bottom: 24px;
}
.stp-invoice-store-name { font-size: 19px; font-weight: 800; color: var(--tx); margin: 0 0 2px; }
.stp-invoice-store-meta { font-size: 12px; color: var(--mu); }
.stp-invoice-title { text-align: right; }
.stp-invoice-title h1 {
font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
color: var(--ac); margin: 0 0 6px; text-transform: uppercase;
}
.stp-invoice-meta-row { font-size: 12.5px; color: var(--mu); }
.stp-invoice-meta-row strong { color: var(--tx); }
.stp-invoice-badges { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.stp-invoice-pill {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
background: var(--sf3); color: var(--ts);
}
.stp-invoice-pill-warning { background: var(--wnl); color: #92400e; }
.stp-invoice-pill-info { background: var(--inl); color: #1e40af; }
.stp-invoice-pill-primary { background: var(--acl); color: var(--ach); }
.stp-invoice-pill-success { background: var(--okl); color: #065f46; }
.stp-invoice-pill-danger { background: var(--dnl); color: #991b1b; }
.stp-invoice-pill-gray { background: var(--sf3); color: var(--ts); }
.stp-invoice-addresses { display: flex; gap: 32px; margin-bottom: 26px; flex-wrap: wrap; }
.stp-invoice-addresses .col { flex: 1 1 240px; }
.stp-invoice-addresses h3 {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
color: var(--mu); margin: 0 0 8px;
}
.stp-invoice-addresses p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ts); }
.stp-invoice-addresses p strong { color: var(--tx); }
table.stp-invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
table.stp-invoice-table th {
text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
color: var(--mu); padding: 8px; border-bottom: 2px solid var(--tx);
}
table.stp-invoice-table td { padding: 11px 8px; font-size: 13.5px; border-bottom: 1px solid var(--bd); vertical-align: top; color: var(--ts); }
table.stp-invoice-table th.num, table.stp-invoice-table td.num { text-align: right; }
.stp-invoice-prod-name { font-weight: 600; color: var(--tx); }
.stp-invoice-prod-sub { color: var(--mu); font-size: 11.5px; margin-top: 2px; }
.stp-invoice-totals-wrap { display: flex; justify-content: flex-end; margin-bottom: 24px; }
table.stp-invoice-totals { width: 280px; border-collapse: collapse; }
table.stp-invoice-totals td { padding: 5px 8px; font-size: 13.5px; }
table.stp-invoice-totals td.label { color: var(--mu); }
table.stp-invoice-totals td.amount { text-align: right; color: var(--ts); }
table.stp-invoice-totals tr.grand td { border-top: 2px solid var(--tx); font-weight: 800; font-size: 15.5px; padding-top: 10px; color: var(--tx); }
.stp-invoice-footer-grid { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--bd); }
.stp-invoice-footer-grid .col { flex: 1 1 200px; }
.stp-invoice-footer-grid h3 {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
color: var(--mu); margin: 0 0 8px;
}
.stp-invoice-footer-grid p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ts); }
.stp-invoice-note-box { font-size: 13px; color: var(--tx); background: var(--sf2); border-radius: var(--r); padding: 10px 12px; }
.stp-invoice-timeline { display: flex; flex-direction: column; gap: 10px; }
.stp-invoice-timeline-row {
display: flex; align-items: flex-start; gap: 12px;
padding-bottom: 10px; border-bottom: 1px solid var(--bd);
}
.stp-invoice-timeline-row:last-child { border-bottom: none; padding-bottom: 0; }
.stp-invoice-timeline-note { flex: 1; font-size: 13px; color: var(--ts); }
.stp-invoice-timeline-at { font-size: 12px; color: var(--mu); white-space: nowrap; }