/* ============================================================
FashionPanel Admin — Combined Stylesheet
Covers: Dashboard · Orders · Products · Add Product ·
Customers · Inventory · Categories · Coupons · Settings
Font import (add to every page ):
Usage:
============================================================ */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
--bg: #f0eeeb;
--surface: #e8e5e0;
--surface2: #dedad4;
--border: #c8c3bb;
--accent: #1a1a1a;
--accent2: #3d3d3d;
--danger: #8b2e2e;
--success: #2e5c3e;
--warn: #7a5c1e;
--txt: #0f0f0e;
--txt2: #4a4845;
--txt3: #8a8680;
--radius: 10px;
--radius-lg: 16px;
--shadow: 0 4px 24px rgba(0, 0, 0, .12);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--txt);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
min-height: 100vh;
}
a {
text-decoration: none;
}
/* ============================================================
3. LAYOUT
============================================================ */
.page-wrapper {
display: flex;
min-height: 100vh;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.page-body {
padding: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* Grid helpers */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.col-span-2 {
grid-column: span 2;
}
.col-span-3 {
grid-column: span 3;
}
/* ============================================================
4. SIDEBAR
============================================================ */
.sidebar {
width: 220px;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 28px 16px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 4px;
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
overflow-y: auto;
}
.logo {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -.3px;
color: var(--txt);
padding: 0 8px 24px;
display: flex;
align-items: center;
gap: 8px;
}
.logo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.nav-section {
font-size: 10px;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--txt3);
padding: 16px 12px 6px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius);
color: var(--txt2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all .15s;
text-decoration: none;
position: relative;
}
.nav-item:hover {
background: var(--surface2);
color: var(--txt);
}
.nav-item.active {
background: rgba(124, 109, 250, .12);
color: var(--accent);
}
.nav-icon {
width: 16px;
height: 16px;
opacity: .7;
flex-shrink: 0;
}
.nav-badge {
margin-left: auto;
font-size: 10px;
font-weight: 700;
background: var(--danger);
color: #fff;
border-radius: 10px;
padding: 1px 6px;
}
.nav-badge.warn {
background: var(--warn);
color: #000;
}
.nav-badge.green {
background: var(--success);
}
.sidebar-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* ── Mobile sidebar overlay ── */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
z-index: 40;
opacity: 0;
transition: opacity .25s;
}
.sidebar-overlay.visible {
opacity: 1;
}
/* ============================================================
5. TOPBAR
============================================================ */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: sticky;
top: 0;
z-index: 10;
}
.topbar-search {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 14px;
width: 280px;
}
.topbar-search input {
background: none;
border: none;
outline: none;
color: var(--txt);
font-size: 13px;
width: 100%;
font-family: 'DM Sans', sans-serif;
}
.topbar-search input::placeholder {
color: var(--txt3);
}
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.topbar-btn {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--surface2);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--txt2);
position: relative;
transition: all .15s;
}
.topbar-btn:hover {
color: var(--txt);
border-color: var(--txt3);
}
.notif-dot {
position: absolute;
top: 6px;
right: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--danger);
border: 1.5px solid var(--surface);
}
/* Mobile hamburger menu button */
.menu-btn {
display: none;
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--surface2);
border: 1px solid var(--border);
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--txt2);
flex-shrink: 0;
transition: all .15s;
}
.menu-btn:hover {
color: var(--txt);
border-color: var(--txt3);
}
/* ── Avatar ── */
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #fff;
cursor: pointer;
flex-shrink: 0;
transition: all .2s;
border: 2px solid transparent;
user-select: none;
position: relative;
}
.avatar:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(124, 109, 250, .15);
}
.avatar.open {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(124, 109, 250, .18);
}
.avatar::after {
content: '';
position: absolute;
bottom: 1px;
right: 1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
border: 1.5px solid var(--surface);
}
/* ── Avatar dropdown ── */
.avatar-wrap {
position: relative;
}
.avatar-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 220px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
overflow: hidden;
opacity: 0;
transform: translateY(-8px) scale(.97);
pointer-events: none;
transition: all .18s cubic-bezier(.34, 1.2, .64, 1);
z-index: 100;
}
.avatar-dropdown.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
}
.dd-user {
padding: 14px 16px 12px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
}
.dd-user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.dd-name {
font-size: 13px;
font-weight: 600;
color: var(--txt);
}
.dd-role {
font-size: 11px;
color: var(--txt3);
margin-top: 1px;
}
.dd-menu {
padding: 6px;
}
.dd-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
font-size: 13px;
color: var(--txt2);
cursor: pointer;
transition: all .12s;
text-decoration: none;
}
.dd-item:hover {
background: var(--surface2);
color: var(--txt);
}
.dd-item svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.dd-item.logout {
color: var(--danger);
}
.dd-item.logout:hover {
background: rgba(248, 113, 113, .08);
color: var(--danger);
}
.dd-badge {
margin-left: auto;
background: var(--danger);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
padding: 1px 6px;
}
.dd-divider {
height: 1px;
background: var(--border);
margin: 4px 6px;
}
.dd-footer {
padding: 8px 16px 10px;
border-top: 1px solid var(--border);
font-size: 10px;
color: var(--txt3);
display: flex;
align-items: center;
justify-content: space-between;
}
.dd-footer-badge {
background: rgba(124, 109, 250, .1);
color: var(--accent);
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 6px;
}
@keyframes dd-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================================
6. TYPOGRAPHY
============================================================ */
.page-title {
font-family: 'Syne', sans-serif;
font-size: 22px;
font-weight: 600;
letter-spacing: -.4px;
color: var(--txt);
}
.page-subtitle {
font-size: 13px;
color: var(--txt2);
margin-top: 2px;
}
/* ============================================================
7. CARDS
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-header {
padding: 18px 24px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.card-title {
font-family: 'Syne', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -.2px;
display: flex;
align-items: center;
gap: 8px;
}
.card-title-icon {
width: 28px;
height: 28px;
background: rgba(124, 109, 250, .12);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.card-body {
padding: 24px;
}
/* ============================================================
8. BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .15s;
font-family: 'DM Sans', sans-serif;
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover {
background: #6b5ce7;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(124, 109, 250, .35);
}
.btn-secondary {
background: var(--surface2);
color: var(--txt2);
border: 1px solid var(--border);
}
.btn-secondary:hover {
color: var(--txt);
border-color: var(--txt3);
}
.btn-ghost {
background: transparent;
color: var(--txt2);
border: 1px solid transparent;
}
.btn-ghost:hover {
color: var(--txt);
background: var(--surface2);
}
.btn-danger-ghost {
background: transparent;
color: var(--danger);
border: 1px solid transparent;
font-size: 11px;
padding: 4px 8px;
}
.btn-danger-ghost:hover {
background: rgba(248, 113, 113, .1);
}
/* ============================================================
9. FORM ELEMENTS
============================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--txt2);
display: flex;
align-items: center;
justify-content: space-between;
}
.form-label a {
font-size: 11px;
color: var(--accent);
text-decoration: none;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.form-label a:hover {
text-decoration: underline;
}
.form-hint {
font-size: 11px;
color: var(--txt3);
margin-top: 2px;
}
.db-field {
font-size: 10px;
color: var(--txt3);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.db-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--accent2);
background: rgba(192, 132, 252, .1);
border: 1px solid rgba(192, 132, 252, .25);
border-radius: 6px;
padding: 2px 8px;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--txt);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
padding: 10px 14px;
outline: none;
transition: border-color .15s, box-shadow .15s;
appearance: none;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(124, 109, 250, .15);
}
input::placeholder,
textarea::placeholder {
color: var(--txt3);
}
input.error {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(248, 113, 113, .12);
}
textarea {
resize: vertical;
min-height: 90px;
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239090a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
select option {
background: var(--surface2);
}
/* Input group (prefix/suffix) */
.input-group {
position: relative;
}
.input-prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--txt2);
font-size: 13px;
font-weight: 500;
pointer-events: none;
}
.input-group input {
padding-left: 28px;
}
.input-suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--txt3);
font-size: 11px;
pointer-events: none;
}
/* Checkbox */
input[type="checkbox"] {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface2);
appearance: none;
cursor: pointer;
transition: all .15s;
padding: 0;
flex-shrink: 0;
}
input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* Radio */
input[type="radio"] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface2);
appearance: none;
cursor: pointer;
transition: all .15s;
padding: 0;
}
input[type="radio"]:checked {
border-color: var(--accent);
box-shadow: inset 0 0 0 3px var(--surface2), inset 0 0 0 6px var(--accent);
}
/* Check / radio rows */
.check-row {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.check-label {
font-size: 13px;
color: var(--txt);
}
.check-sub {
font-size: 11px;
color: var(--txt3);
margin-top: 1px;
}
/* Toggle switch */
.toggle-wrap {
display: flex;
align-items: flex-start;
gap: 12px;
}
.toggle {
position: relative;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--border);
border-radius: 11px;
cursor: pointer;
transition: .2s;
}
.toggle-slider::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 3px;
top: 3px;
background: var(--txt2);
border-radius: 50%;
transition: .2s;
}
.toggle input:checked+.toggle-slider {
background: var(--accent);
}
.toggle input:checked+.toggle-slider::before {
transform: translateX(16px);
background: #fff;
}
.toggle-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.toggle-label {
font-size: 13px;
color: var(--txt);
font-weight: 500;
}
.toggle-sub {
font-size: 11px;
color: var(--txt3);
}
/* ============================================================
10. BADGES & STATUS
============================================================ */
.badge {
font-size: 10px;
font-weight: 600;
letter-spacing: .3px;
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.badge-success {
background: rgba(52, 211, 153, .1);
color: var(--success);
}
.badge-warn {
background: rgba(251, 191, 36, .1);
color: var(--warn);
}
.badge-danger {
background: rgba(248, 113, 113, .1);
color: var(--danger);
}
.badge-purple {
background: rgba(124, 109, 250, .12);
color: var(--accent);
}
.badge-default {
background: var(--surface2);
color: var(--txt2);
border: 1px solid var(--border);
}
/* ============================================================
11. DATA TABLE
============================================================ */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
text-align: left;
font-size: 10px;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--txt3);
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.data-table th.sortable {
cursor: pointer;
user-select: none;
}
.data-table th.sortable:hover {
color: var(--txt2);
}
.data-table td {
padding: 13px 16px;
border-bottom: 1px solid rgba(44, 44, 53, .5);
vertical-align: middle;
font-size: 13px;
}
.data-table tbody tr:hover td {
background: rgba(255, 255, 255, .02);
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.data-table tr.selected td {
background: rgba(124, 109, 250, .05);
}
/* ============================================================
12. PAGINATION
============================================================ */
.pagination {
display: flex;
align-items: center;
gap: 4px;
}
.pag-btn {
width: 32px;
height: 32px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
border: none;
background: var(--surface2);
color: var(--txt2);
}
.pag-btn:hover {
background: var(--border);
color: var(--txt);
}
.pag-btn.active {
background: var(--accent);
color: #fff;
}
.pag-btn:disabled {
opacity: .3;
cursor: not-allowed;
}
/* ============================================================
13. FILTER TABS
============================================================ */
.filter-tabs {
display: flex;
gap: 4px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px;
flex-wrap: wrap;
}
.filter-tab {
padding: 6px 14px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
color: var(--txt2);
cursor: pointer;
transition: all .15s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.filter-tab:hover {
color: var(--txt);
}
.filter-tab.active {
background: var(--surface);
color: var(--txt);
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.filter-tab .count {
font-size: 10px;
background: rgba(124, 109, 250, .2);
color: var(--accent);
border-radius: 10px;
padding: 1px 6px;
}
.filter-tab.active .count {
background: var(--accent);
color: #fff;
}
/* ============================================================
14. PROGRESS BARS
============================================================ */
.progress-bar {
height: 6px;
background: var(--surface2);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 3px;
background: var(--accent);
}
.progress-fill.green {
background: var(--success);
}
.progress-fill.warn {
background: var(--warn);
}
.progress-fill.danger {
background: var(--danger);
}
/* ============================================================
15. PRODUCT CELLS
============================================================ */
.product-cell {
display: flex;
align-items: center;
gap: 12px;
}
.product-thumb {
width: 42px;
height: 42px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.product-name {
font-weight: 500;
color: var(--txt);
}
.product-name-text {
font-weight: 500;
color: var(--txt);
font-size: 13px;
}
.product-sku {
font-size: 11px;
color: var(--txt3);
font-family: 'DM Mono', monospace;
margin-top: 1px;
}
/* ============================================================
16. CUSTOMER CELLS
============================================================ */
.cust-cell {
display: flex;
align-items: center;
gap: 10px;
}
.cust-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.cust-avatar-lg {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.cust-name {
font-weight: 600;
color: var(--txt);
}
.cust-email {
font-size: 11px;
color: var(--txt3);
}
.cust-meta {
font-size: 11px;
color: var(--txt3);
margin-top: 1px;
}
/* ============================================================
17. STAT CARDS (Dashboard)
============================================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.stat-icon.purple {
background: rgba(124, 109, 250, .12);
color: var(--accent);
}
.stat-icon.green {
background: rgba(52, 211, 153, .1);
color: var(--success);
}
.stat-icon.yellow {
background: rgba(251, 191, 36, .1);
color: var(--warn);
}
.stat-icon.pink {
background: rgba(192, 132, 252, .1);
color: var(--accent2);
}
.stat-change {
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 6px;
}
.stat-change.up {
background: rgba(52, 211, 153, .1);
color: var(--success);
}
.stat-change.down {
background: rgba(248, 113, 113, .1);
color: var(--danger);
}
.stat-value {
font-family: 'Syne', sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
color: var(--txt);
}
.stat-label {
font-size: 12px;
color: var(--txt2);
margin-top: -6px;
}
/* ============================================================
18. CHART (Dashboard)
============================================================ */
.chart-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
.chart-placeholder {
background: var(--surface2);
border-radius: var(--radius);
height: 220px;
display: flex;
align-items: flex-end;
gap: 6px;
padding: 16px 16px 0;
overflow: hidden;
}
.bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
justify-content: flex-end;
}
.bar {
width: 100%;
border-radius: 4px 4px 0 0;
background: rgba(124, 109, 250, .25);
transition: all .3s;
min-height: 4px;
}
.bar.active {
background: var(--accent);
}
.bar-label {
font-size: 9px;
color: var(--txt3);
text-transform: uppercase;
letter-spacing: .5px;
padding-bottom: 8px;
}
/* Donut legend */
.donut-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.donut-legend {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.legend-item {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.legend-label {
color: var(--txt2);
display: flex;
align-items: center;
gap: 6px;
}
.legend-pct {
color: var(--txt);
font-weight: 600;
}
/* ============================================================
19. QUICK ACTIONS (Dashboard)
============================================================ */
.quick-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.qa-btn {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
transition: all .2s;
text-decoration: none;
}
.qa-btn:hover {
border-color: var(--accent);
background: rgba(124, 109, 250, .06);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.qa-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(124, 109, 250, .1);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
}
.qa-label {
font-size: 13px;
font-weight: 600;
color: var(--txt);
}
.qa-sub {
font-size: 11px;
color: var(--txt3);
}
/* ============================================================
20. ACTIVITY FEED (Dashboard)
============================================================ */
.activity-list {
display: flex;
flex-direction: column;
}
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(44, 44, 53, .5);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 6px;
}
.activity-text {
font-size: 13px;
color: var(--txt2);
line-height: 1.5;
}
.activity-text strong {
color: var(--txt);
font-weight: 600;
}
.activity-time {
font-size: 11px;
color: var(--txt3);
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
/* ============================================================
21. SLIDE-OVER PANEL (Orders / Customers)
============================================================ */
.order-detail-overlay,
.panel-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 100;
display: none;
align-items: flex-start;
justify-content: flex-end;
}
.order-detail-overlay.open,
.panel-overlay.open {
display: flex;
}
.order-detail-panel,
.panel {
width: 480px;
height: 100vh;
background: var(--surface);
border-left: 1px solid var(--border);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.panel {
width: 420px;
}
.odp-header,
.panel-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: var(--surface);
z-index: 2;
}
.odp-body,
.panel-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.odp-section-title,
.section-title {
font-size: 10px;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--txt3);
margin-bottom: 12px;
}
.odp-row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 6px 0;
border-bottom: 1px solid rgba(44, 44, 53, .4);
}
.odp-row:last-child {
border-bottom: none;
}
.odp-row-label {
color: var(--txt2);
}
.odp-row-value {
color: var(--txt);
font-weight: 500;
}
.info-row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 8px 0;
border-bottom: 1px solid rgba(44, 44, 53, .4);
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
color: var(--txt2);
}
.info-value {
color: var(--txt);
font-weight: 500;
}
.order-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(44, 44, 53, .4);
}
.order-item:last-child {
border-bottom: none;
}
.order-item-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.order-item-info {
flex: 1;
}
.order-item-name {
font-weight: 500;
color: var(--txt);
font-size: 13px;
}
.order-item-meta {
font-size: 11px;
color: var(--txt3);
margin-top: 1px;
}
.order-item-price {
font-weight: 600;
color: var(--txt);
font-size: 13px;
}
/* ============================================================
22. ORDER TIMELINE (Orders)
============================================================ */
.timeline {
display: flex;
flex-direction: column;
}
.tl-item {
display: flex;
gap: 12px;
padding-bottom: 16px;
position: relative;
}
.tl-item:last-child {
padding-bottom: 0;
}
.tl-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
position: relative;
z-index: 1;
}
.tl-line {
position: absolute;
left: 4px;
top: 14px;
bottom: 0;
width: 2px;
background: var(--border);
}
.tl-item:last-child .tl-line {
display: none;
}
.tl-text {
font-size: 12px;
color: var(--txt2);
}
.tl-text strong {
color: var(--txt);
font-weight: 600;
}
.tl-time {
font-size: 10px;
color: var(--txt3);
margin-top: 1px;
}
/* ============================================================
23. BULK ACTION BAR (Orders / Products)
============================================================ */
.bulk-bar {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
animation: slideDown .2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bulk-count {
font-size: 13px;
font-weight: 600;
color: var(--txt);
}
.bulk-actions {
display: flex;
gap: 6px;
margin-left: auto;
}
/* ============================================================
24. PRODUCT GRID VIEW (Products)
============================================================ */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
padding: 24px;
}
.product-grid-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: all .2s;
}
.product-grid-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.pgc-thumb {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
font-size: 56px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.pgc-body {
padding: 14px;
}
.pgc-name {
font-weight: 600;
color: var(--txt);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pgc-sku {
font-size: 10px;
color: var(--txt3);
font-family: 'DM Mono', monospace;
margin-top: 2px;
}
.pgc-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.pgc-price {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--txt);
}
/* View toggle */
.view-toggle {
display: flex;
gap: 2px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 3px;
}
.vt-btn {
width: 30px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--txt3);
transition: all .15s;
border: none;
background: transparent;
}
.vt-btn.active {
background: var(--surface);
color: var(--txt);
}
/* ============================================================
25. INVENTORY (Inventory)
============================================================ */
.stock-bar-wrap {
display: flex;
flex-direction: column;
gap: 4px;
}
.stock-bar {
height: 6px;
background: var(--surface2);
border-radius: 3px;
overflow: hidden;
width: 100px;
}
.stock-fill {
height: 100%;
border-radius: 3px;
transition: width .3s;
}
.stock-editor {
display: flex;
align-items: center;
gap: 6px;
}
.stock-editor button {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--txt);
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
}
.stock-editor button:hover {
border-color: var(--accent);
color: var(--accent);
}
.alert-banner {
background: rgba(248, 113, 113, .07);
border: 1px solid rgba(248, 113, 113, .2);
border-radius: var(--radius-lg);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.alert-banner-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(248, 113, 113, .12);
display: flex;
align-items: center;
justify-content: center;
color: var(--danger);
flex-shrink: 0;
}
.alert-banner-text {
font-size: 13px;
color: var(--txt2);
}
.alert-banner-text strong {
color: var(--danger);
font-weight: 600;
}
/* ============================================================
26. CATEGORIES (Categories)
============================================================ */
.cat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(44, 44, 53, .4);
cursor: pointer;
transition: all .15s;
}
.cat-item:last-child {
border-bottom: none;
}
.cat-item:hover {
background: rgba(255, 255, 255, .02);
}
.cat-item.selected {
background: rgba(124, 109, 250, .06);
border-left: 3px solid var(--accent);
}
.cat-emoji {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.cat-name {
font-weight: 600;
color: var(--txt);
font-size: 13px;
}
.cat-meta {
font-size: 11px;
color: var(--txt3);
margin-top: 1px;
}
.cat-count {
margin-left: auto;
font-size: 11px;
color: var(--accent);
background: rgba(124, 109, 250, .1);
border-radius: 6px;
padding: 2px 8px;
font-weight: 600;
flex-shrink: 0;
}
.sub-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 44px;
border-bottom: 1px solid rgba(44, 44, 53, .2);
cursor: pointer;
transition: all .15s;
}
.sub-item:hover {
background: rgba(255, 255, 255, .02);
}
.sub-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
}
/* ============================================================
27. COUPONS (Coupons)
============================================================ */
.coupon-code {
font-family: 'DM Mono', monospace;
font-size: 12px;
font-weight: 700;
background: rgba(124, 109, 250, .1);
color: var(--accent);
border: 1px solid rgba(124, 109, 250, .2);
border-radius: 6px;
padding: 3px 10px;
letter-spacing: 1px;
}
.usage-bar {
height: 4px;
background: var(--surface2);
border-radius: 2px;
overflow: hidden;
width: 80px;
}
.usage-fill {
height: 100%;
border-radius: 2px;
background: var(--accent);
}
/* ============================================================
28. SETTINGS (Settings)
============================================================ */
.settings-nav {
width: 200px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
position: sticky;
top: 90px;
}
.settings-nav-item {
padding: 9px 14px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 500;
color: var(--txt2);
cursor: pointer;
transition: all .15s;
display: flex;
align-items: center;
gap: 8px;
}
.settings-nav-item:hover {
background: var(--surface2);
color: var(--txt);
}
.settings-nav-item.active {
background: rgba(124, 109, 250, .12);
color: var(--accent);
}
.settings-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.form-hint {
font-size: 11px;
color: var(--txt3);
margin-top: 2px;
}
.logo-uploader {
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
padding: 24px;
cursor: pointer;
transition: all .2s;
display: flex;
align-items: center;
gap: 16px;
}
.logo-uploader:hover {
border-color: var(--accent);
background: rgba(124, 109, 250, .04);
}
.logo-preview {
width: 64px;
height: 64px;
border-radius: 12px;
background: var(--surface2);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.danger-card {
background: rgba(248, 113, 113, .04);
border: 1px solid rgba(248, 113, 113, .2);
border-radius: var(--radius-lg);
padding: 20px 24px;
}
.danger-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(248, 113, 113, .1);
}
.danger-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.danger-row:first-child {
padding-top: 0;
}
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--surface);
border: 1px solid var(--success);
border-radius: var(--radius-lg);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
transform: translateY(80px);
opacity: 0;
transition: all .3s;
z-index: 999;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
/* ============================================================
29. ADD PRODUCT PAGE (add-products.php)
============================================================ */
/* Slug preview */
.slug-preview {
font-size: 11px;
color: var(--txt3);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.slug-preview span {
color: var(--accent);
}
/* Rich text editor */
.editor-toolbar {
background: var(--surface2);
border: 1px solid var(--border);
border-bottom: none;
border-radius: var(--radius) var(--radius) 0 0;
padding: 8px 12px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.toolbar-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--txt2);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
}
.toolbar-btn:hover {
background: var(--border);
color: var(--txt);
}
.toolbar-sep {
width: 1px;
background: var(--border);
margin: 0 4px;
}
.editor-body {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
min-height: 160px;
padding: 14px;
color: var(--txt);
font-size: 13px;
line-height: 1.7;
outline: none;
transition: border-color .15s;
}
.editor-body:focus {
border-color: var(--accent);
}
.editor-body[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--txt3);
}
/* Image uploader */
.thumb-uploader {
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
padding: 32px 20px;
text-align: center;
cursor: pointer;
transition: all .2s;
position: relative;
overflow: hidden;
}
.thumb-uploader:hover {
border-color: var(--accent);
background: rgba(124, 109, 250, .04);
}
.thumb-uploader.has-image {
padding: 0;
border-style: solid;
border-color: var(--border);
}
.thumb-uploader img {
width: 100%;
border-radius: calc(var(--radius-lg) - 2px);
display: block;
}
.thumb-uploader-icon {
color: var(--txt3);
margin-bottom: 12px;
}
.thumb-uploader-text {
font-size: 13px;
color: var(--txt2);
font-weight: 500;
}
.thumb-uploader-sub {
font-size: 11px;
color: var(--txt3);
margin-top: 4px;
}
.thumb-uploader-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0;
transition: opacity .2s;
border-radius: calc(var(--radius-lg) - 2px);
}
.thumb-uploader:hover .thumb-uploader-overlay {
opacity: 1;
}
/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
}
.gallery-item {
aspect-ratio: 1;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
position: relative;
background: var(--surface2);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-add {
aspect-ratio: 1;
border: 2px dashed var(--border);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
color: var(--txt3);
font-size: 11px;
font-weight: 500;
transition: all .15s;
background: var(--surface2);
}
.gallery-add:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(124, 109, 250, .04);
}
/* Tabs */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
}
.tab-btn {
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
color: var(--txt2);
border: none;
background: none;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .15s;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
margin-bottom: -1px;
}
.tab-btn:hover {
color: var(--txt);
}
.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* Tags input */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 10px;
min-height: 42px;
cursor: text;
transition: border-color .15s;
}
.tags-container:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(124, 109, 250, .15);
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(124, 109, 250, .15);
color: var(--accent2);
border-radius: 6px;
padding: 2px 8px;
font-size: 12px;
font-weight: 500;
}
.tag-remove {
cursor: pointer;
color: var(--accent);
font-size: 14px;
line-height: 1;
margin-left: 2px;
}
.tag-remove:hover {
color: var(--danger);
}
.tags-input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 2px 4px !important;
width: auto !important;
min-width: 80px;
flex: 1;
font-size: 13px;
color: var(--txt);
outline: none;
}
/* Variant table */
.variant-table {
width: 100%;
border-collapse: collapse;
}
.variant-table th {
text-align: left;
font-size: 10px;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--txt3);
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.variant-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--surface2);
vertical-align: middle;
}
.variant-table td input,
.variant-table td select {
padding: 6px 10px;
font-size: 12px;
}
.variant-table tbody tr:hover td {
background: rgba(255, 255, 255, .02);
}
.add-variant-btn {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--accent);
background: rgba(124, 109, 250, .08);
border: 1px dashed rgba(124, 109, 250, .3);
border-radius: var(--radius);
padding: 8px 14px;
cursor: pointer;
transition: all .15s;
width: 100%;
justify-content: center;
margin-top: 8px;
}
.add-variant-btn:hover {
background: rgba(124, 109, 250, .15);
border-color: var(--accent);
}
/* Color swatch */
.color-row {
display: flex;
align-items: center;
gap: 8px;
}
.color-swatch {
width: 32px;
height: 32px;
border-radius: 8px;
border: 2px solid var(--border);
cursor: pointer;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.color-swatch input[type="color"] {
position: absolute;
inset: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
cursor: pointer;
border: none;
padding: 0;
background: none;
opacity: 0;
}
.color-swatch-bg {
position: absolute;
inset: 0;
border-radius: 6px;
pointer-events: none;
}
/* Status bar */
.status-bar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: sticky;
bottom: 24px;
box-shadow: var(--shadow);
}
.status-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--txt2);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1
}
50% {
opacity: .4
}
}
.status-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* Section note */
.section-note {
font-size: 11px;
color: var(--txt3);
font-family: 'DM Mono', monospace;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 8px;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ============================================================
30. MODALS
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .7);
z-index: 200;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-overlay.open {
display: flex;
}
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: var(--surface);
}
.modal-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
justify-content: flex-end;
}
.modal-title {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 16px;
color: var(--txt);
margin-bottom: 8px;
}
.modal-sub {
font-size: 13px;
color: var(--txt2);
margin-bottom: 24px;
line-height: 1.6;
}
.modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ============================================================
31. SCROLLBAR
============================================================ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--txt3);
}
/* ============================================================
32. RESPONSIVE
============================================================ */
/* Tablet — hide sidebar in static position, show mobile menu btn */
@media (max-width: 900px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 50;
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-overlay {
display: block;
}
.menu-btn {
display: flex;
}
.topbar {
padding: 12px 16px;
}
.page-body {
padding: 20px;
}
.settings-nav {
width: 100%;
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.chart-grid {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: 1fr 1fr;
}
.grid-3,
.grid-4 {
grid-template-columns: 1fr 1fr;
}
.col-span-3 {
grid-column: span 2;
}
}
/* Mobile — single column everything */
@media (max-width: 600px) {
.topbar-search {
display: none;
}
.stats-grid {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: 1fr;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.col-span-2,
.col-span-3 {
grid-column: span 1;
}
.order-detail-panel,
.panel {
width: 100%;
}
.data-table th:nth-child(n+5),
.data-table td:nth-child(n+5) {
display: none;
}
}
/* Large screens — wider sidebar spacing */
@media (min-width: 1400px) {
.topbar {
padding: 14px 40px;
}
.page-body {
padding: 36px 40px;
}
}
/* Table styling for the editor */
.editor-body table {
border-collapse: collapse;
width: 100%;
margin: 10px 0;
}
.editor-body th,
.editor-body td {
border: 1px solid var(--border);
padding: 8px 12px;
vertical-align: top;
}
.editor-body th {
background: var(--surface2);
font-weight: 600;
}
.editor-body table[data-has-header="true"] th {
background: rgba(124, 109, 250, 0.1);
}
.editor-body table[data-has-footer="true"] tfoot td {
background: var(--surface2);
font-weight: 500;
}
.toolbar-dropdown:hover #tableDropdown {
display: block !important;
}