/* ============================================================================ * MarqX Design System — Page-level primitives. * * This file is loaded automatically by `react-head.php` AFTER `marqx-ui.css`, * so anything declared here can rely on the CSS variables defined there * (--mx-purple, --mx-bg, --mx-radius, etc). * * Scope: page frame, headers, stat grids, badges, empty/loading/error states, * data tables, smooth transitions. Pages MUST consume these primitives instead * of redefining them inline. * ========================================================================== */ /* --- Page frame ---------------------------------------------------------- */ /* Replaces the legacy `.container-fluid > .row > main` shell hack. */ /* New pages render `

…

` directly inside . */ body.mx-shell-active main.mx-page { margin-left: var(--mx-sidebar-width); width: calc(100% - var(--mx-sidebar-width)); max-width: calc(100% - var(--mx-sidebar-width)); padding: calc(var(--mx-navbar-height) + 24px) 28px 40px 28px; box-sizing: border-box; min-height: 100vh; transition: margin-left var(--mx-transition-slow), width var(--mx-transition-slow); animation: mx-page-fade-in 0.28s cubic-bezier(0.4, 0, 0.2, 1); } body.mx-shell-active.mx-sidebar-collapsed main.mx-page { margin-left: var(--mx-sidebar-collapsed); width: calc(100% - var(--mx-sidebar-collapsed)); max-width: calc(100% - var(--mx-sidebar-collapsed)); } @media (max-width: 991.98px) { body.mx-shell-active main.mx-page, body.mx-shell-active.mx-sidebar-collapsed main.mx-page { margin-left: 0; width: 100%; max-width: 100%; padding: calc(var(--mx-navbar-height) + 16px) 16px 32px 16px; } } @keyframes mx-page-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- Page header --------------------------------------------------------- */ .mx-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--mx-border); } .mx-page-header .mx-page-title-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mx-page-header h1.mx-page-title { font-size: 1.6rem; font-weight: 700; color: var(--mx-text); margin: 0; letter-spacing: -0.01em; line-height: 1.2; } .mx-page-header .mx-page-subtitle { font-size: 0.85rem; color: var(--mx-text-muted); margin: 0; } .mx-page-header .mx-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- Section + cards (consolidated from inline page styles) -------------- */ .mx-section { margin-bottom: 24px; } .mx-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mx-text-muted); font-weight: 600; margin: 0 0 10px 2px; } /* --- Stat grid (replaces .pay-stat / .inv-stat / .cust-stat / etc) ------- */ .mx-stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 20px; } .mx-stat { background: var(--mx-bg-card); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 16px 18px; box-shadow: var(--mx-shadow-sm); transition: transform var(--mx-transition), box-shadow var(--mx-transition), border-color var(--mx-transition); position: relative; overflow: hidden; } .mx-stat:hover { transform: translateY(-1px); box-shadow: var(--mx-shadow-md); border-color: var(--mx-border-hover); } .mx-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .mx-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--mx-text); line-height: 1.1; } .mx-stat-delta { font-size: 0.72rem; margin-top: 6px; font-weight: 500; } .mx-stat-delta.up { color: var(--mx-green); } .mx-stat-delta.down { color: var(--mx-red); } .mx-stat-icon { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(124, 58, 237, 0.08); color: var(--mx-purple); font-size: 0.95rem; } .mx-stat--purple .mx-stat-icon { background: rgba(124,58,237,0.10); color: var(--mx-purple); } .mx-stat--green .mx-stat-icon { background: rgba(16,185,129,0.10); color: var(--mx-green); } .mx-stat--amber .mx-stat-icon { background: rgba(245,158,11,0.10); color: var(--mx-amber); } .mx-stat--red .mx-stat-icon { background: rgba(239,68,68,0.10); color: var(--mx-red); } .mx-stat--blue .mx-stat-icon { background: rgba(59,130,246,0.10); color: var(--mx-blue); } .mx-stat--teal .mx-stat-icon { background: rgba(20,184,166,0.10); color: var(--mx-teal); } .mx-stat--pink .mx-stat-icon { background: rgba(236,72,153,0.10); color: var(--mx-pink); } /* --- Badges (status pills used across modules) --------------------------- */ .mx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--mx-radius-pill); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; background: rgba(107,114,128,0.10); color: #4b5563; } .mx-badge i { font-size: 0.7rem; } .mx-badge.is-success { background: rgba(16,185,129,0.12); color: #047857; } .mx-badge.is-warn { background: rgba(245,158,11,0.14); color: #b45309; } .mx-badge.is-danger { background: rgba(239,68,68,0.12); color: #b91c1c; } .mx-badge.is-info { background: rgba(59,130,246,0.12); color: #1d4ed8; } .mx-badge.is-purple { background: rgba(124,58,237,0.12); color: var(--mx-purple-dark); } .mx-badge.is-pink { background: rgba(236,72,153,0.12); color: #be185d; } .mx-badge.is-teal { background: rgba(20,184,166,0.12); color: #0f766e; } /* --- Tables (consolidated, consistent radius + hover) -------------------- */ .mx-table-wrap { background: var(--mx-bg-card); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); overflow: hidden; box-shadow: var(--mx-shadow-sm); } .mx-table-wrap > .table-responsive { width: 100%; overflow-x: auto; margin: 0; } .mx-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; } .mx-table thead th { background: #FAF8FF; border-bottom: 1px solid var(--mx-border); color: var(--mx-text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; position: sticky; top: 0; z-index: 1; } .mx-table tbody td { padding: 11px 14px; border-bottom: 1px solid #f1efff; color: var(--mx-text); vertical-align: middle; } .mx-table tbody tr { transition: background var(--mx-transition); } .mx-table tbody tr:hover { background: #F9F7FF; } .mx-table tbody tr:last-child td { border-bottom: none; } .mx-table .num { font-variant-numeric: tabular-nums; font-family: var(--mx-font-mono); } /* --- Buttons (consolidated; .btn-purple replaces ad-hoc copies) ---------- */ .btn-purple, .mx-btn-primary { background: var(--mx-gradient-purple); border: 1px solid transparent; color: #fff; font-weight: 500; transition: transform var(--mx-transition), box-shadow var(--mx-transition), filter var(--mx-transition); box-shadow: 0 1px 2px rgba(124,58,237,0.18); } .btn-purple:hover, .mx-btn-primary:hover { color:#fff; transform: translateY(-1px); box-shadow: var(--mx-shadow-md); filter: brightness(1.03); } .btn-purple:active { transform: none; } .btn-purple:focus-visible, .mx-btn-primary:focus-visible { outline: 3px solid rgba(124,58,237,0.35); outline-offset: 2px; } .mx-btn-ghost { background: transparent; border: 1px solid var(--mx-border); color: var(--mx-text); font-weight: 500; transition: background var(--mx-transition), border-color var(--mx-transition); } .mx-btn-ghost:hover { background: #F5F3FF; border-color: var(--mx-border-hover); } /* --- Empty / loading / error states -------------------------------------- */ .mx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; color: var(--mx-text-muted); } .mx-empty .mx-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(124,58,237,0.08); color: var(--mx-purple); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; } .mx-empty .mx-empty-title { font-size: 1rem; font-weight: 600; color: var(--mx-text); margin-bottom: 4px; } .mx-empty .mx-empty-msg { font-size: 0.85rem; max-width: 360px; } .mx-empty .mx-empty-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; } .mx-error-state { border: 1px solid rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); border-radius: var(--mx-radius); padding: 18px 20px; color: #991b1b; display: flex; gap: 12px; align-items: flex-start; } .mx-error-state i { font-size: 1.1rem; color: var(--mx-red); margin-top: 2px; } .mx-error-state .mx-error-title { font-weight: 600; margin-bottom: 2px; color: #7f1d1d; } .mx-error-state .mx-error-msg { font-size: 0.85rem; } /* Skeleton shimmer used by MxSkeleton component. */ .mx-skel { display: block; background: linear-gradient(90deg, #ECE9F8 0%, #F5F3FF 50%, #ECE9F8 100%); background-size: 200% 100%; animation: mx-skel-shimmer 1.4s ease-in-out infinite; border-radius: 6px; height: 12px; width: 100%; } .mx-skel.lg { height: 18px; } .mx-skel.xl { height: 28px; } .mx-skel.row { height: 44px; border-radius: 10px; margin-bottom: 8px; } @keyframes mx-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Tabs (used by Payments, Communication, etc) ------------------------- */ .mx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--mx-border); margin-bottom: 18px; overflow-x: auto; } .mx-tabs .mx-tab { padding: 10px 14px; border: none; background: none; color: var(--mx-text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--mx-transition), border-color var(--mx-transition); white-space: nowrap; } .mx-tabs .mx-tab:hover { color: var(--mx-text); } .mx-tabs .mx-tab.is-active { color: var(--mx-purple); border-bottom-color: var(--mx-purple); } .mx-tabs .mx-tab .mx-badge { margin-left: 6px; } /* --- Modal overlay tweak (consistent across pages) ---------------------- */ .mx-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 1050; display: flex; align-items: center; justify-content: center; animation: mx-fade-in 0.18s ease-out; } .mx-modal { background: #fff; border-radius: var(--mx-radius); width: min(560px, 92vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: mx-modal-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .mx-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--mx-border); } .mx-modal-body { padding: 20px; } .mx-modal-footer{ padding: 14px 20px; border-top: 1px solid var(--mx-border); display: flex; justify-content: flex-end; gap: 8px; } @keyframes mx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mx-modal-pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } } /* --- Print-safe utility -------------------------------------------------- */ @media print { .mx-sidebar, .mx-navbar, .mx-page-header .mx-page-actions { display: none !important; } body.mx-shell-active main.mx-page { margin-left: 0; width: 100%; padding: 0; } }