/* =====================================================
   TechStore — Accounting, Inventory & Reviews modules
   Black & Purple glassmorphism — fully offline
===================================================== */

:root {
    --chart-text: #94a3b8;
}

body:not(.dark) {
    --chart-text: #5d5470;
}

/* ── KPI cards ─────────────────────────────────────── */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass);
    overflow: hidden;
    transition: var(--transition);
}

.kpi-card::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 4px;
    height: 100%;
}

.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
}

.kpi-purple::after { background: linear-gradient(#a855f7, #7c3aed); }
.kpi-blue::after    { background: linear-gradient(var(--secondary, #6366f1), var(--secondary-2, #4f46e5)); }
.kpi-green::after   { background: linear-gradient(#34d399, #10b981); }
.kpi-orange::after  { background: linear-gradient(#fbbf24, #f59e0b); }
.kpi-pink::after    { background: linear-gradient(#ec4899, #db2777); }
.kpi-teal::after    { background: linear-gradient(#2dd4bf, #14b8a6); }
.kpi-red::after     { background: linear-gradient(#f87171, #ef4444); }

.kpi-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 22px;
    color: var(--accent);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid var(--border);
}

.kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kpi-label {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.kpi-value {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kpi-value-sm {
    font-size: clamp(14px, 1.8vw, 17px);
    direction: rtl;
}

.kpi-unit {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ── Charts ────────────────────────────────────────── */

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px 0;
}

.chart-card {
    min-width: 0;
    padding: 20px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass);
}

.chart-card-wide {
    grid-column: 1 / -1;
}

.chart-card-head {
    margin-bottom: 14px;
}

.chart-card-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.chart-card-head h3 i {
    color: var(--primary);
}

.chart-canvas-wrap {
    position: relative;
    height: 280px;
}

.chart-card-wide .chart-canvas-wrap {
    height: 300px;
}

/* ── Export toolbar ────────────────────────────────── */

.accounting-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin: 22px 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    backdrop-filter: var(--glass);
}

.accounting-toolbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text);
}

.accounting-toolbar-title i {
    color: var(--primary);
    font-size: 18px;
}

.accounting-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.table-foot-note {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ── Report filter form ────────────────────────────── */

.report-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin: 18px 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass);
}

.report-filter-form .form-group {
    margin: 0;
    min-width: 150px;
    flex: 1 1 150px;
}

.report-filter-form label {
    font-size: 12.5px;
    margin-bottom: 6px;
}

/* ── Inventory ─────────────────────────────────────── */

.inventory-product-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
}

.inventory-product-title {
    font-weight: 700;
    color: var(--text);
}

.inventory-product-title:hover {
    color: var(--primary);
}

.inventory-product-brand {
    font-size: 12px;
    color: var(--text-muted);
}

.inventory-history-link {
    font-size: 12px;
    color: var(--primary);
}

.inventory-history-link:hover {
    color: var(--accent);
}

.stock-number {
    display: inline-block;
    font-weight: 800;
    font-size: 17px;
    direction: ltr;
}

.stock-danger {
    color: var(--danger);
}

.cell-muted {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}

.stock-badge-success { color: var(--success); background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); }
.stock-badge-danger  { color: var(--danger); background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); }
.stock-badge-warning { color: var(--warning); background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); }

.change-positive { color: var(--success); font-weight: 800; }
.change-negative { color: var(--danger); font-weight: 800; }

.color-stock-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.mini-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}

.mini-color-chip .swatch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.row-low-stock td { background: rgba(251, 191, 36, .05); }
.row-out-of-stock td { background: rgba(248, 113, 113, .06); }

.quick-stock-form {
    min-width: 320px;
}

.quick-stock-row {
    display: grid;
    grid-template-columns: 92px 130px auto;
    gap: 8px;
    align-items: center;
}

.quick-stock-row .btn {
    grid-column: 1 / -1;
    justify-self: start;
}

.quick-stock-row input.form-control,
.quick-stock-row select.form-control {
    padding: 9px 12px;
    min-height: 40px;
}

.bulk-options-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bulk-note-field {
    flex: 1 1 260px;
}

.bulk-delta-input {
    width: 130px;
    direction: ltr;
}

.bulk-stock-form .form-group label {
    display: block;
    font-size: 12.5px;
    margin-bottom: 6px;
    color: var(--text-muted);
}

/* ── Pagination ────────────────────────────────────── */

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 0 4px;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Review upgrades ───────────────────────────────── */

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--success);
    background: rgba(52, 211, 153, .1);
    border: 1px solid rgba(52, 211, 153, .35);
}

.verified-badge i {
    font-size: 12px;
}

.helpful-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}

.review-card-foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
}

.helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.helpful-btn:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.helpful-btn.voted {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.helpful-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.helpful-btn .vote-count {
    font-size: 11.5px;
    opacity: .85;
}

.helpful-btn.down.voted {
    color: var(--danger);
    border-color: rgba(248, 113, 113, .6);
    background: rgba(248, 113, 113, .12);
}

.review-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reply-toggle-btn,
.reply-edit-btn {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
}

.reply-toggle-btn:hover,
.reply-edit-btn:hover {
    color: var(--accent);
    border-color: var(--border-strong);
}

.review-own-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 4px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
}

.review-own-actions .review-edit-link,
.link-danger {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.review-own-actions .review-edit-link:hover {
    color: var(--accent);
}

.link-danger:hover {
    color: var(--danger);
}

.inline-form {
    display: inline;
    margin: 0;
}

/* ── Threaded replies ──────────────────────────────── */

.review-replies {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-reply {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.review-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.review-avatar.small {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.review-reply-head time {
    color: var(--text-muted);
    font-size: 11.5px;
}

.review-reply .review-comment {
    margin-bottom: 8px;
}

.review-reply-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Reply form ────────────────────────────────────── */

.reply-form-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.reply-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.reply-edit-form {
    margin-top: 10px;
}

.review-card-foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Reviews sorting ───────────────────────────────── */

.reviews-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-sort .form-control {
    width: auto;
    min-width: 170px;
    padding: 9px 14px;
    font-size: 13px;
}

.reviews-result-count {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.clear-filters-link {
    color: var(--primary);
    font-weight: 700;
    font-size: 12.5px;
}

.reply-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-accent);
    background: var(--secondary-surface-hover);
    border: 1px solid var(--secondary-border);
    vertical-align: middle;
}

.review-admin-parent {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-right: 3px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.7;
}

.review-admin-parent i {
    margin-left: 6px;
    color: var(--primary);
}

.clear-filters-link:hover {
    color: var(--accent);
}

/* ── Star rating widget ────────────────────────────── */

.star-rating-input {
    display: flex;
    gap: 6px;
    direction: ltr;
    justify-content: flex-start;
}

.star-rating-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: color-mix(in srgb, var(--primary) 25%, transparent);
    padding: 2px;
    line-height: 1;
    transition: var(--transition);
}

.star-rating-btn:hover,
.star-rating-btn.active {
    color: var(--warning);
    transform: scale(1.12);
}

.star-rating-btn:hover ~ .star-rating-btn {
    color: color-mix(in srgb, var(--primary) 25%, transparent);
    transform: none;
}

/* ── Responsive ────────────────────────────────────── */

@media (max-width: 992px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-card-wide {
        grid-column: auto;
    }

    .quick-stock-row {
        grid-template-columns: 92px 130px;
    }
}

@media (max-width: 640px) {
    .kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .kpi-card {
        padding: 15px 12px;
        gap: 10px;
    }

    .kpi-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .chart-canvas-wrap {
        height: 230px;
    }

    .quick-stock-row {
        grid-template-columns: 1fr 1fr;
    }

    .quick-stock-row .btn {
        grid-column: 1 / -1;
    }

    .report-filter-form .form-group {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.perm-checks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 10px 0 0;
}

.perm-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    font-size: 14px;
    cursor: pointer;
}

.perm-checks li:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.perm-checks input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.perm-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
}

.perm-checks label i {
    color: var(--primary);
    width: 16px;
    text-align: center;
}

/* ---------------- product creation workflow cards ---------------- */

.workflow-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin: 22px 0 26px;
}

.workflow-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: var(--glass);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.workflow-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-float);
}

.workflow-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: var(--grad);
    border-radius: 14px;
    box-shadow: 0 0 18px var(--glow);
}

.workflow-body {
    flex: 1;
    min-width: 0;
}

.workflow-body h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.workflow-body p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.7;
}

.workflow-body .workflow-meta {
    margin-top: 4px;
    font-size: 11.5px;
}

.workflow-card .btn {
    flex-shrink: 0;
}

.workflow-hint a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .workflow-card {
        flex-wrap: wrap;
    }
    .workflow-card .btn {
        width: 100%;
    }
}

/* ── PC Builder component form (sectioned cards) ────── */

.spec-card {
    margin-bottom: 18px;
}

.spec-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent, #a78bfa);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.spec-card-head i {
    font-size: 15px;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 18px;
}

.spec-grid .form-group {
    margin-bottom: 0;
}

.spec-grid .form-check-group {
    align-self: center;
}

.spec-grid .form-group--full {
    grid-column: 1 / -1;
}

.req-star {
    color: var(--danger, #ef4444);
    margin-inline-start: 3px;
}

.image-block {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.image-preview {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px dashed var(--border-strong, #cbd5e1);
    background: var(--surface-2, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview-sm {
    width: 96px;
    height: 96px;
    margin-top: 8px;
}

.image-preview-sm .image-placeholder {
    font-size: 24px;
}

.image-placeholder {
    color: var(--border-strong, #cbd5e1);
    font-size: 40px;
}

.image-uploader-fields {
    flex: 1;
    min-width: 260px;
}

.advanced-details {
    margin-top: 14px;
    border-top: 1px dashed var(--border, #e2e8f0);
    padding-top: 12px;
}

.advanced-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-muted);
    list-style: none;
}

.advanced-details summary::-webkit-details-marker {
    display: none;
}

.advanced-details summary i {
    margin-inline-end: 6px;
}

.advanced-details[open] .spec-grid {
    margin-top: 14px;
}

#spec-fields {
    transition: opacity .15s ease;
}

/* Brand builder categories (checkbox chips) */
.brand-cats-group ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 6px 0 0;
}

.brand-cats-group ul li label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}

.brand-cats-group ul li label:hover {
    border-color: var(--primary, #3b82f6);
}

.brand-cats-group ul li label input {
    accent-color: var(--primary, #3b82f6);
}

.brand-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.brand-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.brand-chip-type {
    background: var(--primary-soft, rgba(59, 130, 246, .12));
    color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
}

/* Brand-to-component-type checkbox chips (mirror the category chips) */
.brand-types-group ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 6px 0 0;
}

.brand-types-group ul li label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}

.brand-types-group ul li label:hover {
    border-color: var(--primary, #3b82f6);
}

.brand-types-group ul li label input {
    accent-color: var(--primary, #3b82f6);
}

/* Inline feedback under dynamic selects (component form) */
.brand-feedback {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.8;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.brand-feedback.feedback-info {
    color: var(--text-muted, #64748b);
}

.brand-feedback.feedback-error {
    color: var(--danger, #dc2626);
    font-weight: 600;
}

.brand-feedback .btn-sm {
    margin-inline-start: 4px;
}

#quickBrandModal .modal-body {
    white-space: normal;
}

#quickBrandModal .brand-cats-group ul {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

#quickBrandModal .brand-cats-group label {
    font-weight: 600;
}

/* ==========================
   ADMIN SIDEBAR — FLYOUT NAVIGATION
   One compact sidebar + one flyout panel beside it. The main sidebar
   NEVER expands vertically or changes size; submenus open in the flyout.
   All styling uses the site theme tokens (dark/light in sync), Persian
   typography is normalised (rtl, letter-spacing 0, normal wrapping).
========================== */

/* ---- layout: fixed compact sidebar column, content takes the rest ---- */
.admin-layout {
    grid-template-columns: 260px minmax(0, 1fr);
}

.admin-layout .sidebar.admin-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.admin-sidebar *,
.admin-flyout * {
    direction: rtl;
    text-align: right;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: normal;
    box-sizing: border-box;
}

.admin-nav-btn:focus-visible,
.admin-sidebar a:focus-visible,
.admin-flyout a:focus-visible {
    outline: 2px solid var(--focus-ring, color-mix(in srgb, var(--primary) 50%, transparent));
    outline-offset: 1px;
}

/* ---- main sidebar ---- */
.admin-sidebar .admin-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 14px;
    padding: 0;
}

/* shared row style for dashboard link + category buttons */
.admin-sidebar .admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: var(--radius-sm, 10px);
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    white-space: normal;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.admin-sidebar .admin-nav-item i {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: 14px;
}

.admin-sidebar .admin-nav-item span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

/* dashboard is a link, not a hoverable flyout button */
.admin-sidebar .admin-nav-dash:hover {
    background: var(--surface-hover);
    color: var(--accent);
    transform: none;
}

.admin-sidebar .admin-nav-dash.active {
    background: var(--surface-hover);
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* flyout category buttons */
.admin-sidebar .admin-nav-btn:hover {
    background: var(--surface-hover);
    color: var(--accent);
    transform: none;
}

.admin-sidebar .admin-nav-btn.is-hover,
.admin-sidebar .admin-nav-btn.is-current {
    background: var(--surface-hover);
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* ---- exit buttons ---- */
.admin-sidebar .admin-nav-exit {
    list-style: none;
    margin: 10px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
}

.admin-sidebar .admin-nav-exit li {
    margin-bottom: 4px;
}

.admin-sidebar .admin-nav-exit li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm, 10px);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    white-space: normal;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.admin-sidebar .admin-nav-exit li a:hover {
    background: var(--surface-hover);
    transform: none;
}

.admin-sidebar .admin-nav-exit li a i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    color: var(--primary);
    font-size: 14px;
}

/* ============================================================
   FLYOUT PANEL
   Fixed position so it never moves page layout / never shifts the
   sidebar. Glassmorphism surface matching the site, visible border,
   soft shadow, rounded corners. One pane per category.
============================================================ */
.admin-flyout {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    max-height: calc(100vh - 20px);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-8px);
    background: var(--surface-2, rgba(24, 24, 34, .92));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.admin-flyout.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.admin-flyout-pane {
    display: none;
    padding: 8px;
}

.admin-flyout-pane.is-active {
    display: block;
}

.admin-flyout-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.admin-flyout-title i {
    color: var(--primary);
    font-size: 13px;
}

.admin-flyout-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-flyout-list li {
    margin: 1px 0;
}

.admin-flyout-list li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-sm, 10px);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.65;
    white-space: normal;
    color: var(--text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.admin-flyout-list li a i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--primary);
}

.admin-flyout-list li a span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

.admin-flyout-list li a:hover {
    background: var(--surface-hover);
    color: var(--accent);
    transform: none;
}

.admin-flyout-list li.active a {
    background: var(--surface-hover);
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* ============================================================
   MOBILE / TOUCH — flyout becomes a slide-in drawer
============================================================ */
@media (max-width: 767px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .admin-layout .sidebar.admin-sidebar {
        max-height: none;
        overflow: visible;
        position: static;
    }
    .admin-flyout {
        position: fixed;
        inset: 0 auto 0 0;
        right: auto;
        left: 0;
        top: 0;
        width: min(86vw, 320px);
        max-width: 86vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0 16px 16px 0;
        transform: translateX(-100%);
        box-shadow: 18px 0 48px rgba(0, 0, 0, .35);
    }
    .admin-flyout.is-open {
        transform: translateX(0);
    }
    .admin-flyout-pane {
        display: none;
        padding: 10px;
    }
    .admin-flyout-pane.is-active {
        display: block;
    }
    .side-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(10, 8, 16, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    .side-drawer-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}
/* ==========================
   ADMIN THEME CONSISTENCY
   Native dropdowns (select / option / optgroup) and form controls must be
   readable in BOTH dark and light. `color-scheme` lets the browser render
   the native list natively; explicit option colors guarantee contrast.
   All colors come from the shared theme tokens, so dark/light stay in sync.
========================== */
.admin-layout select {
    color-scheme: dark;
}
.admin-layout select option,
.admin-layout select optgroup {
    background: var(--surface-2);
    color: var(--text);
}
body:not(.dark) .admin-layout select {
    color-scheme: light;
}
body:not(.dark) .admin-layout select option,
body:not(.dark) .admin-layout select optgroup {
    background: var(--surface-2);
    color: var(--text);
}

.admin-layout .form-control,
.admin-layout .form-select,
.admin-layout input[type="text"],
.admin-layout input[type="number"],
.admin-layout input[type="email"],
.admin-layout input[type="password"],
.admin-layout input[type="search"],
.admin-layout input[type="date"],
.admin-layout input[type="url"],
.admin-layout textarea {
    color-scheme: dark;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    color: var(--text);
}
body:not(.dark) .admin-layout .form-control,
body:not(.dark) .admin-layout .form-select,
body:not(.dark) .admin-layout input[type="text"],
body:not(.dark) .admin-layout input[type="number"],
body:not(.dark) .admin-layout input[type="email"],
body:not(.dark) .admin-layout input[type="password"],
body:not(.dark) .admin-layout input[type="search"],
body:not(.dark) .admin-layout input[type="date"],
body:not(.dark) .admin-layout input[type="url"],
body:not(.dark) .admin-layout textarea {
    color-scheme: light;
    background: rgba(255, 255, 255, .85);
    border-color: color-mix(in srgb, var(--primary-2, #7c3aed) 14%, transparent);
    color: var(--text);
}
.admin-layout .form-control:focus,
.admin-layout .form-select:focus,
.admin-layout input:focus,
.admin-layout textarea:focus,
.admin-layout select:focus {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
    outline: none;
}

/* ─────────────────────────────────────────────────────────────
   Catalog / inventory / accounting refresh (v32)
   ───────────────────────────────────────────────────────────── */
.admin-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.admin-catalog-panel .admin-panel-header,
.inventory-panel .admin-panel-header,
.accounting-panel .admin-panel-header {
    margin-bottom: 18px;
}

.admin-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 18px;
    align-items: start;
}

.admin-catalog-lists {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 18px;
    align-items: start;
}

.admin-catalog-lists .management-section {
    margin-top: 20px;
}

.management-card,
.management-section,
.accounting-date-card {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
    backdrop-filter: var(--glass);
}

.management-card {
    padding: 22px;
    border-radius: var(--radius);
}

.management-card--single {
    max-width: 760px;
}

.management-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.management-card-header h2,
.management-section-head h2 {
    margin: 0;
    font-size: 17px;
    color: var(--text);
}

.management-card-header p,
.management-section-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.management-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

.management-form {
    gap: 0;
}

.management-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.management-form-row--compact {
    grid-template-columns: minmax(120px, .55fr) minmax(220px, 1fr);
    align-items: stretch;
}

.management-form .form-group {
    margin-bottom: 14px;
}

.management-toggle {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}

.management-toggle .form-check {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.management-toggle span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.management-toggle strong {
    color: var(--text);
    font-size: 13px;
}

.management-toggle small {
    color: var(--text-muted);
    font-size: 11px;
}

.management-section {
    margin-top: 20px;
    border-radius: var(--radius);
    overflow: hidden;
}

.management-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.management-section .admin-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.brand-admin-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-logo-box {
    width: 54px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.brand-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.category-tree-admin--clean {
    padding: 10px 14px 14px;
}

.category-tree-admin--clean .cat-tree-root {
    border-bottom: 1px solid var(--border);
}

.category-tree-admin--clean .cat-tree-root:last-child {
    border-bottom: 0;
}

.category-tree-admin--clean .cat-tree-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
}

.category-tree-admin--clean .cat-tree-row:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.category-tree-admin--clean .cat-tree-icon {
    width: 24px;
    color: var(--primary);
    text-align: center;
}

.category-tree-admin--clean .cat-tree-child {
    margin-right: 24px;
    border-right: 1px dashed var(--border-strong);
}

.category-tree-admin--clean .cat-tree-grandchild {
    margin-right: 24px;
}

.category-tree-admin--clean .cat-tree-ops {
    margin-right: auto;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.inventory-table--variants td:last-child {
    min-width: 520px;
}

.inventory-variant-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.inventory-variant-row {
    display: grid;
    grid-template-columns: minmax(125px, .9fr) 90px 125px minmax(145px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.variant-color-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.variant-color-label > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.variant-color-label strong {
    color: var(--text);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.variant-color-label small {
    color: var(--text-muted);
    font-size: 10.5px;
}

.swatch-dot--lg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 75%, transparent);
}

.inventory-variant-row .form-control,
.quick-stock-row .form-control {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
}

.quick-stock-form {
    min-width: 470px;
}

.quick-stock-row {
    display: grid;
    grid-template-columns: 90px 125px minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.quick-stock-row .btn {
    grid-column: auto;
    justify-self: stretch;
}

.accounting-date-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 16px 0 20px;
    padding: 17px 18px;
    border-radius: var(--radius-sm);
}

.accounting-date-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

.accounting-date-title > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid var(--border);
}

.accounting-date-title > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.accounting-date-title strong {
    color: var(--text);
    font-size: 13px;
}

.accounting-date-title small {
    color: var(--text-muted);
    font-size: 11px;
}

.accounting-date-fields {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.accounting-date-fields .form-group {
    margin: 0;
}

.accounting-date-fields label,
.accounting-report-filter label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.accounting-date-fields input[type="date"],
.accounting-report-filter input[type="date"] {
    color-scheme: dark;
}

.chart-empty-message {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12.5px;
}

.chart-empty-message i {
    color: var(--primary);
    font-size: 24px;
    opacity: .7;
}

.chart-canvas-wrap canvas {
    max-width: 100%;
}

@media (max-width: 1180px) {
    .admin-management-grid,
    .admin-catalog-lists {
        grid-template-columns: 1fr;
    }

    .inventory-table--variants td:last-child {
        min-width: 430px;
    }

    .inventory-variant-row {
        grid-template-columns: minmax(120px, 1fr) 85px 120px;
    }

    .inventory-variant-row input[name="note"] {
        grid-column: 1 / 3;
    }

    .inventory-variant-row .btn {
        grid-column: 3;
    }

    .accounting-date-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .management-form-row,
    .management-form-row--compact {
        grid-template-columns: 1fr;
    }

    .management-section-head {
        align-items: flex-start;
    }

    .category-tree-admin--clean .cat-tree-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .category-tree-admin--clean .cat-tree-ops {
        width: 100%;
        margin-right: 34px;
    }

    .accounting-date-fields {
        grid-template-columns: 1fr;
    }

    .inventory-table--variants td:last-child {
        min-width: 360px;
    }

    .inventory-variant-row {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-variant-row .variant-color-label {
        grid-column: 1 / -1;
    }

    .inventory-variant-row input[name="note"] {
        grid-column: 1 / -1;
    }

    .inventory-variant-row .btn {
        grid-column: 1 / -1;
    }

    .quick-stock-form {
        min-width: 340px;
    }

    .quick-stock-row {
        grid-template-columns: 1fr 1fr;
    }

    .quick-stock-row input[name="note"],
    .quick-stock-row .btn {
        grid-column: 1 / -1;
    }
}


/* ── Add color from inventory ───────────────────────────── */
.inventory-add-color {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    overflow: hidden;
}

.inventory-add-color > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    user-select: none;
}

.inventory-add-color > summary::-webkit-details-marker {
    display: none;
}

.inventory-add-color > summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.inventory-add-color > summary span i {
    color: var(--primary);
}

.inventory-add-color[open] > summary {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.add-color-chevron {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform .2s ease;
}

.inventory-add-color[open] .add-color-chevron {
    transform: rotate(180deg);
}

.inventory-add-color-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(155px, 1fr) 110px auto;
    gap: 9px;
    align-items: end;
    padding: 12px;
}

.add-color-field {
    min-width: 0;
}

.add-color-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
}

.add-color-picker-wrap {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.inventory-color-picker {
    width: 42px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    cursor: pointer;
}

.inventory-color-hex {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.inventory-add-color-form .form-control {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
}

.add-color-submit {
    min-height: 38px;
    white-space: nowrap;
}

.add-color-hint {
    margin: -2px 12px 11px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    font-size: 10.5px;
    line-height: 1.7;
}

@media (max-width: 1180px) {
    .inventory-add-color-form {
        grid-template-columns: 1fr 1fr;
    }

    .add-color-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .inventory-add-color-form {
        grid-template-columns: 1fr;
    }

    .add-color-submit {
        grid-column: auto;
    }
}


/* ── Existing color picker in inventory ───────────────── */
.existing-color-select-wrap {
    grid-column: 1 / -1;
    padding-bottom: 2px;
}

.existing-color-select-wrap .field-help {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.inventory-existing-color {
    width: 100%;
}

.inventory-add-color-form.using-existing-color .inventory-color-name,
.inventory-add-color-form.using-existing-color .inventory-color-hex,
.inventory-add-color-form.using-existing-color .inventory-color-picker {
    opacity: .55;
    cursor: not-allowed;
}

.inventory-add-color-form.using-existing-color .add-color-visual,
.inventory-add-color-form.using-existing-color .add-color-field:has(.inventory-color-name) {
    position: relative;
}


/* ── Simplified add/remove inventory action ─────────────── */
.inventory-action-form {
    min-width: 520px;
}

.inventory-action-form .quick-stock-row {
    display: grid;
    grid-template-columns: 92px 150px minmax(155px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.inventory-action-form .quick-stock-row.has-color-select {
    grid-template-columns: minmax(150px, 1.15fr) 92px 150px minmax(145px, 1fr) auto;
}

.inventory-action-form .inventory-color-select {
    min-width: 0;
}

.inventory-action-form .inventory-operation-select {
    min-width: 0;
    font-weight: 700;
}

.inventory-action-form input[name="quantity"] {
    direction: ltr;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.inventory-action-form .btn {
    min-height: 38px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .inventory-action-form {
        min-width: 430px;
    }

    .inventory-action-form .quick-stock-row,
    .inventory-action-form .quick-stock-row.has-color-select {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-action-form .quick-stock-row.has-color-select .inventory-color-select {
        grid-column: 1 / -1;
    }

    .inventory-action-form .quick-stock-row input[name="note"] {
        grid-column: 1 / -1;
    }

    .inventory-action-form .quick-stock-row .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .inventory-action-form {
        min-width: 330px;
    }

    .inventory-action-form .quick-stock-row,
    .inventory-action-form .quick-stock-row.has-color-select {
        grid-template-columns: 1fr;
    }

    .inventory-action-form .quick-stock-row.has-color-select .inventory-color-select,
    .inventory-action-form .quick-stock-row input[name="note"],
    .inventory-action-form .quick-stock-row .btn {
        grid-column: auto;
    }
}


/* ── Persian Jalali date picker ─────────────────────────── */
.jalali-input-wrap {
    position: relative;
}

.jalali-input-wrap .jalali-date-input {
    padding-left: 44px;
    cursor: pointer;
    direction: rtl;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.jalali-input-trigger {
    position: absolute;
    left: 7px;
    top: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    cursor: pointer;
    transition: var(--transition);
}

.jalali-input-trigger:hover {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.jalali-calendar {
    position: fixed;
    z-index: 10050;
    width: 310px;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 15px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 97%, #0b0b12 3%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px);
    font-family: inherit;
}

.jalali-calendar[hidden] {
    display: none !important;
}

.jalali-calendar-head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.jalali-month-title {
    text-align: center;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.jalali-nav {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--surface-2);
    cursor: pointer;
}

.jalali-nav:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.jalali-weekdays,
.jalali-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.jalali-weekdays {
    margin-bottom: 5px;
}

.jalali-weekdays span {
    padding: 4px 0;
    color: var(--text-muted);
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

.jalali-day,
.jalali-day-empty {
    min-height: 34px;
}

.jalali-day {
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
}

.jalali-day:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.jalali-day.is-today {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--primary);
}

.jalali-day.is-selected {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 25%, transparent);
}

.jalali-calendar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.jalali-calendar-foot button {
    border: 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--primary);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.jalali-calendar-foot button:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

@media (max-width: 480px) {
    .jalali-calendar {
        width: calc(100vw - 24px);
    }
}


/* ── Jalali calendar direct month/year selection ───────── */
.jalali-calendar-head {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.jalali-period-selectors {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(92px, .85fr);
    gap: 7px;
    align-items: end;
}

.jalali-period-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.jalali-period-field > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.jalali-period-field select {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    background: var(--surface-2);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    outline: none;
}

.jalali-period-field select:hover,
.jalali-period-field select:focus {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.jalali-year-select {
    direction: rtl;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
    .jalali-period-selectors {
        grid-template-columns: 1fr 88px;
        gap: 5px;
    }

    .jalali-period-field select {
        padding-inline: 6px;
        font-size: 10.5px;
    }
}


/* ── Full-width users directory ─────────────────────────── */
.admin-users-panel {
    min-width: 0;
}

.admin-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-users-summary {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.admin-users-summary > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.admin-users-summary > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-users-summary strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1;
}

.admin-users-summary span {
    color: var(--text-muted);
    font-size: 10.5px;
}

.admin-users-search {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    margin: 16px 0 18px;
    max-width: none;
}

.admin-users-search-field {
    position: relative;
}

.admin-users-search-field > i {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.admin-users-search-field .form-control {
    padding-right: 38px;
    min-height: 44px;
}

.users-directory-card {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 0 18px 45px rgba(0,0,0,.11);
    overflow: hidden;
}

.users-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.users-directory-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.users-directory-head h2 i {
    margin-left: 7px;
    color: var(--primary);
}

.users-directory-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11.5px;
}

.users-table-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}

.users-directory-table {
    width: 100%;
    min-width: 980px;
    table-layout: auto;
}

.users-directory-table th,
.users-directory-table td {
    padding: 14px 18px;
    white-space: nowrap;
    vertical-align: middle;
}

.users-directory-table th:nth-child(1) { min-width: 170px; }
.users-directory-table th:nth-child(2) { min-width: 190px; }
.users-directory-table th:nth-child(3) { min-width: 220px; }
.users-directory-table th:nth-child(4) { min-width: 120px; }
.users-directory-table th:nth-child(5) { min-width: 110px; }
.users-directory-table th:nth-child(6) { min-width: 230px; }

.user-identity-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-mini {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.user-email-cell,
.user-joined-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.users-directory-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.users-directory-actions form {
    margin: 0;
}

.users-directory-actions .btn-sm {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .admin-users-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-summary {
        width: 100%;
    }

    .admin-users-search {
        grid-template-columns: 1fr;
    }
}


/* ── Employees & role management refresh ───────────────── */
.admin-employees-panel {
    min-width: 0;
}

.employees-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.employees-header-stat {
    min-width: 165px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.employees-header-stat > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.employees-header-stat > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employees-header-stat strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
}

.employees-header-stat span {
    color: var(--text-muted);
    font-size: 10.5px;
}

.employees-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.employee-management-card,
.employees-directory-card,
.role-management-card {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
    backdrop-filter: var(--glass);
}

.employee-management-card {
    padding: 22px;
    border-radius: var(--radius);
}

.employee-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.employee-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

.employee-card-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.employee-card-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.7;
}

.employee-form,
.role-create-form {
    gap: 0;
}

.employee-form .form-group,
.role-create-form .form-group {
    margin-bottom: 13px;
}

.employee-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.role-create-card {
    overflow: hidden;
}

.role-permissions-block {
    margin: 5px 0 15px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.role-permissions-head,
.role-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.role-permissions-head > div,
.role-access-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.role-permissions-head strong,
.role-access-head strong {
    color: var(--text);
    font-size: 12.5px;
}

.role-permissions-head small,
.role-access-head small {
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.6;
}

.role-permissions-head > i,
.role-access-head > i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 9px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.role-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.role-permission-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.role-permission-option {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition);
}

.role-permission-option:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.role-permission-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-permission-check {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    flex: 0 0 19px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    color: transparent;
    background: var(--surface-2);
    font-size: 9px;
    transition: var(--transition);
}

.role-permission-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.role-permission-copy > i {
    width: 16px;
    color: var(--primary);
    text-align: center;
}

.role-permission-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent);
}

.role-permission-option:has(input:checked) .role-permission-check {
    color: #fff;
    border-color: transparent;
    background: var(--grad);
}

.role-permission-option:has(input:checked) .role-permission-copy {
    color: var(--text);
}

/* Full-width employees directory */
.employees-directory-card {
    width: 100%;
    margin-top: 20px;
    border-radius: var(--radius);
    overflow: visible;
}

.employees-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.employees-directory-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
}

.employees-directory-head h2 i {
    margin-left: 7px;
    color: var(--primary);
}

.employees-directory-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11.5px;
}

.employees-table-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow-x: auto;
}

.employees-directory-table {
    width: 100%;
    min-width: 1160px;
    table-layout: auto;
}

.employees-directory-table th,
.employees-directory-table td {
    padding: 14px 16px;
    white-space: nowrap;
    vertical-align: middle;
}

.employees-directory-table th:nth-child(1) { min-width: 220px; }
.employees-directory-table th:nth-child(2) { min-width: 210px; }
.employees-directory-table th:nth-child(3) { min-width: 150px; }
.employees-directory-table th:nth-child(4) { min-width: 150px; }
.employees-directory-table th:nth-child(5) { min-width: 150px; }
.employees-directory-table th:nth-child(6) { min-width: 110px; }
.employees-directory-table th:nth-child(7) { min-width: 210px; }

.employee-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    font-size: 12px;
    font-weight: 900;
}

.employee-identity > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-identity strong {
    color: var(--text);
}

.employee-identity small,
.employee-muted {
    color: var(--text-muted);
    font-size: 11px;
}

.employee-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    font-size: 11px;
    font-weight: 800;
}

.employee-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.employee-row-actions form {
    margin: 0;
}

.employee-edit {
    position: relative;
}

.employee-edit > summary {
    list-style: none;
    cursor: pointer;
}

.employee-edit > summary::-webkit-details-marker {
    display: none;
}

.employee-edit-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: 310px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 20px 55px rgba(0,0,0,.34);
}

.employee-edit-form .form-group {
    margin-bottom: 10px;
}

.employee-active-toggle {
    margin: 6px 0 11px;
}

/* Existing role cards */
.roles-management-section {
    margin-top: 28px;
}

.roles-section-head {
    margin-bottom: 14px;
}

.roles-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 23px;
}

.roles-section-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.employee-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 16px;
}

.role-management-card {
    padding: 18px;
    border-radius: var(--radius);
}

.role-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.role-card-kicker {
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 800;
}

.role-card-head h3 {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 17px;
}

.role-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 9.5px;
    font-weight: 800;
}

.role-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.role-card-fields .form-group {
    margin-bottom: 0;
}

.role-access-group {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.role-access-group--available {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface-2));
}

.role-active-accesses {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.role-active-chip {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #10b981 28%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, #10b981 7%, var(--surface));
    cursor: pointer;
}

.role-active-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-active-chip-main,
.role-active-chip-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    font-size: 10.5px;
    font-weight: 800;
}

.role-active-chip-main {
    color: #34d399;
}

.role-active-chip-remove {
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    transition: var(--transition);
}

.role-active-chip:hover .role-active-chip-remove,
.role-active-chip:has(input:checked) .role-active-chip-remove {
    color: #f87171;
    background: rgba(248,113,113,.10);
}

.role-active-chip:has(input:checked) {
    border-color: rgba(248,113,113,.38);
    background: rgba(248,113,113,.06);
}

.role-active-chip:has(input:checked) .role-active-chip-main {
    color: var(--text-muted);
    text-decoration: line-through;
}

.role-edit-form > .btn {
    margin-top: 14px;
}

.role-delete-form {
    margin-top: 8px;
}

@media (max-width: 1180px) {
    .employees-management-grid {
        grid-template-columns: 1fr;
    }

    .role-permission-grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

@media (max-width: 760px) {
    .employees-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .employees-header-stat {
        width: 100%;
    }

    .employee-form-row,
    .role-card-fields {
        grid-template-columns: 1fr;
    }

    .role-permission-grid,
    .role-permission-grid--compact {
        grid-template-columns: 1fr;
    }

    .employee-role-grid {
        grid-template-columns: 1fr;
    }

    .employees-directory-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-edit-popover {
        right: 0;
        left: auto;
        width: min(310px, calc(100vw - 38px));
    }
}


/* ── Review moderation dashboard ───────────────────────── */
.admin-reviews-panel {
    min-width: 0;
}

.reviews-page-header {
    margin-bottom: 18px;
}

.reviews-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.reviews-kpi-card {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    text-decoration: none;
    transition: var(--transition);
}

.reviews-kpi-card:hover,
.reviews-kpi-card.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}

.reviews-kpi-card.is-active {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.reviews-kpi-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 15px;
}

.reviews-kpi-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reviews-kpi-card > div > span {
    color: var(--text-muted);
    font-size: 10.5px;
    white-space: nowrap;
}

.reviews-kpi-card > div > strong {
    color: var(--text);
    font-size: 21px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.reviews-kpi-warning .reviews-kpi-icon { color: #fbbf24; }
.reviews-kpi-success .reviews-kpi-icon { color: #34d399; }
.reviews-kpi-purple .reviews-kpi-icon { color: var(--primary); }
.reviews-kpi-blue .reviews-kpi-icon { color: #60a5fa; }
.reviews-kpi-teal .reviews-kpi-icon { color: #2dd4bf; }

.reviews-filter-card {
    display: grid;
    grid-template-columns: minmax(260px, 1.65fr) minmax(130px, .7fr) minmax(170px, .85fr) minmax(160px, .8fr) auto;
    gap: 10px;
    align-items: end;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
}

.reviews-filter-card .form-group,
.reviews-filter-search {
    margin: 0;
    min-width: 0;
}

.reviews-filter-card label,
.reviews-filter-search > label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 800;
}

.reviews-search-input {
    position: relative;
}

.reviews-search-input > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 12px;
    pointer-events: none;
}

.reviews-search-input .form-control {
    padding-right: 35px;
}

.reviews-filter-card .form-control {
    min-height: 42px;
}

.reviews-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.reviews-filter-actions .btn {
    min-height: 42px;
    white-space: nowrap;
}

.reviews-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 2px 10px;
    color: var(--text-muted);
    font-size: 11.5px;
}

.reviews-list-toolbar > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.reviews-list-toolbar strong {
    color: var(--text);
    font-size: 15px;
}

.reviews-toolbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reviews-toolbar-meta i {
    color: var(--primary);
}

.reviews-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.reviews-select-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.reviews-select-all input,
.review-row-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.reviews-bulk-selected {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-right: 13px;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10.5px;
}

.reviews-bulk-selected strong {
    color: var(--primary);
    font-size: 14px;
}

.reviews-bulk-actions {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.reviews-admin-list--modern {
    gap: 11px;
}

.review-card-modern {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 15px;
    overflow: visible;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

.review-card-modern.is-pending {
    border-color: color-mix(in srgb, #fbbf24 28%, var(--border));
}

.review-card-modern.is-approved {
    border-color: color-mix(in srgb, #34d399 23%, var(--border));
}

.review-card-select {
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.review-card-main {
    min-width: 0;
}

.review-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.review-product-info {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.review-product-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 11px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.review-product-info > div {
    min-width: 0;
}

.review-product-title {
    display: inline-block;
    max-width: 100%;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-product-title:hover {
    color: var(--primary);
}

.review-author-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.review-author-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.review-author-meta i {
    color: color-mix(in srgb, var(--primary) 65%, var(--text-muted));
}

.review-status-stack {
    flex: 0 0 auto;
}

.review-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 29px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.review-state-badge.is-approved {
    color: #34d399;
    background: rgba(52, 211, 153, .09);
    border: 1px solid rgba(52, 211, 153, .26);
}

.review-state-badge.is-pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .24);
}

.review-card-badges {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.review-stars-modern,
.review-info-badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 10.5px;
}

.review-stars-modern i {
    color: #fbbf24;
}

.review-stars-modern strong {
    margin-right: 3px;
    color: var(--text);
    font-size: 10.5px;
}

.review-info-badge.is-verified {
    color: #34d399;
    border-color: rgba(52, 211, 153, .22);
    background: rgba(52, 211, 153, .07);
}

.review-parent-quote {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 11px;
    border-right: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-2));
}

.review-parent-quote > i {
    margin-top: 2px;
    color: var(--primary);
}

.review-parent-quote > div {
    min-width: 0;
}

.review-parent-quote span {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 9.5px;
}

.review-parent-quote p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.7;
}

.review-comment-body {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 11px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    font-size: 12.5px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.review-card-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

.review-card-actions .btn,
.review-card-actions .btn-sm {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.reviews-empty-state {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 28px;
    border: 1px dashed var(--border-strong);
    border-radius: 15px;
    text-align: center;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.reviews-empty-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    font-size: 20px;
}

.reviews-empty-state h3 {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 14px;
}

.reviews-empty-state p {
    margin: 0 0 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.pagination-btn,
.pagination-page {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.pagination-btn:hover,
.pagination-page:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.pagination-page.active {
    color: #fff;
    border-color: transparent;
    background: var(--grad);
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 1240px) {
    .reviews-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reviews-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reviews-filter-search {
        grid-column: 1 / -1;
    }

    .reviews-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .reviews-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reviews-filter-card {
        grid-template-columns: 1fr;
    }

    .reviews-filter-search,
    .reviews-filter-actions {
        grid-column: auto;
    }

    .reviews-filter-actions {
        flex-direction: column;
    }

    .reviews-filter-actions .btn {
        width: 100%;
    }

    .reviews-bulk-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .reviews-bulk-selected {
        padding-right: 0;
        border-right: 0;
    }

    .reviews-bulk-actions {
        width: 100%;
        margin-right: 0;
        flex-direction: column;
    }

    .reviews-bulk-actions .btn {
        width: 100%;
    }

    .review-card-modern {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 13px;
    }

    .review-card-top {
        flex-direction: column;
    }

    .review-status-stack {
        align-self: flex-start;
    }

    .review-author-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .review-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .review-card-actions .btn,
    .review-card-actions .btn-sm {
        width: 100%;
    }

    .reviews-list-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 460px) {
    .reviews-kpi-grid {
        grid-template-columns: 1fr;
    }
}


/* ── Product management UX refresh ─────────────────────── */
.admin-products-panel {
    min-width: 0;
}

.products-page-header {
    margin-bottom: 14px;
}

.products-stat-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.product-stat-item {
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 8px 12px;
    border-left: 1px solid var(--border);
}

.product-stat-item:last-child {
    border-left: 0;
}

.product-stat-item span {
    color: var(--text-muted);
    font-size: 10.5px;
    white-space: nowrap;
}

.product-stat-item strong {
    color: var(--text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.product-stat-item.is-success strong { color: #34d399; }
.product-stat-item.is-warning strong { color: #fbbf24; }
.product-stat-item.is-danger strong { color: #f87171; }
.product-stat-item.is-muted strong { color: var(--text-muted); }

.products-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.65fr) minmax(130px, .7fr) minmax(145px, .75fr) minmax(150px, .85fr) minmax(155px, .85fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.products-filter-bar .form-control {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11.5px;
}

.products-filter-search {
    position: relative;
    min-width: 0;
}

.products-filter-search > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 11px;
    pointer-events: none;
}

.products-filter-search .form-control {
    padding-right: 34px;
}

.products-filter-bar .btn {
    min-height: 40px;
    white-space: nowrap;
}

.products-clear-filter {
    width: 40px;
    padding-inline: 0;
}

.products-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 2px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.products-result-bar > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.products-result-bar strong {
    color: var(--text);
    font-size: 13px;
}

.products-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.products-select-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

.products-select-all input,
.product-row-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.products-selected-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
}

.products-selected-count strong {
    color: var(--primary);
    font-size: 13px;
}

.products-bulk-actions {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.products-bulk-actions .btn {
    min-height: 34px;
    padding-block: 6px;
}

.products-table-wrap {
    margin: 0;
    border-radius: 12px;
}

.products-management-table {
    width: 100%;
    min-width: 1060px;
    table-layout: auto;
}

.products-management-table th,
.products-management-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.products-management-table th {
    font-size: 10.5px;
}

.products-management-table tbody tr {
    transition: background .18s ease;
}

.products-management-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.products-management-table .row-inactive {
    opacity: .72;
}

.products-check-col {
    width: 42px;
    min-width: 42px;
    text-align: center;
}

.product-admin-main {
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.product-admin-thumb-wrap {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}

.product-admin-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.product-thumb-placeholder {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--surface-2);
}

.product-admin-copy {
    min-width: 0;
}

.product-admin-title {
    display: block;
    max-width: 410px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-admin-title:hover {
    color: var(--primary);
}

.product-admin-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 9.5px;
}

.product-admin-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.product-admin-meta > span > i {
    color: color-mix(in srgb, var(--primary) 65%, var(--text-muted));
}

.product-category-mini {
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.product-category-mini.is-empty {
    opacity: .7;
}

.product-price-cell,
.product-stock-cell,
.product-sales-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-price-cell strong,
.product-stock-cell strong,
.product-sales-cell strong {
    color: var(--text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.product-price-cell > span,
.product-sales-cell > span {
    color: var(--text-muted);
    font-size: 9.5px;
}

.product-price-cell small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 9px;
}

.product-price-cell del {
    color: var(--text-muted);
}

.product-price-cell b {
    color: #c084fc;
    font-weight: 800;
}

.stock-state {
    width: fit-content;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.stock-state.is-ok {
    color: #34d399;
    background: rgba(52,211,153,.08);
    border: 1px solid rgba(52,211,153,.20);
}

.stock-state.is-low {
    color: #fbbf24;
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.20);
}

.stock-state.is-out {
    color: #f87171;
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.20);
}

.product-row-actions {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.product-row-actions .btn-sm {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: 10px;
}

.product-more-actions {
    min-width: 38px;
}

.product-more-actions > summary {
    width: 36px;
    padding-inline: 0 !important;
    list-style: none;
    cursor: pointer;
}

.product-more-actions > summary::-webkit-details-marker {
    display: none;
}

.product-more-menu {
    display: none;
    min-width: 170px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.product-more-actions[open] .product-more-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-more-menu a,
.product-more-menu button {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: transparent;
    font-family: inherit;
    font-size: 10px;
    text-align: right;
    cursor: pointer;
}

.product-more-menu a:hover,
.product-more-menu button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.product-more-menu form {
    margin: 0;
}

.product-more-menu .is-danger {
    color: #f87171;
}

.products-empty-cell {
    min-height: 220px;
    padding: 34px !important;
    text-align: center;
}

.products-empty-cell > i {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 25px;
}

.products-empty-cell > strong,
.products-empty-cell > span {
    display: block;
}

.products-empty-cell > strong {
    color: var(--text);
    font-size: 13px;
}

.products-empty-cell > span {
    margin: 5px 0 10px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.products-pagination {
    margin-top: 14px;
}

@media (max-width: 1280px) {
    .products-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products-filter-search {
        grid-column: 1 / -1;
    }

    .products-filter-bar .btn {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .products-stat-strip {
        overflow-x: auto;
    }

    .product-stat-item {
        min-width: 120px;
    }

    .products-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .products-filter-search {
        grid-column: 1 / -1;
    }

    .products-bulk-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-selected-count {
        padding-right: 0;
        border-right: 0;
    }

    .products-bulk-actions {
        width: 100%;
        margin-right: 0;
    }

    .products-bulk-actions .btn {
        flex: 1;
    }
}

@media (max-width: 560px) {
    .products-filter-bar {
        grid-template-columns: 1fr;
    }

    .products-filter-search {
        grid-column: auto;
    }

    .products-result-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-bulk-actions {
        flex-direction: column;
    }

    .products-bulk-actions .btn {
        width: 100%;
    }
}


/* ── Inventory alert + minimal inventory UI ───────────── */
.admin-nav-alert-badge {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    padding: 0 6px;
    border-radius: 999px;
    color: #17120a;
    background: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .22);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.alert.inventory-stockout {
    position: fixed;
    top: 88px;
    left: 24px;
    z-index: 12000;
    width: min(390px, calc(100vw - 32px));
    margin: 0;
    border-color: rgba(251, 191, 36, .36);
    background: color-mix(in srgb, #fbbf24 9%, var(--surface));
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.alert.inventory-stockout .alert-content > i {
    color: #fbbf24;
}

.inventory-panel--minimal {
    min-width: 0;
}

.inventory-page-header {
    margin-bottom: 12px;
}

.inventory-stat-strip {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.inventory-stat-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border-left: 1px solid var(--border);
}

.inventory-stat-item:last-child {
    border-left: 0;
}

.inventory-stat-item span {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.inventory-stat-item strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.inventory-stat-item.is-warning strong { color: #fbbf24; }
.inventory-stat-item.is-danger strong { color: #f87171; }
.inventory-stat-item.is-success strong { color: #34d399; }

.inventory-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) 112px minmax(150px, .75fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.inventory-filter-bar .form-control {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 11px;
}

.inventory-filter-search {
    position: relative;
    min-width: 0;
}

.inventory-filter-search > i {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 10px;
    pointer-events: none;
}

.inventory-filter-search .form-control {
    padding-right: 32px;
}

.inventory-threshold-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding-right: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.inventory-threshold-field > span {
    color: var(--text-muted);
    font-size: 9.5px;
    white-space: nowrap;
}

.inventory-threshold-field .form-control {
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: center;
    direction: ltr;
}

.inventory-filter-bar .btn {
    min-height: 38px;
    padding-block: 7px;
    white-space: nowrap;
}

.inventory-clear-filter {
    width: 38px;
    padding-inline: 0 !important;
}

.inventory-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 3px 2px 9px;
}

.inventory-list-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.inventory-list-head p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 10px;
}

.inventory-warning-inline {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fbbf24;
    background: rgba(251,191,36,.07);
    border: 1px solid rgba(251,191,36,.2);
    font-size: 10px;
    font-weight: 800;
}

.inventory-table-wrap-minimal {
    margin: 0;
    border-radius: 11px;
}

.inventory-table-minimal {
    min-width: 1050px;
}

.inventory-table-minimal th,
.inventory-table-minimal td {
    padding: 10px 12px;
    vertical-align: middle;
}

.inventory-table-minimal th {
    font-size: 10px;
}

.inventory-table-minimal th:nth-child(1) { min-width: 270px; }
.inventory-table-minimal th:nth-child(2) { width: 95px; }
.inventory-table-minimal th:nth-child(3) { width: 130px; }
.inventory-table-minimal th:nth-child(4) { min-width: 520px; }

.inventory-table-minimal tbody tr {
    transition: background .16s ease;
}

.inventory-table-minimal tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.inventory-table-minimal .row-out-of-stock {
    box-shadow: inset -2px 0 0 #f87171;
}

.inventory-table-minimal .row-low-stock {
    box-shadow: inset -2px 0 0 #fbbf24;
}

.inventory-product-cell--minimal {
    gap: 0;
}

.inventory-product-mainline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.inventory-product-mainline .inventory-product-title {
    max-width: 360px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-product-state {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 900;
}

.inventory-product-state.is-out {
    color: #f87171;
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.18);
}

.inventory-product-state.is-low {
    color: #fbbf24;
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.18);
}

.inventory-product-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

.inventory-product-subline a {
    color: var(--primary);
}

.color-stock-mini--compact {
    gap: 4px;
    margin-top: 6px;
}

.color-stock-mini--compact .mini-color-chip {
    min-height: 21px;
    padding: 2px 6px;
    font-size: 8.5px;
}

.color-stock-mini--compact .mini-color-chip.is-empty {
    color: #f87171;
    border-color: rgba(248,113,113,.2);
}

.inventory-stock-value,
.inventory-sales-value {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.inventory-stock-value strong,
.inventory-sales-value strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.inventory-stock-value span,
.inventory-sales-value span {
    color: var(--text-muted);
    font-size: 8.5px;
}

.inventory-action-form--minimal {
    min-width: 0;
}

.inventory-action-row {
    display: grid;
    grid-template-columns: minmax(125px, 1fr) 74px 105px minmax(120px, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.inventory-action-form--minimal:not(:has(.inventory-color-select)) .inventory-action-row {
    grid-template-columns: 74px 105px minmax(160px, 1fr) auto;
}

.inventory-action-row .form-control {
    min-height: 35px;
    padding: 6px 8px;
    font-size: 10px;
}

.inventory-quantity-input {
    direction: ltr;
    text-align: center;
}

.inventory-submit-btn {
    min-height: 35px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
}

.inventory-add-color--minimal {
    margin-top: 6px;
    border-radius: 9px;
    background: transparent;
}

.inventory-add-color--minimal > summary {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 9.5px;
    color: var(--text-muted);
}

.inventory-add-color--minimal[open] > summary {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.inventory-add-color--minimal .inventory-add-color-form {
    padding: 9px;
}

.inventory-add-color--minimal .add-color-field label {
    font-size: 9px;
}

.inventory-add-color--minimal .add-color-submit {
    min-height: 36px;
}

.inventory-empty-state {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px dashed var(--border-strong);
    border-radius: 11px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.inventory-empty-state > i {
    color: var(--primary);
    font-size: 22px;
}

.inventory-empty-state strong {
    color: var(--text);
    font-size: 12px;
}

.inventory-empty-state span {
    font-size: 10px;
}

.inventory-bulk-panel {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    overflow: hidden;
}

.inventory-bulk-panel > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    list-style: none;
    cursor: pointer;
}

.inventory-bulk-panel > summary::-webkit-details-marker {
    display: none;
}

.inventory-bulk-panel > summary > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.inventory-bulk-panel > summary > div > i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.inventory-bulk-panel > summary span {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.inventory-bulk-panel > summary strong {
    color: var(--text);
    font-size: 11px;
}

.inventory-bulk-panel > summary small {
    color: var(--text-muted);
    font-size: 8.5px;
}

.inventory-bulk-chevron {
    color: var(--text-muted);
    font-size: 9px;
    transition: transform .2s ease;
}

.inventory-bulk-panel[open] .inventory-bulk-chevron {
    transform: rotate(180deg);
}

.inventory-bulk-body {
    padding: 10px;
    border-top: 1px solid var(--border);
}

.inventory-bulk-options {
    display: grid;
    grid-template-columns: minmax(145px, .7fr) minmax(220px, 1.4fr) auto;
    gap: 7px;
    margin-bottom: 8px;
}

.inventory-bulk-options .form-control,
.inventory-bulk-options .btn {
    min-height: 36px;
    font-size: 10px;
}

.inventory-bulk-table-wrap {
    margin: 0;
}

.inventory-bulk-table th,
.inventory-bulk-table td {
    padding: 8px 10px;
    font-size: 10px;
}

.inventory-bulk-table .bulk-delta-input {
    width: 100px;
    min-height: 34px;
}

@media (max-width: 1180px) {
    .inventory-filter-bar {
        grid-template-columns: minmax(220px, 1fr) 110px minmax(140px, .7fr) auto auto;
    }

    .inventory-action-row,
    .inventory-action-form--minimal:not(:has(.inventory-color-select)) .inventory-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-action-row .inventory-color-select,
    .inventory-action-row .inventory-note-input {
        grid-column: 1 / -1;
    }

    .inventory-submit-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .inventory-stat-strip {
        overflow-x: auto;
    }

    .inventory-stat-item {
        min-width: 120px;
    }

    .inventory-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-filter-search {
        grid-column: 1 / -1;
    }

    .inventory-filter-bar .btn {
        width: 100%;
    }

    .inventory-list-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-bulk-options {
        grid-template-columns: 1fr;
    }

    .alert.inventory-stockout {
        top: 76px;
        left: 16px;
    }
}

@media (max-width: 480px) {
    .inventory-filter-bar {
        grid-template-columns: 1fr;
    }

    .inventory-filter-search {
        grid-column: auto;
    }
}


/* ── Minimal review moderation UI ─────────────────────── */
.reviews-panel--minimal {
    min-width: 0;
}

.reviews-stat-strip {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.reviews-stat-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    border-left: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.reviews-stat-item:last-child {
    border-left: 0;
}

.reviews-stat-item:hover,
.reviews-stat-item.is-active {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.reviews-stat-item.is-active {
    box-shadow: inset 0 -2px 0 var(--primary);
}

.reviews-stat-item span {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.reviews-stat-item strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.reviews-stat-item.is-warning strong { color: #fbbf24; }
.reviews-stat-item.is-success strong { color: #34d399; }
.reviews-stat-item.is-blue strong { color: #60a5fa; }
.reviews-stat-item.is-teal strong { color: #2dd4bf; }

.reviews-filter-bar-minimal {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(125px, .65fr) minmax(155px, .8fr) minmax(150px, .8fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.reviews-filter-bar-minimal .form-control {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 11px;
}

.reviews-filter-search-minimal {
    position: relative;
    min-width: 0;
}

.reviews-filter-search-minimal > i {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 10px;
    pointer-events: none;
}

.reviews-filter-search-minimal .form-control {
    padding-right: 31px;
}

.reviews-filter-bar-minimal .btn {
    min-height: 38px;
    padding-block: 7px;
    white-space: nowrap;
}

.reviews-filter-reset {
    width: 38px;
    padding-inline: 0 !important;
}

.reviews-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 7px 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.reviews-result-bar > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.reviews-result-bar strong {
    color: var(--text);
    font-size: 13px;
}

.reviews-result-bar > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.reviews-result-bar i {
    color: var(--primary);
}

.reviews-bulk-toolbar--minimal {
    margin-bottom: 7px;
    padding: 7px 9px;
    border-radius: 9px;
}

.reviews-bulk-toolbar--minimal .reviews-bulk-actions .btn {
    min-height: 32px;
    padding-block: 5px;
    font-size: 10px;
}

.reviews-list-minimal {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.review-list-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    transition: background .16s ease, border-color .16s ease;
}

.review-list-row:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.review-list-row.is-pending {
    box-shadow: inset -2px 0 0 #fbbf24;
}

.review-list-row.is-approved {
    box-shadow: inset -2px 0 0 #34d399;
}

.review-list-select {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.review-list-content {
    min-width: 0;
}

.review-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.review-list-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-list-title > a {
    max-width: 480px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-list-title > a:hover {
    color: var(--primary);
}

.review-list-author {
    color: var(--text-muted);
    font-size: 9.5px;
}

.review-list-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 9.5px;
    white-space: nowrap;
}

.review-state-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
}

.review-state-dot.is-approved {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52,211,153,.10);
}

.review-state-dot.is-pending {
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251,191,36,.10);
}

.review-list-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 9px;
}

.review-list-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.review-list-meta i {
    color: color-mix(in srgb, var(--primary) 62%, var(--text-muted));
}

.review-list-meta .is-verified {
    color: #34d399;
}

.review-rating-compact {
    color: #fbbf24 !important;
    font-weight: 800;
}

.review-rating-compact i {
    color: #fbbf24;
}

.review-parent-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 5px 8px;
    border-right: 2px solid color-mix(in srgb, var(--primary) 52%, transparent);
    color: var(--text-muted);
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-2));
    border-radius: 7px;
    font-size: 9px;
    line-height: 1.6;
}

.review-parent-compact i {
    color: var(--primary);
}

.review-text-compact {
    margin-top: 7px;
    color: var(--text);
    font-size: 11.5px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.review-list-actions {
    min-width: 132px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.review-list-actions .btn-sm {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: 9.5px;
}

.reviews-empty-minimal {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.reviews-empty-minimal > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    font-size: 16px;
}

.reviews-empty-minimal > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reviews-empty-minimal strong {
    color: var(--text);
    font-size: 11.5px;
}

.reviews-empty-minimal span {
    font-size: 9.5px;
}

.reviews-empty-minimal .btn {
    margin-right: 6px;
}

@media (max-width: 1180px) {
    .reviews-filter-bar-minimal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reviews-filter-search-minimal {
        grid-column: 1 / -1;
    }

    .review-list-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .review-list-actions {
        grid-column: 2;
        justify-content: flex-start;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .reviews-stat-strip {
        overflow-x: auto;
    }

    .reviews-stat-item {
        min-width: 115px;
    }

    .reviews-filter-bar-minimal {
        grid-template-columns: 1fr 1fr;
    }

    .reviews-filter-search-minimal {
        grid-column: 1 / -1;
    }

    .reviews-filter-bar-minimal .btn {
        width: 100%;
    }

    .review-list-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .review-list-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .review-list-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .review-list-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .review-list-actions .btn-sm {
        width: 100%;
    }

    .reviews-empty-minimal {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .reviews-filter-bar-minimal {
        grid-template-columns: 1fr;
    }

    .reviews-filter-search-minimal {
        grid-column: auto;
    }
}


/* ── Minimal points program ───────────────────────────── */
.points-admin-panel,
.points-profile-page {
    min-width: 0;
}

.points-page-header {
    margin-bottom: 12px;
}

.points-stat-strip,
.points-profile-strip {
    display: flex;
    align-items: stretch;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.points-stat-item,
.points-profile-strip > div {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    border-left: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.points-stat-item:last-child,
.points-profile-strip > div:last-child {
    border-left: 0;
}

.points-stat-item span,
.points-profile-strip span {
    color: var(--text-muted);
    font-size: 9.5px;
    white-space: nowrap;
}

.points-stat-item strong,
.points-profile-strip strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.points-profile-strip > div {
    flex-direction: column;
    gap: 1px;
}

.points-profile-strip small {
    color: var(--text-muted);
    font-size: 8.5px;
}

.points-stat-item.is-success strong { color: #34d399; }
.points-stat-item.is-warning strong { color: #fbbf24; }
.points-stat-item.is-purple strong { color: var(--primary); }

.points-settings-bar {
    display: grid;
    grid-template-columns: minmax(190px, 1.05fr) minmax(165px, .9fr) minmax(150px, .8fr) minmax(130px, .7fr) minmax(150px, .8fr) auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 18px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.points-master-toggle {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.points-master-toggle > input,
.points-auto-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.points-toggle-ui {
    position: relative;
    width: 38px;
    height: 21px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    transition: var(--transition);
}

.points-toggle-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: var(--transition);
}

.points-master-toggle > input:checked + .points-toggle-ui {
    background: color-mix(in srgb, #10b981 24%, var(--surface));
    border-color: rgba(16,185,129,.42);
}

.points-master-toggle > input:checked + .points-toggle-ui::after {
    right: 20px;
    background: #34d399;
}

.points-master-toggle > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.points-master-toggle strong {
    color: var(--text);
    font-size: 11px;
}

.points-master-toggle small {
    color: var(--text-muted);
    font-size: 8.5px;
}

.points-auto-toggle {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--surface-2);
    font-size: 9.5px;
    cursor: pointer;
}

.points-auto-toggle::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.points-auto-toggle:has(input:checked)::before {
    border-color: transparent;
    background: var(--grad);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--surface) 92%, transparent);
}

.points-rate-field label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 8.5px;
    font-weight: 800;
}

.points-inline-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    overflow: hidden;
}

.points-inline-input .form-control {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    font-size: 10px;
    direction: ltr;
    text-align: center;
}

.points-inline-input > span {
    padding: 0 8px;
    color: var(--text-muted);
    font-size: 8.5px;
    white-space: nowrap;
}

.points-settings-bar > .btn {
    min-height: 39px;
}

.points-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 9px;
}

.points-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 14px;
}

.points-section-head p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 9px;
}

.points-create-reward,
.points-edit-reward {
    position: relative;
}

.points-create-reward > summary,
.points-edit-reward > summary {
    list-style: none;
    cursor: pointer;
}

.points-create-reward > summary::-webkit-details-marker,
.points-edit-reward > summary::-webkit-details-marker {
    display: none;
}

.points-create-popover,
.points-edit-popover {
    position: absolute;
    z-index: 50;
    left: 0;
    top: calc(100% + 7px);
    width: 390px;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: 0 22px 55px rgba(0,0,0,.36);
}

.points-edit-popover {
    width: 360px;
}

.points-reward-form .form-group {
    margin-bottom: 8px;
}

.points-reward-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 8.5px;
    font-weight: 800;
}

.points-reward-form .form-control {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 10px;
}

.points-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.points-reward-active {
    min-height: 36px;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    cursor: pointer;
}

.points-reward-active input {
    accent-color: var(--primary);
}

.points-rewards-table-wrap {
    margin: 0 0 12px;
    border-radius: 11px;
}

.points-rewards-table th,
.points-rewards-table td {
    padding: 10px 12px;
    font-size: 10px;
    vertical-align: middle;
}

.points-reward-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.points-reward-title strong {
    color: var(--text);
    font-size: 11px;
}

.points-reward-title span {
    color: var(--primary);
    font-size: 9px;
}

.points-reward-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.points-reward-actions form {
    margin: 0;
}

.points-transactions-panel,
.points-history-panel {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    overflow: visible;
}

.points-transactions-panel > summary,
.points-history-panel > summary {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px;
    list-style: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.points-transactions-panel > summary::-webkit-details-marker,
.points-history-panel > summary::-webkit-details-marker {
    display: none;
}

.points-transactions-panel > summary span,
.points-history-panel > summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.points-transactions-panel > summary i:first-child,
.points-history-panel > summary i:first-child {
    color: var(--primary);
}

.points-transactions-panel > .admin-table-wrap,
.points-history-panel > .admin-table-wrap {
    margin: 0;
    border-radius: 0 0 10px 10px;
}

/* Customer points market */
.points-market-section,
.points-owned-section {
    margin-top: 14px;
}

.points-section-head--profile {
    margin-bottom: 8px;
}

.points-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 7px;
}

.points-market-item,
.points-owned-item {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.points-market-item > div,
.points-owned-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.points-market-item strong,
.points-owned-item strong {
    color: var(--text);
    font-size: 10.5px;
}

.points-market-item span,
.points-owned-item span {
    color: var(--primary);
    font-size: 9px;
}

.points-market-item small {
    color: var(--text-muted);
    font-size: 8px;
}

.points-market-item .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.points-market-empty,
.points-owned-empty {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 9.5px;
    text-align: center;
}

.points-owned-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Cart voucher selector */
.points-checkout-box {
    min-width: 300px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-2));
}

.points-checkout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.points-checkout-head strong {
    color: var(--text);
    font-size: 10.5px;
}

.points-checkout-head strong i {
    margin-left: 4px;
    color: var(--primary);
}

.points-checkout-head > span {
    color: var(--primary);
    font-size: 9.5px;
    font-weight: 800;
}

.points-checkout-box .form-control {
    min-height: 36px;
    font-size: 10px;
}

.points-checkout-box .field-help {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 8.5px;
}

.points-checkout-empty {
    color: var(--text-muted);
    font-size: 9px;
}

.points-checkout-empty a {
    color: var(--primary);
}

@media (max-width: 1180px) {
    .points-settings-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .points-master-toggle {
        grid-column: 1 / 2;
    }
}

@media (max-width: 760px) {
    .points-stat-strip,
    .points-profile-strip {
        overflow-x: auto;
    }

    .points-stat-item,
    .points-profile-strip > div {
        min-width: 120px;
    }

    .points-settings-bar {
        grid-template-columns: 1fr;
    }

    .points-master-toggle {
        grid-column: auto;
    }

    .points-form-grid {
        grid-template-columns: 1fr;
    }

    .points-create-popover,
    .points-edit-popover {
        position: fixed;
        top: 90px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .points-market-grid {
        grid-template-columns: 1fr;
    }

    .points-checkout-box {
        min-width: 0;
        width: 100%;
    }
}


/* ── Customer point discount breakdown ────────────────── */
.order-point-discount {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.order-point-discount > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 10px;
}

.order-point-discount strong {
    color: var(--text);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.order-point-discount .is-discount,
.order-point-discount .is-discount strong {
    color: #34d399;
}

.order-point-discount .is-discount i {
    margin-left: 4px;
}


/* ── Unified appearance studio ─────────────────────────── */
.appearance-studio-panel{
    min-width:0;
}

.appearance-studio-header{
    margin-bottom:12px;
}

.appearance-studio-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    padding:7px;
    border:1px solid var(--border);
    border-radius:11px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
}

.appearance-studio-tabs{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
}
.appearance-studio-tabs::-webkit-scrollbar{display:none}

.appearance-studio-tab{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:var(--text-muted);
    font-family:inherit;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    transition:var(--transition);
}
.appearance-studio-tab:hover{
    color:var(--text);
    background:var(--surface-2);
}
.appearance-studio-tab.active{
    color:#fff;
    border-color:transparent;
    background:var(--grad);
    box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 24%,transparent);
}

.appearance-studio-preview-tools{
    display:flex;
    align-items:center;
    gap:6px;
}

.studio-page-picker{
    min-height:34px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 7px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text-muted);
}
.studio-page-picker i{
    font-size:9px;
}
.studio-page-picker select{
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:9.5px;
    font-weight:700;
    cursor:pointer;
}

.studio-device-switch{
    display:flex;
    align-items:center;
    gap:2px;
    padding:2px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
}
.studio-device-switch button,
.studio-icon-btn{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--text-muted);
    font-size:10px;
    cursor:pointer;
    transition:var(--transition);
}
.studio-device-switch button:hover,
.studio-device-switch button.active,
.studio-icon-btn:hover{
    color:var(--primary);
    background:color-mix(in srgb,var(--primary) 9%,transparent);
}
.studio-icon-btn{
    border:1px solid var(--border);
    background:var(--surface-2);
}

.appearance-studio-workspace{
    display:grid;
    grid-template-columns:minmax(340px, .92fr) minmax(0, 1.55fr);
    gap:10px;
    min-height:calc(100vh - 245px);
}

.appearance-studio-controls,
.appearance-studio-preview{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
}

.studio-pane-head{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 11px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--surface-2) 88%,transparent);
}
.studio-pane-head>div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
}
.studio-pane-head strong{
    color:var(--text);
    font-size:10.5px;
}
.studio-pane-head span{
    color:var(--text-muted);
    font-size:8.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.studio-frame-shell{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    background:var(--surface-2);
}

.studio-frame-loading{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:var(--text-muted);
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    font-size:9.5px;
}
.studio-frame-loading[hidden]{display:none}

.studio-control-frame{
    width:100%;
    height:100%;
    min-height:calc(100vh - 295px);
    display:block;
    border:0;
    background:var(--surface);
}

.studio-preview-canvas{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:auto;
    padding:10px;
    background:
        linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25%),
        linear-gradient(-45deg,rgba(255,255,255,.018) 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,rgba(255,255,255,.018) 75%),
        linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.018) 75%),
        var(--surface-2);
    background-size:18px 18px;
    background-position:0 0,0 9px,9px -9px,-9px 0;
}

.studio-preview-canvas iframe{
    width:100%;
    height:calc(100vh - 315px);
    min-height:560px;
    display:block;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.18);
    transition:width .22s ease;
}
.studio-preview-canvas[data-device="tablet"] iframe{
    width:820px;
    max-width:100%;
}
.studio-preview-canvas[data-device="mobile"] iframe{
    width:390px;
    max-width:100%;
}

#studioPreviewStatus.is-dirty{
    color:#fbbf24;
}

.appearance-studio-visual{
    height:calc(100vh - 210px);
    min-height:620px;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:var(--surface-2);
}
.appearance-studio-visual[hidden]{display:none}
.appearance-studio-visual iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
    background:#07050b;
}

@media(max-width:1180px){
    .appearance-studio-workspace{
        grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);
    }
}

@media(max-width:900px){
    .appearance-studio-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }
    .appearance-studio-preview-tools{
        width:100%;
        overflow-x:auto;
    }
    .appearance-studio-workspace{
        grid-template-columns:1fr;
        min-height:0;
    }
    .studio-control-frame{
        min-height:620px;
    }
    .studio-preview-canvas iframe{
        min-height:640px;
    }
    .appearance-studio-visual{
        height:760px;
    }
}

@media(max-width:560px){
    .appearance-studio-preview-tools{
        gap:4px;
    }
    .studio-page-picker{
        flex:1;
        min-width:140px;
    }
    .studio-device-switch button,
    .studio-icon-btn{
        width:28px;
        height:28px;
    }
}


/* Embedded appearance studio child pages */
body.embedded-admin-frame{
    overflow:auto!important;
}
body.embedded-admin-frame #siteHeader,
body.embedded-admin-frame .footer,
body.embedded-admin-frame .grid-overlay,
body.embedded-admin-frame #adminSidebar,
body.embedded-admin-frame .mobile-bottom-nav,
body.embedded-admin-frame .back-to-top{
    display:none!important;
}
body.embedded-admin-frame .page-body{
    padding:0!important;
    min-height:100vh!important;
}
body.embedded-admin-frame .admin-layout{
    display:block!important;
    min-height:100vh!important;
}
body.embedded-admin-frame .admin-panel{
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    margin:0!important;
    padding:12px!important;
}
body.embedded-admin-frame .admin-panel>.admin-panel-header{
    display:none!important;
}
body.embedded-admin-frame .auth-card.admin-form-card{
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
body.embedded-admin-frame .auth-form{
    margin:0!important;
}
body.embedded-admin-frame .settings-section-title{
    margin:13px 0 8px!important;
    font-size:11px!important;
}
body.embedded-admin-frame .settings-section-title i{
    width:25px!important;
    height:25px!important;
    border-radius:7px!important;
    font-size:10px!important;
}
body.embedded-admin-frame .form-row{
    grid-template-columns:1fr!important;
    gap:7px!important;
}
body.embedded-admin-frame .form-group{
    margin-bottom:8px!important;
}
body.embedded-admin-frame .form-group>label{
    margin-bottom:4px!important;
    font-size:9px!important;
}
body.embedded-admin-frame .form-control,
body.embedded-admin-frame input,
body.embedded-admin-frame textarea,
body.embedded-admin-frame select{
    font-size:10px!important;
}
body.embedded-admin-frame .form-control{
    min-height:34px!important;
    padding:6px 8px!important;
}
body.embedded-admin-frame textarea.form-control{
    min-height:70px!important;
}
body.embedded-admin-frame .field-help{
    font-size:8px!important;
    line-height:1.55!important;
}
body.embedded-admin-frame .hr-soft{
    margin:11px 0!important;
}
body.embedded-admin-frame .settings-img-preview{
    max-height:70px!important;
    margin-bottom:6px!important;
}
body.embedded-admin-frame .settings-img-preview--wide{
    max-height:90px!important;
}
body.embedded-admin-frame .orders-list{
    margin-top:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
}
body.embedded-admin-frame .order-card{
    padding:8px 9px!important;
    border-radius:9px!important;
}
body.embedded-admin-frame .order-card-head{
    gap:7px!important;
}
body.embedded-admin-frame .empty-state{
    margin-top:20px!important;
}


/* Minimal carousel editor inside appearance studio */
.carousel-admin-minimal{
    min-width:0;
}

.carousel-minimal-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in srgb,var(--surface-2) 88%,transparent);
}

.carousel-minimal-toolbar>div{
    display:flex;
    align-items:baseline;
    gap:4px;
    color:var(--text-muted);
    font-size:9px;
}

.carousel-minimal-toolbar strong{
    color:var(--text);
    font-size:12px;
}

.carousel-minimal-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.carousel-minimal-row{
    min-width:0;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto auto;
    align-items:center;
    gap:9px;
    padding:7px 8px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    transition:var(--transition);
}

.carousel-minimal-row:hover{
    border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
    background:color-mix(in srgb,var(--primary) 3%,var(--surface));
}

.carousel-minimal-row.is-inactive{
    opacity:.62;
}

.carousel-minimal-media{
    width:58px;
    height:40px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface-2);
}

.carousel-minimal-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.carousel-minimal-media span{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:var(--text-muted);
    font-size:12px;
}

.carousel-minimal-info{
    min-width:0;
}

.carousel-minimal-info>strong{
    display:block;
    overflow:hidden;
    color:var(--text);
    font-size:10.5px;
    font-weight:900;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.carousel-minimal-info>div{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    margin-top:3px;
    color:var(--text-muted);
    font-size:8.5px;
}

.carousel-minimal-info>div span{
    max-width:180px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.carousel-minimal-actions{
    display:flex;
    align-items:center;
    gap:4px;
}

.carousel-minimal-actions form{
    margin:0;
}

.carousel-minimal-actions .btn-sm{
    width:30px;
    min-height:29px;
    display:grid;
    place-items:center;
    padding:0;
}

.carousel-minimal-empty{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:18px;
    border:1px dashed var(--border-strong);
    border-radius:10px;
    color:var(--text-muted);
    text-align:center;
}

.carousel-minimal-empty>i{
    color:var(--primary);
    font-size:19px;
}

.carousel-minimal-empty strong{
    color:var(--text);
    font-size:11px;
}

.carousel-minimal-empty span{
    font-size:9px;
}

.carousel-form-card{
    max-width:700px;
}

.carousel-form{
    margin-top:10px;
}

.carousel-current-image{
    margin-top:6px;
}

.carousel-current-image img{
    width:100%;
    max-width:300px;
    max-height:140px;
    display:block;
    object-fit:cover;
    border:1px solid var(--border);
    border-radius:8px;
}

.carousel-custom-url{
    margin-top:6px;
}

.carousel-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.carousel-active-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.carousel-active-row>label:first-child{
    margin:0;
    white-space:nowrap;
}

body.embedded-admin-frame .carousel-minimal-toolbar{
    margin-top:0;
}

body.embedded-admin-frame .carousel-form-card{
    max-width:none;
}

body.embedded-admin-frame .carousel-form{
    margin-top:0;
}

@media(max-width:680px){
    .carousel-minimal-row{
        grid-template-columns:50px minmax(0,1fr) auto;
    }

    .carousel-minimal-media{
        width:50px;
        height:36px;
    }

    .carousel-minimal-status{
        display:none;
    }

    .carousel-minimal-actions{
        grid-column:2 / -1;
        justify-content:flex-start;
    }

    .carousel-form-grid{
        grid-template-columns:1fr;
    }
}


/* ── Minimal admin dashboard ───────────────────────── */
.admin-dashboard-minimal{
    min-width:0;
}

.admin-dashboard-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.admin-dashboard-eyebrow{
    display:block;
    margin-bottom:3px;
    color:var(--text-muted);
    font-size:9px;
    font-weight:750;
}

.admin-dashboard-head h1{
    margin:0;
    color:var(--text);
    font-size:clamp(20px,2vw,27px);
    line-height:1.2;
    font-weight:900;
}

.admin-dashboard-head p{
    margin:5px 0 0;
    color:var(--text-muted);
    font-size:10.5px;
}

.admin-dashboard-site-link{
    flex:0 0 auto;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:transparent;
    color:var(--text);
    font-size:9.5px;
    font-weight:750;
    text-decoration:none;
    transition:var(--transition);
}

.admin-dashboard-site-link:hover{
    border-color:var(--border-strong);
    background:var(--surface-2);
    color:var(--accent);
}

.admin-dashboard-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-bottom:12px;
}

.admin-dashboard-kpi{
    min-width:0;
    min-height:90px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
    transition:var(--transition);
}

.admin-dashboard-kpi:hover{
    border-color:var(--border-strong);
    background:color-mix(in srgb,var(--primary) 3%,var(--surface));
}

.admin-dashboard-kpi.needs-attention{
    border-color:color-mix(in srgb,var(--warning) 28%,var(--border));
}

.admin-dashboard-kpi-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:12px;
}

.admin-dashboard-kpi.needs-attention .admin-dashboard-kpi-icon{
    color:var(--warning);
    background:color-mix(in srgb,var(--warning) 9%,var(--surface));
}

.admin-dashboard-kpi-copy{
    min-width:0;
    display:grid;
    gap:1px;
}

.admin-dashboard-kpi-copy small,
.admin-dashboard-kpi-copy em{
    overflow:hidden;
    color:var(--text-muted);
    font-size:8.5px;
    font-style:normal;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-kpi-copy strong{
    color:var(--text);
    font-size:19px;
    line-height:1.25;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.admin-dashboard-kpi-copy .admin-dashboard-money{
    font-size:15px;
}

.admin-dashboard-attention,
.admin-dashboard-panel{
    margin-bottom:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    overflow:hidden;
}

.admin-dashboard-section-head{
    min-height:43px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 12px;
    border-bottom:1px solid var(--border);
}

.admin-dashboard-section-head>div{
    min-width:0;
    display:grid;
    gap:1px;
}

.admin-dashboard-section-head span{
    color:var(--text);
    font-size:10.5px;
    font-weight:850;
}

.admin-dashboard-section-head small{
    color:var(--text-muted);
    font-size:8px;
}

.admin-dashboard-section-head>a{
    flex:0 0 auto;
    color:var(--primary);
    font-size:8.5px;
    font-weight:750;
    text-decoration:none;
}

.admin-dashboard-section-head>a:hover{
    color:var(--accent);
}

.admin-dashboard-attention-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.admin-dashboard-attention-row{
    min-width:0;
    min-height:52px;
    display:grid;
    grid-template-columns:8px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
}

.admin-dashboard-attention-row:nth-child(odd){
    border-left:1px solid var(--border);
}

.admin-dashboard-attention-row:hover{
    background:var(--surface-2);
}

.admin-dashboard-attention-row>div{
    min-width:0;
    display:grid;
    gap:1px;
}

.admin-dashboard-attention-row strong{
    overflow:hidden;
    font-size:9.5px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-attention-row small{
    overflow:hidden;
    color:var(--text-muted);
    font-size:8px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-attention-row>i{
    color:var(--text-muted);
    font-size:8px;
}

.attention-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--warning);
}

.attention-dot.is-danger{ background:var(--danger); }
.attention-dot.is-review{ background:var(--primary); }
.attention-dot.is-warning{ background:var(--warning); }
.attention-dot.is-order{ background:var(--secondary,#6366f1); }

.admin-dashboard-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr);
    gap:12px;
}

.admin-dashboard-order-list{
    display:flex;
    flex-direction:column;
}

.admin-dashboard-order{
    min-width:0;
    min-height:49px;
    display:grid;
    grid-template-columns:minmax(120px,1fr) minmax(120px,.8fr) auto;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
    transition:background .15s ease;
}

.admin-dashboard-order:last-child{
    border-bottom:0;
}

.admin-dashboard-order:hover{
    background:var(--surface-2);
}

.admin-dashboard-order-main,
.admin-dashboard-order-meta{
    min-width:0;
    display:grid;
    gap:1px;
}

.admin-dashboard-order-main strong{
    font-size:9.5px;
    font-weight:850;
}

.admin-dashboard-order-main span,
.admin-dashboard-order-meta small{
    overflow:hidden;
    color:var(--text-muted);
    font-size:8px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-order-meta span{
    color:var(--text);
    font-size:8.7px;
    font-weight:700;
}

.admin-dashboard-order-status{
    min-width:70px;
    min-height:23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 7px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text-muted);
    background:var(--surface-2);
    font-size:7.5px;
    font-weight:750;
    white-space:nowrap;
}

.admin-dashboard-order-status.status-pending{
    color:var(--warning);
    border-color:color-mix(in srgb,var(--warning) 30%,var(--border));
    background:color-mix(in srgb,var(--warning) 7%,var(--surface));
}

.admin-dashboard-order-status.status-delivered{
    color:var(--success);
}

.admin-dashboard-order-status.status-cancelled{
    color:var(--danger);
}

.admin-dashboard-empty{
    min-height:120px;
    display:grid;
    place-items:center;
    padding:18px;
    color:var(--text-muted);
    font-size:9px;
}

.admin-dashboard-overview-list{
    display:flex;
    flex-direction:column;
}

.admin-dashboard-overview-list>a{
    min-height:48px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:4px 10px;
    padding:8px 12px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
}

.admin-dashboard-overview-list>a:last-child{
    border-bottom:0;
}

.admin-dashboard-overview-list>a:hover{
    background:var(--surface-2);
}

.admin-dashboard-overview-list span{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-muted);
    font-size:8.8px;
}

.admin-dashboard-overview-list span i{
    width:13px;
    color:var(--primary);
    text-align:center;
}

.admin-dashboard-overview-list strong{
    font-size:11px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.admin-dashboard-overview-list small{
    grid-column:1 / -1;
    color:var(--text-muted);
    font-size:7.5px;
}

.admin-dashboard-stock-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.admin-dashboard-stock-row{
    min-width:0;
    min-height:49px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 11px;
    border-left:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
}

.admin-dashboard-stock-row:hover{
    background:var(--surface-2);
}

.admin-dashboard-stock-row>div{
    min-width:0;
    display:grid;
    gap:1px;
}

.admin-dashboard-stock-row strong{
    overflow:hidden;
    font-size:8.8px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-stock-row small{
    color:var(--text-muted);
    font-size:7.4px;
}

.admin-dashboard-stock-row>span{
    flex:0 0 auto;
    min-height:22px;
    display:inline-flex;
    align-items:center;
    padding:2px 7px;
    border-radius:999px;
    font-size:7.5px;
    font-weight:800;
}

.admin-dashboard-stock-row>span.is-low{
    color:var(--warning);
    background:color-mix(in srgb,var(--warning) 8%,var(--surface));
}

.admin-dashboard-stock-row>span.is-out{
    color:var(--danger);
    background:color-mix(in srgb,var(--danger) 8%,var(--surface));
}

.admin-dashboard-management-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.admin-dashboard-management-link{
    min-width:0;
    min-height:66px;
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    gap:1px 7px;
    padding:9px 11px;
    border-left:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
}

.admin-dashboard-management-link:hover{
    background:var(--surface-2);
}

.admin-dashboard-management-link>i{
    grid-row:1 / 3;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:9px;
}

.admin-dashboard-management-link>span{
    overflow:hidden;
    font-size:8.8px;
    font-weight:800;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.admin-dashboard-management-link>small{
    overflow:hidden;
    color:var(--text-muted);
    font-size:7.4px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

@media(max-width:1180px){
    .admin-dashboard-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-dashboard-management-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:860px){
    .admin-dashboard-workspace{
        grid-template-columns:1fr;
    }

    .admin-dashboard-stock-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .admin-dashboard-head{
        align-items:flex-start;
    }

    .admin-dashboard-head p{
        max-width:220px;
    }

    .admin-dashboard-site-link{
        padding-inline:8px;
    }

    .admin-dashboard-kpis{
        grid-template-columns:1fr 1fr;
        gap:6px;
    }

    .admin-dashboard-kpi{
        min-height:78px;
        padding:9px;
        gap:7px;
    }

    .admin-dashboard-kpi-icon{
        width:29px;
        height:29px;
        flex-basis:29px;
    }

    .admin-dashboard-kpi-copy strong{
        font-size:15px;
    }

    .admin-dashboard-kpi-copy .admin-dashboard-money{
        font-size:11px;
    }

    .admin-dashboard-attention-list{
        grid-template-columns:1fr;
    }

    .admin-dashboard-attention-row:nth-child(odd){
        border-left:0;
    }

    .admin-dashboard-order{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .admin-dashboard-order-meta{
        display:none;
    }

    .admin-dashboard-stock-list{
        grid-template-columns:1fr;
    }

    .admin-dashboard-stock-row{
        border-left:0;
    }

    .admin-dashboard-management-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   Product editor — structured minimal admin form
   ========================================================= */
.product-editor-panel{
    min-width:0;
}

.product-editor-header{
    align-items:flex-end;
    margin-bottom:14px;
}

.product-editor-header .admin-eyebrow{
    display:block;
    margin-bottom:4px;
    color:var(--text-muted);
    font-size:10px;
    font-weight:800;
}

.product-editor-header h1{
    max-width:760px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.product-editor-form{
    min-width:0;
}

.product-editor-errors{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:12px;
    padding:10px 12px;
    border:1px solid rgba(248,113,113,.28);
    border-radius:10px;
    background:rgba(248,113,113,.07);
    color:var(--danger);
    font-size:11px;
}

.product-editor-errors p{
    margin:0;
}

.product-editor-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    gap:12px;
    align-items:start;
}

.product-editor-main{
    min-width:0;
    display:grid;
    gap:10px;
}

.product-editor-side{
    min-width:0;
    display:grid;
    gap:10px;
    position:sticky;
    top:calc(var(--header-height, 74px) + 12px);
}

.product-editor-card{
    min-width:0;
    padding:13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    box-shadow:none;
}

.product-editor-card-head{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:34px;
    margin-bottom:11px;
}

.product-editor-card-head>div{
    min-width:0;
    flex:1;
}

.product-editor-card-head h2{
    margin:0;
    color:var(--text);
    font-size:12px;
    font-weight:850;
    line-height:1.35;
}

.product-editor-card-head p{
    margin:2px 0 0;
    color:var(--text-muted);
    font-size:9px;
    line-height:1.6;
}

.product-editor-card-icon{
    width:29px;
    height:29px;
    flex:0 0 29px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:11px;
}

.product-editor-grid{
    display:grid;
    gap:9px;
}

.product-editor-grid--2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.product-editor-grid--4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.product-editor-field{
    min-width:0;
    margin:0!important;
}

.product-editor-field--full{
    grid-column:1 / -1;
}

.product-editor-field>label,
.product-editor-label-row>label{
    display:block;
    margin:0 0 4px;
    color:var(--text-muted);
    font-size:9.5px;
    font-weight:750;
}

.product-editor-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
}

.product-editor-label-row>label{
    margin:0;
}

.product-editor-inline-link{
    color:var(--primary);
    font-size:8.5px;
    font-weight:750;
    text-decoration:none;
}

.product-editor-inline-link:hover{
    color:var(--accent);
}

.product-editor-field .form-control,
.product-editor-field select,
.product-editor-field textarea,
.product-editor-card .form-control{
    width:100%;
    min-height:36px;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text);
    font-family:inherit;
    font-size:10.5px;
    box-shadow:none;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.product-editor-field .form-control:focus,
.product-editor-field select:focus,
.product-editor-field textarea:focus,
.product-editor-card .form-control:focus{
    border-color:color-mix(in srgb,var(--primary) 52%,var(--border));
    background:var(--surface);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 7%,transparent);
    outline:0;
}

.product-editor-field textarea.form-control{
    min-height:105px;
    resize:vertical;
}

.product-editor-field select[multiple]{
    min-height:104px;
    padding:5px;
}

.product-editor-field select[multiple] option{
    padding:6px 8px;
    border-radius:5px;
}

.product-editor-field .field-help{
    display:block;
    margin-top:4px;
    color:var(--text-muted);
    font-size:8px;
    line-height:1.55;
}

.product-editor-field .field-help a{
    color:var(--primary);
}

.product-editor-card input[type="file"].form-control{
    padding:5px 7px;
    cursor:pointer;
}

.product-editor-card input[type="file"]::file-selector-button{
    margin-inline-end:7px;
    padding:5px 8px;
    border:0;
    border-radius:6px;
    background:var(--surface);
    color:var(--text);
    font-family:inherit;
    font-size:9px;
    cursor:pointer;
}

.product-editor-current-media{
    margin-top:11px;
    padding-top:11px;
    border-top:1px solid var(--border);
}

.product-editor-subhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.product-editor-subhead strong{
    color:var(--text);
    font-size:10px;
}

.product-editor-subhead span{
    color:var(--text-muted);
    font-size:8px;
}

.product-images-admin--compact{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;
    gap:7px!important;
    margin:0!important;
}

.product-images-admin--compact .image-admin-item{
    position:relative;
    width:auto!important;
    min-width:0!important;
    height:96px!important;
    margin:0!important;
    overflow:hidden!important;
    border:1px solid var(--border)!important;
    border-radius:8px!important;
    background:var(--surface-2)!important;
}

.product-images-admin--compact .image-admin-item img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    display:block!important;
    object-fit:contain!important;
    padding:5px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff;
}

.product-images-admin--compact .main-image-label{
    position:absolute;
    top:5px;
    right:5px;
    z-index:2;
    padding:2px 5px;
    border-radius:5px;
    background:rgba(17,24,39,.82);
    color:#fff;
    font-size:7.5px;
    font-weight:800;
}

.product-images-admin--compact .image-admin-delete{
    position:absolute;
    inset:auto 5px 5px 5px;
    z-index:2;
    min-height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:0 6px;
    border-radius:6px;
    background:rgba(17,24,39,.82);
    color:#fff;
    font-size:7.5px;
    cursor:pointer;
}

.product-images-admin--compact .image-admin-delete input{
    width:12px;
    height:12px;
    accent-color:#ef4444;
}

.product-editor-status-card{
    padding-bottom:10px;
}

.product-editor-switch{
    position:relative;
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:8px;
    align-items:center;
    margin:0;
    padding:9px 0;
    border-bottom:1px solid var(--border);
    cursor:pointer;
}

.product-editor-switch>input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.product-editor-switch-ui{
    position:relative;
    width:30px;
    height:17px;
    border-radius:999px;
    background:var(--surface-2);
    border:1px solid var(--border-strong);
    transition:.18s ease;
}

.product-editor-switch-ui::after{
    content:"";
    position:absolute;
    top:2px;
    right:2px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--text-muted);
    transition:.18s ease;
}

.product-editor-switch>input:checked+.product-editor-switch-ui{
    border-color:var(--primary);
    background:color-mix(in srgb,var(--primary) 22%,transparent);
}

.product-editor-switch>input:checked+.product-editor-switch-ui::after{
    right:15px;
    background:var(--primary);
}

.product-editor-switch>span:last-child{
    min-width:0;
}

.product-editor-switch strong{
    display:block;
    color:var(--text);
    font-size:9.5px;
    font-weight:800;
}

.product-editor-switch small{
    display:block;
    margin-top:2px;
    color:var(--text-muted);
    font-size:7.5px;
    line-height:1.45;
}

.product-editor-special-order{
    margin-top:9px!important;
}

.product-editor-special-order.is-disabled{
    opacity:.45;
}

.product-editor-info-card{
    padding:7px 12px;
}

.product-editor-info-row{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border-bottom:1px solid var(--border);
}

.product-editor-info-row:last-child{
    border-bottom:0;
}

.product-editor-info-row span{
    color:var(--text-muted);
    font-size:8.5px;
}

.product-editor-info-row strong{
    color:var(--text);
    font-size:9px;
    font-weight:800;
}

.product-editor-savebox{
    padding:10px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
}

.product-editor-save{
    width:100%;
    min-height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 10px;
    border:0;
    border-radius:8px;
    background:linear-gradient(135deg,var(--primary),var(--secondary,#6366f1));
    color:#fff;
    font-family:inherit;
    font-size:10px;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 15%,transparent);
    transition:.17s ease;
}

.product-editor-save:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px color-mix(in srgb,var(--primary) 21%,transparent);
}

.product-editor-cancel{
    width:100%;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:5px;
    border-radius:7px;
    color:var(--text-muted);
    font-size:9px;
    font-weight:700;
    text-decoration:none;
}

.product-editor-cancel:hover{
    background:var(--surface-2);
    color:var(--text);
}

.product-editor-savebox>small{
    display:block;
    margin-top:5px;
    color:var(--text-muted);
    font-size:7.5px;
    line-height:1.5;
    text-align:center;
}

.product-editor-add-color{
    flex:0 0 auto;
    min-height:29px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 8px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface-2);
    color:var(--text);
    font-family:inherit;
    font-size:8.5px;
    font-weight:750;
    cursor:pointer;
}

.product-editor-add-color:hover{
    border-color:var(--border-strong);
    color:var(--primary);
}

.product-editor-color-rows{
    display:grid;
    gap:6px;
}

.product-editor-color-row{
    display:grid!important;
    grid-template-columns:minmax(120px,1.2fr) minmax(130px,1fr) 92px 31px!important;
    gap:6px!important;
    align-items:center!important;
    padding:7px!important;
    border:1px solid var(--border)!important;
    border-radius:8px!important;
    background:var(--surface-2)!important;
}

.product-editor-color-code{
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    gap:5px;
    align-items:center;
}

.product-editor-color-code .color-picker{
    width:34px!important;
    height:34px!important;
    padding:2px!important;
    border:1px solid var(--border)!important;
    border-radius:7px!important;
    background:var(--surface)!important;
    cursor:pointer;
}

.product-editor-remove-color{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
}

.product-editor-remove-color:hover{
    border-color:rgba(248,113,113,.22);
    background:rgba(248,113,113,.07);
    color:var(--danger);
}

.product-editor-color-empty{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px dashed var(--border-strong);
    border-radius:8px;
    color:var(--text-muted);
    font-size:8.5px;
}

.product-editor-color-empty i{
    color:var(--primary);
}

.product-editor-toggle{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:0 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text);
    font-size:9px;
    cursor:pointer;
}

.product-editor-toggle input{
    accent-color:var(--primary);
}

@media(max-width:1180px){
    .product-editor-layout{
        grid-template-columns:minmax(0,1fr) 220px;
    }

    .product-editor-grid--4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .product-editor-layout{
        grid-template-columns:1fr;
    }

    .product-editor-side{
        position:static;
        grid-template-columns:1fr 1fr;
    }

    .product-editor-savebox{
        align-self:stretch;
    }
}

@media(max-width:640px){
    .product-editor-header{
        align-items:flex-start;
    }

    .product-editor-header .admin-panel-actions{
        width:100%;
    }

    .product-editor-grid--2,
    .product-editor-grid--4{
        grid-template-columns:1fr;
    }

    .product-editor-field--full{
        grid-column:auto;
    }

    .product-editor-side{
        grid-template-columns:1fr;
    }

    .product-editor-color-row{
        grid-template-columns:minmax(0,1fr) 74px 31px!important;
    }

    .product-editor-color-code{
        grid-column:1 / -1;
    }

    .product-editor-current-media .product-editor-subhead{
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
    }
}
.component-source-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.component-source-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 16px;
    color: var(--text-muted);
    background: var(--surface, rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 12px);
    text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s;
}

.component-source-option:hover,
.component-source-option.is-active {
    color: var(--text);
    border-color: var(--primary);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.component-source-option > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--primary);
    background: var(--grad-soft);
    border-radius: 12px;
}

.component-source-option span,
.component-source-option small { display: block; }
.component-source-option small { margin-top: 4px; line-height: 1.6; }

.existing-product-reference {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.existing-product-reference__media {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.existing-product-reference__media img { width: 100%; height: 100%; object-fit: contain; }
.existing-product-reference__body h2 { margin: 4px 0; font-size: 18px; }
.existing-product-reference__body p { margin: 0; color: var(--text-muted); }

@media (max-width: 720px) {
    .component-source-switch { grid-template-columns: 1fr; }
    .existing-product-reference { grid-template-columns: 64px 1fr; }
    .existing-product-reference > .btn { grid-column: 1 / -1; justify-content: center; }
    .existing-product-reference__media { width: 64px; height: 64px; }
}
.builder-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.admin-builder-order-card {
    margin-bottom: 1.25rem;
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.admin-builder-order-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-builder-order-summary > div,
.admin-builder-part {
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.admin-builder-order-summary span,
.admin-builder-part small {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.admin-builder-order-summary strong {
    display: block;
    margin-top: 0.25rem;
}

.admin-builder-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.admin-builder-part-head span {
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-builder-part-head strong {
    display: block;
    margin: 0.25rem 0;
}

.admin-builder-part dl {
    margin-top: 0.65rem;
}

.admin-builder-part dl > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--border-faint, var(--border));
    font-size: 0.78rem;
}

.admin-builder-part dt { color: var(--text-muted); }
.admin-builder-part dd { margin: 0; font-weight: 700; text-align: left; }