/* ============================================================
   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 admin — two-panel layout
   ========================================================== */

.shipping-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    min-height: 500px;
    overflow: hidden;
}

.shipping-list-panel {
    border-right: 1px solid var(--adm-border);
    display: flex;
    flex-direction: column;
}

.shipping-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--adm-border);
    background: var(--adm-surface-2);
}

.shipping-method-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--adm-border);
    padding: 0.85rem 1rem;
    cursor: pointer;
    color: var(--adm-text);
    transition: background 0.12s;
}

    .shipping-method-row:hover {
        background: rgba(255,255,255,0.04);
    }

    .shipping-method-row.active {
        background: rgba(255,255,255,0.07);
        border-left: 3px solid var(--adm-gold);
    }

.shipping-editor-panel {
    padding: 1.75rem 2rem;
    background: var(--adm-bg);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .shipping-layout {
        grid-template-columns: 1fr;
    }

    .shipping-list-panel {
        border-right: none;
        border-bottom: 1px solid var(--adm-border);
    }
}

/* ── 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);
}