/* ============================================================
   Swag Shop — Admin Panel Styles

   Admin-only rules, loaded via AdminLayout.razor <HeadContent>.
   These rules use --adm-* tokens and the admin dark palette.

   Frontend shop rules (.shop-*) live in swag-shop.css
   and are loaded only by MainLayout.razor.
   ============================================================ */

/* ── Variant group blocks (admin editor) ── */
.swag-variant-group {
    border: 1px solid var(--adm-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--adm-bg);
}

.swag-variant-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.swag-variant-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--adm-border);
}

.swag-variant-option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Personalization blocks (admin editor) ── */
.swag-personalization-row {
    border: 1px solid var(--adm-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    background: var(--adm-bg);
}

/* Action area at the bottom of each personalization card.
   Required toggle on the left, cancel/remove button on the right —
   layout stays consistent regardless of input type. */
.swag-personalization-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    border-top: 1px solid var(--adm-border);
}

/* ── Shipping option blocks (admin editor) ── */
.swag-shipping-option-row {
    border: 1px solid var(--adm-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    background: var(--adm-bg);
}

/* ── Admin table compact inputs ── */
.admin-input-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.82rem !important;
    min-width: 0;
    width: 100%;
}

/* ── Admin editor responsive ── */
@media (max-width: 767px) {
    .swag-variant-group-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .swag-variant-option-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Swag Shop Admin — Vertical Subnav Layout
   ============================================================ */

.swag-admin-shell {
    display: flex;
    gap: 0;
    min-height: calc(100vh - var(--adm-topbar-h));
    align-items: flex-start;
}

.swag-admin-nav {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid var(--adm-border);
    padding: 1.25rem 0.5rem;
    position: sticky;
    top: calc(var(--adm-topbar-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.swag-admin-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--adm-border);
}

.swag-admin-nav-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--adm-text-dim);
}

.swag-admin-nav-preview {
    font-size: 0.72rem;
    color: var(--adm-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.swag-admin-nav-preview:hover { color: var(--adm-gold); }

.swag-admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--adm-radius);
    text-decoration: none;
    color: var(--adm-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.swag-admin-nav-link:hover {
    background: rgba(255,255,255,0.05);
    color: var(--adm-text);
}

.swag-admin-nav-link.active {
    background: rgba(255,255,255,0.07);
    color: var(--adm-gold);
}

.swag-admin-nav-icon { font-size: 1rem; flex-shrink: 0; }

.swag-admin-nav-divider {
    border-top: 1px solid var(--adm-border);
    margin: 0.5rem 0.75rem;
}

.swag-admin-nav-badge-warn {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swag-admin-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem;
}

.swag-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

/* ── Order detail ── */
.swag-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: flex-start;
}

.swag-order-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--adm-text-dim);
    margin-bottom: 0.25rem;
}

.swag-order-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--adm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.15rem;
}

.swag-order-stripe-id {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--adm-text-muted);
    word-break: break-all;
}

.swag-order-buyer-note {
    font-size: 0.88rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--adm-border);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    margin-top: 0.25rem;
}

.swag-order-personalization { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.4rem; }
.swag-order-pers-label { font-size: 0.75rem; color: var(--adm-text-muted); font-weight: 600; }
.swag-order-pers-value { font-size: 0.9rem; font-weight: 500; }

/* ── Financial rows ── */
.swag-order-money-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

.swag-order-money-total {
    font-weight: 700;
    font-size: 1rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--adm-border);
    margin-top: 0.25rem;
}

/* ── Timeline ── */
.swag-order-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; }

.swag-order-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1rem;
    position: relative;
}

.swag-order-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--adm-border);
}

.swag-order-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--adm-border);
    background: var(--adm-surface);
    flex-shrink: 0;
    margin-top: 2px;
}

.swag-order-timeline-item.done .swag-order-timeline-dot {
    background: var(--dot-color, #22c55e);
    border-color: var(--dot-color, #22c55e);
}

.swag-order-timeline-label { font-size: 0.88rem; font-weight: 600; color: var(--adm-text); }
.swag-order-timeline-time { font-size: 0.78rem; color: var(--adm-text-muted); margin-top: 0.1rem; }

.swag-order-timeline-item.pending .swag-order-timeline-label,
.swag-order-timeline-item.pending .swag-order-timeline-time { color: var(--adm-text-dim); }

/* ── Analytics ── */
.swag-analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.swag-stat-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 1.25rem 1.5rem;
}

.swag-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
    margin-bottom: 0.4rem;
}

.swag-stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.swag-stat-sub { font-size: 0.75rem; color: var(--adm-text-dim); margin-top: 0.25rem; }

/* ── Swag admin content — table full width fix ── */
.swag-admin-content .adm-table-wrap {
    width: 100%;
}

.swag-admin-content .adm-table {
    width: 100%;
    table-layout: auto;
}

.swag-admin-content .adm-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

.swag-admin-content .adm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ── Global listing row highlight ── */
.swag-table-row-global {
    border-left: 3px solid var(--adm-cyan) !important;
}

.swag-badge-global {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(34, 211, 238, 0.1);
    color: var(--adm-cyan);
    border: 1px solid rgba(34, 211, 238, 0.25);
    white-space: nowrap;
}

/* ── Global catalog browser ── */
.swag-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.swag-catalog-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}

.swag-catalog-card:hover {
    border-color: var(--adm-border-hover);
}

.swag-catalog-card.already-added {
    opacity: 0.55;
}

.swag-catalog-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--adm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--adm-text-dim);
}

.swag-catalog-body {
    padding: 0.75rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.swag-catalog-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

.swag-catalog-meta {
    font-size: 0.78rem;
    color: var(--adm-text-muted);
}

.swag-catalog-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--adm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.swag-catalog-price {
    font-weight: 700;
    font-size: 0.9rem;
}

.swag-catalog-search {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.swag-catalog-search .admin-input {
    flex: 1;
    min-width: 200px;
}

/* ── Small success button (reconstructed from corrupted source) ── */
.btn-admin-sm-success {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border-color: rgba(34,197,94,0.25);
}

.btn-admin-sm-success:hover {
    background: rgba(34,197,94,0.2);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .swag-admin-shell { flex-direction: column; }
    .swag-admin-nav {
        width: 100%;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--adm-border);
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.5rem;
    }
    .swag-admin-nav-header { width: 100%; border-bottom: none; padding-bottom: 0.25rem; margin-bottom: 0; }
    .swag-admin-nav-divider { display: none; }
    .swag-admin-content { padding: 1.25rem; }
    .swag-order-detail-grid { grid-template-columns: 1fr; }
    .swag-analytics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .swag-analytics-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Shipping editor (SwagShopShipping.razor)
   Method cards → details + rate tiers | checkout test.
   Save/Cancel live in the shared .adm-settings-panel-footer.
   ========================================================== */

.ship-page-alert {
    margin-bottom: var(--space-5);
}

/* ── Method picker: selectable cards (desktop) ── */
.ship-method-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ship-method-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    text-align: left;
    font: inherit;
    color: var(--adm-text);
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    cursor: pointer;
    transition: border-color var(--adm-transition), box-shadow var(--adm-transition);
}

    .ship-method-card:hover {
        border-color: var(--adm-border-hover);
    }

    .ship-method-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--adm-cyan-dim);
    }

    .ship-method-card.is-selected {
        border-color: var(--adm-cyan);
        box-shadow: inset 0 0 0 1px var(--adm-cyan);
    }

.ship-method-card-add {
    border-style: dashed;
    background: transparent;
    color: var(--adm-text-muted);
}

    .ship-method-card-add:hover {
        color: var(--adm-text);
    }

.ship-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--adm-radius);
    background: var(--adm-surface-2);
    color: var(--adm-text-muted);
}

    .ship-method-icon svg {
        width: var(--space-5);
        height: var(--space-5);
    }

.ship-method-text {
    flex: 1;
    min-width: 0;
}

.ship-method-name {
    display: block;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ship-method-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

.ship-method-radio {
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    border-radius: 50%;
    border: 2px solid var(--adm-border-hover);
}

.ship-method-card.is-selected .ship-method-radio {
    border-color: var(--adm-cyan);
    background: var(--adm-cyan);
    box-shadow: inset 0 0 0 var(--space-1) var(--adm-surface);
}

/* Mobile replacement for the cards */
.ship-method-picker {
    display: none;
}

/* ── Empty state ── */
.ship-empty {
    align-items: center;
    text-align: center;
}

.ship-empty-text {
    margin: 0;
    color: var(--adm-text-muted);
}

/* ── Editor grid: main column + checkout test ── */
.ship-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}

.ship-editor-main {
    min-width: 0;
}

.ship-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

/* ── Rate tiers ── */
.ship-tier-table {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    overflow: hidden;
}

.ship-tier-head,
.ship-tier-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.ship-tier-head {
    background: var(--adm-surface-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text-muted);
}

.ship-tier-head-actions {
    text-align: right;
}

.ship-tier-row {
    border-top: 1px solid var(--adm-border);
}

    .ship-tier-row.is-editing {
        background: var(--adm-cyan-dim);
    }

.ship-tier-cell {
    min-width: 0;
}

.ship-tier-cell-label,
.ship-tier-summary {
    display: none;
}

.ship-tier-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ship-tier-empty {
    margin: 0;
    font-style: italic;
    color: var(--adm-text-dim);
}

.ship-tier-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

.ship-note-icon {
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
    margin-top: var(--space-1);
}

.ship-free {
    font-weight: var(--font-weight-bold);
    color: var(--adm-success);
}

/* ── Checkout test ── */
.ship-test-panel {
    position: sticky;
    top: calc(var(--adm-topbar-h) + var(--space-5));
}

.ship-test-result {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
}

    .ship-test-result.is-error {
        display: block;
        font-size: var(--font-size-sm);
        color: var(--adm-danger-soft);
        background: var(--adm-danger-dim);
        border-color: var(--adm-danger-border);
    }

.ship-test-result-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.ship-test-result-name {
    font-weight: var(--font-weight-semibold);
}

.ship-test-result-desc {
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

.ship-test-result-rate {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* ── Shipping editor: tablet / mobile ── */
@media (max-width: 1200px) {
    .ship-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ship-test-panel {
        position: static;
    }
}

@media (max-width: 767px) {
    .ship-method-cards {
        display: none;
    }

    .ship-method-picker {
        display: flex;
        margin-bottom: var(--space-5);
    }

    .ship-toggle-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .ship-tier-table {
        border: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .ship-tier-head {
        display: none;
    }

    .ship-tier-row {
        grid-template-columns: minmax(0, 1fr) auto;
        border: 1px solid var(--adm-border);
        border-radius: var(--adm-radius);
    }

        .ship-tier-row:not(.is-editing) .ship-tier-cell {
            display: none;
        }

        .ship-tier-row.is-editing {
            grid-template-columns: minmax(0, 1fr);
        }

    .ship-tier-cell-label {
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-sm);
        color: var(--adm-text-muted);
    }

    .ship-tier-summary {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .ship-tier-summary-range {
        font-weight: var(--font-weight-semibold);
    }

    .ship-tier-summary-rate {
        font-size: var(--font-size-sm);
        color: var(--adm-text-muted);
    }
}

/* ── Drag-and-drop reorder (admin editor) ── */
.swag-drag-handle {
    cursor: grab;
    font-size: 1.1rem;
    color: var(--adm-text-muted);
    user-select: none;
    flex-shrink: 0;
    padding: 0 0.15rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}

    .swag-drag-handle:hover {
        opacity: 1;
    }

    .swag-drag-handle:active {
        cursor: grabbing;
    }

.swag-drag-handle-sm {
    font-size: 0.9rem;
}

.swag-drag-active {
    opacity: 0.5;
    border-style: dashed !important;
}

.swag-variant-group[draggable="true"],
.swag-variant-option-row[draggable="true"],
.swag-image-tile[draggable="true"] {
    transition: opacity 0.15s, border-style 0.15s;
}

/* ── Variant option image (admin editor) ── */
.swag-option-image-cell {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.swag-option-image-wrap {
    position: relative;
    width: 40px;
    height: 40px;
}

.swag-option-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--adm-border);
}

.swag-option-image-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.55rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swag-option-image-upload {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--adm-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .swag-option-image-upload:hover {
        border-color: var(--adm-gold);
    }

.swag-option-image-placeholder {
    font-size: 1rem;
    opacity: 0.4;
}

/* ── General product image grid (admin editor) ── */
.swag-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.swag-image-tile {
    position: relative;
    width: 100px;
    height: 100px;
}

.swag-image-tile[draggable="true"] {
    cursor: grab;
}

    .swag-image-tile[draggable="true"]:active {
        cursor: grabbing;
    }

.swag-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--adm-border);
}

.swag-image-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Tags / facets (admin editor) ──
   Tag picker for the listing editor. Chips show currently selected tags;
   the input below them takes free text with autocomplete suggestions for
   existing tenant tags. Pressing Enter creates a new tag (or matches an
   existing one by name, case-insensitive) via MarketplaceService.CreateTagAsync.
*/
.swag-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    min-height: 1.75rem;
}

.swag-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.7rem;
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--adm-text);
    line-height: 1.2;
}

.swag-tag-chip-remove {
    background: transparent;
    border: none;
    color: var(--adm-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    border-radius: 999px;
}

    .swag-tag-chip-remove:hover {
        color: var(--adm-text);
        background: rgba(255, 255, 255, 0.06);
    }

.swag-tag-chip-empty {
    font-size: 0.82rem;
    color: var(--adm-text-dim);
    font-style: italic;
    line-height: 1.75rem;
}

.swag-tag-input-wrap {
    position: relative;
    max-width: 400px;
}

.swag-tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
}

.swag-tag-suggestion {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: var(--adm-bg);
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--adm-text);
    cursor: pointer;
    line-height: 1.2;
}

    .swag-tag-suggestion:hover {
        border-color: var(--adm-cyan);
        color: var(--adm-cyan);
    }

.swag-tag-suggestions-hint {
    width: 100%;
    font-size: 0.72rem;
    color: var(--adm-text-dim);
    margin-bottom: 0.15rem;
}

/* ── Listing-table thumbnail ──
   Small product image rendered next to the title in the admin product
   list so listings are visually distinguishable at a glance. Sized to
   keep table rows compact; the placeholder variant is used when a
   listing has no images yet. */
.swag-list-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--adm-border);
    background: var(--adm-bg);
    flex-shrink: 0;
}

.swag-list-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--adm-text-dim);
    background: var(--adm-surface-2);
}

/* ── Drag-to-reorder ──
   Empty leftmost cell on the All tab that hosts the drag handle on
   own-tenant rows. External (cross-tenant) rows render the cell
   without a handle inside so column alignment is preserved. Handle
   styling (cursor, opacity, hover) and active-row styling come from
   the editor-side .swag-drag-handle / .swag-drag-active rules above —
   we reuse them so the products table feels identical to the variant
   editor's reorder UX. */
.swag-drag-cell {
    width: 24px;
    padding-right: 0 !important;
    text-align: center;
    color: var(--adm-text-dim);
}

/* ==========================================================
   Order detail (SwagShopOrderDetail.razor)
   Header + refund banner, then two columns of .adm-form-card:
   items / personalization / customer / fulfil  |  payment /
   timeline / references / refund. Below 900px the columns
   collapse into one stack with the payment summary first.
   ========================================================== */

.ord-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
}

/* ── Header ── */
.ord-head {
    margin-bottom: var(--space-5);
}

.ord-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ord-alert {
    margin-bottom: var(--space-5);
}

/* ── Refund banner ── */
.ord-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--adm-radius);
    font-weight: var(--font-weight-semibold);
}

    .ord-banner .ord-icon {
        width: var(--space-5);
        height: var(--space-5);
    }

.ord-banner-danger {
    background: var(--adm-danger-dim);
    border-color: var(--adm-danger-border);
    color: var(--adm-danger-soft);
}

.ord-banner-meta {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--adm-text-muted);
}

/* ── Layout ── */
.ord-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-5);
    align-items: start;
}

.ord-col {
    min-width: 0;
}

.ord-card-accent-success {
    border-left: 3px solid var(--adm-success);
}

.ord-card-accent-info {
    border-left: 3px solid var(--adm-cyan);
}

.ord-card-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

.ord-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ord-btn-block {
    width: 100%;
}

/* ── Line items ── */
.ord-items {
    display: flex;
    flex-direction: column;
}

.ord-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
}

    .ord-item + .ord-item {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--adm-border);
    }

.ord-item-thumb {
    display: block;
    width: var(--space-8);
    height: var(--space-8);
    object-fit: cover;
    border-radius: var(--adm-radius);
    border: 1px solid var(--adm-border);
    background: var(--adm-surface-2);
}

.ord-item-body {
    min-width: 0;
}

.ord-item-title {
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text);
}

.ord-item-meta {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

.ord-item-meta-value {
    font-weight: var(--font-weight-medium);
    color: var(--adm-text);
}

.ord-item-figures {
    display: flex;
    gap: var(--space-5);
    text-align: right;
}

.ord-figure-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--adm-text-muted);
}

.ord-figure-value {
    display: block;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.ord-figure-sub {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--adm-text-muted);
    white-space: nowrap;
}

/* ── Personalization ── */
.ord-pers-group + .ord-pers-group {
    padding-top: var(--space-4);
    border-top: 1px solid var(--adm-border);
}

.ord-pers-item-title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text-muted);
}

/* ── Label / value list ── */
.ord-dl {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

    .ord-dl dt {
        font-size: var(--font-size-sm);
        color: var(--adm-text-muted);
    }

    .ord-dl dd {
        margin: 0;
        color: var(--adm-text);
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

.ord-note {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    white-space: pre-line;
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
}

/* ── Fulfilment status line ── */
.ord-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.ord-status-ok {
    font-weight: var(--font-weight-semibold);
    color: var(--adm-success);
}

.ord-status-time {
    font-size: var(--font-size-sm);
    color: var(--adm-text-muted);
}

/* ── Money rows ── */
.ord-money {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ord-money-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--adm-text);
}

    .ord-money-row > span:last-child {
        white-space: nowrap;
    }

    .ord-money-row.is-muted {
        font-size: var(--font-size-sm);
        color: var(--adm-text-muted);
    }

    .ord-money-row.is-discount {
        color: var(--adm-success);
    }

    .ord-money-row.is-negative {
        color: var(--adm-danger-soft);
    }

    .ord-money-row.is-payout {
        font-weight: var(--font-weight-semibold);
        color: var(--adm-success);
    }

.ord-money-total {
    padding-top: var(--space-2);
    border-top: 1px solid var(--adm-border);
    font-weight: var(--font-weight-bold);
}

.ord-money-divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--adm-border);
}

.ord-money-heading {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text-dim);
}

/* ── Timeline ── */
.ord-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ord-tl-item {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}

    .ord-tl-item:last-child {
        padding-bottom: 0;
    }

    /* Connector line between dots */
    .ord-tl-item:not(:last-child)::before {
        content: "";
        position: absolute;
        top: var(--space-5);
        bottom: 0;
        left: calc(var(--space-5) / 2 - 1px);
        width: 2px;
        background: var(--adm-border);
    }

.ord-tl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    border-radius: 50%;
    border: 2px solid var(--adm-border-hover);
    background: var(--adm-surface);
    color: var(--adm-bg);
}

    .ord-tl-dot svg {
        width: var(--space-3);
        height: var(--space-3);
    }

.ord-tl-item.is-done .ord-tl-dot {
    background: var(--adm-success);
    border-color: var(--adm-success);
}

.ord-tl-item.is-refunded .ord-tl-dot {
    background: var(--adm-danger);
    border-color: var(--adm-danger);
}

.ord-tl-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text);
}

.ord-tl-time {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--adm-text-muted);
}

.ord-tl-item.is-pending .ord-tl-label,
.ord-tl-item.is-pending .ord-tl-time {
    color: var(--adm-text-dim);
}

.ord-tl-item.is-refunded .ord-tl-label {
    color: var(--adm-danger-soft);
}

/* ── Collapsible payment references ── */
.ord-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}

    .ord-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .ord-disclosure > summary:focus-visible {
        outline: none;
        border-radius: var(--adm-radius);
        box-shadow: 0 0 0 3px var(--adm-cyan-dim);
    }

.ord-disclosure-chevron {
    display: flex;
    color: var(--adm-text-muted);
    transition: transform var(--adm-transition);
}

    .ord-disclosure-chevron svg {
        width: var(--space-5);
        height: var(--space-5);
    }

.ord-disclosure[open] .ord-disclosure-chevron {
    transform: rotate(180deg);
}

.ord-disclosure-body {
    margin-top: var(--space-4);
}

.ord-ref-refund {
    color: var(--adm-danger-soft);
}

/* ── Refund confirmation ── */
.ord-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--adm-danger-dim);
    border: 1px solid var(--adm-danger-border);
    border-radius: var(--adm-radius);
}

.ord-confirm-text {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-danger-soft);
}

/* ── Order detail: tablet / mobile ── */
@media (max-width: 900px) {
    /* Columns dissolve so every card becomes a sibling in one stack;
       "order" then lifts the payment summary to the top. */
    .ord-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ord-col {
        display: contents;
    }

    .ord-card-payment {
        order: -1;
    }
}

@media (max-width: 767px) {
    .ord-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ord-item-figures {
        grid-column: 2;
        justify-content: space-between;
        text-align: left;
    }

    .ord-item-thumb {
        width: var(--space-7);
        height: var(--space-7);
    }

    .ord-dl {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

        .ord-dl dd + dt {
            margin-top: var(--space-2);
        }

    .ord-banner-meta {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ord-disclosure-chevron {
        transition: none;
    }
}

/* ==========================================================
   Product editor (SwagShopListingEditor.razor)
   Header, tabs, layout and upload come from the shared
   "Tabbed editor pages" block in admin.css; these are the
   product-only pieces.
   ========================================================== */

/* ── Images ── */
.prod-image-primary {
    position: absolute;
    left: var(--space-1);
    bottom: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-bg);
    background: var(--adm-gold);
    border-radius: 999px;
    pointer-events: none;
}

/* ── Shipping tab ── */
.prod-field-error {
    display: block;
    margin: var(--space-1) 0 0 var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--adm-danger-soft);
}

/* ── Distribution tab ── */
.prod-commission {
    max-width: 400px;
}

.prod-commission-value {
    color: var(--adm-cyan);
}

.prod-range {
    width: 100%;
    accent-color: var(--adm-cyan);
}

.prod-range-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--adm-text-dim);
}

.prod-calc {
    padding: var(--space-4);
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
}

.prod-calc-title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--adm-text-muted);
}

.prod-calc-table {
    font-size: var(--font-size-sm);
}

.prod-calc-good {
    font-weight: var(--font-weight-semibold);
    color: var(--adm-success);
}

.prod-calc-bad {
    font-weight: var(--font-weight-semibold);
    color: var(--adm-danger-soft);
}

.prod-calc-loss td {
    background: var(--adm-danger-dim);
}

.prod-calc-warn {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--adm-danger-soft);
}

.prod-calc-note {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-xs);
    color: var(--adm-text-dim);
}

/* ── Product editor: mobile ── */
@media (max-width: 767px) {
    .prod-field-error {
        margin-left: 0;
    }
}