@import '_content/UAAS.Components/UAAS.Components.wulp12t18e.bundle.scp.css';

/* _content/Backend.HQ.Web/Components/Pages/Chat.razor.rz.scp.css */
/* Chat Page Styles */

/* ===== Layout ===== */
.chat-container[b-qp0cdjf34z] {
    user-select: text;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    gap: var(--space-4);
}

/* ===== Header Styles ===== */
.chat-header-title[b-qp0cdjf34z] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.chat-generating-badge[b-qp0cdjf34z] {
    margin-left: var(--space-4);
    font-size: var(--text-xs);
    animation: pulse-b-qp0cdjf34z 1s ease-in-out infinite;
}

.chat-status-indicators[b-qp0cdjf34z] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.chat-status-label[b-qp0cdjf34z] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.chat-model-badge[b-qp0cdjf34z] {
    font-size: var(--text-xs);
}

.chat-template-badge[b-qp0cdjf34z] {
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.15) 0%, rgba(227, 25, 55, 0.08) 100%);
    border-color: rgba(227, 25, 55, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

/* ===== Empty State ===== */
.empty-state[b-qp0cdjf34z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12);
}

.empty-icon[b-qp0cdjf34z] {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.empty-state h2[b-qp0cdjf34z] {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.empty-state p[b-qp0cdjf34z] {
    color: var(--color-text-muted);
}

.chat-not-enabled-text[b-qp0cdjf34z] {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

/* ===== Messages Area ===== */
.messages-area[b-qp0cdjf34z] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chat-messages-container-margin[b-qp0cdjf34z] {
    margin-top: var(--space-6);
}

/* ===== Welcome Message - Modern Prompt Template Design ===== */
.welcome-message[b-qp0cdjf34z] {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    margin: auto;
    max-width: 900px;
    width: 100%;
}

.welcome-icon[b-qp0cdjf34z] {
    font-size: 3.5rem;
    margin-bottom: var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.15) 0%, rgba(227, 25, 55, 0.05) 100%);
    border: 1px solid rgba(227, 25, 55, 0.2);
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 32px rgba(227, 25, 55, 0.15);
}

.welcome-message h3[b-qp0cdjf34z] {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-message > p[b-qp0cdjf34z] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-message p strong[b-qp0cdjf34z] {
    color: var(--accent);
    font-weight: 600;
    -webkit-text-fill-color: var(--accent);
}

/* ===== System Prompt Template Section ===== */
.template-section[b-qp0cdjf34z] {
    margin-bottom: var(--space-10);
}

.template-label[b-qp0cdjf34z] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-5);
}

.template-grid[b-qp0cdjf34z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .template-grid[b-qp0cdjf34z] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .template-grid[b-qp0cdjf34z] {
        grid-template-columns: 1fr;
    }
}

.template-card[b-qp0cdjf34z] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
    text-align: left;
    position: relative;
    min-height: 90px;
}

.template-card[b-qp0cdjf34z]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.template-card:hover[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.template-card:hover[b-qp0cdjf34z]::before {
    opacity: 1;
}

.template-card.template-selected[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.15) 0%, rgba(227, 25, 55, 0.05) 100%);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(227, 25, 55, 0.3), 0 8px 32px rgba(227, 25, 55, 0.15);
}

.template-card.template-selected[b-qp0cdjf34z]::before {
    background: linear-gradient(135deg, transparent, var(--accent));
    opacity: 0.5;
}

.template-icon[b-qp0cdjf34z] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

.template-selected .template-icon[b-qp0cdjf34z] {
    background: rgba(227, 25, 55, 0.2);
}

.template-info[b-qp0cdjf34z] {
    flex: 1;
    min-width: 0;
}

.template-name[b-qp0cdjf34z] {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-1);
}

.template-desc[b-qp0cdjf34z] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-check[b-qp0cdjf34z] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(227, 25, 55, 0.4);
}

/* ===== Suggestion Sections - Card Grid Layout ===== */
.suggestion-section[b-qp0cdjf34z] {
    margin-bottom: var(--space-8);
}

.suggestion-section:last-child[b-qp0cdjf34z] {
    margin-bottom: 0;
}

.suggestion-label[b-qp0cdjf34z] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.suggestion-label[b-qp0cdjf34z]::before,
.suggestion-label[b-qp0cdjf34z]::after {
    content: '';
    height: 1px;
    width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.suggestion-chips[b-qp0cdjf34z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .suggestion-chips[b-qp0cdjf34z] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .suggestion-chips[b-qp0cdjf34z] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Suggestion Cards - Modern Prompt Template Style ===== */
.suggestion-chip[b-qp0cdjf34z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    color: white;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
    font-size: 0.875rem;
    text-align: left;
    min-height: 70px;
    position: relative;
    overflow: hidden;
}

.suggestion-chip[b-qp0cdjf34z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.suggestion-chip:hover[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.suggestion-chip:hover[b-qp0cdjf34z]::before {
    opacity: 1;
}

.suggestion-chip:active[b-qp0cdjf34z] {
    transform: translateY(-1px);
}

.suggestion-chip .chip-icon[b-qp0cdjf34z] {
    font-size: 1.25rem;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Card title styling */
.suggestion-chip > span:not(.chip-icon)[b-qp0cdjf34z] {
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

/* Secondary style for day-focus suggestions - UA Red accent */
.suggestion-chip-secondary[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.12) 0%, rgba(227, 25, 55, 0.04) 100%);
    border-color: rgba(227, 25, 55, 0.25);
}

.suggestion-chip-secondary[b-qp0cdjf34z]::before {
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.suggestion-chip-secondary:hover[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.18) 0%, rgba(227, 25, 55, 0.08) 100%);
    border-color: rgba(227, 25, 55, 0.4);
    box-shadow: 0 8px 24px rgba(227, 25, 55, 0.15), 0 0 0 1px rgba(227, 25, 55, 0.1);
}

/* Action style for quick tools - Green accent */
.suggestion-chip-action[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.03) 100%);
    border-color: rgba(34, 197, 94, 0.25);
}

.suggestion-chip-action[b-qp0cdjf34z]::before {
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
}

.suggestion-chip-action:hover[b-qp0cdjf34z] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.08) 100%);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15), 0 0 0 1px rgba(34, 197, 94, 0.1);
}

/* ===== Message Bubbles ===== */
.message[b-qp0cdjf34z] {
    display: flex;
    gap: var(--space-3);
    max-width: 85%;
}

.message-user[b-qp0cdjf34z] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-assistant[b-qp0cdjf34z] {
    align-self: flex-start;
}

.message-avatar[b-qp0cdjf34z] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-xl);
}

.message-content[b-qp0cdjf34z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.message-text[b-qp0cdjf34z] {
    user-select: text;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-user .message-text[b-qp0cdjf34z] {
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-assistant .message-text[b-qp0cdjf34z] {
    background: rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 4px;
}

.message-time[b-qp0cdjf34z] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    padding: 0 var(--space-2);
}

.message-user .message-time[b-qp0cdjf34z] {
    text-align: right;
}

/* ===== Streaming Cursor ===== */
.cursor-blink[b-qp0cdjf34z] {
    animation: blink-b-qp0cdjf34z 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink-b-qp0cdjf34z {
    50% {
        opacity: 0;
    }
}

/* ===== Input Area ===== */
.input-area[b-qp0cdjf34z] {
    padding: var(--space-4);
}

.error-banner[b-qp0cdjf34z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    color: #fca5a5;
}

.error-banner button[b-qp0cdjf34z] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--space-1);
}

.input-row[b-qp0cdjf34z] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.message-input[b-qp0cdjf34z] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--text-base);
    resize: none;
    min-height: 44px;
    max-height: 120px;
    font-family: inherit;
}

.message-input:focus[b-qp0cdjf34z] {
    outline: none;
    border-color: var(--accent);
}

.message-input[b-qp0cdjf34z]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.message-input:disabled[b-qp0cdjf34z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button[b-qp0cdjf34z] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-base) var(--ease-standard);
    flex-shrink: 0;
}

.send-button:hover:not(:disabled)[b-qp0cdjf34z] {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.send-button:disabled[b-qp0cdjf34z] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Animations ===== */
.spin-inline[b-qp0cdjf34z] {
    display: inline-block;
    animation: spin-b-qp0cdjf34z 1s linear infinite;
}

@keyframes spin-b-qp0cdjf34z {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-qp0cdjf34z {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== Status Indicator Styles ===== */
.status-item[b-qp0cdjf34z] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.status-dot[b-qp0cdjf34z] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-green[b-qp0cdjf34z] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.status-yellow[b-qp0cdjf34z] {
    background: #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
    animation: blink-b-qp0cdjf34z 1s ease-in-out infinite;
}

.status-red[b-qp0cdjf34z] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* ===== Thinking Indicator ===== */
.thinking-indicator[b-qp0cdjf34z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border-bottom-left-radius: 4px;
}

.thinking-dots[b-qp0cdjf34z] {
    display: flex;
    gap: var(--space-1);
}

.thinking-dots span[b-qp0cdjf34z] {
    animation: thinking-bounce-b-qp0cdjf34z 1.4s ease-in-out infinite;
    color: var(--accent);
    font-size: 0.5rem;
}

.thinking-dots span:nth-child(1)[b-qp0cdjf34z] {
    animation-delay: 0s;
}

.thinking-dots span:nth-child(2)[b-qp0cdjf34z] {
    animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3)[b-qp0cdjf34z] {
    animation-delay: 0.4s;
}

@keyframes thinking-bounce-b-qp0cdjf34z {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.thinking-text[b-qp0cdjf34z] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

/* ===== Tool Calls ===== */
.tool-calls-container[b-qp0cdjf34z] {
    margin-bottom: var(--space-3);
}

.tool-status[b-qp0cdjf34z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(var(--accent-rgb, 239, 68, 68), 0.1);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.tool-status-icon[b-qp0cdjf34z] {
    color: var(--accent);
}

.tool-call[b-qp0cdjf34z] {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    margin-bottom: 0.35rem;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.tool-call.tool-running[b-qp0cdjf34z] {
    border-left-color: var(--accent);
    background: rgba(var(--accent-rgb, 239, 68, 68), 0.05);
}

.tool-call.tool-complete[b-qp0cdjf34z] {
    border-left-color: #22c55e;
}

.tool-header[b-qp0cdjf34z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
}

.tool-icon[b-qp0cdjf34z] {
    font-size: var(--text-xs);
}

.tool-running .tool-icon[b-qp0cdjf34z] {
    animation: spin-b-qp0cdjf34z 1s linear infinite;
    color: var(--accent);
}

.tool-complete .tool-icon[b-qp0cdjf34z] {
    color: #22c55e;
}

.tool-name[b-qp0cdjf34z] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.tool-spinner[b-qp0cdjf34z] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-qp0cdjf34z 0.8s linear infinite;
    margin-left: auto;
}

.tool-params[b-qp0cdjf34z] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    word-break: break-all;
}

/* ===== Tool Calls Summary (Historical) ===== */
.tool-calls-summary[b-qp0cdjf34z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem var(--space-2);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    margin-bottom: var(--space-2);
    font-size: 0.7rem;
}

.tool-summary-label[b-qp0cdjf34z] {
    color: rgba(255, 255, 255, 0.4);
    margin-right: var(--space-1);
}

.tool-badge[b-qp0cdjf34z] {
    padding: 0.15rem var(--space-2);
    background: rgba(var(--accent-rgb, 239, 68, 68), 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}

/* ===== Message Warning ===== */
.message-warning[b-qp0cdjf34z] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    font-size: var(--text-xs);
}

.warning-icon[b-qp0cdjf34z] {
    flex-shrink: 0;
    font-size: var(--text-sm);
}

.warning-text[b-qp0cdjf34z] {
    color: rgba(250, 204, 21, 0.9);
    line-height: 1.4;
}
/* _content/Backend.HQ.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard Page Styles */

/* ===== Header and Title ===== */
.dashboard-page-title[b-q95t12jbj5] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.dashboard-live-badge[b-q95t12jbj5] {
    margin-left: var(--space-4);
    font-size: var(--text-xs);
    animation: pulse-b-q95t12jbj5 2s ease-in-out infinite;
}

.dashboard-time-icon[b-q95t12jbj5] {
    margin-right: var(--space-2);
}

/* ===== Dashboard Content ===== */
.dashboard-content-wrapper[b-q95t12jbj5] {
    padding: 0;
}

/* ===== Cache Warming State ===== */
.dashboard-cache-warming[b-q95t12jbj5] {
    padding: var(--space-12);
    text-align: center;
}

.dashboard-cache-warming-icon[b-q95t12jbj5] {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.dashboard-cache-warming-title[b-q95t12jbj5] {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.dashboard-cache-warming-text[b-q95t12jbj5] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.dashboard-cache-warming-badge[b-q95t12jbj5] {
    margin-top: var(--space-4);
}

/* ===== Graph Hint ===== */
.dashboard-graph-hint[b-q95t12jbj5] {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    font-style: italic;
}

/* ===== Zone State Section ===== */
.dashboard-zone-section[b-q95t12jbj5] {
    margin-top: var(--space-8);
}

.dashboard-section-title[b-q95t12jbj5] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* ===== Zone Table ===== */
.dashboard-zone-table[b-q95t12jbj5] {
    width: 100%;
    color: white;
}

.dashboard-zone-table thead tr[b-q95t12jbj5] {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dashboard-zone-table th[b-q95t12jbj5] {
    padding: var(--space-4);
    font-weight: 600;
}

.dashboard-zone-table th:first-child[b-q95t12jbj5],
.dashboard-zone-table td:first-child[b-q95t12jbj5] {
    text-align: left;
}

.dashboard-zone-table th:nth-child(3)[b-q95t12jbj5],
.dashboard-zone-table th:nth-child(4)[b-q95t12jbj5],
.dashboard-zone-table th:nth-child(5)[b-q95t12jbj5],
.dashboard-zone-table th:nth-child(6)[b-q95t12jbj5],
.dashboard-zone-table td:nth-child(3)[b-q95t12jbj5],
.dashboard-zone-table td:nth-child(4)[b-q95t12jbj5],
.dashboard-zone-table td:nth-child(5)[b-q95t12jbj5],
.dashboard-zone-table td:nth-child(6)[b-q95t12jbj5] {
    text-align: center;
}

.dashboard-zone-table th:last-child[b-q95t12jbj5],
.dashboard-zone-table td:last-child[b-q95t12jbj5] {
    text-align: right;
}

.dashboard-zone-table tbody tr[b-q95t12jbj5] {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dashboard-zone-table td[b-q95t12jbj5] {
    padding: var(--space-4);
}

.dashboard-zone-name[b-q95t12jbj5] {
    font-weight: 500;
}

.dashboard-zone-count-badge[b-q95t12jbj5] {
    font-size: var(--text-base);
    font-weight: 600;
}

.dashboard-zone-browsing[b-q95t12jbj5] {
    color: #10B981;
}

.dashboard-zone-engaged[b-q95t12jbj5] {
    color: #3B82F6;
}

.dashboard-zone-assist[b-q95t12jbj5] {
    color: #E31937;
    font-weight: 600;
}

.dashboard-zone-assist-empty[b-q95t12jbj5] {
    color: rgba(255,255,255,0.3);
    font-weight: normal;
}

.dashboard-zone-status-active[b-q95t12jbj5] {
    color: #10B981;
}

.dashboard-zone-status-empty[b-q95t12jbj5] {
    color: rgba(255,255,255,0.4);
}

/* ===== No Camera Placeholder ===== */
.dashboard-no-camera[b-q95t12jbj5] {
    width: 120px;
    height: 90px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: var(--text-xs);
}

/* ===== No Data State ===== */
.dashboard-no-data[b-q95t12jbj5] {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

/* ===== Quick Actions Section ===== */
.dashboard-actions-section[b-q95t12jbj5] {
    margin-top: var(--space-8);
}

.dashboard-action-icon[b-q95t12jbj5] {
    color: inherit;
}

/* ===== System Status Section ===== */
.dashboard-system-section[b-q95t12jbj5] {
    margin-top: var(--space-8);
}

.dashboard-system-card[b-q95t12jbj5] {
    padding: var(--space-6);
}

.dashboard-system-card-spaced[b-q95t12jbj5] {
    padding: var(--space-6);
    margin-top: var(--space-4);
}

.dashboard-system-card-content[b-q95t12jbj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-system-title[b-q95t12jbj5] {
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.dashboard-system-subtitle[b-q95t12jbj5] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.dashboard-system-controls[b-q95t12jbj5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dashboard-sync-message[b-q95t12jbj5] {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.7);
}

.dashboard-reset-button[b-q95t12jbj5] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ===== Graph Height Container ===== */
.dashboard-graph-container[b-q95t12jbj5] {
    height: 400px;
}

/* ===== Animations ===== */
@keyframes pulse-b-q95t12jbj5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Main Graph Container ===== */
.main-graph-container[b-q95t12jbj5] {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.graph-header[b-q95t12jbj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.graph-title[b-q95t12jbj5] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.graph-controls[b-q95t12jbj5] {
    display: flex;
    gap: var(--space-2);
}

.time-range-btn[b-q95t12jbj5] {
    padding: var(--space-1) var(--space-3);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.time-range-btn:hover[b-q95t12jbj5] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

.time-range-btn.active[b-q95t12jbj5] {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* ===== Spin Animations ===== */
.spin[b-q95t12jbj5] {
    animation: spin-b-q95t12jbj5 1s linear infinite;
}

.spin-inline[b-q95t12jbj5] {
    display: inline-block;
    animation: spin-b-q95t12jbj5 1s linear infinite;
}

@keyframes spin-b-q95t12jbj5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Action Card States ===== */
.action-card.syncing[b-q95t12jbj5] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* _content/Backend.HQ.Web/Components/Pages/Devices.razor.rz.scp.css */
/* Devices Page Styles */

/* Page Header */
.devices-page-title[b-9x0bhjuoue] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.devices-page-subtitle[b-9x0bhjuoue] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Devices List Container */
.devices-list-container[b-9x0bhjuoue] {
    padding: var(--space-6) 0 var(--space-8) 0;
}

/* Device Card - Tile Layout with Large Icon */
.device-card[b-9x0bhjuoue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    text-align: center;
}

/* Large Icon Container */
.device-card-icon-wrapper[b-9x0bhjuoue] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.875rem;
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.device-card:hover .device-card-icon-wrapper[b-9x0bhjuoue] {
    transform: scale(1.05);
}

.device-card-icon-wrapper img[b-9x0bhjuoue] {
    width: 42px;
    height: 42px;
}

/* Status-based icon colors */
.device-card-icon-wrapper.online[b-9x0bhjuoue] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.device-card-icon-wrapper.online img[b-9x0bhjuoue] {
    filter: brightness(0) saturate(100%) invert(67%) sepia(52%) saturate(519%) hue-rotate(93deg) brightness(93%) contrast(91%);
}

.device-card-icon-wrapper.offline[b-9x0bhjuoue] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.device-card-icon-wrapper.offline img[b-9x0bhjuoue] {
    filter: brightness(0) saturate(100%) invert(52%) sepia(89%) saturate(1146%) hue-rotate(331deg) brightness(98%) contrast(92%);
}

.device-card-icon-wrapper.degraded[b-9x0bhjuoue] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

.device-card-icon-wrapper.degraded img[b-9x0bhjuoue] {
    filter: brightness(0) saturate(100%) invert(66%) sepia(55%) saturate(1005%) hue-rotate(349deg) brightness(101%) contrast(94%);
}

.device-card-icon-wrapper.maintenance[b-9x0bhjuoue] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.device-card-icon-wrapper.maintenance img[b-9x0bhjuoue] {
    filter: brightness(0) saturate(100%) invert(52%) sepia(94%) saturate(1156%) hue-rotate(196deg) brightness(103%) contrast(93%);
}

.device-card-icon-wrapper.unknown[b-9x0bhjuoue] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%);
}

.device-card-icon-wrapper.unknown img[b-9x0bhjuoue] {
    filter: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(272%) hue-rotate(182deg) brightness(87%) contrast(87%);
}

/* Status dot on icon */
.device-status-dot[b-9x0bhjuoue] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-bg, #121212);
}

.device-status-dot.online[b-9x0bhjuoue] {
    background: #4ADE80;
    box-shadow: 0 0 8px #4ADE80;
}

.device-status-dot.offline[b-9x0bhjuoue] {
    background: #F87171;
    box-shadow: 0 0 8px #F87171;
}

.device-status-dot.degraded[b-9x0bhjuoue] {
    background: #FB923C;
    box-shadow: 0 0 8px #FB923C;
}

.device-status-dot.maintenance[b-9x0bhjuoue] {
    background: #60A5FA;
}

.device-status-dot.unknown[b-9x0bhjuoue] {
    background: #6B7280;
}

/* Device Name */
.device-card-name[b-9x0bhjuoue] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Category Label */
.device-card-category[b-9x0bhjuoue] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
}

/* Device Details */
.device-card-details[b-9x0bhjuoue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    width: 100%;
    text-align: left;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.device-detail-row[b-9x0bhjuoue] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.device-detail-row svg[b-9x0bhjuoue] {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    flex-shrink: 0;
}

.device-detail-value[b-9x0bhjuoue] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.device-card-badges[b-9x0bhjuoue] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.375rem;
}

.device-badge[b-9x0bhjuoue] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.device-badge-critical[b-9x0bhjuoue] {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.device-badge-maintenance[b-9x0bhjuoue] {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

/* Footer with Device ID */
.device-card-footer[b-9x0bhjuoue] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.35);
}

.device-id[b-9x0bhjuoue] {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* Hover actions */
.device-card-actions[b-9x0bhjuoue] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transform: translateY(-4px);
    transition: all var(--duration-base) var(--ease-standard);
    z-index: 10;
}

.device-card:hover .device-card-actions[b-9x0bhjuoue],
.lister-item:hover .device-card-actions[b-9x0bhjuoue] {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices - always show actions */
@media (hover: none) {
    .device-card-actions[b-9x0bhjuoue] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navbar actions */
.navbar-actions[b-9x0bhjuoue] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.spinner-sm[b-9x0bhjuoue] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-9x0bhjuoue 0.6s linear infinite;
}

@keyframes spin-b-9x0bhjuoue {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Backend.HQ.Web/Components/Pages/DisplayDetail.razor.rz.scp.css */
/* Display Detail Page - Glass UI Design System */

.page-body[b-57ztukcobi] {
    padding: 0;
}

/* ===== Two-Column Layout ===== */
.display-detail-layout[b-57ztukcobi] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    align-items: start;
}

.display-form-column[b-57ztukcobi] {
    min-width: 0; /* Prevent grid blowout */
}

.display-viewport-column[b-57ztukcobi] {
    position: sticky;
    /* Account for sticky navbar height (90px) plus spacing */
    top: calc(var(--navbar-height, 90px) + 1rem);
}

/* Viewport Panel Styling */
.viewport-panel[b-57ztukcobi] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.viewport-panel-header[b-57ztukcobi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.viewport-panel-header h3[b-57ztukcobi] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viewport-panel-header h3 svg[b-57ztukcobi] {
    opacity: 0.6;
}

.viewport-panel-body[b-57ztukcobi] {
    padding: 0;
}

/* Hide ViewPortsRenderer's built-in header when inside panel */
/* Using !important to ensure override of ViewPortsRenderer's scoped styles */
.viewport-panel-body[b-57ztukcobi]  .vpe-viewer-header {
    display: none !important;
}

/* Adjust ViewPortsRenderer when inside panel */
.viewport-panel-body[b-57ztukcobi]  .vpe-layout-viewer {
    background: transparent !important;
    border-radius: 0 !important;
}

.viewport-panel-body[b-57ztukcobi]  .vpe-viewer-canvas-container {
    padding: 1rem !important;
}

/* Ensure table fits within the narrower panel */
.viewport-panel-body[b-57ztukcobi]  .vpe-viewer-table {
    max-height: 180px;
}

/* Empty State for Create Mode */
.viewport-empty-state[b-57ztukcobi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.viewport-empty-icon[b-57ztukcobi] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.viewport-empty-state h4[b-57ztukcobi] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.viewport-empty-state p[b-57ztukcobi] {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Edit Mode Info Banner */
.viewport-edit-info[b-57ztukcobi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.viewport-edit-info svg[b-57ztukcobi] {
    flex-shrink: 0;
    color: #3b82f6;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1100px) {
    .display-detail-layout[b-57ztukcobi] {
        grid-template-columns: 1fr;
    }

    .display-viewport-column[b-57ztukcobi] {
        position: static;
    }
}

/* Loading State */
.loading-state[b-57ztukcobi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.loading-spinner[b-57ztukcobi] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-57ztukcobi 0.8s linear infinite;
}

@keyframes spin-b-57ztukcobi {
    to { transform: rotate(360deg); }
}

.loading-state p[b-57ztukcobi] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Error State */
.error-state[b-57ztukcobi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    max-width: 450px;
    margin: 40px auto;
}

.error-icon[b-57ztukcobi] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.error-state h3[b-57ztukcobi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 12px 0;
}

.error-state p[b-57ztukcobi] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* Legacy viewport-preview-* classes removed - now using ViewPortsRenderer component */
/* _content/Backend.HQ.Web/Components/Pages/Displays.razor.rz.scp.css */
/* Displays.razor component styles */

/* Page Header */
.displays-title[b-rg05uj8tyl] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.displays-subtitle[b-rg05uj8tyl] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Lister Section */
.displays-list-section[b-rg05uj8tyl] {
}

/* Footer update timestamp spacing */
.card-footer-updated[b-rg05uj8tyl] {
    margin-left: var(--space-4);
}

/* Viewport Thumbnail */
.card-thumbnail[b-rg05uj8tyl] {
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.card-thumbnail[b-rg05uj8tyl]  .display-viewport-thumbnail {
    aspect-ratio: 16/9;
}
/* _content/Backend.HQ.Web/Components/Pages/Downloads.razor.rz.scp.css */
/* Downloads Page Styles */

/* ===== Navbar Actions ===== */
.navbar-actions[b-9cyuvnzgqq] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Button styles use global .btn from buttons.css */

.spinner[b-9cyuvnzgqq] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: var(--radius-full);
    animation: spin-b-9cyuvnzgqq 0.8s linear infinite;
}

@keyframes spin-b-9cyuvnzgqq {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Filter Tabs ===== */
.filter-tabs[b-9cyuvnzgqq] {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.filter-tab[b-9cyuvnzgqq] {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-standard);
}

.filter-tab:hover[b-9cyuvnzgqq] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.filter-tab.active[b-9cyuvnzgqq] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60A5FA;
}

/* ===== Queue Container ===== */
.queue-container[b-9cyuvnzgqq] {
    padding: var(--space-4) 0;
}

.loading-state[b-9cyuvnzgqq],
.empty-state[b-9cyuvnzgqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: rgba(255, 255, 255, 0.5);
    gap: var(--space-4);
}

.empty-icon[b-9cyuvnzgqq] {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-text[b-9cyuvnzgqq] {
    font-size: var(--text-base);
}

/* ===== Queue List ===== */
.queue-list[b-9cyuvnzgqq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.queue-item[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-standard);
}

.queue-item:hover[b-9cyuvnzgqq] {
    background: rgba(255, 255, 255, 0.04);
}

.queue-item.failed[b-9cyuvnzgqq] {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.03);
}

.queue-item.downloading[b-9cyuvnzgqq] {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.03);
}

.queue-item.completed[b-9cyuvnzgqq] {
    border-color: rgba(34, 197, 94, 0.1);
}

.item-preview[b-9cyuvnzgqq] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.item-preview img[b-9cyuvnzgqq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-placeholder[b-9cyuvnzgqq] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    opacity: 0.5;
}

.item-info[b-9cyuvnzgqq] {
    flex: 1;
    min-width: 0;
}

.item-header[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.item-name[b-9cyuvnzgqq] {
    font-weight: 500;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge[b-9cyuvnzgqq] {
    font-size: 0.6875rem;
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 500;
    text-transform: uppercase;
    flex-shrink: 0;
}

.status-badge.pending[b-9cyuvnzgqq] {
    background: rgba(234, 179, 8, 0.15);
    color: #FBBF24;
}

.status-badge.downloading[b-9cyuvnzgqq] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.status-badge.completed[b-9cyuvnzgqq] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

.status-badge.failed[b-9cyuvnzgqq] {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
}

.item-meta[b-9cyuvnzgqq] {
    margin-bottom: var(--space-1);
}

.meta-url[b-9cyuvnzgqq] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
}

.item-error[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--space-1) var(--space-2);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0;
}

.error-icon[b-9cyuvnzgqq] {
    font-size: var(--text-xs);
}

.error-text[b-9cyuvnzgqq] {
    font-size: 0.6875rem;
    color: #F87171;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-footer[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
}

.meta-retries[b-9cyuvnzgqq] {
    color: #FBBF24;
}

.item-actions[b-9cyuvnzgqq] {
    display: flex;
    gap: var(--space-1);
}

/* ===== Result Toast ===== */
.result-toast[b-9cyuvnzgqq] {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-md);
    color: #4ADE80;
    font-size: var(--text-sm);
    animation: slideIn-b-9cyuvnzgqq 0.3s var(--ease-standard);
}

.result-toast.warning[b-9cyuvnzgqq] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #FBBF24;
}

.toast-close[b-9cyuvnzgqq] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    font-size: var(--text-sm);
}

.toast-close:hover[b-9cyuvnzgqq] {
    opacity: 1;
}

@keyframes slideIn-b-9cyuvnzgqq {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== Config Panel ===== */
.config-panel[b-9cyuvnzgqq] {
    margin: var(--space-4) 0;
    padding: 0;
    overflow: hidden;
}

.config-header[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-standard);
}

.config-header:hover[b-9cyuvnzgqq] {
    background: rgba(255, 255, 255, 0.03);
}

.config-icon[b-9cyuvnzgqq] {
    font-size: var(--text-base);
}

.config-title[b-9cyuvnzgqq] {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.config-toggle[b-9cyuvnzgqq] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

.config-body[b-9cyuvnzgqq] {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.config-row[b-9cyuvnzgqq] {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-top: var(--space-4);
}

.config-item[b-9cyuvnzgqq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 140px;
}

.config-item label[b-9cyuvnzgqq] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-select[b-9cyuvnzgqq] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: white;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    cursor: pointer;
}

.config-select:focus[b-9cyuvnzgqq] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.config-select option[b-9cyuvnzgqq] {
    background: #1a1a2e;
}

.auto-refresh-indicator[b-9cyuvnzgqq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-sm);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: #4ADE80;
}

.pulse-dot[b-9cyuvnzgqq] {
    width: 8px;
    height: 8px;
    background: #4ADE80;
    border-radius: var(--radius-full);
    animation: pulse-b-9cyuvnzgqq 1.5s ease-in-out infinite;
}

@keyframes pulse-b-9cyuvnzgqq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .navbar-actions[b-9cyuvnzgqq] {
        flex-wrap: wrap;
    }

    .config-row[b-9cyuvnzgqq] {
        flex-direction: column;
        gap: var(--space-4);
    }
}
/* _content/Backend.HQ.Web/Components/Pages/Heatmaps.razor.rz.scp.css */
/* Heatmaps Page Styles */

/* Page Header */
.heatmaps-page-title[b-vi8ootfki2] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.heatmaps-page-subtitle[b-vi8ootfki2] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.heatmaps-badge-icon[b-vi8ootfki2] {
    margin-right: var(--space-2);
}

/* Filter Section */
.filter-section[b-vi8ootfki2] {
    padding: var(--space-4) 0 0 0;
}

.filter-bar[b-vi8ootfki2] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5);
    flex-wrap: wrap;
}

.filter-group[b-vi8ootfki2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-group label[b-vi8ootfki2] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.filter-select[b-vi8ootfki2] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: white;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    min-width: 150px;
    cursor: pointer;
}

.filter-select option[b-vi8ootfki2] {
    background: #1a1a2e;
    color: white;
}

.filter-select:focus[b-vi8ootfki2] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.time-range-buttons[b-vi8ootfki2] {
    display: flex;
    gap: var(--space-1);
}

.time-btn[b-vi8ootfki2] {
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--duration-base);
}

.time-btn:hover[b-vi8ootfki2] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.time-btn.active[b-vi8ootfki2] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60A5FA;
}

/* Button styles now use global .btn from buttons.css */
.btn-refresh[b-vi8ootfki2] {
    margin-left: auto;
}

/* Section Headers */
.section-header[b-vi8ootfki2] {
    margin-bottom: var(--space-4);
}

.section-header h2[b-vi8ootfki2] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}

.section-header p[b-vi8ootfki2] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Main Viewer */
.main-viewer-section[b-vi8ootfki2] {
    padding: var(--space-6) 0 0 0;
}

.main-viewer[b-vi8ootfki2] {
    padding: 0;
    overflow: hidden;
    min-height: 400px;
}

.no-camera-state[b-vi8ootfki2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-muted);
    text-align: center;
}

.no-camera-state .icon[b-vi8ootfki2] {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-camera-state p[b-vi8ootfki2] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-base);
}

.no-camera-state small[b-vi8ootfki2] {
    font-size: var(--text-sm);
    opacity: 0.7;
}

/* Camera Strip */
.camera-strip[b-vi8ootfki2] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.camera-strip[b-vi8ootfki2]::-webkit-scrollbar {
    display: none;
}

.camera-chip[b-vi8ootfki2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-base);
    white-space: nowrap;
}

.camera-chip:hover[b-vi8ootfki2] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.camera-chip.active[b-vi8ootfki2] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60A5FA;
}

.camera-icon[b-vi8ootfki2] {
    font-size: var(--text-base);
}

.camera-name[b-vi8ootfki2] {
    font-weight: 500;
}

.camera-zone[b-vi8ootfki2] {
    font-size: var(--text-xs);
    padding: calc(var(--space-1) / 2) var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

/* Zones Grid */
.zones-grid-section[b-vi8ootfki2] {
    padding: var(--space-6) 0;
}

.zones-grid[b-vi8ootfki2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.zone-heatmap-item[b-vi8ootfki2] {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-base);
}

.zone-heatmap-item:hover[b-vi8ootfki2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.zone-header[b-vi8ootfki2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zone-header h3[b-vi8ootfki2] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.zone-thumbnail[b-vi8ootfki2] {
    padding: 0;
}

.zone-meta[b-vi8ootfki2] {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Loading State */
.loading-state[b-vi8ootfki2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.loading-state .spinner[b-vi8ootfki2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #60A5FA;
    border-radius: 50%;
    animation: spin-b-vi8ootfki2 0.8s linear infinite;
    margin-bottom: var(--space-4);
}

.loading-state p[b-vi8ootfki2] {
    color: var(--color-text-muted);
    margin: 0;
}

/* Empty State */
.empty-state[b-vi8ootfki2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-state .icon[b-vi8ootfki2] {
    font-size: 4rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state h3[b-vi8ootfki2] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-xl);
}

.empty-state p[b-vi8ootfki2] {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2) 0;
    max-width: 400px;
}

.empty-state small[b-vi8ootfki2] {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

/* History Section */
.history-section[b-vi8ootfki2] {
    padding: 0 0 var(--space-8) 0;
}

.history-table[b-vi8ootfki2] {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

.history-table th[b-vi8ootfki2],
.history-table td[b-vi8ootfki2] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.history-table th[b-vi8ootfki2] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
}

.history-table td[b-vi8ootfki2] {
    font-size: var(--text-sm);
}

.history-table tbody tr:hover[b-vi8ootfki2] {
    background: rgba(255, 255, 255, 0.03);
}

.btn-view[b-vi8ootfki2] {
    padding: var(--space-1) var(--space-3);
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-sm);
    color: #60A5FA;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--duration-base);
}

.btn-view:hover[b-vi8ootfki2] {
    background: rgba(59, 130, 246, 0.25);
}

/* Animations */
.spin[b-vi8ootfki2] {
    animation: spin-b-vi8ootfki2 1s linear infinite;
}

@keyframes spin-b-vi8ootfki2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* No Store State */
.no-store-state[b-vi8ootfki2] {
    padding: var(--space-8) 0;
}

.heatmaps-no-store-card[b-vi8ootfki2] {
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.heatmaps-no-store-icon[b-vi8ootfki2] {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--space-6);
}

.heatmaps-no-store-title[b-vi8ootfki2] {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.heatmaps-no-store-text[b-vi8ootfki2] {
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .filter-bar[b-vi8ootfki2] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .filter-group[b-vi8ootfki2] {
        flex-wrap: wrap;
    }

    .time-range-buttons[b-vi8ootfki2] {
        flex-wrap: wrap;
    }

    .btn-refresh[b-vi8ootfki2] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .zones-grid[b-vi8ootfki2] {
        grid-template-columns: 1fr;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/Index.razor.rz.scp.css */
/* Landing Page Styles */

.landing-container[b-ie26wxk9o1] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.landing-content[b-ie26wxk9o1] {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: var(--space-8);
}

/* Hero Section */
.hero-section[b-ie26wxk9o1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.hero-logo[b-ie26wxk9o1] {
    margin-bottom: var(--space-4);
}

.logo-icon[b-ie26wxk9o1] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon img[b-ie26wxk9o1] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(227, 25, 55, 0.3));
}

.hero-title[b-ie26wxk9o1] {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description[b-ie26wxk9o1] {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 480px;
    margin: 0;
    line-height: 1.6;
}

.hero-actions[b-ie26wxk9o1] {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.hero-actions .btn-lg[b-ie26wxk9o1] {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* Background Orbs */
.bg-orbs[b-ie26wxk9o1] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb[b-ie26wxk9o1] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.orb-1[b-ie26wxk9o1] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation: float-b-ie26wxk9o1 20s ease-in-out infinite;
}

.orb-2[b-ie26wxk9o1] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
    animation: float-b-ie26wxk9o1 25s ease-in-out infinite reverse;
}

@keyframes float-b-ie26wxk9o1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }
    75% {
        transform: translate(-30px, -20px) scale(1.02);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .landing-content[b-ie26wxk9o1] {
        padding: var(--space-6);
    }

    .logo-icon[b-ie26wxk9o1] {
        width: 80px;
        height: 80px;
    }

    .hero-actions[b-ie26wxk9o1] {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn-lg[b-ie26wxk9o1] {
        width: 100%;
    }

    .orb-1[b-ie26wxk9o1] {
        width: 400px;
        height: 400px;
    }

    .orb-2[b-ie26wxk9o1] {
        width: 300px;
        height: 300px;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/Login.razor.rz.scp.css */
/* Login Page Component Styles */

/* ===== Auth / Login Container ===== */
.login-container[b-mz5zf6j222] {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(var(--space-4), 3vw, var(--space-8));
    position: relative;
    z-index: var(--z-base);
}

.login-card[b-mz5zf6j222] {
    background: var(--glass-surface);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-3), var(--shadow-ambient);
    width: 100%;
    max-width: 420px;
    padding: clamp(var(--space-8), 4vw, var(--space-12));
    animation: slideUp-b-mz5zf6j222 .5s var(--ease-emph);
}

@keyframes slideUp-b-mz5zf6j222 {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header[b-mz5zf6j222] {
    text-align: center;
    margin-bottom: var(--space-7);
}

.login-logo[b-mz5zf6j222] {
    width: 76px;
    height: 76px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
}

.login-logo img[b-mz5zf6j222] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.login-title[b-mz5zf6j222] {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-subtitle[b-mz5zf6j222] {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.login-form[b-mz5zf6j222] {
    display: grid;
    gap: var(--space-4);
}

/* ===== Login Extras ===== */
.login-footer[b-mz5zf6j222] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--glass-border);
}

.login-hint[b-mz5zf6j222] {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    text-align: center;
    margin-bottom: var(--space-2);
}

.login-hint strong[b-mz5zf6j222] {
    color: var(--accent);
    font-weight: 700;
}

.btn-login[b-mz5zf6j222] {
    width: 100%;
    justify-content: center;
}

.ip-notice[b-mz5zf6j222] {
    margin-top: var(--space-5);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    opacity: 0.5;
}

.form-group[b-mz5zf6j222] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ===== Background Orbs ===== */
.bg-orbs[b-mz5zf6j222] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb[b-mz5zf6j222] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: drift-b-mz5zf6j222 20s ease-in-out infinite;
}

.orb-1[b-mz5zf6j222] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227,25,55,0.25) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.orb-2[b-mz5zf6j222] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(227,25,55,0.15) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation-delay: -7s;
}

.orb-3[b-mz5zf6j222] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(227,25,55,0.18) 0%, transparent 70%);
    top: 50%;
    right: 10%;
    animation-delay: -14s;
}

@keyframes drift-b-mz5zf6j222 {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(30px, 40px);
    }
    50% {
        transform: translate(-20px, 80px);
    }
    75% {
        transform: translate(40px, -30px);
    }
}

/* ===== Landing Page ===== */
[b-mz5zf6j222] .landing-container {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-4), 3vw, var(--space-8));
    position: relative;
    z-index: var(--z-base);
}

[b-mz5zf6j222] .landing-content {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 2;
}

[b-mz5zf6j222] .hero-section {
    text-align: center;
    padding: var(--space-12) 0;
}

[b-mz5zf6j222] .hero-logo {
    margin: 0 auto var(--space-6);
}

[b-mz5zf6j222] .logo-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-3), 0 0 60px rgba(227,25,55,0.3);
    animation: float-b-mz5zf6j222 6s ease-in-out infinite;
}

[b-mz5zf6j222] .logo-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

@keyframes float-b-mz5zf6j222 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

[b-mz5zf6j222] .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

[b-mz5zf6j222] .hero-subtitle {
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    font-weight: 600;
}

[b-mz5zf6j222] .hero-description {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

[b-mz5zf6j222] .hero-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

[b-mz5zf6j222] .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin: var(--space-12) 0;
}

[b-mz5zf6j222] .feature-card {
    text-align: center;
    cursor: default;
}

[b-mz5zf6j222] .feature-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

[b-mz5zf6j222] .feature-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

[b-mz5zf6j222] .feature-card p {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    line-height: 1.6;
}

[b-mz5zf6j222] .stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-12);
    text-align: center;
}

[b-mz5zf6j222] .stat-item {
    padding: var(--space-4);
}

[b-mz5zf6j222] .stat-item .stat-value {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

[b-mz5zf6j222] .stat-item .stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 600;
}

[b-mz5zf6j222] .stat-divider {
    width: 1px;
    background: var(--glass-border);
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .login-card[b-mz5zf6j222] {
        padding: var(--space-8);
    }

    [b-mz5zf6j222] .features-grid {
        grid-template-columns: 1fr;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/MediaAssetDetail.razor.rz.scp.css */
/* Media Asset Detail Page - Glass UI Design System */
/* Follows ProductDetail.razor.css patterns */

/* Layout */
.dashboard-layout.with-preview[b-9z7xu9coup] {
    display: grid;
    grid-template-columns: 250px 1fr 800px;
}

.page-body[b-9z7xu9coup] {
    padding: 0;
}

/* Loading State */
.loading-state[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.loading-spinner[b-9z7xu9coup] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-9z7xu9coup 0.8s linear infinite;
}

@keyframes spin-b-9z7xu9coup {
    to { transform: rotate(360deg); }
}

.loading-state p[b-9z7xu9coup] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Error State */
.error-state[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    max-width: 450px;
    margin: 40px auto;
}

.error-icon[b-9z7xu9coup] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.error-state h3[b-9z7xu9coup] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 12px 0;
}

.error-state p[b-9z7xu9coup] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* ============================================
   UPLOAD SECTION (New Asset)
   ============================================ */
.upload-section[b-9z7xu9coup] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.upload-area[b-9z7xu9coup] {
    position: relative;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.12);
    overflow: hidden;
    margin:2rem 1rem;
}

/* Subtle gradient border effect */
.upload-area[b-9z7xu9coup]::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.2), rgba(236, 72, 153, 0.2));
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.upload-area:hover[b-9z7xu9coup] {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(147, 51, 234, 0.04) 100%);
    transform: translateY(-2px);
}

.upload-area:hover[b-9z7xu9coup]::before {
    opacity: 1;
}

.upload-area.dragging[b-9z7xu9coup] {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(147, 51, 234, 0.08) 100%);
    transform: scale(1.02);
}

.upload-area.dragging[b-9z7xu9coup]::before {
    opacity: 1;
}

.upload-area.dragging .upload-icon[b-9z7xu9coup] {
    animation: bounce-b-9z7xu9coup 0.6s ease infinite;
}

.upload-area.has-file[b-9z7xu9coup] {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.25);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.02) 100%);
    min-height: auto;
    padding: 2rem;
}

.upload-area.has-file[b-9z7xu9coup]::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15));
}

/* Hidden file input */
.file-input-label[b-9z7xu9coup] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 10;
}

.file-input-hidden[b-9z7xu9coup] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Override Blazor InputFile wrapper styling */
[b-9z7xu9coup] .file-input-hidden {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Upload Placeholder */
.upload-placeholder[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    pointer-events: none;
}

.upload-icon-wrapper[b-9z7xu9coup] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 51, 234, 0.1) 100%);
    margin-bottom: 0.5rem;
}

.upload-icon-wrapper[b-9z7xu9coup]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(15, 15, 25, 0.8);
}

.upload-icon[b-9z7xu9coup] {
    position: relative;
    z-index: 1;
    color: rgba(59, 130, 246, 0.9);
    transition: transform 0.3s ease, color 0.3s ease;
}

.upload-area:hover .upload-icon[b-9z7xu9coup] {
    transform: translateY(-4px);
    color: rgba(99, 160, 255, 1);
}

@keyframes bounce-b-9z7xu9coup {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.upload-text[b-9z7xu9coup] {
    text-align: center;
}

.upload-text h3[b-9z7xu9coup] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: rgba(255, 255, 255, 0.95);
}

.upload-text p[b-9z7xu9coup] {
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    font-size: 0.9375rem;
}

.browse-link[b-9z7xu9coup] {
    color: #60a5fa;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.upload-area:hover .browse-link[b-9z7xu9coup] {
    color: #93c5fd;
}

/* Supported Formats */
.supported-formats[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.format-badges[b-9z7xu9coup] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.format-badge[b-9z7xu9coup] {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 4px;
    text-transform: uppercase;
}

.format-badge.image[b-9z7xu9coup] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.format-badge.video[b-9z7xu9coup] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.format-badge.audio[b-9z7xu9coup] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.max-size[b-9z7xu9coup] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Uploaded File Preview */
.uploaded-preview[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 20;
}

.preview-image[b-9z7xu9coup] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.media-type-icon[b-9z7xu9coup] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: transform 0.2s ease;
}

.media-type-icon.video[b-9z7xu9coup] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
}

.media-type-icon.audio[b-9z7xu9coup] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.media-type-icon.ui-asset[b-9z7xu9coup] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.media-type-icon.file[b-9z7xu9coup] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(156, 163, 175, 0.08) 100%);
    border: 1px solid rgba(156, 163, 175, 0.25);
    color: #9ca3af;
}

.file-details[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.file-name[b-9z7xu9coup] {
    font-weight: 600;
    font-size: 1rem;
    word-break: break-all;
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    max-width: 400px;
}

.file-size[b-9z7xu9coup] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Button styles use global .btn from buttons.css */

.btn-remove[b-9z7xu9coup] {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
    position: relative;
    z-index: 25;
}

.btn-remove:hover[b-9z7xu9coup] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

/* Upload Error */
.upload-error[b-9z7xu9coup] {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    color: #FCA5A5;
    text-align: center;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Upload Form Fields */
.upload-form-fields[b-9z7xu9coup] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;  /* 4 columns: FILE NAME wider, others equal */
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.form-group[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-9z7xu9coup] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input[b-9z7xu9coup] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.form-input:hover[b-9z7xu9coup] {
    border-color: rgba(255, 255, 255, 0.18);
}

.form-input:focus[b-9z7xu9coup] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input option[b-9z7xu9coup] {
    background: #1a1a2e;
    color: white;
    padding: 0.5rem;
}

/* Upload Actions */
.upload-actions[b-9z7xu9coup] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.upload-actions .btn[b-9z7xu9coup] {
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   UPLOAD PROGRESS SECTION
   ============================================ */
.upload-progress-section[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1.5rem;
}

.upload-progress-header[b-9z7xu9coup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-progress-filename[b-9z7xu9coup] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-stats[b-9z7xu9coup] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.upload-progress-stats .separator[b-9z7xu9coup] {
    color: rgba(255, 255, 255, 0.3);
}

.upload-progress-section .btn-sm[b-9z7xu9coup] {
    align-self: flex-start;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.upload-progress-section .btn-ghost:hover[b-9z7xu9coup] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

/* ============================================
   PREVIEW PANEL (Right Sidebar)
   ============================================ */
.preview-panel[b-9z7xu9coup] {
    background: rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.preview-header[b-9z7xu9coup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.preview-header h3[b-9z7xu9coup] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.preview-header-actions[b-9z7xu9coup] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Consistent button styling matching ProductView */
.preview-header-actions button[b-9z7xu9coup] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-header-actions button:hover[b-9z7xu9coup] {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.btn-analysis.active[b-9z7xu9coup] {
    background: rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

.btn-analysis.active:hover[b-9z7xu9coup] {
    background: rgba(0, 255, 136, 0.25);
}

.btn-close[b-9z7xu9coup] {
    font-size: 1.25rem;
}

/* Preview Content Area */
.preview-content[b-9z7xu9coup] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.preview-image-wrapper[b-9z7xu9coup] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.preview-media[b-9z7xu9coup] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Contain the analysis overlay within the image wrapper */
.preview-image-wrapper[b-9z7xu9coup]  .analysis-overlay {
    border-radius: 8px;
}

.audio-preview[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 2rem;
}

.audio-icon[b-9z7xu9coup] {
    font-size: 5rem;
    opacity: 0.4;
}

.audio-preview audio[b-9z7xu9coup] {
    width: 100%;
    max-width: 320px;
}

/* Preview Info Section */
.preview-info[b-9z7xu9coup] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.info-row[b-9z7xu9coup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child[b-9z7xu9coup] {
    border-bottom: none;
}

.info-row .label[b-9z7xu9coup] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.info-row .value[b-9z7xu9coup] {
    font-weight: 500;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   CUSTOM SECTIONS (File Info, Approval)
   ============================================ */
.file-info-grid[b-9z7xu9coup] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 0.5rem 0;
}

.info-item[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-item label[b-9z7xu9coup] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.info-value[b-9z7xu9coup] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.info-value.mono[b-9z7xu9coup] {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Approval Section */
.approval-info[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.status-display[b-9z7xu9coup] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    width: fit-content;
}

.status-display.pending[b-9z7xu9coup] {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #FBBF24;
}

.status-display.approved[b-9z7xu9coup] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ADE80;
}

.status-display.rejected[b-9z7xu9coup] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #F87171;
}

.status-icon[b-9z7xu9coup] {
    font-size: 1.125rem;
}

.status-text[b-9z7xu9coup] {
    font-weight: 600;
    font-size: 0.9375rem;
}

.approval-details[b-9z7xu9coup] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 0.25rem;
}

/* Button variants use global .btn from buttons.css */

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1600px) {
    .dashboard-layout.with-preview[b-9z7xu9coup] {
        grid-template-columns: 250px 1fr 600px;
    }
}

@media (max-width: 1400px) {
    .dashboard-layout.with-preview[b-9z7xu9coup] {
        grid-template-columns: 250px 1fr 500px;
    }
}

@media (max-width: 1200px) {
    .dashboard-layout.with-preview[b-9z7xu9coup] {
        grid-template-columns: 250px 1fr;
    }

    .preview-panel[b-9z7xu9coup] {
        display: none;
    }
}

@media (max-width: 900px) {
    .upload-form-fields[b-9z7xu9coup] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .upload-section[b-9z7xu9coup] {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }

    .upload-area[b-9z7xu9coup] {
        padding: 2rem 1.5rem;
        min-height: 280px;
    }

    .upload-icon-wrapper[b-9z7xu9coup] {
        width: 80px;
        height: 80px;
    }

    .upload-icon[b-9z7xu9coup] {
        width: 44px !important;
        height: 44px !important;
    }

    .upload-text h3[b-9z7xu9coup] {
        font-size: 1.125rem;
    }

    .format-badges[b-9z7xu9coup] {
        gap: 0.375rem;
    }

    .format-badge[b-9z7xu9coup] {
        padding: 0.2rem 0.5rem;
        font-size: 0.625rem;
    }

    .upload-form-fields[b-9z7xu9coup] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .file-info-grid[b-9z7xu9coup] {
        grid-template-columns: 1fr;
    }

    .upload-actions[b-9z7xu9coup] {
        flex-direction: column;
    }

    .upload-actions .btn[b-9z7xu9coup] {
        width: 100%;
        justify-content: center;
        min-width: unset;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/MediaAssets.razor.rz.scp.css */
/* Media Assets Page Styles */

/* Container Padding */
.media-filter-container[b-n081hjo5ac] {
    padding: var(--space-4) 0 0 0;
}

.media-lister-container[b-n081hjo5ac] {
    padding: var(--space-6) 0 var(--space-8) 0;
}

.pending-badge[b-n081hjo5ac] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem var(--space-3);
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: var(--radius-sm);
    color: #FBBF24;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.pending-badge:hover[b-n081hjo5ac] {
    background: rgba(234, 179, 8, 0.25);
}

/* Media Card - Compact */
.media-card[b-n081hjo5ac] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.media-thumbnail[b-n081hjo5ac] {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.media-thumbnail img[b-n081hjo5ac],
.media-thumbnail video[b-n081hjo5ac] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail[b-n081hjo5ac] {
    pointer-events: none;
}

.thumbnail-placeholder[b-n081hjo5ac] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    opacity: 0.3;
}

.video-overlay[b-n081hjo5ac] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.media-card:hover .video-overlay[b-n081hjo5ac] {
    opacity: 1;
}

.play-icon[b-n081hjo5ac] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: var(--gray-850);
    font-size: 0.75rem;
    padding-left: 2px;
}

.duration-badge[b-n081hjo5ac] {
    position: absolute;
    bottom: var(--space-1);
    right: var(--space-1);
    padding: 0.0625rem var(--space-1);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.5625rem;
    font-family: var(--font-mono);
    border-radius: 0.125rem;
}

.status-badge[b-n081hjo5ac] {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.5rem;
}

.status-badge.pending[b-n081hjo5ac] {
    background: rgba(234, 179, 8, 0.9);
    color: var(--gray-850);
}

.status-badge.approved[b-n081hjo5ac] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.status-badge.rejected[b-n081hjo5ac] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

/* Media Info - Compact */
.media-info[b-n081hjo5ac] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.media-header[b-n081hjo5ac] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-1);
}

.media-name[b-n081hjo5ac] {
    font-size: 0.625rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.media-actions[b-n081hjo5ac] {
    display: none;
    gap: var(--space-1);
}

.media-card:hover .media-actions[b-n081hjo5ac] {
    display: flex;
}

/* btn-icon - styles moved to site.css */

.btn-approve:hover[b-n081hjo5ac] {
    background: rgba(34, 197, 94, 0.3);
}

.btn-reject:hover[b-n081hjo5ac] {
    background: rgba(239, 68, 68, 0.3);
}

/* Media Meta - Compact */
.media-meta[b-n081hjo5ac] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.type-badge[b-n081hjo5ac] {
    font-size: 0.5rem;
    padding: 0.0625rem var(--space-1);
    border-radius: 0.125rem;
    text-transform: uppercase;
    font-weight: 600;
}

.type-badge.image[b-n081hjo5ac] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.type-badge.video[b-n081hjo5ac] {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
}

.type-badge.audio[b-n081hjo5ac] {
    background: rgba(236, 72, 153, 0.15);
    color: #F472B6;
}

.size-info[b-n081hjo5ac] {
    font-size: 0.5rem;
    color: var(--color-text-muted);
}

.category-badge[b-n081hjo5ac] {
    font-size: 0.5rem;
    padding: 0.0625rem 0.125rem;
    border-radius: 0.125rem;
}

.category-badge.hq[b-n081hjo5ac] {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
}

.category-badge.store[b-n081hjo5ac] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

.category-badge.zone[b-n081hjo5ac] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.category-badge.product[b-n081hjo5ac] {
    background: rgba(234, 179, 8, 0.15);
    color: #FBBF24;
}

.source-info[b-n081hjo5ac] {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.aspect-ratio[b-n081hjo5ac] {
    font-size: 0.5rem;
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
}

/* Media Footer - Compact */
.media-footer[b-n081hjo5ac] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: 0.125rem;
}

.created-date[b-n081hjo5ac] {
    font-size: 0.5rem;
    color: var(--color-text-subtle);
}

.approver[b-n081hjo5ac] {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .pending-badge[b-n081hjo5ac] {
        margin-left: 0;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/OverlayDetail.razor.rz.scp.css */
.overlay-form[b-sjg4btaz5y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 900px;
}

.form-section[b-sjg4btaz5y] {
    padding: 1.25rem;
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, var(--glass-surface) 0%, transparent 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
}

/* Give each section decreasing z-index so dropdowns appear above lower sections */
.form-section:nth-child(1)[b-sjg4btaz5y] { z-index: 8; }
.form-section:nth-child(2)[b-sjg4btaz5y] { z-index: 7; }
.form-section:nth-child(3)[b-sjg4btaz5y] { z-index: 6; }
.form-section:nth-child(4)[b-sjg4btaz5y] { z-index: 5; }
.form-section:nth-child(5)[b-sjg4btaz5y] { z-index: 4; }
.form-section:nth-child(6)[b-sjg4btaz5y] { z-index: 3; }
.form-section:nth-child(7)[b-sjg4btaz5y] { z-index: 2; }
.form-section:nth-child(8)[b-sjg4btaz5y] { z-index: 1; }

.section-title[b-sjg4btaz5y] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--color-text);
}

.section-desc[b-sjg4btaz5y] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
}

.form-grid[b-sjg4btaz5y] {
    display: grid;
    gap: 1rem;
}

.form-grid.cols-2[b-sjg4btaz5y] {
    grid-template-columns: 1fr 1fr;
}

.form-grid.cols-3[b-sjg4btaz5y] {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-grid.cols-4[b-sjg4btaz5y] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .form-grid.cols-2[b-sjg4btaz5y],
    .form-grid.cols-3[b-sjg4btaz5y],
    .form-grid.cols-4[b-sjg4btaz5y] {
        grid-template-columns: 1fr;
    }
}

.form-field[b-sjg4btaz5y] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-field label[b-sjg4btaz5y] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.form-field .required[b-sjg4btaz5y] {
    color: #ef4444;
}

.form-field input[type="text"][b-sjg4btaz5y],
.form-field input[type="number"][b-sjg4btaz5y],
.form-field select[b-sjg4btaz5y] {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    color: var(--color-text);
    font-size: 0.875rem;
}

.form-field input:disabled[b-sjg4btaz5y],
.form-field select:disabled[b-sjg4btaz5y] {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-field input:focus[b-sjg4btaz5y],
.form-field select:focus[b-sjg4btaz5y] {
    outline: none;
    border-color: var(--color-primary);
}

.form-field input[type="range"][b-sjg4btaz5y] {
    width: 100%;
    cursor: pointer;
}

.checkbox-label[b-sjg4btaz5y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"][b-sjg4btaz5y] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.help-text[b-sjg4btaz5y] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.text-muted[b-sjg4btaz5y] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Display checkboxes */
.display-checkboxes[b-sjg4btaz5y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.375rem;
}

.checkbox-item[b-sjg4btaz5y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.checkbox-item:hover[b-sjg4btaz5y] {
    background: rgba(255, 255, 255, 0.05);
}

.checkbox-item input[type="checkbox"][b-sjg4btaz5y] {
    width: 1rem;
    height: 1rem;
}

/* Asset display */
.asset-display[b-sjg4btaz5y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.375rem;
}

.asset-thumb[b-sjg4btaz5y] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.25rem;
    background: #1e293b;
}

/* Loading/Error states */
.loading-state[b-sjg4btaz5y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
}

.loading-spinner[b-sjg4btaz5y] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-sjg4btaz5y 1s linear infinite;
}

@keyframes spin-b-sjg4btaz5y {
    to { transform: rotate(360deg); }
}

.error-state[b-sjg4btaz5y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    gap: 1rem;
}

.error-state h3[b-sjg4btaz5y] {
    margin: 0;
    color: #ef4444;
}

.error-state p[b-sjg4btaz5y] {
    margin: 0;
    color: var(--color-text-muted);
}

/* Button styles use global .btn from buttons.css */

.page-title[b-sjg4btaz5y] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

.page-subtitle[b-sjg4btaz5y] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: var(--space-1) 0 0 0;
}

/* Collapsible sections */
.form-section.collapsible .section-title[b-sjg4btaz5y] {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.form-section.collapsible .section-title:hover[b-sjg4btaz5y] {
    color: var(--color-primary);
}

.section-toggle[b-sjg4btaz5y] {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-text-muted);
    width: 24px;
    text-align: center;
}

/* Filter and shadow presets */
.filter-presets[b-sjg4btaz5y],
.shadow-presets[b-sjg4btaz5y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.preset-label[b-sjg4btaz5y] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.btn-preset[b-sjg4btaz5y] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-preset:hover:not(:disabled)[b-sjg4btaz5y] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-preset:disabled[b-sjg4btaz5y] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Color input wrapper */
.color-input-wrapper[b-sjg4btaz5y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.color-input-wrapper input[type="color"][b-sjg4btaz5y] {
    width: 40px;
    height: 32px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
}

.color-input-wrapper input[type="color"][b-sjg4btaz5y]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-input-wrapper input[type="color"][b-sjg4btaz5y]::-webkit-color-swatch {
    border-radius: 2px;
    border: none;
}

.color-text-input[b-sjg4btaz5y] {
    flex: 1;
    min-width: 80px;
}

/* Range slider styling */
.form-field input[type="range"][b-sjg4btaz5y] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.form-field input[type="range"][b-sjg4btaz5y]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.form-field input[type="range"][b-sjg4btaz5y]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.form-field input[type="range"][b-sjg4btaz5y]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.form-field input[type="range"]:disabled[b-sjg4btaz5y] {
    opacity: 0.5;
}

.form-field input[type="range"]:disabled[b-sjg4btaz5y]::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* Form actions */
.form-actions[b-sjg4btaz5y] {
    display: flex;
    gap: 0.5rem;
}

/* More z-index for additional sections */
.form-section:nth-child(9)[b-sjg4btaz5y] { z-index: 0; }
.form-section:nth-child(10)[b-sjg4btaz5y] { z-index: 0; }
/* _content/Backend.HQ.Web/Components/Pages/Overlays.razor.rz.scp.css */
.overlays-list-section[b-n9pam0g455] {
    margin-top: 1rem;
}

.badge-inactive[b-n9pam0g455] {
    background-color: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.badge-purple[b-n9pam0g455] {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* Thumbnail container */
.card-thumbnail[b-n9pam0g455] {
    width: 100%;
    height: 120px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.card-thumbnail img[b-n9pam0g455] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-placeholder[b-n9pam0g455] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.thumbnail-icon[b-n9pam0g455] {
    font-size: 2rem;
    color: #64748b;
}
/* _content/Backend.HQ.Web/Components/Pages/Playlists.razor.rz.scp.css */
/* Playlists Page Styles */

/* Header */
.playlists-header-title[b-jdo7vhmtkr] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.playlists-header-subtitle[b-jdo7vhmtkr] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Filter Container */
.playlists-filter-container[b-jdo7vhmtkr] {
    padding: var(--space-4) 0 0 0;
}

/* Lister Container */
.playlists-lister-container[b-jdo7vhmtkr] {
    padding: var(--space-6) 0 var(--space-8) 0;
}

/* Playlist Card */
.playlist-card[b-jdo7vhmtkr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-2);
}

.playlist-thumbnail[b-jdo7vhmtkr] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.playlist-thumbnail img[b-jdo7vhmtkr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-placeholder[b-jdo7vhmtkr] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.3;
}

/* Thumbnail Grid for Asset Previews */
.playlist-thumb-grid[b-jdo7vhmtkr] {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 2px;
}

.playlist-thumb-grid-1[b-jdo7vhmtkr] {
    grid-template: 1fr / 1fr;
}

.playlist-thumb-grid-2[b-jdo7vhmtkr] {
    grid-template: 1fr / 1fr 1fr;
}

.playlist-thumb-grid-3[b-jdo7vhmtkr] {
    grid-template: 1fr 1fr / 1fr 1fr;
}

.playlist-thumb-grid-3 .playlist-thumb-cell:last-child[b-jdo7vhmtkr] {
    grid-column: span 2;
}

.playlist-thumb-grid-4[b-jdo7vhmtkr] {
    grid-template: 1fr 1fr / 1fr 1fr;
}

.playlist-thumb-cell[b-jdo7vhmtkr] {
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.03);
}

.status-badge[b-jdo7vhmtkr] {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.status-badge.active[b-jdo7vhmtkr] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.status-badge.inactive[b-jdo7vhmtkr] {
    background: rgba(107, 114, 128, 0.9);
    color: white;
}

.duration-badge[b-jdo7vhmtkr] {
    position: absolute;
    bottom: var(--space-1);
    right: var(--space-1);
    padding: 0.125rem var(--space-1);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
}

.loop-badge[b-jdo7vhmtkr] {
    position: absolute;
    bottom: var(--space-1);
    left: var(--space-1);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    font-size: 0.625rem;
    border-radius: var(--radius-full);
}

/* Playlist Info */
.playlist-info[b-jdo7vhmtkr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.playlist-header[b-jdo7vhmtkr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}

.playlist-name[b-jdo7vhmtkr] {
    font-size: 1rem;
    font-family: 'Neue Plak', var(--font-sans);
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-description[b-jdo7vhmtkr] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-actions[b-jdo7vhmtkr] {
    display: none;
    gap: var(--space-1);
}

.playlist-card:hover .playlist-actions[b-jdo7vhmtkr] {
    display: flex;
}

/* Playlist Meta */
.playlist-meta[b-jdo7vhmtkr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.type-badge[b-jdo7vhmtkr] {
    font-size: 0.625rem;
    padding: 0.125rem var(--space-1);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 600;
}

.type-badge.default[b-jdo7vhmtkr] {
    background: rgba(107, 114, 128, 0.15);
    color: #9CA3AF;
}

.type-badge.event[b-jdo7vhmtkr] {
    background: rgba(236, 72, 153, 0.15);
    color: #F472B6;
}

.type-badge.promotional[b-jdo7vhmtkr] {
    background: rgba(249, 115, 22, 0.15);
    color: #FB923C;
}

.type-badge.ambient[b-jdo7vhmtkr] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

.type-badge.zone[b-jdo7vhmtkr] {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.type-badge.product[b-jdo7vhmtkr] {
    background: rgba(249, 115, 22, 0.15);
    color: #FB923C;
}

.asset-count[b-jdo7vhmtkr] {
    font-size: 0.625rem;
    color: var(--color-text-muted);
}

.schedule-info[b-jdo7vhmtkr] {
    display: flex;
    gap: var(--space-2);
    font-size: 0.625rem;
    color: var(--color-text-subtle);
}

/* Playlist Footer */
.playlist-footer[b-jdo7vhmtkr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-1);
}

.created-date[b-jdo7vhmtkr] {
    font-size: 0.625rem;
    color: var(--color-text-subtle);
}

/* Responsive filter-bar styles moved to site.css */
/* _content/Backend.HQ.Web/Components/Pages/ProductDetail.razor.rz.scp.css */
/* Product Detail Page - Glass UI Design System */

.page-body[b-9qzxc2oo4w] {
    padding:0;
}

/* Loading State */
.loading-state[b-9qzxc2oo4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.loading-spinner[b-9qzxc2oo4w] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-9qzxc2oo4w 0.8s linear infinite;
}

@keyframes spin-b-9qzxc2oo4w {
    to { transform: rotate(360deg); }
}

.loading-state p[b-9qzxc2oo4w] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Error State */
.error-state[b-9qzxc2oo4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    max-width: 450px;
    margin: 40px auto;
}

.error-icon[b-9qzxc2oo4w] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.error-state h3[b-9qzxc2oo4w] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 12px 0;
}

.error-state p[b-9qzxc2oo4w] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* SKU Inventory Table */
.sku-section[b-9qzxc2oo4w] {
    padding: var(--space-5);
}

.sku-section-header[b-9qzxc2oo4w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--glass-border);
}

.sku-section-header h3[b-9qzxc2oo4w] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
}

.sku-count[b-9qzxc2oo4w] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
}

.sku-table-wrapper[b-9qzxc2oo4w] {
    overflow-x: auto;
}

.sku-table[b-9qzxc2oo4w] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.sku-table th[b-9qzxc2oo4w] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
}

.sku-table td[b-9qzxc2oo4w] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--color-text);
}

.sku-table tbody tr:hover[b-9qzxc2oo4w] {
    background: rgba(255, 255, 255, 0.02);
}

.sku-table tbody tr.out-of-stock[b-9qzxc2oo4w] {
    opacity: 0.6;
}

.sku-table tfoot td[b-9qzxc2oo4w] {
    padding: var(--space-4);
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.1);
}

.sku-table .text-right[b-9qzxc2oo4w] {
    text-align: right;
}

.sku-table .text-center[b-9qzxc2oo4w] {
    text-align: center;
}

.size-badge[b-9qzxc2oo4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: var(--space-1) var(--space-2);
    background: color-mix(in oklab, var(--primary), transparent 85%);
    border: 1px solid color-mix(in oklab, var(--primary), transparent 70%);
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--primary);
}

.sku-cell[b-9qzxc2oo4w] {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.stock-qty[b-9qzxc2oo4w] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stock-qty.zero[b-9qzxc2oo4w] {
    color: var(--error);
}

.stock-qty.low[b-9qzxc2oo4w] {
    color: var(--warning);
}

.stock-qty.na[b-9qzxc2oo4w] {
    color: var(--color-text-subtle);
}

.sku-table tbody tr.inactive-row[b-9qzxc2oo4w] {
    opacity: 0.5;
}

.sku-count-badge[b-9qzxc2oo4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

.section-actions[b-9qzxc2oo4w] {
    display: flex;
    gap: var(--space-2);
}

/* Splitter Integration */
[b-9qzxc2oo4w] .product-splitter {
    flex: 1;
    min-width: 0;
    height: 100%;
}

[b-9qzxc2oo4w] .splitter-panel-content {
    height: 100%;
    overflow-y: auto;
}

[b-9qzxc2oo4w] .product-preview-panel {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Override ProductView fixed width when inside splitter */
[b-9qzxc2oo4w] .product-preview-panel .preview-panel {
    width: 100% !important;
    max-width: 100%;
    border-left: none;
}

[b-9qzxc2oo4w] .product-preview-panel .preview-panel.expanded {
    width: 100% !important;
}

/* Ensure preview content scales */
[b-9qzxc2oo4w] .product-preview-panel .preview-content {
    width: 100%;
}

/* Hide the toggle button since splitter handles resizing */
[b-9qzxc2oo4w] .product-preview-panel .preview-toggle {
    display: none;
}

/* Make gallery scale properly */
[b-9qzxc2oo4w] .product-preview-panel .preview-gallery {
    width: 100%;
}

[b-9qzxc2oo4w] .product-preview-panel .gallery-container {
    width: 100%;
}

/* Product info panel responsive */
[b-9qzxc2oo4w] .product-preview-panel .product-info-panel {
    width: 100%;
    flex-wrap: wrap;
}
/* _content/Backend.HQ.Web/Components/Pages/Products.razor.rz.scp.css */
/* Products Page Styles */

/* Navbar Actions */
.navbar-actions[b-6qflvyi6yi] {
    display: flex;
    gap: var(--space-2);
}

.btn-import[b-6qflvyi6yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(227, 25, 55, 0.1);
    border: 1px solid rgba(227, 25, 55, 0.3);
    border-radius: var(--radius-md);
    color: #E31937;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-import:hover[b-6qflvyi6yi] {
    background: rgba(227, 25, 55, 0.2);
    border-color: #E31937;
}

/* Page Header */
.products-title[b-6qflvyi6yi] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.products-subtitle[b-6qflvyi6yi] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.products-lister-wrapper[b-6qflvyi6yi] {
    padding: var(--space-4) 0 var(--space-8) 0;
}

/* Product Card - domain-specific layout with images */
.product-card[b-6qflvyi6yi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-2);
}

.product-image[b-6qflvyi6yi] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin:0.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.product-image img[b-6qflvyi6yi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-6qflvyi6yi] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    opacity: 0.3;
}

.out-of-stock-badge[b-6qflvyi6yi] {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    padding: 0.125rem var(--space-1);
    background: rgba(239, 68, 68, 0.9);
    color: white;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0.125rem;
}

/* Product Info */
.product-info[b-6qflvyi6yi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.product-header[b-6qflvyi6yi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-1);
}

.product-names[b-6qflvyi6yi] {
    flex: 1;
    min-width: 0;
}

.product-name[b-6qflvyi6yi] {    
    font-size: 1.2rem;
    font-family: 'Neue Plak';
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name-cn[b-6qflvyi6yi] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 0.0625rem;
    font-family: var(--font-cjk);
}

/* Meta - hidden by default */
.product-meta[b-6qflvyi6yi] {
    display: none;
}

.product-sku[b-6qflvyi6yi] {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--color-text-muted);
    background: var(--glass-surface);
    padding: 0.0625rem var(--space-1);
    border-radius: 0.125rem;
}

.product-category[b-6qflvyi6yi] {
    font-size: 0.5rem;
    color: rgba(59, 130, 246, 0.9);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.0625rem var(--space-1);
    border-radius: 0.125rem;
}

/* Price Row */
.product-price-row[b-6qflvyi6yi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-price[b-6qflvyi6yi] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #4ade80;
}

/* Stock - hidden by default */
.product-stock[b-6qflvyi6yi] {
    display: none;
}

.stock-badge[b-6qflvyi6yi] {
    font-size: 0.5rem;
    padding: 0.0625rem var(--space-1);
    border-radius: 0.125rem;
}

.stock-badge.in-stock[b-6qflvyi6yi] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.stock-badge.out-of-stock[b-6qflvyi6yi] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* Sizes - hidden by default */
.product-sizes[b-6qflvyi6yi] {
    display: none;
}

.size-tag[b-6qflvyi6yi] {
    font-size: 0.5rem;
    padding: 0.0625rem var(--space-1);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 0.125rem;
    color: var(--color-text-muted);
}

.size-more[b-6qflvyi6yi] {
    font-size: 0.5rem;
    color: var(--color-text-subtle);
    padding: 0.0625rem 0.125rem;
}

/* Footer - hidden by default */
.product-footer[b-6qflvyi6yi] {
    display: none;
}

.status-dot[b-6qflvyi6yi] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.status-dot.active[b-6qflvyi6yi] {
    background: #4ade80;
}

.status-dot.inactive[b-6qflvyi6yi] {
    background: var(--gray-500);
}

.status-text[b-6qflvyi6yi] {
    font-size: 0.5rem;
    color: var(--color-text-muted);
}

.ai-badge[b-6qflvyi6yi] {
    margin-left: auto;
    font-size: 0.5rem;
    padding: 0.0625rem var(--space-1);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 0.125rem;
    color: #c084fc;
}
/* _content/Backend.HQ.Web/Components/Pages/Settings.razor.rz.scp.css */
/* Settings Page Styles */

/* Page Header */
.settings-header-title[b-ivobsrcs1p] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.settings-header-description[b-ivobsrcs1p] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Settings Container */
.settings-container[b-ivobsrcs1p] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    padding: 0;
}

/* Settings Navigation */
.settings-nav[b-ivobsrcs1p] {
    padding: var(--space-2);
    height: fit-content;
    position: sticky;
    top: var(--space-4);
}

.settings-nav-item[b-ivobsrcs1p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: var(--text-sm);
    text-align: left;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
}

.settings-nav-item:hover[b-ivobsrcs1p] {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.settings-nav-item.active[b-ivobsrcs1p] {
    background: rgba(227, 25, 55, 0.15);
    color: #fff;
}

.nav-icon[b-ivobsrcs1p] {
    font-size: var(--text-lg);
}

/* Settings Content */
.settings-content[b-ivobsrcs1p] {
    min-height: 500px;
}

.settings-section[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.settings-card[b-ivobsrcs1p] {
    padding: var(--space-6);
}

.settings-title[b-ivobsrcs1p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-4) 0;
}

.title-icon[b-ivobsrcs1p] {
    font-size: var(--text-xl);
}

.settings-description[b-ivobsrcs1p] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4) 0;
}

/* Settings Form */
.settings-form[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-group[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label[b-ivobsrcs1p] {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
}

.form-control[b-ivobsrcs1p] {
    padding: 0.625rem 0.875rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--text-sm);
    transition: border-color var(--duration-base) var(--ease-standard);
}

.form-control:focus[b-ivobsrcs1p] {
    outline: none;
    border-color: rgba(227, 25, 55, 0.5);
}

.form-control:disabled[b-ivobsrcs1p] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Toggle Switch */
.toggle-group[b-ivobsrcs1p] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.toggle[b-ivobsrcs1p] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input[b-ivobsrcs1p] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-ivobsrcs1p] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    transition: all var(--duration-slow) var(--ease-standard);
}

.toggle-slider[b-ivobsrcs1p]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform var(--duration-slow) var(--ease-standard);
}

.toggle input:checked + .toggle-slider[b-ivobsrcs1p] {
    background: var(--accent);
}

.toggle input:checked + .toggle-slider[b-ivobsrcs1p]:before {
    transform: translateX(20px);
}

/* Settings Actions */
.settings-actions[b-ivobsrcs1p] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Roles List */
.roles-list[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.role-item[b-ivobsrcs1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
}

.role-name[b-ivobsrcs1p] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.role-desc[b-ivobsrcs1p] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* Status Indicator */
.status-indicator[b-ivobsrcs1p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
}

.status-indicator .status-dot[b-ivobsrcs1p] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-indicator.connected .status-dot[b-ivobsrcs1p] {
    background: var(--success);
}

.status-indicator.disconnected .status-dot[b-ivobsrcs1p] {
    background: var(--error);
}

.status-indicator.unchecked .status-dot[b-ivobsrcs1p] {
    background: var(--gray-500, #6b7280);
}

.status-latency[b-ivobsrcs1p] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-left: var(--space-1);
}

/* Sync Status Panel */
.sync-status-panel[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.sync-status-row[b-ivobsrcs1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sync-label[b-ivobsrcs1p] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.sync-value[b-ivobsrcs1p] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.sync-badge[b-ivobsrcs1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.sync-badge.running[b-ivobsrcs1p] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.sync-badge.idle[b-ivobsrcs1p] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.sync-pulse[b-ivobsrcs1p] {
    width: 8px;
    height: 8px;
    background: var(--info);
    border-radius: 50%;
    animation: pulse-b-ivobsrcs1p 1.5s infinite;
}

@keyframes pulse-b-ivobsrcs1p {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Text colors */
.text-success[b-ivobsrcs1p] { color: var(--success); }
.text-warning[b-ivobsrcs1p] { color: var(--warning); }
.text-info[b-ivobsrcs1p] { color: var(--info); }
.text-muted[b-ivobsrcs1p] { color: var(--color-text-muted); }

/* Settings Actions Top (for section-level actions) */
.settings-actions-top[b-ivobsrcs1p] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

/* Code style for info values */
.info-value.code[b-ivobsrcs1p] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: rgba(255,255,255,0.05);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* Settings Hint */
.settings-hint[b-ivobsrcs1p] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-top: var(--space-2);
}

/* Danger Zone Card */
.danger-zone[b-ivobsrcs1p] {
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.05);
}

.danger-zone .settings-title[b-ivobsrcs1p] {
    color: var(--error, #dc3545);
}

/* Danger Action Row */
.danger-action[b-ivobsrcs1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.danger-action:first-of-type[b-ivobsrcs1p] {
    margin-top: var(--space-4);
}

.danger-action-info[b-ivobsrcs1p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.danger-action-info strong[b-ivobsrcs1p] {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.danger-action-info span[b-ivobsrcs1p] {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .settings-container[b-ivobsrcs1p] {
        grid-template-columns: 1fr;
    }

    .settings-nav[b-ivobsrcs1p] {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .settings-nav-item[b-ivobsrcs1p] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .danger-action[b-ivobsrcs1p] {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .danger-action-info[b-ivobsrcs1p] {
        align-items: center;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/SignagePreview.razor.rz.scp.css */
/* SignagePreview Page Styles */

.navbar-title h1[b-etu1sufijv] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

.navbar-subtitle[b-etu1sufijv] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: var(--space-1) 0 0 0;
}

.navbar-actions[b-etu1sufijv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.store-selector-compact[b-etu1sufijv] {
    min-width: 200px;
}

.store-selector-compact[b-etu1sufijv]  .store-selector-container {
    margin: 0;
}

.store-selector-compact[b-etu1sufijv]  .store-selector-label {
    display: none;
}

.current-display-name[b-etu1sufijv] {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    padding: 0 var(--space-2);
}

.preview-controls[b-etu1sufijv] {
    display: flex;
    gap: var(--space-2);
}

.preview-controls .btn.active[b-etu1sufijv] {
    background: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.5);
}

/* Page Body */
.signage-preview-body[b-etu1sufijv] {
    height: calc(100vh - 120px);
    overflow: auto;
}

/* Empty State */
.empty-state[b-etu1sufijv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: var(--space-8);
}

.empty-icon[b-etu1sufijv] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state h3[b-etu1sufijv] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.empty-state p[b-etu1sufijv] {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

/* Display Selection Grid */
.display-selection-grid[b-etu1sufijv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    padding: var(--space-2);
    overflow-y: auto;
    height: 100%;
    align-content: start;
}

.display-card[b-etu1sufijv] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.display-card:hover[b-etu1sufijv] {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.display-card .card-preview[b-etu1sufijv] {
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.display-card .card-preview[b-etu1sufijv]  .display-viewport-thumbnail {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 100px;
}

.display-card .card-info[b-etu1sufijv] {
    flex: 1;
    padding: var(--space-3);
}

.display-card .card-info h3[b-etu1sufijv] {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-card .card-meta[b-etu1sufijv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.display-card .separator[b-etu1sufijv] {
    opacity: 0.3;
}

.display-card .card-action[b-etu1sufijv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.display-card:hover .card-action[b-etu1sufijv] {
    background: rgba(59, 130, 246, 0.2);
}

/* Preview Layout - Full Width (sidebar disabled) */
.preview-fullwidth[b-etu1sufijv] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Preview canvas - contains the EngineView */
.preview-canvas[b-etu1sufijv] {
    flex: 1;
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
    min-height: 0;
}

/* Fullscreen mode - applied when element is fullscreen via Fullscreen API */
.preview-canvas:fullscreen[b-etu1sufijv] {
    width: 100vw;
    height: 100vh;
    background: #000;
    border-radius: 0;
}

/* Webkit fullscreen (Safari) */
.preview-canvas:-webkit-full-screen[b-etu1sufijv] {
    width: 100vw;
    height: 100vh;
    background: #000;
    border-radius: 0;
}

/* Hide product control when in fullscreen mode */
.preview-fullwidth.is-fullscreen .product-overlay-control[b-etu1sufijv] {
    display: none;
}

/* Product Overlay Control - horizontal bar at bottom */
.product-overlay-control[b-etu1sufijv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(20, 20, 28, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.product-overlay-control .form-select[b-etu1sufijv] {
    min-width: 160px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.product-overlay-control .form-select:focus[b-etu1sufijv] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.product-overlay-control .form-input[b-etu1sufijv] {
    width: 220px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    font-family: 'Consolas', monospace;
}

.product-overlay-control .form-input[b-etu1sufijv]::placeholder {
    color: #666;
}

.product-overlay-control .form-input:focus[b-etu1sufijv] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.product-overlay-control .btn[b-etu1sufijv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    white-space: nowrap;
}

.product-overlay-control .btn svg[b-etu1sufijv] {
    flex-shrink: 0;
}

.command-panel[b-etu1sufijv],
.display-info[b-etu1sufijv],
.error-panel[b-etu1sufijv] {
    padding: var(--space-4);
}

.command-panel h3[b-etu1sufijv],
.display-info h3[b-etu1sufijv],
.error-panel h3[b-etu1sufijv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.command-panel h3 svg[b-etu1sufijv],
.display-info h3 svg[b-etu1sufijv],
.error-panel h3 svg[b-etu1sufijv] {
    opacity: 0.6;
}

/* Control Buttons */
.control-buttons[b-etu1sufijv] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.control-buttons:last-child[b-etu1sufijv] {
    margin-bottom: 0;
}

.btn-control[b-etu1sufijv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-control:hover[b-etu1sufijv] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-control:active[b-etu1sufijv] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* Product Test */
.product-test[b-etu1sufijv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-test .form-input[b-etu1sufijv] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
    font-family: 'Consolas', monospace;
}

.product-test .form-input[b-etu1sufijv]::placeholder {
    color: #555;
}

.product-test .form-input:focus[b-etu1sufijv] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.product-test .btn[b-etu1sufijv] {
    width: 100%;
}

/* Display Info */
.info-grid[b-etu1sufijv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.info-row[b-etu1sufijv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child[b-etu1sufijv] {
    border-bottom: none;
}

.info-label[b-etu1sufijv] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.info-value[b-etu1sufijv] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: #fff;
}

/* State Badges */
.state-badge[b-etu1sufijv] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.state-idle[b-etu1sufijv] {
    background: rgba(100, 100, 100, 0.3);
    color: #888;
}

.state-playing[b-etu1sufijv] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.state-paused[b-etu1sufijv] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.state-loading[b-etu1sufijv] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.state-error[b-etu1sufijv] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Error Panel */
.error-panel[b-etu1sufijv] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.error-panel h3[b-etu1sufijv] {
    color: #ef4444;
}

.error-message[b-etu1sufijv] {
    font-size: var(--text-sm);
    color: #fca5a5;
    margin: 0 0 var(--space-3) 0;
    word-break: break-word;
}

/* Loading State */
.loading-state[b-etu1sufijv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
}

.loading-spinner[b-etu1sufijv] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-etu1sufijv 1s linear infinite;
    margin-bottom: var(--space-4);
}

@keyframes spin-b-etu1sufijv {
    to { transform: rotate(360deg); }
}

/* Edit Mode Layout */
.preview-edit-layout[b-etu1sufijv] {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 0;
    height: 100%;
    background: #1a1a1e;
}

.preview-canvas-wrapper[b-etu1sufijv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0a0a0c;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.preview-canvas-wrapper .preview-canvas[b-etu1sufijv] {
    flex: 1;
    position: relative;
}

.preview-edit-container[b-etu1sufijv] {
    position: relative;
}

.preview-edit-container.edit-mode-active[b-etu1sufijv] {
    cursor: default;
}

/* Edit Canvas Overlay - matches engine canvas aspect ratio */
.preview-edit-canvas[b-etu1sufijv] {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    /* Positioned to match engine canvas via JS or inline style */
}

.preview-edit-canvas.edit-active[b-etu1sufijv] {
    pointer-events: auto;
}

/* Unsaved Changes Badge */
.preview-unsaved-badge[b-etu1sufijv] {
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 12px;
    color: #fbbf24;
}

/* Spinner for save button */
.spinner-sm[b-etu1sufijv] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-etu1sufijv 0.6s linear infinite;
    margin-right: 6px;
}

/* Responsive */
@media (max-width: 1200px) {
    .preview-edit-layout[b-etu1sufijv] {
        grid-template-columns: 180px 1fr 220px;
    }
}

@media (max-width: 900px) {
    .product-overlay-control[b-etu1sufijv] {
        flex-wrap: wrap;
        padding: 10px 16px;
    }

    .product-overlay-control .form-select[b-etu1sufijv],
    .product-overlay-control .form-input[b-etu1sufijv] {
        flex: 1;
        min-width: 120px;
        width: auto;
    }

    .preview-edit-layout[b-etu1sufijv] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/SignageProduction.razor.rz.scp.css */
/* SignageProduction Page Styles */

.navbar-title h1[b-rqx66lbxnn] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

.navbar-subtitle[b-rqx66lbxnn] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: var(--space-1) 0 0 0;
}

.navbar-actions[b-rqx66lbxnn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.store-selector-compact[b-rqx66lbxnn] {
    min-width: 200px;
}

.store-selector-compact[b-rqx66lbxnn]  .store-selector-container {
    margin: 0;
}

.store-selector-compact[b-rqx66lbxnn]  .store-selector-label {
    display: none;
}

/* Production Grid */
.production-grid[b-rqx66lbxnn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-4);
}

/* Production Card */
.production-card[b-rqx66lbxnn] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

.card-header[b-rqx66lbxnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: var(--space-3);
}

.display-info[b-rqx66lbxnn] {
    flex: 1;
    min-width: 0;
}

.display-info h3[b-rqx66lbxnn] {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-meta[b-rqx66lbxnn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.separator[b-rqx66lbxnn] {
    opacity: 0.3;
}

.card-actions[b-rqx66lbxnn] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Display Preview Thumbnail */
.card-preview[b-rqx66lbxnn] {
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-preview[b-rqx66lbxnn]  .display-viewport-thumbnail {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 80px;
}

.card-preview[b-rqx66lbxnn]  .vp-thumb-canvas {
    min-height: 80px;
}

.card-preview[b-rqx66lbxnn]  .vp-thumb-viewport {
    border-width: 2px;
}

/* URL Sections */
.url-section[b-rqx66lbxnn] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.url-section:last-of-type[b-rqx66lbxnn] {
    border-bottom: none;
}

.url-section label[b-rqx66lbxnn] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.url-section label svg[b-rqx66lbxnn] {
    opacity: 0.6;
    width: 12px;
    height: 12px;
}

.url-row[b-rqx66lbxnn] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.url-code[b-rqx66lbxnn] {
    flex: 1;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: #4ade80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.url-code.production-url[b-rqx66lbxnn] {
    color: #60a5fa;
}

/* QR Section - Compact Inline Layout */
.qr-section[b-rqx66lbxnn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.qr-placeholder[b-rqx66lbxnn] {
    background: white;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 0;
}

.qr-placeholder svg[b-rqx66lbxnn] {
    width: 56px;
    height: 56px;
}

.qr-hint[b-rqx66lbxnn] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Card Footer */
.card-footer[b-rqx66lbxnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}

.status-indicator[b-rqx66lbxnn] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.status-dot[b-rqx66lbxnn] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-online[b-rqx66lbxnn] {
    color: #4ade80;
}

.status-offline[b-rqx66lbxnn] {
    color: #6b7280;
}

.status-error[b-rqx66lbxnn] {
    color: #ef4444;
}

.store-name[b-rqx66lbxnn] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* Empty State */
.empty-state[b-rqx66lbxnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: var(--space-8);
}

.empty-icon[b-rqx66lbxnn] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state h3[b-rqx66lbxnn] {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.empty-state p[b-rqx66lbxnn] {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

/* Loading State */
.loading-state[b-rqx66lbxnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--color-text-muted);
}

.loading-spinner[b-rqx66lbxnn] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-rqx66lbxnn 1s linear infinite;
    margin-bottom: var(--space-4);
}

@keyframes spin-b-rqx66lbxnn {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 900px) {
    .production-grid[b-rqx66lbxnn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .qr-section[b-rqx66lbxnn] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/Backend.HQ.Web/Components/Pages/Skus.razor.rz.scp.css */
/* Skus Page Styles */

/* Header Styles */
.skus-page-title[b-vrg81qfuct] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.skus-page-subtitle[b-vrg81qfuct] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Lister Container */
.skus-lister-wrapper[b-vrg81qfuct] {
    padding: var(--space-6) 0 var(--space-8) 0;
}

/* SKU Card Component */
.sku-card[b-vrg81qfuct] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sku-header[b-vrg81qfuct] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sku-code[b-vrg81qfuct] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ua-white);
}

.sku-badges[b-vrg81qfuct] {
    display: flex;
    gap: var(--space-1);
}

.sku-details[b-vrg81qfuct] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.sku-details .label[b-vrg81qfuct] {
    color: var(--color-text-subtle);
}

.sku-pricing[b-vrg81qfuct] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-value[b-vrg81qfuct] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--success);
}

.sale-price[b-vrg81qfuct] {
    font-size: var(--text-xs);
    color: var(--error);
    margin-left: var(--space-2);
    text-decoration: line-through;
}

.stock-qty[b-vrg81qfuct] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
}

.sku-product[b-vrg81qfuct] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    padding-top: var(--space-1);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* _content/Backend.HQ.Web/Components/Pages/Staff.razor.rz.scp.css */
/* Staff Page Styles */

/* Navbar Header */
.staff-header-title[b-2ojspqnl7g] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.staff-header-subtitle[b-2ojspqnl7g] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Filter Tabs Container */
.staff-filters[b-2ojspqnl7g] {
    margin: var(--space-4) var(--space-6);
    padding: var(--space-2) var(--space-3);
}

.filter-tabs[b-2ojspqnl7g] {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-tabs[b-2ojspqnl7g]::-webkit-scrollbar {
    display: none;
}

.filter-tab[b-2ojspqnl7g] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-base) var(--ease-standard);
}

.filter-tab:hover[b-2ojspqnl7g] {
    background: var(--glass-surface);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.filter-tab.active[b-2ojspqnl7g] {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.tab-count[b-2ojspqnl7g] {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.filter-tab.active .tab-count[b-2ojspqnl7g] {
    background: rgba(255, 255, 255, 0.25);
}

/* User Card Styles */
.user-card[b-2ojspqnl7g] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-2);
}

.user-avatar[b-2ojspqnl7g] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-base);
    color: white;
    background: var(--accent);
}

.user-avatar.level-store[b-2ojspqnl7g] {
    background: #10b981;
}

.user-avatar.level-hq[b-2ojspqnl7g] {
    background: #3b82f6;
}

.user-avatar.level-admin[b-2ojspqnl7g] {
    background: #8b5cf6;
}

.user-info[b-2ojspqnl7g] {
    min-width: 0;
}

.user-name[b-2ojspqnl7g] {
    font-weight: 600;
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-2ojspqnl7g] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-badges[b-2ojspqnl7g] {
    display: flex;
    gap: var(--space-2);
}

.user-level[b-2ojspqnl7g] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.user-level.badge-store[b-2ojspqnl7g] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.user-level.badge-hq[b-2ojspqnl7g] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.user-level.badge-admin[b-2ojspqnl7g] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.user-status[b-2ojspqnl7g] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.user-meta[b-2ojspqnl7g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    min-width: 150px;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .user-card[b-2ojspqnl7g] {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .user-badges[b-2ojspqnl7g],
    .user-meta[b-2ojspqnl7g] {
        grid-column: 2;
    }

    .filter-tabs[b-2ojspqnl7g] {
        flex-wrap: nowrap;
    }

    .filter-tab[b-2ojspqnl7g] {
        padding: var(--space-2);
        font-size: var(--text-sm);
    }
}
/* _content/Backend.HQ.Web/Components/Pages/StoreDetail.razor.rz.scp.css */
/* Store Detail Page - Glass UI Design System */

.page-body[b-8qit9grsst] {
    padding:0;
}

/* Loading State */
.loading-state[b-8qit9grsst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.loading-spinner[b-8qit9grsst] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-8qit9grsst 0.8s linear infinite;
}

@keyframes spin-b-8qit9grsst {
    to { transform: rotate(360deg); }
}

.loading-state p[b-8qit9grsst] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Error State */
.error-state[b-8qit9grsst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    max-width: 450px;
    margin: 40px auto;
}

.error-icon[b-8qit9grsst] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.error-state h3[b-8qit9grsst] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 12px 0;
}

.error-state p[b-8qit9grsst] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* Base Plan Section */
.baseplan-section[b-8qit9grsst] {
    padding: var(--space-4);
}

.baseplan-preview[b-8qit9grsst] {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.baseplan-image[b-8qit9grsst] {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.baseplan-actions[b-8qit9grsst] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

.baseplan-empty[b-8qit9grsst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.baseplan-empty .empty-icon[b-8qit9grsst] {
    font-size: 3rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.baseplan-empty p[b-8qit9grsst] {
    color: var(--color-text-muted);
    margin: 0;
}

.baseplan-upload[b-8qit9grsst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.baseplan-upload .upload-label[b-8qit9grsst] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: rgba(227, 25, 55, 0.1);
    border: 1px solid rgba(227, 25, 55, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.baseplan-upload .upload-label:hover:not(.uploading)[b-8qit9grsst] {
    background: rgba(227, 25, 55, 0.2);
    border-color: rgba(227, 25, 55, 0.5);
}

.baseplan-upload .upload-label.uploading[b-8qit9grsst] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Hide the InputFile element visually but keep it accessible */
.baseplan-upload .upload-label[b-8qit9grsst]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.baseplan-upload .upload-icon[b-8qit9grsst] {
    font-size: 1.2rem;
}

.baseplan-upload .upload-spinner[b-8qit9grsst] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(227, 25, 55, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-8qit9grsst 0.8s linear infinite;
}

.baseplan-upload .upload-hint[b-8qit9grsst] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.upload-error[b-8qit9grsst] {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: var(--radius-md);
    color: #f87171;
    font-size: var(--text-sm);
}
/* _content/Backend.HQ.Web/Components/Pages/Stores.razor.rz.scp.css */
/* Stores Page Styles */

/* Page Header Styles */
.stores-page-title[b-ybwyrz34t7] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.stores-page-subtitle[b-ybwyrz34t7] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Store-specific: Chinese name uses CJK font */
.store-name-cn[b-ybwyrz34t7] {
    font-family: var(--font-cjk);
}
/* _content/Backend.HQ.Web/Components/Pages/ViewPorts.razor.rz.scp.css */
/* ViewPorts Page Styles */

/* Header Section */
.viewports-header[b-86rgg6r2sg] {
    display: block;
}

.viewports-title[b-86rgg6r2sg] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.viewports-subtitle[b-86rgg6r2sg] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Display Filter Container */
.viewports-display-filter-wrapper[b-86rgg6r2sg] {
    padding: var(--space-4) 0 0 0;
}

.viewports-display-filter-card[b-86rgg6r2sg] {
    padding: var(--space-3) var(--space-5);
}

.viewports-display-filter-content[b-86rgg6r2sg] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.viewports-display-filter-label[b-86rgg6r2sg] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.viewports-display-filter-select[b-86rgg6r2sg] {
    width: auto;
    min-width: 200px;
}

/* Lister Container */
.viewports-lister-wrapper[b-86rgg6r2sg] {
    padding: var(--space-6) 0 var(--space-8) 0;
}

/* Item Template Styles */
.viewports-item-container[b-86rgg6r2sg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.viewports-item-header[b-86rgg6r2sg] {
    flex: 1;
    min-width: 0;
}

.viewports-item-title-row[b-86rgg6r2sg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.viewports-item-title[b-86rgg6r2sg] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}

.viewports-item-badges[b-86rgg6r2sg] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.viewports-item-details[b-86rgg6r2sg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.viewports-item-detail-label[b-86rgg6r2sg] {
    color: var(--color-text-subtle);
}

.viewports-item-detail-value[b-86rgg6r2sg] {
    margin-left: var(--space-1);
}

.viewports-item-display-info[b-86rgg6r2sg] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.viewports-item-description[b-86rgg6r2sg] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.viewports-item-footer[b-86rgg6r2sg] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.viewports-item-footer-separator[b-86rgg6r2sg] {
    margin-left: var(--space-4);
}
/* _content/Backend.HQ.Web/Components/Pages/ZoneDetail.razor.rz.scp.css */
/* Zone Detail Page - Glass UI Design System */

.page-body[b-tcn3d92fxa] {
    padding:0;
}

/* Loading State */
.loading-state[b-tcn3d92fxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.loading-spinner[b-tcn3d92fxa] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-tcn3d92fxa 0.8s linear infinite;
}

@keyframes spin-b-tcn3d92fxa {
    to { transform: rotate(360deg); }
}

.loading-state p[b-tcn3d92fxa] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Error State */
.error-state[b-tcn3d92fxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    max-width: 450px;
    margin: 40px auto;
}

.error-icon[b-tcn3d92fxa] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.error-state h3[b-tcn3d92fxa] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 12px 0;
}

.error-state p[b-tcn3d92fxa] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 28px 0;
    line-height: 1.5;
}
/* _content/Backend.HQ.Web/Components/Pages/Zones.razor.rz.scp.css */
/* Store Layout Section */
.store-layout-section[b-lhprs56g58] {
    padding: 0;
    padding-bottom: 1.5rem;
}

.store-layout-header[b-lhprs56g58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

/* Compact Control Bar */
.layout-control-bar[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.layout-metrics[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.layout-metrics .metric[b-lhprs56g58] {
    white-space: nowrap;
}

.layout-metrics .metric-divider[b-lhprs56g58] {
    color: rgba(255, 255, 255, 0.2);
}

.metric-toggle[b-lhprs56g58] {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.metric-toggle:hover[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.metric-toggle.active[b-lhprs56g58] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60A5FA;
}

.layout-actions[b-lhprs56g58] {
    display: flex;
    gap: 0.375rem;
}

/* Zoom Controls */
.layout-zoom-controls[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 0.25rem;
}

.zoom-btn-sm[b-lhprs56g58] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.zoom-btn-sm:hover:not(:disabled)[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.zoom-btn-sm:disabled[b-lhprs56g58] {
    opacity: 0.3;
    cursor: not-allowed;
}

.zoom-select[b-lhprs56g58] {
    width: 60px;
    height: 24px;
    padding: 0 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6875rem;
    cursor: pointer;
    text-align: center;
}

.zoom-select:hover[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.zoom-select:focus[b-lhprs56g58] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.zoom-select option[b-lhprs56g58] {
    background: #1a1a1e;
    color: white;
}

.btn-layout[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-layout:hover:not(:disabled)[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-layout:disabled[b-lhprs56g58] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-layout.active[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #FBBF24;
}

.btn-layout svg[b-lhprs56g58] {
    opacity: 0.7;
}

.store-layout-title[b-lhprs56g58] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.store-layout-scale[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scale-badge[b-lhprs56g58] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.scale-info[b-lhprs56g58] {
    font-size: 0.6875rem;
    color: var(--color-text-subtle);
}

.store-layout-actions[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.store-layout-hint[b-lhprs56g58] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

/* Layout Wrapper (contains canvas + property editor) */
.store-layout-wrapper[b-lhprs56g58] {
    display: flex;
    gap: 0;
    position: relative;
}

/* Layout Container */
.store-layout-container[b-lhprs56g58] {
    flex: 1;
    display: flex;
    gap: 1rem;
    background: #1a1a1e;
    border: 1px solid #333;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-radius 0.3s ease;
}

/* Layout container now relative for absolute positioning of property editor */
.store-layout-container[b-lhprs56g58] {
    position: relative;
}

/* Layout Canvas */
.store-layout-canvas[b-lhprs56g58] {
    position: relative;
    flex: 1;
    min-height: 400px;
    max-height: 600px;
    background: #141416;
    border: 1px solid #333;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    user-select: none;
    cursor: grab;
}

.store-layout-canvas:active[b-lhprs56g58],
.store-layout-canvas.dragging-active[b-lhprs56g58] {
    cursor: grabbing;
}

/* Canvas Scaler - applies zoom and pan transform */
.store-layout-scaler[b-lhprs56g58] {
    position: absolute;
    inset: 0;
    transform: translate(var(--canvas-pan-x, 0), var(--canvas-pan-y, 0)) scale(var(--canvas-zoom, 1));
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

.store-layout-canvas.panning[b-lhprs56g58] {
    cursor: grabbing !important;
}

.store-layout-canvas.panning .store-layout-scaler[b-lhprs56g58] {
    transition: none;
}

/* Grid overlay - scales with zoom, covers large area for zoom out
   Uses efficient CSS tiling with SVG data URI for crisp lines */
.store-layout-grid[b-lhprs56g58] {
    position: absolute;
    /* Large size to cover area when zoomed out (400% = handles 25% min zoom) */
    width: 400%;
    height: 400%;
    /* Center the oversized grid */
    left: -150%;
    top: -150%;
    pointer-events: none;
    z-index: 1;
    /* SVG-based grid for crisp rendering - efficient tiling */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-position: 0 0;
    background-repeat: repeat;
}

/* Base plan image */
.store-layout-baseplan[b-lhprs56g58] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    z-index: 0;
    transform-origin: center center;
    opacity: 0.85;
}

/* No floor plan placeholder */
.store-layout-placeholder[b-lhprs56g58] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    z-index: 0;
}

.store-layout-placeholder small[b-lhprs56g58] {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
    opacity: 0.7;
}

/* Display markers (bird's eye view) */
.store-layout-display[b-lhprs56g58] {
    position: absolute;
    background: rgba(234, 179, 8, 0.25);
    border: 2px solid rgba(234, 179, 8, 0.7);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 8px;
    z-index: 3;
    cursor: grab;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transform-origin: center center;
}

.store-layout-display:hover[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.4);
    border-color: rgba(234, 179, 8, 0.9);
    z-index: 15;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.store-layout-display.selected[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.5);
    border-color: #EAB308;
    border-width: 2px;
    z-index: 20;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25), 0 0 16px rgba(234, 179, 8, 0.4);
}

.store-layout-display.dragging[b-lhprs56g58] {
    cursor: grabbing;
    z-index: 100;
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(234, 179, 8, 0.6);
    transition: none;
}

.store-layout-display .display-icon[b-lhprs56g58] {
    width: 12px;
    height: 12px;
    color: rgba(234, 179, 8, 0.9);
}

/* Display resize handle */
.display-resize-handle[b-lhprs56g58] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.display-resize-handle[b-lhprs56g58]::before {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-right: 2px solid rgba(234, 179, 8, 0.8);
    border-bottom: 2px solid rgba(234, 179, 8, 0.8);
}

.store-layout-display:hover .display-resize-handle[b-lhprs56g58],
.store-layout-display.selected .display-resize-handle[b-lhprs56g58] {
    opacity: 1;
}

/* Zone rectangles */
.store-layout-zone[b-lhprs56g58] {
    position: absolute;
    background: var(--zone-color-bg, rgba(59, 130, 246, 0.2));
    border: 2px solid var(--zone-color-border, rgba(59, 130, 246, 0.6));
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, border-width 0.2s ease, backdrop-filter 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 30px;
    overflow: hidden;
    z-index: 2;
    backdrop-filter: blur(2px) saturate(1.3);
    -webkit-backdrop-filter: blur(2px) saturate(1.3);
}

.store-layout-zone:hover[b-lhprs56g58] {
    background: var(--zone-color-bg, rgba(59, 130, 246, 0.3));
    border-color: var(--zone-color, rgba(59, 130, 246, 0.8));
    z-index: 10;
    box-shadow: 0 0 12px var(--zone-color-bg, rgba(59, 130, 246, 0.3));
    backdrop-filter: blur(4px) saturate(1.5);
    -webkit-backdrop-filter: blur(4px) saturate(1.5);
}

.store-layout-zone.selected[b-lhprs56g58] {
    background: var(--zone-color-bg, rgba(59, 130, 246, 0.35));
    border-color: var(--zone-color, #3B82F6);
    border-width: 2px;
    z-index: 20;
    box-shadow: 0 0 0 3px var(--zone-color-bg, rgba(59, 130, 246, 0.2)), 0 0 16px var(--zone-color-bg, rgba(59, 130, 246, 0.4));
    backdrop-filter: blur(5px) saturate(1.6);
    -webkit-backdrop-filter: blur(5px) saturate(1.6);
}

.store-layout-zone.dragging[b-lhprs56g58] {
    cursor: grabbing;
    z-index: 100;
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(59, 130, 246, 0.5);
    transition: none;
}

.store-layout-zone.inactive[b-lhprs56g58] {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.4);
}

.store-layout-zone.inactive:hover[b-lhprs56g58] {
    background: rgba(107, 114, 128, 0.25);
    border-color: rgba(107, 114, 128, 0.6);
}

/* Zone label */
.zone-label[b-lhprs56g58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;
    backdrop-filter: blur(4px);
}

.zone-name[b-lhprs56g58] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.zone-type[b-lhprs56g58] {
    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Resize handle */
.zone-resize-handle[b-lhprs56g58] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.zone-resize-handle[b-lhprs56g58]::before {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.store-layout-zone:hover .zone-resize-handle[b-lhprs56g58],
.store-layout-zone.selected .zone-resize-handle[b-lhprs56g58] {
    opacity: 1;
}

/* Drop zone indicator */
.store-layout-dropzone[b-lhprs56g58] {
    position: absolute;
    inset: 0;
    background: rgba(34, 197, 94, 0.1);
    border: 2px dashed rgba(34, 197, 94, 0.5);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: rgba(34, 197, 94, 0.8);
    pointer-events: none;
}

/* Layout info panel */
.store-layout-info[b-lhprs56g58] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    min-width: 100px;
    background: #252529;
    border: 1px solid #333;
    border-radius: 6px;
}

.layout-info-item[b-lhprs56g58] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-label[b-lhprs56g58] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
}

.info-value[b-lhprs56g58] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.info-value.info-success[b-lhprs56g58] {
    color: var(--success);
}

.info-value.info-muted[b-lhprs56g58] {
    color: var(--color-text-muted);
}

.info-value.info-warning[b-lhprs56g58] {
    color: #EAB308;
}

.info-value.small[b-lhprs56g58] {
    font-size: 0.75rem;
    font-weight: 500;
}

.layout-info-divider[b-lhprs56g58] {
    width: 100%;
    height: 1px;
    background: #333;
    margin: 0.5rem 0;
}

.selected-zone-info .info-label[b-lhprs56g58] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--info);
}

/* ============================================
   Property Editor Panel (Floating Overlay)
   Styled to match VPE (ViewPort Editor)
   ============================================ */
.property-editor[b-lhprs56g58] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 260px;
    max-height: calc(100% - 2rem);
    background: #252529;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.property-editor.open[b-lhprs56g58] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.property-editor-header[b-lhprs56g58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
    background: #1e1e22;
    cursor: grab;
    user-select: none;
}

.property-editor-header:active[b-lhprs56g58] {
    cursor: grabbing;
}

.property-editor.dragging[b-lhprs56g58] {
    transition: none;
}

.editor-type-badge[b-lhprs56g58] {
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.editor-type-badge.zone[b-lhprs56g58] {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.editor-type-badge.display[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.2);
    color: #FBBF24;
}

.btn-close[b-lhprs56g58] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    color: var(--color-text-subtle);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-close:hover[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

.property-editor-content[b-lhprs56g58] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Property Groups */
.property-group[b-lhprs56g58] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.property-label[b-lhprs56g58] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.property-input[b-lhprs56g58],
.property-select[b-lhprs56g58] {
    padding: 0.5rem 0.75rem;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    transition: border-color 0.15s ease;
}

.property-input:focus[b-lhprs56g58],
.property-select:focus[b-lhprs56g58] {
    outline: none;
    border-color: #3b82f6;
    background: #141416;
}

.property-input[readonly][b-lhprs56g58] {
    opacity: 0.6;
    cursor: not-allowed;
}

.property-select option[b-lhprs56g58] {
    background: #1a1a1e;
    color: rgba(255, 255, 255, 0.9);
}

/* Color Picker */
.color-picker-row[b-lhprs56g58] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-input[b-lhprs56g58] {
    width: 40px;
    height: 32px;
    padding: 2px;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
}

.color-input[b-lhprs56g58]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-input[b-lhprs56g58]::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.color-presets[b-lhprs56g58] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.color-preset[b-lhprs56g58] {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.color-preset:hover[b-lhprs56g58] {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Rotation Controls */
.rotation-controls[b-lhprs56g58] {
    display: flex;
    gap: 0.25rem;
}

.rotation-btn[b-lhprs56g58] {
    flex: 1;
    padding: 0.5rem;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rotation-btn:hover[b-lhprs56g58] {
    background: #252529;
    border-color: #555;
    color: rgba(255, 255, 255, 0.9);
}

.rotation-btn.active[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.2);
    border-color: rgba(234, 179, 8, 0.4);
    color: #FBBF24;
}

/* Property Divider */
.property-divider[b-lhprs56g58] {
    height: 1px;
    background: #333;
    margin: 0.25rem 0;
}

/* Property Info Row (read-only) */
.property-info-row[b-lhprs56g58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.info-key[b-lhprs56g58] {
    font-size: 0.6875rem;
    color: var(--color-text-subtle);
}

.info-val[b-lhprs56g58] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text);
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Toggle Switch */
.toggle-row[b-lhprs56g58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.toggle-label[b-lhprs56g58] {
    font-size: 0.8125rem;
    color: var(--color-text);
}

.toggle-checkbox[b-lhprs56g58] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch[b-lhprs56g58] {
    position: relative;
    width: 40px;
    height: 22px;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 11px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-switch[b-lhprs56g58]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-checkbox:checked + .toggle-switch[b-lhprs56g58] {
    background: #22c55e;
    border-color: #22c55e;
}

.toggle-checkbox:checked + .toggle-switch[b-lhprs56g58]::after {
    transform: translateX(18px);
}

/* Linked Zones List */
.linked-zones-list[b-lhprs56g58] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.linked-zone-chip[b-lhprs56g58] {
    padding: 0.25rem 0.5rem;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    color: #60A5FA;
    cursor: pointer;
    transition: all 0.15s ease;
}

.linked-zone-chip:hover[b-lhprs56g58] {
    background: rgba(59, 130, 246, 0.25);
}

.no-links[b-lhprs56g58] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    font-style: italic;
}

/* ============================================
   Calibration Mode
   ============================================ */
.store-layout-container.calibrating[b-lhprs56g58] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.store-layout-container.calibrating .store-layout-canvas[b-lhprs56g58] {
    cursor: grab;
}

.store-layout-container.calibrating .store-layout-canvas:active[b-lhprs56g58] {
    cursor: grabbing;
}

.store-layout-container.calibrating .store-layout-zone[b-lhprs56g58],
.store-layout-container.calibrating .store-layout-display[b-lhprs56g58] {
    pointer-events: none;
    opacity: 0.7;
}

.store-layout-container.calibrating .store-layout-display[b-lhprs56g58] {
    opacity: 1;
    border-width: 3px;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}

.btn-active[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.2) !important;
    border-color: rgba(234, 179, 8, 0.5) !important;
    color: #FBBF24 !important;
}

/* Bottom Hint Bar */
.layout-hint-bar[b-lhprs56g58] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    pointer-events: none;
    z-index: 50;
}

/* Calibration Overlay - Compact horizontal bar */
.calibration-overlay[b-lhprs56g58] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: auto;
}

.calibration-controls[b-lhprs56g58] {
    background: #252529;
    border: 1px solid #f59e0b;
    border-radius: 2rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.zoom-btn[b-lhprs56g58] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 4px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.zoom-btn:hover[b-lhprs56g58] {
    background: #333;
    border-color: #555;
}

.zoom-slider[b-lhprs56g58] {
    width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #444;
    border-radius: 2px;
    outline: none;
}

.zoom-slider[b-lhprs56g58]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #FBBF24;
    border-radius: 50%;
    cursor: pointer;
}

.zoom-slider[b-lhprs56g58]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #FBBF24;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.zoom-value[b-lhprs56g58] {
    min-width: 40px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FBBF24;
    font-variant-numeric: tabular-nums;
}

.calibration-divider[b-lhprs56g58] {
    width: 1px;
    height: 16px;
    background: #444;
}

.btn-calibrate-reset[b-lhprs56g58] {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-calibrate-reset:hover[b-lhprs56g58] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.btn-calibrate-save[b-lhprs56g58] {
    padding: 0.25rem 0.625rem;
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 0.25rem;
    color: #FBBF24;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-calibrate-save:hover[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.3);
}

/* Zone Card Styles (Grid View) - uses entity-card from site.css */
.zone-name-cn[b-lhprs56g58] {
    font-family: var(--font-cjk);
}

.zone-card-badges-indent[b-lhprs56g58] {
    padding-left: 1.125rem; /* Align with card-header-with-dot content */
}

/* Page Header Styles */
.zones-page-title[b-lhprs56g58] {
    font-size: var(--text-2xl);
    font-weight: 600;
}

.zones-page-subtitle[b-lhprs56g58] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Zones List Container */
.zones-list-container[b-lhprs56g58] {
    padding: 0 0 2rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .store-layout-container[b-lhprs56g58] {
        flex-direction: column;
    }

    .store-layout-canvas[b-lhprs56g58] {
        min-height: 250px;
        max-height: 350px;
    }

    .store-layout-info[b-lhprs56g58] {
        flex-direction: row;
        justify-content: space-around;
        min-width: auto;
    }

    .layout-info-item[b-lhprs56g58] {
        align-items: center;
    }

    .layout-stats-bar[b-lhprs56g58] {
        display: none;
    }

    .property-editor.open[b-lhprs56g58] {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 50;
    }

    .calibration-controls[b-lhprs56g58] {
        padding: 0.75rem 1rem;
    }

    .zoom-slider[b-lhprs56g58] {
        width: 120px;
    }
}

/* ViewPort Preview in Property Editor */
.viewport-preview-section[b-lhprs56g58] {
    margin-top: 0.5rem;
}

.viewport-preview-compact[b-lhprs56g58] {
    background: #0a0a0c;
    border-radius: 6px;
    overflow: hidden;
}

.viewport-preview-compact[b-lhprs56g58]  .vpe-layout-viewer {
    background: transparent;
}

.viewport-preview-compact[b-lhprs56g58]  .vpe-viewer-header {
    display: none;
}

.viewport-preview-compact[b-lhprs56g58]  .vpe-viewer-canvas-container {
    padding: 0.5rem;
}

.viewport-preview-compact[b-lhprs56g58]  .vpe-viewer-canvas {
    max-width: 100%;
}

.viewport-selection-summary[b-lhprs56g58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #141416;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.6875rem;
}

.selection-count[b-lhprs56g58] {
    color: rgba(255, 255, 255, 0.5);
}

.btn-save-viewports[b-lhprs56g58] {
    padding: 0.25rem 0.625rem;
    background: #22c55e;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save-viewports:hover[b-lhprs56g58] {
    background: #16a34a;
}

.btn-save-viewports:disabled[b-lhprs56g58] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-viewports[b-lhprs56g58] {
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    background: #0a0a0c;
    border-radius: 6px;
}

/* ========================================
   Mini Viewport Visualization in Bird's Eye Display
   ======================================== */

/* Viewport Preview Container inside Display */
.display-viewport-preview[b-lhprs56g58] {
    position: absolute;
    inset: 0;
    background: #0a0a0c;
    border-radius: 0;
    overflow: hidden;
}

/* Mini Viewport Element */
.mini-viewport[b-lhprs56g58] {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: var(--zone-color, #555);
    border-radius: 1px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    opacity: 0.85;
}

/* Highlighted viewport (linked to selected zone) */
.mini-viewport.highlighted[b-lhprs56g58] {
    border: 2px solid #22c55e !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    z-index: 10;
    opacity: 1;
}

/* Unassigned viewports (dimmed with dashed border) */
.mini-viewport.unassigned[b-lhprs56g58] {
    opacity: 0.4;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.5);
    background: #333;
}

/* Display Label above the display */
.store-layout-display .display-label[b-lhprs56g58] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}

/* Display with viewports - hide the default icon */
.store-layout-display.has-viewports .display-icon[b-lhprs56g58] {
    display: none;
}

/* Adjust display styling for viewport visualization */
.store-layout-display.has-viewports[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.5);
}

.store-layout-display.has-viewports:hover[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.2);
}

.store-layout-display.has-viewports.selected[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
}

/* ========================================
   Display Property Editor - ViewPort Layout Preview
   ======================================== */

.display-viewport-editor-preview[b-lhprs56g58] {
    background: #0a0a0c;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.display-viewport-editor-preview[b-lhprs56g58]  .vpe-layout-viewer {
    background: transparent;
}

.display-viewport-editor-preview[b-lhprs56g58]  .vpe-viewer-header {
    padding: 0.5rem;
    font-size: 0.75rem;
}

.display-viewport-editor-preview[b-lhprs56g58]  .vpe-viewer-canvas-container {
    padding: 0.5rem;
}

.no-viewports-message[b-lhprs56g58] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.btn-configure-viewports[b-lhprs56g58] {
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.5);
    border-radius: 4px;
    color: #eab308;
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-configure-viewports:hover[b-lhprs56g58] {
    background: rgba(234, 179, 8, 0.3);
    border-color: #eab308;
}
/* _content/Backend.HQ.Web/Components/Shared/AssetDiscovery/AssetDiscoveryOptionsStep.razor.rz.scp.css */
/* ==========================================================================
   Asset Discovery Options Step - Compact Layout
   Uses design tokens from _vars.css
   ========================================================================== */

/* Container */
.options-step[b-iifo2sqo4e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Section */
.options-section[b-iifo2sqo4e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.section-title[b-iifo2sqo4e] {
    font-size: var(--text-xs, 0.74rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin: 0;
}

/* Source Cards - 4 columns for compact view */
.source-cards[b-iifo2sqo4e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2, 0.5rem);
}

@media (max-width: 900px) {
    .source-cards[b-iifo2sqo4e] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Source Card - Compact */
.source-card[b-iifo2sqo4e] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: all var(--duration-fast, 120ms) var(--ease-standard);
}

.source-card:hover[b-iifo2sqo4e] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.source-card.selected[b-iifo2sqo4e] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.source-card input[type="checkbox"][b-iifo2sqo4e] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 1px;
    accent-color: var(--accent, #E31937);
}

.card-content[b-iifo2sqo4e] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-header[b-iifo2sqo4e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.card-name[b-iifo2sqo4e] {
    font-size: var(--text-sm, 0.86rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-rating[b-iifo2sqo4e] {
    color: var(--warning, #F59E0B);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.card-desc[b-iifo2sqo4e] {
    font-size: var(--text-xs, 0.74rem);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-priority[b-iifo2sqo4e] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.card-badge[b-iifo2sqo4e] {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.card-badge.slow[b-iifo2sqo4e] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #F59E0B);
}

.card-features[b-iifo2sqo4e] {
    margin: 2px 0 0;
    padding-left: 1rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

.card-features li[b-iifo2sqo4e] {
    margin: 1px 0;
}

/* Option Card (Additional Options) */
.option-card[b-iifo2sqo4e] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: all var(--duration-fast, 120ms) var(--ease-standard);
}

.option-card:hover[b-iifo2sqo4e] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.option-card.selected[b-iifo2sqo4e] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.option-card input[type="checkbox"][b-iifo2sqo4e] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 1px;
    accent-color: var(--accent, #E31937);
}

.card-note[b-iifo2sqo4e] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    margin-top: 2px;
}

/* Advanced Options Section */
.options-section.advanced[b-iifo2sqo4e] {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: var(--space-3, 0.75rem);
    margin-top: var(--space-2, 0.5rem);
}

.section-toggle[b-iifo2sqo4e] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--text-xs, 0.74rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: var(--space-1, 0.25rem) 0;
    width: 100%;
    text-align: left;
    transition: color var(--duration-fast, 120ms);
}

.section-toggle:hover[b-iifo2sqo4e] {
    color: rgba(255, 255, 255, 0.9);
}

.toggle-icon[b-iifo2sqo4e] {
    font-size: 0.5rem;
}

.advanced-options[b-iifo2sqo4e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md, 0.5rem);
    margin-top: var(--space-2, 0.5rem);
}

@media (max-width: 768px) {
    .advanced-options[b-iifo2sqo4e] {
        grid-template-columns: 1fr;
    }
}

.option-group[b-iifo2sqo4e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.option-group h4[b-iifo2sqo4e] {
    font-size: var(--text-xs, 0.74rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0.02em;
}

.option-row[b-iifo2sqo4e] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.74rem);
    color: rgba(255, 255, 255, 0.55);
}

.option-row label[b-iifo2sqo4e] {
    min-width: 70px;
    flex-shrink: 0;
}

.option-row input[type="number"][b-iifo2sqo4e] {
    width: 65px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 0.375rem);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs, 0.74rem);
    font-family: var(--font-mono, monospace);
}

.option-row input[type="number"]:focus[b-iifo2sqo4e] {
    outline: none;
    border-color: var(--accent, #E31937);
}

.option-row input[type="range"][b-iifo2sqo4e] {
    flex: 1;
    height: 4px;
    accent-color: var(--accent, #E31937);
}

.option-row select[b-iifo2sqo4e] {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 0.375rem);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs, 0.74rem);
}

.option-row select:focus[b-iifo2sqo4e] {
    outline: none;
    border-color: var(--accent, #E31937);
}

.checkbox-grid[b-iifo2sqo4e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.checkbox-grid label[b-iifo2sqo4e] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 2px 0;
}

.checkbox-grid label:hover[b-iifo2sqo4e] {
    color: rgba(255, 255, 255, 0.8);
}

.checkbox-grid input[type="checkbox"][b-iifo2sqo4e] {
    width: 0.875rem;
    height: 0.875rem;
    accent-color: var(--accent, #E31937);
}

/* Note */
.options-note[b-iifo2sqo4e] {
    font-size: var(--text-xs, 0.74rem);
    color: rgba(255, 255, 255, 0.5);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: rgba(227, 25, 55, 0.06);
    border-left: 2px solid var(--accent, #E31937);
    border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
    line-height: 1.4;
}

.options-note strong[b-iifo2sqo4e] {
    color: rgba(255, 255, 255, 0.8);
}
/* _content/Backend.HQ.Web/Components/Shared/AssetDiscovery/AssetDiscoveryResultsStep.razor.rz.scp.css */
/* ==========================================================================
   Asset Discovery Results Step - Drag & Drop Layout
   ========================================================================== */

.results-step[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

/* Compact Tab Bar */
.results-tabs[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.tab-btn[b-dfzkgdmo47] {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tab-btn:hover[b-dfzkgdmo47] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

.tab-btn.active[b-dfzkgdmo47] {
    background: rgba(227, 25, 55, 0.1);
    border-color: var(--accent, #E31937);
    color: rgba(255, 255, 255, 0.95);
}

.tab-summary[b-dfzkgdmo47] {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Main Assets Layout */
.assets-layout[b-dfzkgdmo47] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left Panel: Discovered Assets */
.discovered-panel[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    overflow: hidden;
}

.panel-header[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.panel-title[b-dfzkgdmo47] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-hint[b-dfzkgdmo47] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

.panel-actions[b-dfzkgdmo47] {
    display: flex;
    gap: 0.25rem;
}

/* Button styles use global .btn from buttons.css */

/* Discovered Grid */
.discovered-grid[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

.discovered-item[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    cursor: grab;
    transition: all 0.15s;
    user-select: none;
}

.discovered-item:hover[b-dfzkgdmo47] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.discovered-item.selected[b-dfzkgdmo47] {
    background: rgba(227, 25, 55, 0.08);
    border-color: rgba(227, 25, 55, 0.3);
}

.discovered-item.dragging[b-dfzkgdmo47] {
    opacity: 0.5;
    cursor: grabbing;
}

.item-thumb[b-dfzkgdmo47] {
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.item-thumb img[b-dfzkgdmo47] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-info[b-dfzkgdmo47] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.item-code[b-dfzkgdmo47] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta[b-dfzkgdmo47] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.item-check[b-dfzkgdmo47] {
    flex-shrink: 0;
}

.item-check input[b-dfzkgdmo47] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent, #E31937);
}

/* Right Panel: Existing Assets with Drop Slots */
.existing-panel[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    overflow: hidden;
}

.existing-list[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Existing Asset Row */
.existing-row[b-dfzkgdmo47] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    transition: all 0.15s;
}

.existing-row.drop-target[b-dfzkgdmo47] {
    border-color: var(--accent, #E31937);
    background: rgba(227, 25, 55, 0.08);
    border-style: solid;
}

/* Current Asset (Left side) */
.current-asset[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asset-thumb[b-dfzkgdmo47] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.asset-thumb img[b-dfzkgdmo47] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.primary-star[b-dfzkgdmo47] {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    color: #F59E0B;
}

.asset-details[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.asset-name[b-dfzkgdmo47] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-meta[b-dfzkgdmo47] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Arrow / Status (Center) */
.replace-arrow[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
}

.arrow-icon[b-dfzkgdmo47] {
    font-size: 1.25rem;
    color: var(--accent, #E31937);
}

.drop-hint[b-dfzkgdmo47] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* Replacement Slot (Right side) */
.replacement-slot[b-dfzkgdmo47] {
    min-height: 56px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.replacement-slot.filled[b-dfzkgdmo47] {
    border-style: solid;
    border-color: var(--accent, #E31937);
    background: rgba(227, 25, 55, 0.05);
}

.replacement-slot.suggested[b-dfzkgdmo47] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.05);
    cursor: pointer;
}

.replacement-slot.suggested:hover[b-dfzkgdmo47] {
    background: rgba(59, 130, 246, 0.1);
}

.slot-content[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    width: 100%;
}

.slot-content.suggested[b-dfzkgdmo47] {
    cursor: pointer;
}

.slot-thumb[b-dfzkgdmo47] {
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.slot-thumb img[b-dfzkgdmo47] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slot-info[b-dfzkgdmo47] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.slot-code[b-dfzkgdmo47] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.slot-meta[b-dfzkgdmo47] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.upgrade-badge[b-dfzkgdmo47] {
    display: inline-block;
    padding: 1px 4px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 600;
}

.suggestion-hint[b-dfzkgdmo47] {
    font-size: 0.55rem;
    color: #60a5fa;
    white-space: nowrap;
}

.btn-remove[b-dfzkgdmo47] {
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(239, 68, 68, 0.15);
    border: none;
    border-radius: 50%;
    color: #EF4444;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-remove:hover[b-dfzkgdmo47] {
    background: rgba(239, 68, 68, 0.25);
}

.slot-empty[b-dfzkgdmo47] {
    padding: 0.5rem;
}

.slot-placeholder[b-dfzkgdmo47] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
}

/* Empty State */
.empty-state[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

/* Logs Section */
.logs-section[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.logs-container[b-dfzkgdmo47] {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    padding: 0.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
}

.log-line[b-dfzkgdmo47] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.5);
}

.log-line.success[b-dfzkgdmo47] { color: #22c55e; }
.log-line.warning[b-dfzkgdmo47] { color: #F59E0B; }
.log-line.error[b-dfzkgdmo47] { color: #EF4444; }

.log-time[b-dfzkgdmo47] {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.log-icon[b-dfzkgdmo47] {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.log-msg[b-dfzkgdmo47] {
    flex: 1;
}

.logs-summary[b-dfzkgdmo47] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    text-align: center;
}

/* Metadata Section */
.metadata-section[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.metadata-grid[b-dfzkgdmo47] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.metadata-row[b-dfzkgdmo47] {
    display: grid;
    grid-template-columns: 80px 1fr 40px 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.375rem;
    font-size: 0.75rem;
}

.metadata-row.has-upgrade[b-dfzkgdmo47] {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
}

.field-label[b-dfzkgdmo47] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.field-current[b-dfzkgdmo47] {
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-discovered[b-dfzkgdmo47] {
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-action[b-dfzkgdmo47] {
    display: flex;
    justify-content: center;
}

.btn-apply[b-dfzkgdmo47] {
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-apply:hover[b-dfzkgdmo47] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.btn-apply.selected[b-dfzkgdmo47] {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #22c55e;
}

.metadata-actions[b-dfzkgdmo47] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
}

.selection-count[b-dfzkgdmo47] {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Expandable metadata rows */
.metadata-row.expandable[b-dfzkgdmo47] {
    cursor: pointer;
}

.metadata-row.expandable .field-label[b-dfzkgdmo47] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-expand[b-dfzkgdmo47] {
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.btn-expand:hover[b-dfzkgdmo47] {
    color: rgba(255, 255, 255, 0.8);
}

.metadata-row.expanded[b-dfzkgdmo47] {
    grid-template-columns: 80px 1fr 40px 1fr;
    align-items: start;
}

.metadata-row.expanded .field-current[b-dfzkgdmo47],
.metadata-row.expanded .field-discovered[b-dfzkgdmo47] {
    white-space: normal;
    overflow: visible;
}

.field-text-full[b-dfzkgdmo47] {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    font-size: 0.7rem;
}
/* _content/Backend.HQ.Web/Components/Shared/AssetDiscovery/AssetDiscoveryWizard.razor.rz.scp.css */
/* Wizard Modal Overlay */
.discovery-wizard-overlay[b-9ivljpbfgo] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-9ivljpbfgo 0.2s ease-out;
}

@keyframes fadeIn-b-9ivljpbfgo {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Wizard Container */
.discovery-wizard[b-9ivljpbfgo] {
    background: linear-gradient(165deg, rgba(38, 38, 45, 0.98), rgba(24, 24, 28, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    max-width: 1200px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-9ivljpbfgo 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-9ivljpbfgo {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header - Compact */
.wizard-header[b-9ivljpbfgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-title[b-9ivljpbfgo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #fff);
}

.btn-back[b-9ivljpbfgo] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-back:hover[b-9ivljpbfgo] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text, #fff);
}

.btn-close[b-9ivljpbfgo] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.btn-close:hover[b-9ivljpbfgo] {
    color: var(--color-text, #fff);
}

/* Step Indicator - Compact */
.wizard-steps[b-9ivljpbfgo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.wizard-step[b-9ivljpbfgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted, #888);
    transition: color 0.15s;
}

.wizard-step.active[b-9ivljpbfgo] {
    color: rgba(255, 255, 255, 0.95);
}

.step-num[b-9ivljpbfgo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    font-weight: 600;
}

.wizard-step.active .step-num[b-9ivljpbfgo] {
    background: var(--accent, #E31937);
    color: #fff;
}

.step-label[b-9ivljpbfgo] {
    font-size: 0.875rem;
}

.wizard-step-separator[b-9ivljpbfgo] {
    color: var(--color-text-muted, #666);
}

/* Content Area */
.wizard-content[b-9ivljpbfgo] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 400px;
}

/* Progress Section */
.discovery-progress[b-9ivljpbfgo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.progress-bar-container[b-9ivljpbfgo] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-9ivljpbfgo] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #E31937), #f24357);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-9ivljpbfgo] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent, #E31937);
}

.progress-log[b-9ivljpbfgo] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}

.log-header[b-9ivljpbfgo] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #888);
}

.log-entries[b-9ivljpbfgo] {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

.log-entry[b-9ivljpbfgo] {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #aaa);
}

.log-entry.success[b-9ivljpbfgo] { color: #22c55e; }
.log-entry.warning[b-9ivljpbfgo] { color: #eab308; }
.log-entry.error[b-9ivljpbfgo] { color: #ef4444; }

.log-time[b-9ivljpbfgo] {
    color: var(--color-text-muted, #666);
}

.log-icon[b-9ivljpbfgo] {
    width: 1rem;
    text-align: center;
}

/* Footer - Compact */
.wizard-footer[b-9ivljpbfgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
}

.footer-info[b-9ivljpbfgo] {
    font-size: 0.875rem;
    color: var(--color-text-muted, #888);
}

.footer-info .error-text[b-9ivljpbfgo] {
    color: #EF4444;
    font-size: 0.75rem;
}

.footer-actions[b-9ivljpbfgo] {
    display: flex;
    gap: 0.75rem;
}

/* Button styles use global .btn from buttons.css */

/* Closing Animations */
.discovery-wizard-overlay.closing[b-9ivljpbfgo] {
    animation: fadeOut-b-9ivljpbfgo 0.15s ease-out forwards;
}

.discovery-wizard.closing[b-9ivljpbfgo] {
    animation: slideDown-b-9ivljpbfgo 0.15s ease-out forwards;
}

@keyframes fadeOut-b-9ivljpbfgo {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideDown-b-9ivljpbfgo {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}
/* _content/Backend.HQ.Web/Components/Shared/AssetPackImport/AssetPackImportWizard.razor.rz.scp.css */
/* Overlay */
.import-wizard-overlay[b-o1619043hn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn-b-o1619043hn 0.2s ease-out;
}

.import-wizard-overlay.closing[b-o1619043hn] {
    animation: fadeOut-b-o1619043hn 0.15s ease-in forwards;
}

/* Wizard Container */
.import-wizard[b-o1619043hn] {
    background: linear-gradient(165deg, rgba(38, 38, 45, 0.98), rgba(24, 24, 28, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 700px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-o1619043hn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.import-wizard.closing[b-o1619043hn] {
    animation: slideDown-b-o1619043hn 0.15s ease-in forwards;
}

/* Header */
.wizard-header[b-o1619043hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-title[b-o1619043hn] {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.btn-close[b-o1619043hn] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.btn-close:hover[b-o1619043hn] {
    color: #fff;
}

/* Step Indicator */
.wizard-steps[b-o1619043hn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-step[b-o1619043hn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.wizard-step.active[b-o1619043hn] {
    color: #fff;
}

.wizard-step.active .step-num[b-o1619043hn] {
    background: #E31937;
}

.wizard-step.complete .step-num[b-o1619043hn] {
    background: #22c55e;
}

.step-num[b-o1619043hn] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.step-label[b-o1619043hn] {
    font-size: 0.875rem;
}

.wizard-step-separator[b-o1619043hn] {
    color: rgba(255, 255, 255, 0.3);
}

/* Content */
.wizard-content[b-o1619043hn] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    min-height: 300px;
}

/* Upload Zone */
.upload-zone[b-o1619043hn] {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.upload-zone:hover[b-o1619043hn],
.upload-zone.dragging[b-o1619043hn] {
    border-color: #E31937;
    background: rgba(227, 25, 55, 0.05);
}

.upload-icon[b-o1619043hn] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.upload-text[b-o1619043hn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
}

.upload-text strong[b-o1619043hn] {
    color: #fff;
    font-size: 1.1rem;
}

.file-input[b-o1619043hn] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Upload Progress */
.upload-progress[b-o1619043hn] {
    text-align: center;
}

.file-info[b-o1619043hn] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.file-name[b-o1619043hn] {
    font-weight: 500;
    color: #fff;
}

.file-size[b-o1619043hn] {
    color: rgba(255, 255, 255, 0.5);
}

.progress-bar-container[b-o1619043hn] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.progress-bar-container.large[b-o1619043hn] {
    height: 12px;
}

.progress-bar[b-o1619043hn] {
    height: 100%;
    background: linear-gradient(90deg, #E31937, #ff4d6a);
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

.progress-text[b-o1619043hn] {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* Error Message */
.error-message[b-o1619043hn] {
    color: #EF4444;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
}

/* Analysis Section */
.analysis-section[b-o1619043hn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Summary Card */
.summary-card[b-o1619043hn] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
}

.summary-header[b-o1619043hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.btn-change[b-o1619043hn] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-change:hover[b-o1619043hn] {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.summary-stats[b-o1619043hn] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat[b-o1619043hn] {
    text-align: center;
}

.stat-value[b-o1619043hn] {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.stat-label[b-o1619043hn] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.stat.tiff .stat-value[b-o1619043hn] {
    color: #60a5fa;
}

.stat.mov .stat-value[b-o1619043hn] {
    color: #f59e0b;
}

.stat.ready .stat-value[b-o1619043hn] {
    color: #22c55e;
}

/* Detected Section */
.detected-section[b-o1619043hn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.detected-row[b-o1619043hn],
.keywords-row[b-o1619043hn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detected-label[b-o1619043hn] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.detected-value[b-o1619043hn] {
    color: #fff;
    font-weight: 500;
}

.keyword-tags[b-o1619043hn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.keyword-tag[b-o1619043hn] {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Category Section */
.category-section[b-o1619043hn] {
    padding-top: 0.5rem;
}

.section-label[b-o1619043hn] {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.category-options[b-o1619043hn] {
    display: flex;
    gap: 0.5rem;
}

.category-option[b-o1619043hn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.category-option:hover[b-o1619043hn] {
    border-color: rgba(255, 255, 255, 0.2);
}

.category-option.selected[b-o1619043hn] {
    border-color: #E31937;
    background: rgba(227, 25, 55, 0.1);
}

.category-option input[b-o1619043hn] {
    display: none;
}

.option-label[b-o1619043hn] {
    font-weight: 500;
    color: #fff;
}

.detected-badge[b-o1619043hn] {
    background: #22c55e;
    color: #000;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Product Section */
.product-section[b-o1619043hn] {
    padding-top: 0.5rem;
}

.product-matches[b-o1619043hn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.product-match[b-o1619043hn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.product-match:hover[b-o1619043hn] {
    border-color: rgba(255, 255, 255, 0.2);
}

.product-match.selected[b-o1619043hn] {
    border-color: #E31937;
    background: rgba(227, 25, 55, 0.1);
}

.product-thumb[b-o1619043hn] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.product-info[b-o1619043hn] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name[b-o1619043hn] {
    font-weight: 500;
    color: #fff;
}

.product-sku[b-o1619043hn] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.confidence[b-o1619043hn] {
    color: #22c55e;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Search Box */
.search-box input[b-o1619043hn] {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
}

.search-box input:focus[b-o1619043hn] {
    outline: none;
    border-color: #E31937;
}

.search-results[b-o1619043hn] {
    margin-top: 0.5rem;
}

.preselected-notice[b-o1619043hn] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
    color: #22c55e;
    font-size: 0.875rem;
    text-align: center;
}

/* Options Section */
.options-section[b-o1619043hn] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.options-section summary[b-o1619043hn] {
    padding: 0.75rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.options-section summary:hover[b-o1619043hn] {
    color: #fff;
}

.options-grid[b-o1619043hn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
}

.option-checkbox[b-o1619043hn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.option-checkbox input[b-o1619043hn] {
    accent-color: #E31937;
}

/* Progress Section */
.progress-section[b-o1619043hn] {
    text-align: center;
}

.progress-stats[b-o1619043hn] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.progress-percent[b-o1619043hn] {
    font-size: 2rem;
    font-weight: 600;
    color: #E31937;
}

.progress-files[b-o1619043hn] {
    color: rgba(255, 255, 255, 0.6);
}

.current-operation[b-o1619043hn] {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.progress-log[b-o1619043hn] {
    margin-top: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: left;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.log-header[b-o1619043hn] {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}

.log-entries[b-o1619043hn] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: monospace;
    font-size: 0.75rem;
}

.log-entry[b-o1619043hn] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.log-entry.success[b-o1619043hn] {
    color: #22c55e;
}

.log-entry.warning[b-o1619043hn] {
    color: #f59e0b;
}

.log-entry.error[b-o1619043hn] {
    color: #EF4444;
}

.log-time[b-o1619043hn] {
    color: rgba(255, 255, 255, 0.4);
}

.log-icon[b-o1619043hn] {
    width: 1rem;
}

/* Results Section */
.results-section[b-o1619043hn] {
    text-align: center;
}

.success-banner[b-o1619043hn],
.error-banner[b-o1619043hn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.success-banner[b-o1619043hn] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.error-banner[b-o1619043hn] {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.success-icon[b-o1619043hn],
.error-icon[b-o1619043hn] {
    font-size: 1.5rem;
}

.results-stats[b-o1619043hn] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.result-stat[b-o1619043hn] {
    text-align: center;
}

.result-stat .stat-value[b-o1619043hn] {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
}

.result-stat .stat-label[b-o1619043hn] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.result-actions[b-o1619043hn] {
    margin-top: 1rem;
}

.btn-link[b-o1619043hn] {
    color: #60a5fa;
    text-decoration: none;
}

.btn-link:hover[b-o1619043hn] {
    text-decoration: underline;
}

/* Footer */
.wizard-footer[b-o1619043hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.footer-info[b-o1619043hn] {
    font-size: 0.875rem;
}

.error-text[b-o1619043hn] {
    color: #EF4444;
}

.footer-actions[b-o1619043hn] {
    display: flex;
    gap: 0.5rem;
}

/* Button styles use global .btn from buttons.css */

/* Animations */
@keyframes fadeIn-b-o1619043hn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-o1619043hn {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp-b-o1619043hn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideDown-b-o1619043hn {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
}
/* _content/Backend.HQ.Web/Components/Shared/DialogProvider.razor.rz.scp.css */
/* Dialog Backdrop */
.dialog-backdrop[b-5tmtlzsvre] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn-b-5tmtlzsvre 0.2s ease-out;
    padding: 1.5rem;
}

.dialog-backdrop-closing[b-5tmtlzsvre] {
    animation: fadeOut-b-5tmtlzsvre 0.15s ease-out forwards;
}

/* Dialog Container */
.dialog-container[b-5tmtlzsvre] {
    background: linear-gradient(165deg, rgba(38, 38, 45, 0.98), rgba(24, 24, 28, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    max-width: 400px;
    width: 100%;
    animation: slideUp-b-5tmtlzsvre 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.dialog-closing[b-5tmtlzsvre] {
    animation: slideDown-b-5tmtlzsvre 0.15s ease-out forwards;
}

/* Dialog Header */
.dialog-header[b-5tmtlzsvre] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.5rem 1.75rem 0.75rem;
}

.dialog-icon[b-5tmtlzsvre] {
    font-size: 1.375rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.dialog-title[b-5tmtlzsvre] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Dialog Body */
.dialog-body[b-5tmtlzsvre] {
    padding: 0.625rem 1.75rem 1.5rem;
}

.dialog-message[b-5tmtlzsvre] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
}

.dialog-input[b-5tmtlzsvre] {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.625rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.dialog-input:focus[b-5tmtlzsvre] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.dialog-input[b-5tmtlzsvre]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Dialog Footer */
.dialog-footer[b-5tmtlzsvre] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Dialog button overrides - buttons use global .btn from buttons.css */
.dialog-footer[b-5tmtlzsvre]  .btn {
    min-width: 88px;
}

/* Variant Styles */
.dialog-info .dialog-header[b-5tmtlzsvre] {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.dialog-info .dialog-icon[b-5tmtlzsvre] {
    color: #60A5FA;
}

.dialog-success .dialog-header[b-5tmtlzsvre] {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.dialog-success .dialog-icon[b-5tmtlzsvre] {
    color: #4ADE80;
}

.dialog-warning .dialog-header[b-5tmtlzsvre] {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.dialog-warning .dialog-icon[b-5tmtlzsvre] {
    color: #FBBF24;
}

.dialog-danger .dialog-header[b-5tmtlzsvre] {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.dialog-danger .dialog-icon[b-5tmtlzsvre] {
    color: #F87171;
}

/* Animations */
@keyframes fadeIn-b-5tmtlzsvre {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut-b-5tmtlzsvre {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp-b-5tmtlzsvre {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideDown-b-5tmtlzsvre {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .dialog-container[b-5tmtlzsvre] {
        max-width: none;
        margin: 0.5rem;
        border-radius: 0.75rem;
    }

    .dialog-header[b-5tmtlzsvre] {
        padding: 1rem 1.25rem 0.75rem;
    }

    .dialog-body[b-5tmtlzsvre] {
        padding: 0 1.25rem 1rem;
    }

    .dialog-footer[b-5tmtlzsvre] {
        padding: 0.875rem 1.25rem 1rem;
        flex-direction: column-reverse;
    }

    .dialog-footer[b-5tmtlzsvre]  .btn {
        width: 100%;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/DisplayViewportThumbnail.razor.rz.scp.css */
.display-viewport-thumbnail[b-h298irsvwe] {
    width: 100%;
    background: #0a0a0c;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0.5rem;
}

.vp-thumb-loading[b-h298irsvwe] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-thumb-spinner[b-h298irsvwe] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: vp-thumb-spin-b-h298irsvwe 0.8s linear infinite;
}

@keyframes vp-thumb-spin-b-h298irsvwe {
    to { transform: rotate(360deg); }
}

.vp-thumb-canvas[b-h298irsvwe] {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
                linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
                linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
                linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 0, 4px -4px, 0px 4px;
}

.vp-thumb-viewport[b-h298irsvwe] {
    position: absolute;
    border: 1px solid var(--zone-color, rgba(255, 255, 255, 0.3));
    background: color-mix(in srgb, var(--zone-color, rgba(255, 255, 255, 0.1)) 30%, transparent);
    border-radius: 1px;
    transition: all 0.2s ease;
}

/* Fallback for browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .vp-thumb-viewport[b-h298irsvwe] {
        background: rgba(255, 255, 255, 0.1);
    }
}

.vp-thumb-empty[b-h298irsvwe] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.625rem;
}
/* _content/Backend.HQ.Web/Components/Shared/Forms/EntityForm.razor.rz.scp.css */
/* EntityForm Component - Modern Glass UI Design System */

/* ===== FORM CONTAINER ===== */
.entity-form[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.entity-form:hover[b-o5d4ljs7j8] {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.entity-form.loading[b-o5d4ljs7j8] {
    opacity: 0.7;
    pointer-events: none;
}

.entity-form.view-mode .form-input:not(.form-readonly)[b-o5d4ljs7j8],
.entity-form.view-mode .form-select[b-o5d4ljs7j8],
.entity-form.view-mode .form-textarea[b-o5d4ljs7j8] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
}

/* ===== FORM HEADER ===== */
.entity-form-header[b-o5d4ljs7j8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 16px;
}

.entity-form-title h2[b-o5d4ljs7j8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5f5f6;
    margin: 0;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.entity-form-subtitle[b-o5d4ljs7j8] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0 0;
}

.view-mode-badge[b-o5d4ljs7j8] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entity-form-actions-header[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.unsaved-indicator[b-o5d4ljs7j8] {
    font-size: 0.875rem;
    color: #F59E0B;
    font-weight: 500;
    animation: pulse-glow-b-o5d4ljs7j8 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-o5d4ljs7j8 {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
    50% { opacity: 0.7; text-shadow: none; }
}

/* ===== MESSAGES ===== */
.entity-form-message[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin: 20px 32px 0;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.entity-form-message.error[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.entity-form-message.success[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.message-icon[b-o5d4ljs7j8] {
    flex-shrink: 0;
    font-size: 1.1rem;
}
.message-text[b-o5d4ljs7j8] { 
    flex: 1; 
    user-select:all;


}

.message-close[b-o5d4ljs7j8] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    font-size: 1.25rem;
    line-height: 1;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.message-close:hover[b-o5d4ljs7j8] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.entity-form-validation-summary[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 32px 0;
}

.entity-form-validation-summary h4[b-o5d4ljs7j8] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f87171;
    margin: 0 0 12px 0;
}

.entity-form-validation-summary ul[b-o5d4ljs7j8] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    color: rgba(248, 113, 113, 0.9);
}

.entity-form-validation-summary li[b-o5d4ljs7j8] {
    margin-bottom: 4px;
}

/* ===== LOADING STATE ===== */
.entity-form-loading[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
    gap: 20px;
}

.loading-spinner[b-o5d4ljs7j8] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-o5d4ljs7j8 0.8s linear infinite;
}

@keyframes spin-b-o5d4ljs7j8 {
    to { transform: rotate(360deg); }
}

.entity-form-loading p[b-o5d4ljs7j8] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* ===== TABS ===== */
.entity-form-tabs[b-o5d4ljs7j8] {
    display: flex;
    gap: 4px;
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.entity-form-tab[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.entity-form-tab:hover[b-o5d4ljs7j8] {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f6;
}

.entity-form-tab.active[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, #E31937 0%, #C01530 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(227, 25, 55, 0.3);
}

.entity-form-tab.has-errors[b-o5d4ljs7j8] { color: #EF4444; }
.entity-form-tab.has-errors.active[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, #EF4444 0%, #dc2626 100%);
    color: white;
}

.tab-icon[b-o5d4ljs7j8] { font-size: 1rem; }

.tab-error-badge[b-o5d4ljs7j8] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #EF4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* ===== SECTIONS ===== */
/* Base styles are in site.css using CSS variables - only component-specific overrides here */

/* ===== FIELD GROUPS ===== */
.field-group[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 12px;
    padding: 20px;
    grid-column: 1 / -1;
}

.field-group.border-subtle[b-o5d4ljs7j8] {
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.field-group.border-solid[b-o5d4ljs7j8] {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.field-group-header[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.field-group-icon[b-o5d4ljs7j8] { font-size: 1rem; }

.field-group-title[b-o5d4ljs7j8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f5f5f6;
    margin: 0;
    flex: 1;
}

.field-group-description[b-o5d4ljs7j8] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.field-group-collapse-icon[b-o5d4ljs7j8] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
}

.field-group-fields[b-o5d4ljs7j8] {
    display: grid;
    gap: 20px;
}

.field-group.inline .field-group-fields[b-o5d4ljs7j8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.field-group.inline .field-group-fields > *[b-o5d4ljs7j8] {
    flex: 1;
    min-width: 200px;
}

/* ===== FORM FOOTER ===== */
.entity-form-footer[b-o5d4ljs7j8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    gap: 16px;
}

.footer-left[b-o5d4ljs7j8],
.footer-right[b-o5d4ljs7j8] {
    display: flex;
    gap: 12px;
}

/* Button styles use global .btn from buttons.css */
/* Keep only component-specific button overrides */
.entity-form-footer[b-o5d4ljs7j8]  .btn-spinner {
    width: 16px;
    height: 16px;
}

/* ===== MODAL ===== */
.modal-overlay[b-o5d4ljs7j8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-dialog[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.modal-dialog h3[b-o5d4ljs7j8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f5f5f6;
    margin: 0 0 12px 0;
}

.modal-dialog p[b-o5d4ljs7j8] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.modal-actions[b-o5d4ljs7j8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ===== FORM FIELDS ===== */
.form-field[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field.disabled[b-o5d4ljs7j8] { opacity: 0.5; }

.form-field.has-error .form-input[b-o5d4ljs7j8],
.form-field.has-error .form-select[b-o5d4ljs7j8],
.form-field.has-error .form-textarea[b-o5d4ljs7j8] {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-field-label[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
}

.required-marker[b-o5d4ljs7j8] {
    color: #EF4444;
    font-weight: 700;
}

.form-field-tooltip[b-o5d4ljs7j8] {
    color: rgba(255, 255, 255, 0.4);
    cursor: help;
    font-size: 0.75rem;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.form-field-tooltip:hover[b-o5d4ljs7j8] {
    color: rgba(255, 255, 255, 0.7);
}

.form-field-input-wrapper[b-o5d4ljs7j8] { position: relative; }

/* ===== INPUT STYLES ===== */
.form-input[b-o5d4ljs7j8],
.form-select[b-o5d4ljs7j8],
.form-textarea[b-o5d4ljs7j8] {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #f5f5f6;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.form-input[b-o5d4ljs7j8]::placeholder,
.form-textarea[b-o5d4ljs7j8]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.form-input:focus[b-o5d4ljs7j8],
.form-select:focus[b-o5d4ljs7j8],
.form-textarea:focus[b-o5d4ljs7j8] {
    outline: none;
    border-color: #E31937;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.form-input:hover:not(:focus):not(:disabled)[b-o5d4ljs7j8],
.form-select:hover:not(:focus):not(:disabled)[b-o5d4ljs7j8],
.form-textarea:hover:not(:focus):not(:disabled)[b-o5d4ljs7j8] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
}

.form-input:disabled[b-o5d4ljs7j8],
.form-select:disabled[b-o5d4ljs7j8],
.form-textarea:disabled[b-o5d4ljs7j8] {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

.form-input.input-error[b-o5d4ljs7j8],
.form-select.input-error[b-o5d4ljs7j8],
.form-textarea.input-error[b-o5d4ljs7j8] {
    border-color: #EF4444;
}

.form-textarea[b-o5d4ljs7j8] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.form-readonly[b-o5d4ljs7j8] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

/* Read-only value display */
.form-value[b-o5d4ljs7j8] {
    padding: 14px 18px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    min-height: 52px;
    display: flex;
    align-items: center;
}

.form-value-empty[b-o5d4ljs7j8] {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Select */
.form-select[b-o5d4ljs7j8] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

.form-select option[b-o5d4ljs7j8] {
    background: #1a1a1a;
    color: #f5f5f6;
    padding: 12px;
}

/* Number with prefix/suffix */
.number-input-wrapper[b-o5d4ljs7j8] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-o5d4ljs7j8],
.input-suffix[b-o5d4ljs7j8] {
    position: absolute;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    font-weight: 500;
}

.input-prefix[b-o5d4ljs7j8] { left: 18px; }
.input-suffix[b-o5d4ljs7j8] { right: 18px; }

.form-input.has-prefix[b-o5d4ljs7j8] { padding-left: 44px; }
.form-input.has-suffix[b-o5d4ljs7j8] { padding-right: 44px; }

/* Password */
.password-input-wrapper[b-o5d4ljs7j8] { position: relative; }

.password-toggle[b-o5d4ljs7j8] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    opacity: 0.5;
    font-size: 1.1rem;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.password-toggle:hover[b-o5d4ljs7j8] {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.1);
}

/* Color picker */
.color-picker-wrapper[b-o5d4ljs7j8] {
    display: flex;
    gap: 12px;
}

.form-color-input[b-o5d4ljs7j8] {
    width: 52px;
    height: 52px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
}

.color-text-input[b-o5d4ljs7j8] { flex: 1; }

/* Toggle/Switch */
.toggle-wrapper[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 8px 0;
}

/* Modern Checkbox */
.form-checkbox[b-o5d4ljs7j8] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.form-checkbox:hover:not(:disabled)[b-o5d4ljs7j8] {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.4);
}

.form-checkbox:checked[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, #E31937 0%, #C01530 100%);
    border-color: transparent;
}

.form-checkbox:checked[b-o5d4ljs7j8]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-checkbox:focus-visible[b-o5d4ljs7j8] {
    outline: 2px solid #E31937;
    outline-offset: 2px;
}

/* Modern Switch */
.form-switch[b-o5d4ljs7j8] {
    position: relative;
    width: 52px;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.form-switch:hover:not(:disabled)[b-o5d4ljs7j8] {
    background: rgba(255, 255, 255, 0.2);
}

.form-switch:checked[b-o5d4ljs7j8] {
    background: linear-gradient(135deg, #E31937 0%, #C01530 100%);
}

.form-switch[b-o5d4ljs7j8]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.form-switch:checked[b-o5d4ljs7j8]::before {
    transform: translateX(24px);
}

.form-switch:focus-visible[b-o5d4ljs7j8] {
    outline: 2px solid #E31937;
    outline-offset: 2px;
}

.switch-slider[b-o5d4ljs7j8] {
    display: none;
}

.toggle-label[b-o5d4ljs7j8] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Help and Errors */
.form-field-help[b-o5d4ljs7j8] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.form-field-errors[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field-error[b-o5d4ljs7j8] {
    font-size: 0.8rem;
    color: #f87171;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-field-error[b-o5d4ljs7j8]::before {
    content: '⚠';
    font-size: 0.7rem;
}

/* ===== TAGS INPUT ===== */
.tags-input-wrapper[b-o5d4ljs7j8] {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    min-height: 52px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.tags-input-wrapper:focus-within[b-o5d4ljs7j8] {
    border-color: #E31937;
    box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.2);
}

.tags-input-wrapper.has-error[b-o5d4ljs7j8] {
    border-color: #EF4444;
}

.tags-container[b-o5d4ljs7j8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.tag[b-o5d4ljs7j8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.2) 0%, rgba(227, 25, 55, 0.1) 100%);
    border: 1px solid rgba(227, 25, 55, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #f87171;
}

.tag-remove[b-o5d4ljs7j8] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    margin-left: 2px;
    transition: opacity 0.2s ease;
}

.tag-remove:hover[b-o5d4ljs7j8] { opacity: 1; }

.tags-input[b-o5d4ljs7j8] {
    flex: 1;
    min-width: 100px;
    background: none;
    border: none;
    color: #f5f5f6;
    font-size: 0.9rem;
    outline: none;
    padding: 4px 0;
}

.tags-input[b-o5d4ljs7j8]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* ===== MULTI-SELECT ===== */
.multi-select-wrapper[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.multi-select-tags[b-o5d4ljs7j8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.multi-select-tag[b-o5d4ljs7j8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #60a5fa;
}

/* ===== FILE UPLOAD ===== */
.file-upload-wrapper[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.file-upload-input[b-o5d4ljs7j8] { display: none; }

.file-upload-dropzone[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-dropzone:hover[b-o5d4ljs7j8],
.file-upload-wrapper.dragging .file-upload-dropzone[b-o5d4ljs7j8] {
    border-color: #E31937;
    background: rgba(227, 25, 55, 0.08);
}

.file-upload-wrapper.has-error .file-upload-dropzone[b-o5d4ljs7j8] {
    border-color: #EF4444;
}

.upload-icon[b-o5d4ljs7j8] {
    font-size: 3rem;
    margin-bottom: 14px;
    opacity: 0.6;
}

.upload-text[b-o5d4ljs7j8] { text-align: center; }

.upload-text-primary[b-o5d4ljs7j8] {
    display: block;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    font-weight: 500;
}

.upload-link[b-o5d4ljs7j8] {
    color: #E31937;
    text-decoration: underline;
}

.upload-text-secondary[b-o5d4ljs7j8] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Upload progress */
.upload-progress-container[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.upload-progress-icon[b-o5d4ljs7j8] {
    font-size: 2.5rem;
    animation: bounce-b-o5d4ljs7j8 1s ease-in-out infinite;
}

@keyframes bounce-b-o5d4ljs7j8 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.upload-progress-info[b-o5d4ljs7j8] {
    width: 100%;
    text-align: center;
}

.upload-progress-text[b-o5d4ljs7j8] {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.upload-progress-bar-wrapper[b-o5d4ljs7j8] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.upload-progress-bar[b-o5d4ljs7j8] {
    height: 100%;
    background: linear-gradient(90deg, #E31937 0%, #C01530 100%);
    border-radius: 8px;
    transition: width 0.1s linear;
}

.upload-progress-percent[b-o5d4ljs7j8] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #E31937;
}

.upload-progress-speed[b-o5d4ljs7j8] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
}

.upload-cancel-btn[b-o5d4ljs7j8] {
    background: none;
    border: 1px solid #EF4444;
    color: #EF4444;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-cancel-btn:hover[b-o5d4ljs7j8] {
    background: rgba(239, 68, 68, 0.15);
}

/* Uploaded files */
.uploaded-files-list[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uploaded-file-item[b-o5d4ljs7j8] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.uploaded-file-item:hover[b-o5d4ljs7j8] {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.15);
}

.uploaded-file-preview[b-o5d4ljs7j8] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.uploaded-file-thumbnail[b-o5d4ljs7j8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uploaded-file-icon[b-o5d4ljs7j8] {
    font-size: 1.5rem;
}

.uploaded-file-info[b-o5d4ljs7j8] {
    flex: 1;
    min-width: 0;
}

.uploaded-file-name[b-o5d4ljs7j8] {
    display: block;
    font-size: 0.9rem;
    color: #f5f5f6;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file-size[b-o5d4ljs7j8] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.uploaded-file-remove[b-o5d4ljs7j8] {
    background: none;
    border: none;
    color: #EF4444;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 6px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.uploaded-file-remove:hover[b-o5d4ljs7j8] {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}

.file-upload-error[b-o5d4ljs7j8] {
    font-size: 0.9rem;
    color: #EF4444;
}

/* ===== ENTITY SELECTOR (uses native select) ===== */
.form-field-input-wrapper[b-o5d4ljs7j8] {
    position: relative;
}

.select-loading-indicator[b-o5d4ljs7j8] {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-o5d4ljs7j8 0.8s linear infinite;
    pointer-events: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .section-fields[b-o5d4ljs7j8] {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .entity-form-header[b-o5d4ljs7j8],
    .entity-form-content[b-o5d4ljs7j8],
    .entity-form-footer[b-o5d4ljs7j8] {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .entity-form-header[b-o5d4ljs7j8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .entity-form-footer[b-o5d4ljs7j8] {
        flex-direction: column;
    }

    .footer-left[b-o5d4ljs7j8],
    .footer-right[b-o5d4ljs7j8] {
        width: 100%;
        justify-content: center;
    }

    .section-fields[b-o5d4ljs7j8] {
        grid-template-columns: 1fr !important;
    }

    .entity-form-tabs[b-o5d4ljs7j8] {
        flex-wrap: wrap;
    }

    .entity-form-header[b-o5d4ljs7j8],
    .entity-form-content[b-o5d4ljs7j8],
    .entity-form-footer[b-o5d4ljs7j8] {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== HTML Field Toggle ===== */
.html-field-wrapper[b-o5d4ljs7j8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.html-field-toggle[b-o5d4ljs7j8] {
    display: flex;
    gap: var(--space-1);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    width: fit-content;
}

.html-field-toggle .toggle-btn[b-o5d4ljs7j8] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
}

.html-field-toggle .toggle-btn:hover:not(:disabled)[b-o5d4ljs7j8] {
    color: var(--color-text);
    background: var(--glass-surface);
}

.html-field-toggle .toggle-btn.active[b-o5d4ljs7j8] {
    background: var(--glass-ring);
    color: var(--accent);
}

.html-field-toggle .toggle-btn:disabled[b-o5d4ljs7j8] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/Backend.HQ.Web/Components/Shared/Forms/FormColorPalette.razor.rz.scp.css */
/* ============================================
   FormColorPalette - Color Swatch Array Display
   ============================================ */

.color-palette[b-sysnkuwlb1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.palette-swatches[b-sysnkuwlb1] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.palette-swatch-wrapper[b-sysnkuwlb1] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--duration-fast) var(--ease-standard);
}

.palette-swatch-wrapper.clickable[b-sysnkuwlb1] {
    cursor: pointer;
}

.palette-swatch-wrapper.clickable:active[b-sysnkuwlb1] {
    transform: scale(0.95);
}

.palette-swatch-wrapper:hover[b-sysnkuwlb1] {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Checkerboard for alpha visualization */
.swatch-checkerboard[b-sysnkuwlb1] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, #3a3a3a 25%, transparent 25%),
        linear-gradient(-45deg, #3a3a3a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3a3a3a 75%),
        linear-gradient(-45deg, transparent 75%, #3a3a3a 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #2a2a2a;
}

.swatch-color[b-sysnkuwlb1] {
    position: absolute;
    inset: 0;
}

/* Tooltip showing color code on hover */
.swatch-tooltip[b-sysnkuwlb1] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--gray-900);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltip-in-b-sysnkuwlb1 0.1s ease-out;
}

.swatch-tooltip[b-sysnkuwlb1]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gray-900);
}

@keyframes tooltip-in-b-sysnkuwlb1 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Overflow indicator */
.palette-overflow[b-sysnkuwlb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Empty state */
.palette-empty[b-sysnkuwlb1] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Compact mode */
.color-palette.compact .palette-swatch-wrapper[b-sysnkuwlb1] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.color-palette.compact .palette-swatches[b-sysnkuwlb1] {
    gap: 4px;
}

.color-palette.compact .palette-overflow[b-sysnkuwlb1] {
    width: 20px;
    height: 20px;
    font-size: 9px;
}
/* _content/Backend.HQ.Web/Components/Shared/Forms/FormColorPicker.razor.rz.scp.css */
/* Simple Color Picker */

.color-picker[b-5ka9ackl82] {
    width: 100%;
}

.color-picker.disabled[b-5ka9ackl82] {
    pointer-events: none;
}

.color-picker.disabled .color-value[b-5ka9ackl82] {
    opacity: 0.8;
}

.color-picker-display[b-5ka9ackl82],
.color-picker-input[b-5ka9ackl82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-swatch-wrapper[b-5ka9ackl82] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.color-swatch-checkerboard[b-5ka9ackl82] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, #3a3a3a 25%, transparent 25%),
        linear-gradient(-45deg, #3a3a3a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3a3a3a 75%),
        linear-gradient(-45deg, transparent 75%, #3a3a3a 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #2a2a2a;
}

.color-swatch[b-5ka9ackl82] {
    position: absolute;
    inset: 0;
}

.color-value[b-5ka9ackl82] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.color-input[b-5ka9ackl82] {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}

.color-input[b-5ka9ackl82]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-input[b-5ka9ackl82]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.color-text[b-5ka9ackl82] {
    flex: 1;
    padding: 0.5rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.color-text:focus[b-5ka9ackl82] {
    outline: none;
    border-color: var(--info);
}
/* _content/Backend.HQ.Web/Components/Shared/Forms/FormSlider.razor.rz.scp.css */
/* FormSlider - Glass Design System v2.1 */
/* Consistent with buttons.css glass surface and glow patterns */

/* ============================================
   CSS Variables for Color Variants
   ============================================ */
.form-slider[b-utcj0erahr] {
    /* Default to primary (blue) - can be overridden via --slider-color-rgb */
    --_slider-rgb: var(--slider-color-rgb, 59, 130, 246);
    --_slider-highlight-rgb: var(--slider-highlight-rgb, 147, 197, 253);
    --_slider-glow: 0.15;
    --_slider-glow-hover: 0.35;
}

/* Brand variant (UA Red) */
.form-slider.slider-brand[b-utcj0erahr] {
    --_slider-rgb: 227, 25, 55;
    --_slider-highlight-rgb: 246, 106, 122;
}

/* Success variant (Green) */
.form-slider.slider-success[b-utcj0erahr] {
    --_slider-rgb: 16, 185, 129;
    --_slider-highlight-rgb: 110, 231, 183;
}

/* Warning variant (Amber) */
.form-slider.slider-warning[b-utcj0erahr] {
    --_slider-rgb: 245, 158, 11;
    --_slider-highlight-rgb: 252, 211, 77;
}

/* ============================================
   Slider Label Value Display
   ============================================ */
.slider-label-value[b-utcj0erahr] {
    font-weight: 400;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin-left: 0.25rem;
}

/* ============================================
   Container
   ============================================ */
.slider-container[b-utcj0erahr] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 28px;
}

/* ============================================
   Track (Glass Surface Pattern)
   ============================================ */
.slider-track[b-utcj0erahr] {
    flex: 1;
    position: relative;
    height: 8px;
    /* Glass surface pattern from _vars.css */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
    border-radius: 9999px;
    overflow: hidden;
    /* Subtle inset shadow for depth */
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Track hover state */
.form-slider:not(.disabled):hover .slider-track[b-utcj0erahr] {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 12px rgba(var(--_slider-rgb), 0.1);
}

/* ============================================
   Fill (Gradient with Glow)
   ============================================ */
.slider-fill[b-utcj0erahr] {
    height: 100%;
    /* Multi-stop gradient matching button patterns */
    background: linear-gradient(
        90deg,
        rgba(var(--_slider-rgb), 0.7) 0%,
        rgba(var(--_slider-rgb), 0.85) 50%,
        rgba(var(--_slider-highlight-rgb), 0.9) 100%
    );
    border-radius: 9999px;
    transition: width 0.05s ease-out;
    /* Glow effect */
    box-shadow:
        0 0 12px rgba(var(--_slider-rgb), var(--_slider-glow)),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Enhanced glow on hover */
.form-slider:not(.disabled):hover .slider-fill[b-utcj0erahr] {
    box-shadow:
        0 0 20px rgba(var(--_slider-rgb), var(--_slider-glow-hover)),
        0 0 8px rgba(var(--_slider-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ============================================
   Range Input (Invisible, overlays track)
   ============================================ */
.slider-range[b-utcj0erahr] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 28px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.slider-range:focus[b-utcj0erahr] {
    outline: none;
}

/* Webkit track - transparent */
.slider-range[b-utcj0erahr]::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border-radius: 9999px;
}

/* ============================================
   Thumb (Glass Button Style)
   ============================================ */
.slider-range[b-utcj0erahr]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -5px;
    /* Glass gradient background */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(240, 240, 240, 0.9) 100%
    );
    border: 2px solid rgba(var(--_slider-rgb), 0.6);
    border-radius: 50%;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    /* Multi-layer shadow for depth */
    box-shadow:
        0 0 8px rgba(var(--_slider-rgb), 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.slider-range[b-utcj0erahr]::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    border-color: rgba(var(--_slider-rgb), 0.9);
    box-shadow:
        0 0 16px rgba(var(--_slider-rgb), 0.4),
        0 0 6px rgba(var(--_slider-rgb), 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.slider-range[b-utcj0erahr]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.18);
    border-color: rgb(var(--_slider-rgb));
    box-shadow:
        0 0 24px rgba(var(--_slider-rgb), 0.5),
        0 0 10px rgba(var(--_slider-rgb), 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 2px 2px rgba(0, 0, 0, 0.05);
}

/* Focus ring */
.slider-range:focus-visible[b-utcj0erahr]::-webkit-slider-thumb {
    outline: 2px solid rgba(var(--_slider-rgb), 0.6);
    outline-offset: 2px;
}

/* Firefox track - transparent */
.slider-range[b-utcj0erahr]::-moz-range-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 9999px;
}

/* Firefox thumb */
.slider-range[b-utcj0erahr]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(240, 240, 240, 0.9) 100%
    );
    border: 2px solid rgba(var(--_slider-rgb), 0.6);
    border-radius: 50%;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow:
        0 0 8px rgba(var(--_slider-rgb), 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.slider-range[b-utcj0erahr]::-moz-range-thumb:hover {
    transform: scale(1.12);
    border-color: rgba(var(--_slider-rgb), 0.9);
    box-shadow:
        0 0 16px rgba(var(--_slider-rgb), 0.4),
        0 0 6px rgba(var(--_slider-rgb), 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* ============================================
   Disabled State
   ============================================ */
.form-slider.disabled .slider-track[b-utcj0erahr] {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.04);
}

.form-slider.disabled .slider-fill[b-utcj0erahr] {
    background: linear-gradient(
        90deg,
        rgba(100, 100, 100, 0.5) 0%,
        rgba(120, 120, 120, 0.6) 100%
    );
    box-shadow: none;
}

/* ============================================
   Error State
   ============================================ */
.form-slider.has-error .slider-track[b-utcj0erahr] {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(239, 68, 68, 0.2);
}

.form-slider.has-error .slider-fill[b-utcj0erahr] {
    --_slider-rgb: 239, 68, 68;
    --_slider-highlight-rgb: 252, 165, 165;
}

.slider-range.input-error[b-utcj0erahr]::-webkit-slider-thumb {
    border-color: rgba(239, 68, 68, 0.8);
}

.slider-range.input-error[b-utcj0erahr]::-moz-range-thumb {
    border-color: rgba(239, 68, 68, 0.8);
}

/* ============================================
   Value Display (when no label)
   ============================================ */
.slider-value[b-utcj0erahr] {
    min-width: 3.5rem;
    padding: 0.25rem 0.5rem;
    /* Glass surface */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.form-slider.disabled .slider-value[b-utcj0erahr] {
    background: transparent;
    border: none;
    padding-left: 0;
    box-shadow: none;
}

/* ============================================
   Presets (Glass Button Style)
   ============================================ */
.slider-presets[b-utcj0erahr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.btn-preset[b-utcj0erahr] {
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
    font-weight: 500;
    /* Glass surface matching button patterns */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-preset:hover[b-utcj0erahr] {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-preset.active[b-utcj0erahr] {
    /* Use slider color for active state */
    background: linear-gradient(
        135deg,
        rgba(var(--_slider-rgb), 0.2) 0%,
        rgba(var(--_slider-rgb), 0.08) 50%,
        rgba(var(--_slider-rgb), 0.15) 100%
    );
    border-color: rgba(var(--_slider-rgb), 0.5);
    color: rgb(var(--_slider-highlight-rgb));
    box-shadow:
        0 0 12px rgba(var(--_slider-rgb), 0.15),
        inset 0 1px 0 rgba(var(--_slider-highlight-rgb), 0.2);
}

.btn-preset:focus-visible[b-utcj0erahr] {
    outline: 2px solid rgba(var(--_slider-rgb), 0.5);
    outline-offset: 2px;
}
/* _content/Backend.HQ.Web/Components/Shared/ImageContentAnalysisOverlay.razor.rz.scp.css */
/* Analysis Overlay Container */
.analysis-overlay[b-xm4k0t3l9c] {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* Panel on left side */
}

.analysis-overlay.compact .analysis-metrics-panel[b-xm4k0t3l9c] {
    max-width: 200px;
    font-size: 11px;
}

/* SVG Bounds Overlay - fills entire container */
.analysis-bounds-svg[b-xm4k0t3l9c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Union bounding box - primary highlight */
.union-bounds[b-xm4k0t3l9c] {
    fill: none;
    stroke: #00ff88;
    stroke-width: 1;
    stroke-dasharray: 6 3;
    opacity: 0.9;
}

/* Individual region bounds */
.region-bounds[b-xm4k0t3l9c] {
    fill: rgba(0, 150, 255, 0.08);
    stroke: #0096ff;
    stroke-width: 0.75;
    opacity: 0.7;
}

.region-bounds.primary[b-xm4k0t3l9c] {
    fill: rgba(0, 255, 136, 0.1);
    stroke: #00ff88;
    stroke-width: 1;
    opacity: 0.9;
}

.region-bounds.secondary[b-xm4k0t3l9c] {
    stroke-dasharray: 4 2;
}

/* Center lines (crosshair) */
.center-line[b-xm4k0t3l9c] {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 0.5;
    stroke-dasharray: 3 3;
}

/* Centroid markers */
.centroid-marker[b-xm4k0t3l9c] {
    fill: #0096ff;
    stroke: white;
    stroke-width: 1;
    opacity: 0.8;
}

.centroid-marker.primary[b-xm4k0t3l9c] {
    fill: #00ff88;
    r: 5;
}

/* Global centroid */
.global-centroid[b-xm4k0t3l9c] {
    fill: #ff6b00;
    stroke: white;
    stroke-width: 1;
}

/* Image center reference */
.image-center[b-xm4k0t3l9c] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1;
    stroke-dasharray: 2 2;
}

/* Offset line from center to centroid */
.offset-line[b-xm4k0t3l9c] {
    stroke: #ff6b00;
    stroke-width: 0.75;
    stroke-dasharray: 4 2;
    opacity: 0.7;
}

/* Safe zone rectangle */
.safe-zone[b-xm4k0t3l9c] {
    fill: none;
    stroke: #ffcc00;
    stroke-width: 1;
    stroke-dasharray: 4 2;
    opacity: 0.6;
}

/* ========================================
   Metrics Panel - Framework consistent glass card
   ======================================== */
.analysis-metrics-panel[b-xm4k0t3l9c] {
    position: relative;
    margin: 50px 12px 12px 12px;
    max-width: 220px;
    /* Framework glass-card styling */
    background: var(--glass-surface, rgba(10, 10, 15, 0.85));
    backdrop-filter: var(--blur-lg, blur(20px)) saturate(180%);
    -webkit-backdrop-filter: var(--blur-lg, blur(20px)) saturate(180%);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-xl, 12px);
    padding: var(--space-4, 16px);
    pointer-events: auto;
    box-shadow: var(--shadow-2, 0 8px 32px rgba(0, 0, 0, 0.4));
    font-family: var(--font-ui, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 12px;
    color: var(--color-text, rgba(255, 255, 255, 0.9));
    max-height: calc(100% - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.analysis-metrics-panel[b-xm4k0t3l9c]::-webkit-scrollbar {
    width: 4px;
}

.analysis-metrics-panel[b-xm4k0t3l9c]::-webkit-scrollbar-track {
    background: transparent;
}

.analysis-metrics-panel[b-xm4k0t3l9c]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Header - matches framework section headers */
.metrics-header[b-xm4k0t3l9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3, 12px);
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.metrics-title[b-xm4k0t3l9c] {
    font-weight: 600;
    font-size: 11px;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metrics-close[b-xm4k0t3l9c] {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle, rgba(255, 255, 255, 0.5));
    transition: all 0.15s ease;
}

.metrics-close:hover[b-xm4k0t3l9c] {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff5050;
}

/* Metrics Grid */
.metrics-grid[b-xm4k0t3l9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

/* Metric Section - matches framework card sections */
.metric-section[b-xm4k0t3l9c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-label[b-xm4k0t3l9c] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle, rgba(255, 255, 255, 0.4));
    margin-bottom: 4px;
}

/* Metric Row - matches framework card-meta styling */
.metric-row[b-xm4k0t3l9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.metric-label[b-xm4k0t3l9c] {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
    font-size: 11px;
}

.metric-value[b-xm4k0t3l9c] {
    font-weight: 500;
    color: var(--color-text, rgba(255, 255, 255, 0.95));
    font-variant-numeric: tabular-nums;
}

.metric-value.mono[b-xm4k0t3l9c] {
    font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', 'Consolas', monospace);
    font-size: 10px;
    letter-spacing: -0.02em;
}

/* Badge styles - matches framework badge system */
.metric-value.badge[b-xm4k0t3l9c] {
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-value.badge.ok[b-xm4k0t3l9c] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.metric-value.badge.warn[b-xm4k0t3l9c] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.metric-value.badge.landscape[b-xm4k0t3l9c] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.metric-value.badge.portrait[b-xm4k0t3l9c] {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

.metric-value.badge.square[b-xm4k0t3l9c] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* QA Score colors */
.metric-value.low[b-xm4k0t3l9c] {
    color: #22c55e;
}

.metric-value.medium[b-xm4k0t3l9c] {
    color: #f59e0b;
}

.metric-value.high[b-xm4k0t3l9c] {
    color: #ef4444;
}

/* Toggle Controls - framework checkbox style */
.metrics-controls[b-xm4k0t3l9c] {
    display: flex;
    gap: 12px;
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.toggle-control[b-xm4k0t3l9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 10px;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
    user-select: none;
    transition: color 0.15s ease;
}

.toggle-control input[type="checkbox"][b-xm4k0t3l9c] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent, #e31937);
    cursor: pointer;
    border-radius: 3px;
}

.toggle-control:hover[b-xm4k0t3l9c] {
    color: var(--color-text, rgba(255, 255, 255, 0.9));
}

/* No Data State */
.analysis-overlay.no-data[b-xm4k0t3l9c] {
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

.no-data-message[b-xm4k0t3l9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-5, 20px);
    background: var(--glass-surface, rgba(20, 20, 25, 0.9));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg, 8px);
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
}

.no-data-message svg[b-xm4k0t3l9c] {
    opacity: 0.5;
}

/* Animation for overlay appearance */
.analysis-overlay[b-xm4k0t3l9c] {
    animation: fadeIn-b-xm4k0t3l9c 0.2s ease;
}

@keyframes fadeIn-b-xm4k0t3l9c {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Compact mode adjustments */
.analysis-overlay.compact .metrics-grid[b-xm4k0t3l9c] {
    gap: 8px;
}

.analysis-overlay.compact .metric-section[b-xm4k0t3l9c] {
    gap: 2px;
}

.analysis-overlay.compact .metric-row[b-xm4k0t3l9c] {
    padding: 2px 0;
}

.analysis-overlay.compact .section-label[b-xm4k0t3l9c] {
    font-size: 8px;
    margin-bottom: 2px;
}

.analysis-overlay.compact .metric-label[b-xm4k0t3l9c] {
    font-size: 10px;
}

.analysis-overlay.compact .metric-value[b-xm4k0t3l9c] {
    font-size: 10px;
}

.analysis-overlay.compact .metrics-header[b-xm4k0t3l9c] {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.analysis-overlay.compact .metrics-title[b-xm4k0t3l9c] {
    font-size: 10px;
}

.analysis-overlay.compact .metrics-controls[b-xm4k0t3l9c] {
    margin-top: 8px;
    padding-top: 6px;
    gap: 8px;
}

.analysis-overlay.compact .toggle-control[b-xm4k0t3l9c] {
    font-size: 9px;
}
/* _content/Backend.HQ.Web/Components/Shared/InterlacedPattern.razor.rz.scp.css */
.interlaced-pattern[b-2324316sk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.interlaced-pattern svg[b-2324316sk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* _content/Backend.HQ.Web/Components/Shared/Lister.razor.rz.scp.css */
/* ==========================================================================
   Lister Component Styles
   Responsive, optimized for desktop and mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Support
   -------------------------------------------------------------------------- */
.lister-container[b-l9p8g8b0gl] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* CJK text optimization */
.lister-container :lang(zh)[b-l9p8g8b0gl],
.lister-container :lang(ja)[b-l9p8g8b0gl],
.lister-container :lang(ko)[b-l9p8g8b0gl] {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
    word-break: break-all;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.lister-container[b-l9p8g8b0gl] {
    padding: 1.5rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

@media (min-width: 768px) {
    .lister-container[b-l9p8g8b0gl] {
        padding: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Header - Single Row Layout (Sticky)
   -------------------------------------------------------------------------- */
.lister-header[b-l9p8g8b0gl] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--gray-900), transparent 5%);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    margin: -1.5rem -1.5rem 1.25rem -1.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

@media (min-width: 768px) {
    .lister-header[b-l9p8g8b0gl] {
        flex-wrap: nowrap;
        margin: -2rem -2rem 1.5rem -2rem;
        padding: 1rem 2rem;
    }
}

.lister-header-left[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .lister-header-left[b-l9p8g8b0gl] {
        flex-wrap: nowrap;
    }
}

.lister-header-info[b-l9p8g8b0gl] {
    flex-shrink: 0;
}

.lister-header-info h2[b-l9p8g8b0gl] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
}

.lister-header-info p[b-l9p8g8b0gl] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.lister-header-search[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 400px;
    min-width: 200px;
}

.lister-header-search .lister-search-input[b-l9p8g8b0gl] {
    flex: 1;
    min-width: 150px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.lister-header-search .lister-filters-button[b-l9p8g8b0gl] {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.lister-filter-badge[b-l9p8g8b0gl] {
    background: #3B82F6;
    color: white;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   Sort Controls
   -------------------------------------------------------------------------- */
.lister-sort-controls[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.lister-sort-select[b-l9p8g8b0gl] {
    padding: 0.375rem 0.625rem;
    padding-right: 1.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    min-width: 100px;
}

.lister-sort-select:hover[b-l9p8g8b0gl] {
    color: var(--color-text);
}

.lister-sort-select:focus[b-l9p8g8b0gl] {
    outline: none;
    color: var(--color-text);
}

.lister-sort-select option[b-l9p8g8b0gl] {
    background: var(--gray-800);
    color: var(--color-text);
    padding: 0.5rem;
}

.lister-sort-direction-btn[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-left: 1px solid var(--glass-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.lister-sort-direction-btn:hover:not(:disabled)[b-l9p8g8b0gl] {
    background: var(--glass-surface-hover);
    color: var(--color-text);
}

.lister-sort-direction-btn:disabled[b-l9p8g8b0gl] {
    opacity: 0.4;
    cursor: not-allowed;
}

.lister-sort-direction-btn svg[b-l9p8g8b0gl] {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.lister-sort-direction-btn.desc svg[b-l9p8g8b0gl] {
    color: var(--info);
}

.lister-sort-direction-btn.asc svg[b-l9p8g8b0gl] {
    color: var(--success);
}

.lister-sort-direction-btn:focus-visible[b-l9p8g8b0gl] {
    outline: 2px solid var(--info);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .lister-sort-controls[b-l9p8g8b0gl] {
        order: 10;
        flex: 1 0 100%;
        margin-top: 0.5rem;
    }

    .lister-sort-select[b-l9p8g8b0gl] {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
   Header Status & Page Size
   -------------------------------------------------------------------------- */
.lister-header-status[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lister-header-status-text[b-l9p8g8b0gl] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lister-header-pagesize[b-l9p8g8b0gl] {
    padding: 0.25rem 0.5rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
}

.lister-header-pagesize option[b-l9p8g8b0gl] {
    background: var(--gray-800);
    color: var(--color-text);
}

.lister-header-pagesize:hover[b-l9p8g8b0gl] {
    background: var(--glass-surface-hover);
    color: var(--color-text);
}

.lister-header-pagesize:focus[b-l9p8g8b0gl] {
    outline: 2px solid var(--info);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Header Inline Pagination
   -------------------------------------------------------------------------- */
.lister-header-pagination[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.lister-header-pagination-btn[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    border-radius: var(--radius-sm);
}

.lister-header-pagination-btn:hover:not(:disabled)[b-l9p8g8b0gl] {
    background: var(--glass-surface-hover);
    color: var(--color-text);
}

.lister-header-pagination-btn:disabled[b-l9p8g8b0gl] {
    opacity: 0.3;
    cursor: not-allowed;
}

.lister-header-pagination-btn svg[b-l9p8g8b0gl] {
    width: 14px;
    height: 14px;
}

.lister-header-pagination-info[b-l9p8g8b0gl] {
    padding: 0 0.5rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: center;
}

.lister-header-actions[b-l9p8g8b0gl] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .lister-header-actions[b-l9p8g8b0gl] {
        gap: 0.625rem;
    }
}

/* --------------------------------------------------------------------------
   View Mode Toggle - Enhanced Design
   -------------------------------------------------------------------------- */
.lister-view-toggle[b-l9p8g8b0gl] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    order: -1;
}

@media (min-width: 640px) {
    .lister-view-toggle[b-l9p8g8b0gl] {
        order: 0;
    }
}

.lister-view-toggle button[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
    border-radius: var(--radius-sm);
}

.lister-view-toggle button svg[b-l9p8g8b0gl] {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.lister-view-toggle button:hover[b-l9p8g8b0gl] {
    color: var(--color-text-muted);
    background: var(--glass-surface-hover);
}

.lister-view-toggle button:hover svg[b-l9p8g8b0gl] {
    transform: scale(1.1);
}

.lister-view-toggle button.active[b-l9p8g8b0gl] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

.lister-view-toggle button:focus-visible[b-l9p8g8b0gl] {
    outline: 2px solid var(--info);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Search Input & Filters Button
   -------------------------------------------------------------------------- */
.lister-search-input[b-l9p8g8b0gl] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    transition: all var(--duration-base) var(--ease-standard);
}

@media (min-width: 480px) {
    .lister-search-input[b-l9p8g8b0gl] {
        min-width: 200px;
        max-width: 320px;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 768px) {
    .lister-search-input[b-l9p8g8b0gl] {
        max-width: 400px;
    }
}

.lister-search-input:focus[b-l9p8g8b0gl] {
    outline: none;
    border-color: var(--info);
    background: var(--glass-surface-hover);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.lister-search-input[b-l9p8g8b0gl]::placeholder {
    color: var(--color-text-subtle);
}

.lister-filters-button[b-l9p8g8b0gl] {
    padding: 0.625rem 0.875rem;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: var(--text-sm);
}

@media (min-width: 768px) {
    .lister-filters-button[b-l9p8g8b0gl] {
        padding: 0.75rem 1rem;
    }
}

.lister-filters-button:hover[b-l9p8g8b0gl] {
    background: var(--glass-surface-hover);
    border-color: var(--glass-border);
    color: var(--color-text);
}

.lister-filters-button:focus-visible[b-l9p8g8b0gl] {
    outline: 2px solid var(--info);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Bulk Operations Bar
   -------------------------------------------------------------------------- */
.lister-bulk-bar[b-l9p8g8b0gl] {
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .lister-bulk-bar[b-l9p8g8b0gl] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1rem;
    }
}

.lister-bulk-info[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .lister-bulk-info[b-l9p8g8b0gl] {
        font-size: 0.875rem;
    }
}

.lister-bulk-actions[b-l9p8g8b0gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Messages (Error/Success)
   -------------------------------------------------------------------------- */
.lister-message[b-l9p8g8b0gl] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    user-select:all;
}

@media (min-width: 768px) {
    .lister-message[b-l9p8g8b0gl] {
        padding: 0.875rem 1rem;
        align-items: center;
        font-size: 0.875rem;
    }
}

.lister-message svg[b-l9p8g8b0gl] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.lister-message-error[b-l9p8g8b0gl] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #F87171;
}

.lister-message-success[b-l9p8g8b0gl] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ADE80;
}

.lister-message-close[b-l9p8g8b0gl] {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.lister-message-close:hover[b-l9p8g8b0gl] {
    opacity: 1;
}

.lister-message-close:focus-visible[b-l9p8g8b0gl] {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Loading State
   -------------------------------------------------------------------------- */
.lister-loading[b-l9p8g8b0gl] {
    text-align: center;
    padding: 2.5rem 1rem;
}

@media (min-width: 768px) {
    .lister-loading[b-l9p8g8b0gl] {
        padding: 3rem;
    }
}

.lister-loading-icon[b-l9p8g8b0gl] {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    animation: lister-pulse-b-l9p8g8b0gl 1.5s ease-in-out infinite;
}

@media (min-width: 768px) {
    .lister-loading-icon[b-l9p8g8b0gl] {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
}

.lister-loading-text[b-l9p8g8b0gl] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

@keyframes lister-pulse-b-l9p8g8b0gl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.lister-empty[b-l9p8g8b0gl] {
    text-align: center;
    padding: 2.5rem 1rem;
}

@media (min-width: 768px) {
    .lister-empty[b-l9p8g8b0gl] {
        padding: 3rem;
    }
}

.lister-empty-icon[b-l9p8g8b0gl] {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

@media (min-width: 768px) {
    .lister-empty-icon[b-l9p8g8b0gl] {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
}

.lister-empty h3[b-l9p8g8b0gl] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.375rem 0;
}

@media (min-width: 768px) {
    .lister-empty h3[b-l9p8g8b0gl] {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
}

.lister-empty p[b-l9p8g8b0gl] {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.25rem 0;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .lister-empty p[b-l9p8g8b0gl] {
        margin-bottom: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Grid View - Items (Responsive Auto-Fill Grid)
   -------------------------------------------------------------------------- */
.lister-items[b-l9p8g8b0gl] {
    display: grid;
    /* Auto-fill with minimum 260px columns, max 1fr for equal distribution */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Smaller gap on mobile */
@media (max-width: 640px) {
    .lister-items[b-l9p8g8b0gl] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
}

/* For very wide screens, cap at 6 columns to prevent too-wide cards */
@media (min-width: 1800px) {
    .lister-items[b-l9p8g8b0gl] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

.lister-items-loading[b-l9p8g8b0gl] {
    pointer-events: none;
    position: relative;
}

/* Subtle loading indicator without disruptive visual effects */
.lister-items-loading[b-l9p8g8b0gl]::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--info, #3B82F6);
    border-radius: 50%;
    animation: lister-spin-b-l9p8g8b0gl 0.6s linear infinite;
    z-index: 11;
}

@keyframes lister-spin-b-l9p8g8b0gl {
    to { transform: rotate(360deg); }
}

.lister-item[b-l9p8g8b0gl] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition:
        background var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard);
    cursor: pointer;
    min-height: auto;
    position: relative;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 768px) {
    .lister-item[b-l9p8g8b0gl] {
        padding: 1.5rem;
        gap: 0.5rem;
        min-height: auto;
    }
}

/* Subtle gradient overlay on hover (top-left shine) */
.lister-item[b-l9p8g8b0gl]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    border-radius: inherit;
}

/* Bottom gradient for action button visibility */
.lister-item[b-l9p8g8b0gl]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 70%,
        rgba(0, 0, 0, 0.4) 100%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    border-radius: inherit;
}

.lister-item:hover[b-l9p8g8b0gl]::before {
    opacity: 1;
}

.lister-item:hover[b-l9p8g8b0gl]::after {
    opacity: 1;
}

.lister-item:hover[b-l9p8g8b0gl] {
    background: var(--glass-surface-hover);
    border-color: var(--glass-border);
    border-radius: 0.875rem;
    transform: translateY(-4px) scale(1.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        var(--shadow-3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 20px var(--glass-ring);
}

@media (min-width: 768px) {
    .lister-item:hover[b-l9p8g8b0gl] {
        transform: translateY(-4px) scale(1.02);
    }
}

/* Show checkbox on hover in grid mode */
.lister-item .lister-item-checkbox[b-l9p8g8b0gl] {
    opacity: 0.3;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.lister-item:hover .lister-item-checkbox[b-l9p8g8b0gl],
.lister-item-selected .lister-item-checkbox[b-l9p8g8b0gl] {
    opacity: 1;
}

.lister-item:focus-visible[b-l9p8g8b0gl] {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.lister-item-checkbox[b-l9p8g8b0gl] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: #3B82F6;
}

@media (min-width: 768px) {
    .lister-item-checkbox[b-l9p8g8b0gl] {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.lister-item-content[b-l9p8g8b0gl] {
    flex: 1;
    min-width: 0; /* Allow content to shrink */
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.lister-item-selected[b-l9p8g8b0gl] {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.2);
}

.lister-item-selected[b-l9p8g8b0gl]::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
}

.lister-item-selected:hover[b-l9p8g8b0gl] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.lister-item-loading[b-l9p8g8b0gl] {
    opacity: 0.5;
    pointer-events: none;
}

/* Active/pressed state */
.lister-item:active[b-l9p8g8b0gl] {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* Item Actions styles moved to site.css (global) - required for ItemTemplate content */

/* --------------------------------------------------------------------------
   Table View - Enhanced with Sticky Header
   -------------------------------------------------------------------------- */
.lister-table[b-l9p8g8b0gl] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .lister-table[b-l9p8g8b0gl] {
        font-size: 0.875rem;
    }
}

.lister-table thead[b-l9p8g8b0gl] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.lister-table thead tr[b-l9p8g8b0gl] {
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(8px);
}

.lister-table th[b-l9p8g8b0gl] {
    padding: 0.75rem 0.625rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .lister-table th[b-l9p8g8b0gl] {
        padding: 0.875rem 1rem;
        font-size: 0.75rem;
    }
}

.lister-table th:first-child[b-l9p8g8b0gl] {
    padding-left: 0.875rem;
}

@media (min-width: 768px) {
    .lister-table th:first-child[b-l9p8g8b0gl] {
        padding-left: 1rem;
    }
}

.lister-table th:last-child[b-l9p8g8b0gl] {
    padding-right: 0.875rem;
}

@media (min-width: 768px) {
    .lister-table th:last-child[b-l9p8g8b0gl] {
        padding-right: 1rem;
    }
}

.lister-table th.sortable[b-l9p8g8b0gl] {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.lister-table th.sortable:hover[b-l9p8g8b0gl] {
    color: rgba(255, 255, 255, 0.95);
}

.lister-sort-icon[b-l9p8g8b0gl] {
    display: inline-block;
    margin-left: 0.375rem;
    opacity: 0.4;
    font-size: 0.75rem;
    vertical-align: middle;
}

.lister-sort-icon.active[b-l9p8g8b0gl] {
    opacity: 1;
    color: #60A5FA;
}

.lister-table td[b-l9p8g8b0gl] {
    padding: 0.75rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    vertical-align: middle;
}

@media (min-width: 768px) {
    .lister-table td[b-l9p8g8b0gl] {
        padding: 0.875rem 1rem;
    }
}

.lister-table td:first-child[b-l9p8g8b0gl] {
    padding-left: 0.875rem;
}

@media (min-width: 768px) {
    .lister-table td:first-child[b-l9p8g8b0gl] {
        padding-left: 1rem;
    }
}

.lister-table td:last-child[b-l9p8g8b0gl] {
    padding-right: 0.875rem;
}

@media (min-width: 768px) {
    .lister-table td:last-child[b-l9p8g8b0gl] {
        padding-right: 1rem;
    }
}

.lister-table tbody tr[b-l9p8g8b0gl] {
    position: relative;
    transition:
        background var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
    cursor: pointer;
    user-select: none;
}

.lister-table tbody tr:hover[b-l9p8g8b0gl] {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 3px 0 0 var(--accent, #E31937);
}

.lister-table tbody tr:hover td[b-l9p8g8b0gl] {
    color: rgba(255, 255, 255, 0.95);
}

/* Table Action Buttons - Hover Reveal */
.lister-table td:last-child[b-l9p8g8b0gl]  .btn {
    opacity: 0;
    transform: translateX(4px);
    transition: all 0.15s ease;
}

.lister-table tbody tr:hover td:last-child[b-l9p8g8b0gl]  .btn,
.lister-table tbody tr:focus-within td:last-child[b-l9p8g8b0gl]  .btn {
    opacity: 1;
    transform: translateX(0);
}

/* Touch devices - always show table actions */
@media (hover: none) {
    .lister-table td:last-child[b-l9p8g8b0gl]  .btn {
        opacity: 1;
        transform: translateX(0);
    }
}

.lister-table tbody tr.lister-item-selected[b-l9p8g8b0gl] {
    background: rgba(59, 130, 246, 0.08);
}

.lister-table tbody tr.lister-item-selected:hover[b-l9p8g8b0gl] {
    background: rgba(59, 130, 246, 0.12);
}

.lister-table tbody tr.lister-item-loading[b-l9p8g8b0gl] {
    opacity: 0.5;
    pointer-events: none;
}

/* Table checkbox styling */
.lister-table input[type="checkbox"][b-l9p8g8b0gl] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #3B82F6;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .lister-table input[type="checkbox"][b-l9p8g8b0gl] {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* --------------------------------------------------------------------------
   Infinite Scroll
   -------------------------------------------------------------------------- */
.lister-scroll-sentinel[b-l9p8g8b0gl] {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.lister-loading-more[b-l9p8g8b0gl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.lister-loading-spinner[b-l9p8g8b0gl] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--info, #3B82F6);
    border-radius: 50%;
    animation: lister-spin-b-l9p8g8b0gl 0.6s linear infinite;
}

.lister-end-message[b-l9p8g8b0gl] {
    text-align: center;
    padding: 1.5rem 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8125rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Buttons - Uses global .btn from buttons.css
   -------------------------------------------------------------------------- */
/* Lister-specific button overrides */
.lister-header-actions[b-l9p8g8b0gl]  .btn svg,
.lister-empty[b-l9p8g8b0gl]  .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.lister-sr-only[b-l9p8g8b0gl] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible for all interactive elements */
.lister-container :focus:not(:focus-visible)[b-l9p8g8b0gl] {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lister-container[b-l9p8g8b0gl] {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .lister-table th[b-l9p8g8b0gl],
    .lister-table td[b-l9p8g8b0gl] {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lister-item[b-l9p8g8b0gl],
    .lister-view-toggle button[b-l9p8g8b0gl],
    .lister-table tbody tr[b-l9p8g8b0gl] {
        transition: none;
    }

    .lister-item:hover[b-l9p8g8b0gl] {
        transform: none;
    }

    .lister-loading-icon[b-l9p8g8b0gl] {
        animation: none;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/MediaAssetSelector.razor.rz.scp.css */
/* Media Asset Selector Component Styles */

.media-asset-selector[b-4bruuw18cv] {
    position: relative;
    z-index: 1;
}

/* When dropdown is open, elevate the entire component above other sections */
.media-asset-selector:focus-within[b-4bruuw18cv],
.media-asset-selector.open[b-4bruuw18cv] {
    z-index: 9999;
}

.mas-current[b-4bruuw18cv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.mas-current:hover[b-4bruuw18cv] {
    border-color: var(--glass-ring);
    background: var(--glass-hover);
}

.mas-thumb[b-4bruuw18cv] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    background: repeating-conic-gradient(var(--gray-800) 0% 25%, var(--gray-900) 0% 50%) 50% / 8px 8px;
    flex-shrink: 0;
}

.mas-name[b-4bruuw18cv] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mas-none[b-4bruuw18cv] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.mas-chevron[b-4bruuw18cv] {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    transition: transform 0.15s;
}

.media-asset-selector:focus-within .mas-chevron[b-4bruuw18cv] {
    transform: rotate(180deg);
}

.mas-dropdown[b-4bruuw18cv] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--gray-800);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mas-dropdown.dropdown-top[b-4bruuw18cv] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

.mas-search[b-4bruuw18cv] {
    padding: var(--space-2);
    border-bottom: 1px solid var(--glass-border);
}

.mas-search input[b-4bruuw18cv] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mas-search input:focus[b-4bruuw18cv] {
    outline: none;
    border-color: var(--accent);
}

.mas-search input[b-4bruuw18cv]::placeholder {
    color: var(--color-text-muted);
}

.mas-list[b-4bruuw18cv] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1);
}

.mas-item[b-4bruuw18cv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.mas-item:hover[b-4bruuw18cv] {
    background: var(--glass-hover);
}

.mas-item.selected[b-4bruuw18cv] {
    background: rgba(59, 130, 246, 0.15);
}

.mas-item .mas-thumb[b-4bruuw18cv] {
    width: 36px;
    height: 36px;
}

.mas-thumb-none[b-4bruuw18cv] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-surface);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mas-info[b-4bruuw18cv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mas-item-name[b-4bruuw18cv] {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mas-size[b-4bruuw18cv] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mas-empty[b-4bruuw18cv] {
    padding: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Compact variant */
.media-asset-selector.compact .mas-current[b-4bruuw18cv] {
    padding: var(--space-1) var(--space-2);
}

.media-asset-selector.compact .mas-thumb[b-4bruuw18cv] {
    width: 20px;
    height: 20px;
}

.media-asset-selector.compact .mas-name[b-4bruuw18cv],
.media-asset-selector.compact .mas-none[b-4bruuw18cv] {
    font-size: var(--text-xs);
}

.media-asset-selector.compact .mas-item .mas-thumb[b-4bruuw18cv] {
    width: 28px;
    height: 28px;
}
/* _content/Backend.HQ.Web/Components/Shared/MediaGridItem.razor.rz.scp.css */
/* =====================================================
   MediaGridItem - Shared Media Asset Grid Item Component
   This CSS is used across:
   - MediaAssets.razor (Lister ItemTemplate)
   - ProductMediaGallery.razor (detail page media section)
   - Any other grid displaying media assets
   ===================================================== */

.media-grid-item[b-u5q5l8kv1c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    padding-left: 19px; /* Compensate for border on non-selected */
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.media-grid-item:hover[b-u5q5l8kv1c] {
    background: rgba(255, 255, 255, 0.06);
}

.media-grid-item:focus[b-u5q5l8kv1c] {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.media-grid-item.selected[b-u5q5l8kv1c] {
    background: rgba(227, 25, 55, 0.15);
    border-left-color: #E31937;
    padding-left: 16px;
}

/* ===== DRAG HANDLE ===== */
.mgi-drag-handle[b-u5q5l8kv1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    cursor: grab;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: color 0.15s ease;
    margin-left: -6px;
}

.mgi-drag-handle:hover[b-u5q5l8kv1c] {
    color: rgba(255, 255, 255, 0.6);
}

.mgi-drag-handle:active[b-u5q5l8kv1c] {
    cursor: grabbing;
    color: #E31937;
}

/* ===== DRAG STATES ===== */
.media-grid-item.drag-over[b-u5q5l8kv1c] {
    background: rgba(227, 25, 55, 0.2);
    border-top: 2px solid #E31937;
    margin-top: -2px;
}

.media-grid-item[draggable="true"][b-u5q5l8kv1c] {
    transition: all 0.15s ease, transform 0.1s ease;
}

/* ===== DISABLED STATE ===== */
.media-grid-item.disabled[b-u5q5l8kv1c] {
    opacity: 0.5;
}

.media-grid-item.disabled .mgi-thumb-wrapper[b-u5q5l8kv1c] {
    filter: grayscale(50%);
}

.mgi-disabled-overlay[b-u5q5l8kv1c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: inherit;
    color: rgba(255, 255, 255, 0.7);
}

/* ===== ROW NUMBER ===== */
.mgi-row-number[b-u5q5l8kv1c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== THUMBNAIL ===== */
.mgi-thumb-wrapper[b-u5q5l8kv1c] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.15s ease;
}

.mgi-thumb-wrapper.compact[b-u5q5l8kv1c] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.media-grid-item.is-primary .mgi-thumb-wrapper[b-u5q5l8kv1c] {
    box-shadow: 0 0 0 2px #F59E0B;
}

.mgi-thumb[b-u5q5l8kv1c] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
}

/* ===== VIDEO OVERLAY ===== */
.mgi-video-overlay[b-u5q5l8kv1c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.media-grid-item:hover .mgi-video-overlay[b-u5q5l8kv1c] {
    opacity: 1;
}

.mgi-play-icon[b-u5q5l8kv1c] {
    width: 24px;
    height: 24px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mgi-duration[b-u5q5l8kv1c] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.5625rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    border-radius: 2px;
}

/* ===== STATUS BADGES ===== */
.mgi-status-badge[b-u5q5l8kv1c] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.5rem;
}

.mgi-status-badge.pending[b-u5q5l8kv1c] {
    background: rgba(234, 179, 8, 0.9);
    color: #1a1a2e;
}

.mgi-status-badge.approved[b-u5q5l8kv1c] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.mgi-status-badge.rejected[b-u5q5l8kv1c] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.mgi-primary-star[b-u5q5l8kv1c] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F59E0B;
    border-radius: 4px;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== DOWNLOAD STATUS OVERLAYS ===== */
.mgi-download-overlay[b-u5q5l8kv1c],
.mgi-error-overlay[b-u5q5l8kv1c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: inherit;
}

.mgi-spinner[b-u5q5l8kv1c] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: mgi-spin-b-u5q5l8kv1c 0.8s linear infinite;
}

.mgi-error-overlay[b-u5q5l8kv1c] {
    color: #F87171;
}

@keyframes mgi-spin-b-u5q5l8kv1c {
    to { transform: rotate(360deg); }
}

/* ===== DETAILS SECTION ===== */
.mgi-details[b-u5q5l8kv1c] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mgi-name[b-u5q5l8kv1c] {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgi-meta[b-u5q5l8kv1c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.mgi-meta span[b-u5q5l8kv1c] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mgi-resolution[b-u5q5l8kv1c] {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.mgi-source[b-u5q5l8kv1c] {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
}

.mgi-size[b-u5q5l8kv1c] {
    color: rgba(255, 255, 255, 0.4);
}

/* ===== PRIMARY BADGE (List view) ===== */
.mgi-primary-badge[b-u5q5l8kv1c] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ===== ACTIONS ===== */
.mgi-actions[b-u5q5l8kv1c] {
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.2s ease;
}

.media-grid-item:hover .mgi-actions[b-u5q5l8kv1c],
.media-grid-item:focus .mgi-actions[b-u5q5l8kv1c],
.media-grid-item.selected .mgi-actions[b-u5q5l8kv1c] {
    opacity: 1;
    transform: translateX(0);
}

/* ===== CARD MODE (for Lister grid view) ===== */
.media-grid-item.card-mode[b-u5q5l8kv1c] {
    flex-direction: column;
    padding: 0;
    padding-left: 0;
    border-left: none;
    background: transparent;
    gap: 0;
}

.media-grid-item.card-mode .mgi-thumb-wrapper[b-u5q5l8kv1c] {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: 4px 4px 0 0;
}

.media-grid-item.card-mode .mgi-details[b-u5q5l8kv1c] {
    padding: 8px;
    gap: 2px;
}

.media-grid-item.card-mode .mgi-name[b-u5q5l8kv1c] {
    font-size: 0.625rem;
}

.media-grid-item.card-mode .mgi-meta[b-u5q5l8kv1c] {
    font-size: 0.5rem;
    gap: 4px;
}

.media-grid-item.card-mode .mgi-source[b-u5q5l8kv1c] {
    padding: 1px 4px;
}

.media-grid-item.card-mode .mgi-primary-badge[b-u5q5l8kv1c] {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.5rem;
    padding: 2px 6px;
}

.media-grid-item.card-mode .mgi-actions[b-u5q5l8kv1c] {
    position: absolute;
    top: 8px;
    right: 8px;
}

.media-grid-item.card-mode.selected[b-u5q5l8kv1c] {
    outline: 2px solid #E31937;
    outline-offset: -2px;
    border-radius: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .mgi-thumb-wrapper[b-u5q5l8kv1c] {
        width: 56px;
        height: 56px;
    }

    .mgi-name[b-u5q5l8kv1c] {
        font-size: 0.8125rem;
    }

    .mgi-meta[b-u5q5l8kv1c] {
        flex-wrap: wrap;
        gap: 6px;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/PageHeader.razor.rz.scp.css */
/* ===== PageHeader Component Styles ===== */

.page-header[b-0exee0uya9] {
    --navbar-height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--navbar-height);
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(var(--color-surface-rgb, 26, 26, 26), 0.95) 100%);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-bottom: 1px solid var(--glass-border);
    padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-8));
    padding-left: 1.0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 1rem;
}

/* Left Section: Back Button + Title */
.page-header-left[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0; /* Allow text truncation */
    flex: 1;
    justify-content: flex-start;
}

/* Title Row: Groups back button and title together */
.page-header-title-row[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.page-header-left-slot[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Title Group */
.page-header-title-group[b-0exee0uya9] {
    min-width: 0; /* Allow text truncation */
}

.page-header-title-group[b-0exee0uya9]  .page-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header-title-group[b-0exee0uya9]  .page-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 200;
    margin: var(--space-1) 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Center Section */
.page-header-center[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Right Section: Status + Controls + Actions */
.page-header-right[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Status Badge Area */
.page-header-status[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Live Indicator */
.live-indicator[b-0exee0uya9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ef4444;
    text-transform: uppercase;
}

.live-dot[b-0exee0uya9] {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: live-pulse-b-0exee0uya9 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

@keyframes live-pulse-b-0exee0uya9 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* Timestamp Badge */
.timestamp-badge[b-0exee0uya9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    color: var(--color-text-muted);
}

.timestamp-badge svg[b-0exee0uya9] {
    opacity: 0.7;
}

/* Control Panel Area */
.page-header-controls[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Deep styles for control panel children */
.page-header-controls[b-0exee0uya9]  .preview-controls,
.page-header-controls[b-0exee0uya9]  .control-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-header-controls[b-0exee0uya9]  .current-display-name,
.page-header-controls[b-0exee0uya9]  .context-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    padding: 0 var(--space-2);
}

.page-header-controls[b-0exee0uya9]  .preview-unsaved-badge,
.page-header-controls[b-0exee0uya9]  .unsaved-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #f59e0b;
}

/* Primary Actions Area */
.page-header-actions[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Form Controls Area (Save/Cancel) - Visually Separated */
.page-header-form-controls[b-0exee0uya9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid var(--glass-border);
    margin-left: var(--space-2);
}

/* Back Button Styling */
.btn-back[b-0exee0uya9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-back:hover[b-0exee0uya9] {
    background: var(--glass-surface-hover);
    border-color: var(--glass-border-hover);
}

.btn-back:active[b-0exee0uya9] {
    transform: translateX(-2px);
}

.btn-back svg[b-0exee0uya9] {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.btn-back:hover svg[b-0exee0uya9] {
    transform: translateX(-2px);
}

/* Badge Variants */
[b-0exee0uya9] .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    color: var(--color-text);
}

[b-0exee0uya9] .badge-success {
    background: color-mix(in oklab, var(--success) 20%, transparent);
    border-color: var(--success);
    color: var(--success);
}

[b-0exee0uya9] .badge-warning {
    background: color-mix(in oklab, var(--warning) 20%, transparent);
    border-color: var(--warning);
    color: var(--warning);
}

[b-0exee0uya9] .badge-danger {
    background: color-mix(in oklab, var(--danger) 20%, transparent);
    border-color: var(--danger);
    color: var(--danger);
}

[b-0exee0uya9] .badge-info {
    background: color-mix(in oklab, var(--info) 20%, transparent);
    border-color: var(--info);
    color: var(--info);
}

/* Store Selector Compact Mode in Header */
.page-header-controls[b-0exee0uya9]  .store-selector-compact {
    min-width: 200px;
}

.page-header-controls[b-0exee0uya9]  .store-selector-compact .form-select {
    background: var(--glass-surface);
    border-color: var(--glass-border);
    font-size: var(--text-sm);
    padding: 6px 12px;
}

/* Button Group in Controls */
.page-header-controls[b-0exee0uya9]  .btn-group {
    display: flex;
    gap: 0;
}

.page-header-controls[b-0exee0uya9]  .btn-group .btn {
    border-radius: 0;
}

.page-header-controls[b-0exee0uya9]  .btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.page-header-controls[b-0exee0uya9]  .btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.page-header-controls[b-0exee0uya9]  .btn-group .btn:not(:last-child) {
    border-right: none;
}

/* Active state for toggle buttons */
.page-header-controls[b-0exee0uya9]  .btn.active,
.page-header-actions[b-0exee0uya9]  .btn.active {
    background: color-mix(in oklab, var(--primary) 25%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .page-header[b-0exee0uya9] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .page-header-left[b-0exee0uya9] {
        flex: 1 1 100%;
    }

    .page-header-right[b-0exee0uya9] {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .page-header-center[b-0exee0uya9] {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-header[b-0exee0uya9] {
        padding: var(--space-3) var(--space-4);
    }

    .page-header-title-group[b-0exee0uya9]  .page-title {
        font-size: var(--text-xl);
    }

    .page-header-right[b-0exee0uya9] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .page-header-form-controls[b-0exee0uya9] {
        padding-left: var(--space-3);
        margin-left: 0;
        border-left: none;
        border-top: 1px solid var(--glass-border);
        padding-top: var(--space-2);
        width: 100%;
        justify-content: flex-end;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/PreviewPlayer.razor.rz.scp.css */
/* Preview Player Component */

.preview-player[b-kxzzbx7a4x] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.preview-player.fullscreen[b-kxzzbx7a4x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}

/* Top Corner Fullscreen Button */
.preview-fullscreen-corner[b-kxzzbx7a4x] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.preview-fullscreen-corner:hover[b-kxzzbx7a4x] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.preview-fullscreen-corner img[b-kxzzbx7a4x] {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Media Container */
.preview-media-container[b-kxzzbx7a4x] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    overflow: hidden;
}

.preview-video[b-kxzzbx7a4x],
.preview-image[b-kxzzbx7a4x] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.preview-video[b-kxzzbx7a4x] {
    display: block;
}

.preview-image[b-kxzzbx7a4x] {
    display: none;
}

/* Loading Overlay */
.preview-loading[b-kxzzbx7a4x] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
}

.preview-spinner[b-kxzzbx7a4x] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: preview-spin-b-kxzzbx7a4x 1s linear infinite;
}

@keyframes preview-spin-b-kxzzbx7a4x {
    to { transform: rotate(360deg); }
}

/* Error Overlay */
.preview-error[b-kxzzbx7a4x] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: #ef4444;
    gap: 8px;
}

.preview-error-icon[b-kxzzbx7a4x] {
    font-size: 2rem;
}

.preview-error-message[b-kxzzbx7a4x] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Empty State */
.preview-empty[b-kxzzbx7a4x] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    gap: 8px;
}

.preview-empty-icon[b-kxzzbx7a4x] {
    font-size: 3rem;
    opacity: 0.5;
}

.preview-empty-text[b-kxzzbx7a4x] {
    font-size: 0.875rem;
}

/* Click to Play Overlay */
.preview-click-overlay[b-kxzzbx7a4x] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.preview-media-container:hover .preview-click-overlay[b-kxzzbx7a4x] {
    opacity: 1;
}

.preview-play-circle[b-kxzzbx7a4x] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

.preview-play-circle:hover[b-kxzzbx7a4x] {
    transform: scale(1.1);
    background: #fff;
}

.preview-play-circle svg[b-kxzzbx7a4x],
.preview-play-circle img[b-kxzzbx7a4x] {
    margin-left: 4px;
}

/* Player Icons */
.player-icon[b-kxzzbx7a4x] {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.player-icon-sm[b-kxzzbx7a4x] {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.player-icon-lg[b-kxzzbx7a4x] {
    width: 32px;
    height: 32px;
    filter: brightness(0);
    margin-left: 4px;
}

/* Controls */
.preview-controls[b-kxzzbx7a4x] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 24px 12px 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-player:hover .preview-controls[b-kxzzbx7a4x],
.preview-controls.visible[b-kxzzbx7a4x] {
    opacity: 1;
}

/* Progress Bar */
.preview-progress-bar[b-kxzzbx7a4x] {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: height 0.2s ease;
}

.preview-progress-bar:hover[b-kxzzbx7a4x] {
    height: 6px;
}

.preview-progress-fill[b-kxzzbx7a4x] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #3B82F6;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.preview-progress-handle[b-kxzzbx7a4x] {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.preview-progress-bar:hover .preview-progress-handle[b-kxzzbx7a4x] {
    opacity: 1;
}

/* Controls Row */
.preview-controls-row[b-kxzzbx7a4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.preview-controls-left[b-kxzzbx7a4x],
.preview-controls-right[b-kxzzbx7a4x] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Control Buttons */
.preview-btn[b-kxzzbx7a4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.preview-btn:hover[b-kxzzbx7a4x] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.preview-btn:disabled[b-kxzzbx7a4x] {
    opacity: 0.4;
    cursor: not-allowed;
}

.preview-btn:disabled:hover[b-kxzzbx7a4x] {
    background: transparent;
}

.preview-play-btn[b-kxzzbx7a4x] {
    width: 36px;
    height: 36px;
}

/* Time Display */
.preview-time-display[b-kxzzbx7a4x] {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 8px;
    min-width: 90px;
}

/* Volume Slider */
.preview-volume-slider[b-kxzzbx7a4x] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.preview-volume-slider[b-kxzzbx7a4x]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.preview-volume-slider[b-kxzzbx7a4x]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Info Bar */
.preview-info-bar[b-kxzzbx7a4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-title[b-kxzzbx7a4x] {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.preview-subtitle[b-kxzzbx7a4x] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .preview-controls[b-kxzzbx7a4x] {
        padding: 16px 8px 6px;
    }

    .preview-btn[b-kxzzbx7a4x] {
        width: 28px;
        height: 28px;
    }

    .preview-play-btn[b-kxzzbx7a4x] {
        width: 32px;
        height: 32px;
    }

    .preview-time-display[b-kxzzbx7a4x] {
        font-size: 11px;
        min-width: 70px;
    }

    .preview-volume-slider[b-kxzzbx7a4x] {
        display: none;
    }

    .preview-play-circle[b-kxzzbx7a4x] {
        width: 48px;
        height: 48px;
    }

    .preview-play-circle svg[b-kxzzbx7a4x] {
        width: 24px;
        height: 24px;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/ProductMediaGallery.razor.rz.scp.css */
/* ProductMediaGallery - Production Ready Glassmorphism Design */

.product-media-gallery[b-ighu7yll1w] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

/* ===== HEADER ===== */
.pmg-header[b-ighu7yll1w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pmg-header-info[b-ighu7yll1w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pmg-title[b-ighu7yll1w] {
    font-size: 1rem;
    font-weight: 600;
    color: #f5f5f6;
    margin: 0;
}

.pmg-count[b-ighu7yll1w] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 12px;
}

.pmg-actions[b-ighu7yll1w] {
    display: flex;
    gap: 8px;
}

/* ===== CONTENT LAYOUT ===== */
.pmg-content[b-ighu7yll1w] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===== PREVIEW SECTION ===== */
.pmg-preview-section[b-ighu7yll1w] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pmg-main-preview[b-ighu7yll1w] {
    position: relative;
    width: 320px;
    height: 320px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s ease;
}

.pmg-main-preview:hover[b-ighu7yll1w] {
    background: rgba(0, 0, 0, 0.4);
}

.pmg-main-media[b-ighu7yll1w] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pmg-main-media.pmg-clickable[b-ighu7yll1w] {
    cursor: pointer;
}

.pmg-primary-badge[b-ighu7yll1w] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* Expand button - replaces expand hint */
.pmg-expand-btn[b-ighu7yll1w] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmg-main-preview:hover .pmg-expand-btn[b-ighu7yll1w] {
    opacity: 1;
}

.pmg-expand-btn:hover[b-ighu7yll1w] {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    transform: scale(1.05);
}

.pmg-expand-btn:focus[b-ighu7yll1w] {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(227, 25, 55, 0.5);
}

/* ===== ASSET INFO PANEL ===== */
.pmg-asset-info[b-ighu7yll1w] {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.15);
    min-width: 0;
}

.pmg-info-row[b-ighu7yll1w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pmg-info-label[b-ighu7yll1w] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.4);
    min-width: 80px;
    flex-shrink: 0;
}

.pmg-info-value[b-ighu7yll1w] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmg-status-badge[b-ighu7yll1w] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pmg-status-badge.status-success[b-ighu7yll1w] {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pmg-status-badge.status-pending[b-ighu7yll1w] {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.pmg-status-badge.status-error[b-ighu7yll1w] {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pmg-status-badge.status-none[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pmg-color-swatches[b-ighu7yll1w] {
    display: flex;
    gap: 6px;
}

.pmg-color-swatch[b-ighu7yll1w] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pmg-asset-actions[b-ighu7yll1w] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== GRID LAYOUT ===== */
/* Grid items are rendered by MediaGridItem component */
.pmg-grid[b-ighu7yll1w] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    max-height: 400px;
    overflow-y: auto;
}

/* Override MediaGridItem styles for this context */
.pmg-grid[b-ighu7yll1w]  .media-grid-item {
    background: rgba(0, 0, 0, 0.2);
}

.pmg-grid[b-ighu7yll1w]  .media-grid-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ===== EMPTY STATE ===== */
.pmg-empty[b-ighu7yll1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 40px;
    text-align: center;
}

.pmg-empty-icon[b-ighu7yll1w] {
    opacity: 0.4;
}

.pmg-empty-text[b-ighu7yll1w] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.pmg-empty-hint[b-ighu7yll1w] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    max-width: 280px;
}

/* ===== LIGHTBOX ===== */
.pmg-lightbox[b-ighu7yll1w] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.pmg-lightbox-close[b-ighu7yll1w] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.pmg-lightbox-close:hover[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.pmg-lightbox-close:focus[b-ighu7yll1w] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Lightbox focus for keyboard navigation */
.pmg-lightbox:focus[b-ighu7yll1w] {
    outline: none;
}

.pmg-lightbox-content[b-ighu7yll1w] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmg-lightbox-media[b-ighu7yll1w] {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.pmg-lightbox-nav[b-ighu7yll1w] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmg-lightbox-nav:hover[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.08);
}

.pmg-lightbox-nav:focus[b-ighu7yll1w] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.pmg-lightbox-nav.prev[b-ighu7yll1w] {
    left: 20px;
}

.pmg-lightbox-nav.next[b-ighu7yll1w] {
    right: 20px;
}

.pmg-lightbox-counter[b-ighu7yll1w] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 20px;
}

/* ===== MODAL ===== */
.pmg-modal-overlay[b-ighu7yll1w] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.pmg-modal[b-ighu7yll1w] {
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.pmg-modal-header[b-ighu7yll1w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pmg-modal-header h3[b-ighu7yll1w] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f5f5f6;
    margin: 0;
}

.pmg-modal-close[b-ighu7yll1w] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmg-modal-close:hover[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.pmg-modal-body[b-ighu7yll1w] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.pmg-search[b-ighu7yll1w] {
    margin-bottom: 20px;
}

.pmg-search .form-input[b-ighu7yll1w] {
    width: 100%;
}

.pmg-modal-loading[b-ighu7yll1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.pmg-available-grid[b-ighu7yll1w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pmg-available-item[b-ighu7yll1w] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pmg-available-item:hover[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.pmg-available-item.selected[b-ighu7yll1w] {
    background: rgba(227, 25, 55, 0.1);
    border-color: #E31937;
}

.pmg-available-thumb[b-ighu7yll1w] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.pmg-available-name[b-ighu7yll1w] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmg-selected-check[b-ighu7yll1w] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E31937;
    border-radius: 50%;
    color: white;
    box-shadow: 0 2px 8px rgba(227, 25, 55, 0.4);
}

.pmg-modal-empty[b-ighu7yll1w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.pmg-modal-footer[b-ighu7yll1w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.pmg-selected-count[b-ighu7yll1w] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.pmg-modal-actions[b-ighu7yll1w] {
    display: flex;
    gap: 12px;
}

/* Button styles now use global .btn from buttons.css */

.loading-spinner[b-ighu7yll1w] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #E31937;
    border-radius: 50%;
    animation: spin-b-ighu7yll1w 0.8s linear infinite;
}

@keyframes spin-b-ighu7yll1w {
    to { transform: rotate(360deg); }
}

/* ===== FORM INPUT ===== */
.form-input[b-ighu7yll1w] {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: #f5f5f6;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.form-input[b-ighu7yll1w]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.form-input:focus[b-ighu7yll1w] {
    outline: none;
    border-color: #E31937;
    box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pmg-preview-section[b-ighu7yll1w] {
        flex-direction: column;
    }

    .pmg-main-preview[b-ighu7yll1w] {
        width: 100%;
        height: 280px;
    }

    .pmg-asset-info[b-ighu7yll1w] {
        padding: 16px;
    }

    .pmg-asset-actions[b-ighu7yll1w] {
        flex-wrap: wrap;
    }

    .pmg-lightbox-nav[b-ighu7yll1w] {
        width: 44px;
        height: 44px;
    }

    .pmg-lightbox-nav.prev[b-ighu7yll1w] {
        left: 10px;
    }

    .pmg-lightbox-nav.next[b-ighu7yll1w] {
        right: 10px;
    }

    .pmg-modal[b-ighu7yll1w] {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }

    .pmg-available-grid[b-ighu7yll1w] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
}

/* ===== HOVER ACTIONS ===== */
/* Note: Parent .mgi-actions in MediaGridItem already handles show/hide on hover */
.pmg-hover-actions[b-ighu7yll1w] {
    display: flex;
    gap: 4px;
}

.pmg-action-btn[b-ighu7yll1w] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pmg-action-btn:hover[b-ighu7yll1w] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.pmg-action-btn:focus[b-ighu7yll1w] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(227, 25, 55, 0.4);
}

.pmg-action-btn.active[b-ighu7yll1w] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #F87171;
}

.pmg-action-btn.danger:hover[b-ighu7yll1w] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #F87171;
}

/* ===== SCROLLBAR ===== */
.pmg-grid[b-ighu7yll1w]::-webkit-scrollbar {
    width: 6px;
}

.pmg-grid[b-ighu7yll1w]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.pmg-grid[b-ighu7yll1w]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.pmg-grid[b-ighu7yll1w]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}
/* _content/Backend.HQ.Web/Components/Shared/ProgressBar.razor.rz.scp.css */
/*
 * ProgressBar Component Styles
 * Unified progress bar aligned with glass UI design system
 * Uses CSS variables from _vars.css
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
.progress-wrapper[b-a5f8vop3u3] {
    --progress-transition: 200ms;
    --progress-color: var(--ua-red-500, #E31937);
    --progress-color-end: var(--ua-red-400, #f24357);
    --progress-bg: rgba(255, 255, 255, 0.1);
    --progress-border-radius: 9999px;
}

/* ============================================
   Wrapper Layout
   ============================================ */
.progress-wrapper[b-a5f8vop3u3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.progress-wrapper.with-label-right[b-a5f8vop3u3] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.progress-wrapper.with-label-right .progress-container[b-a5f8vop3u3] {
    flex: 1;
}

/* ============================================
   Container (Track)
   ============================================ */
.progress-container[b-a5f8vop3u3] {
    width: 100%;
    background: var(--progress-bg);
    border-radius: var(--progress-border-radius);
    overflow: hidden;
    position: relative;
}

/* Size variants */
.progress-container.size-sm[b-a5f8vop3u3] {
    height: 4px;
}

.progress-container.size-md[b-a5f8vop3u3] {
    height: 8px;
}

.progress-container.size-lg[b-a5f8vop3u3] {
    height: 12px;
}

.progress-container.size-xl[b-a5f8vop3u3] {
    height: 16px;
}

/* ============================================
   Fill (Bar)
   ============================================ */
.progress-fill[b-a5f8vop3u3] {
    height: 100%;
    border-radius: var(--progress-border-radius);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Animated transitions */
.progress-fill.animated[b-a5f8vop3u3] {
    transition: width var(--progress-transition) cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================
   Color Variants
   ============================================ */

/* Primary - UA Red gradient */
.progress-fill.color-primary[b-a5f8vop3u3] {
    background: linear-gradient(90deg, var(--ua-red-500, #E31937), var(--ua-red-400, #f24357));
}

/* Success - Green */
.progress-fill.color-success[b-a5f8vop3u3] {
    background: linear-gradient(90deg, #10B981, #34D399);
}

/* Warning - Amber */
.progress-fill.color-warning[b-a5f8vop3u3] {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

/* Error - Red (distinct from primary) */
.progress-fill.color-error[b-a5f8vop3u3] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

/* Info - Blue */
.progress-fill.color-info[b-a5f8vop3u3] {
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

/* Custom - uses CSS variables */
.progress-fill.color-custom[b-a5f8vop3u3] {
    background: linear-gradient(90deg, var(--progress-color), var(--progress-color-end, var(--progress-color)));
}

/* ============================================
   Striped Variant
   ============================================ */
.progress-fill.striped[b-a5f8vop3u3] {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.progress-fill.striped.animated[b-a5f8vop3u3] {
    animation: progress-stripes-b-a5f8vop3u3 1s linear infinite;
}

@keyframes progress-stripes-b-a5f8vop3u3 {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* ============================================
   Indeterminate Variant
   ============================================ */
.progress-fill.indeterminate[b-a5f8vop3u3] {
    width: 30% !important;
    animation: progress-indeterminate-b-a5f8vop3u3 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate-b-a5f8vop3u3 {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ============================================
   Gradient Variant (enhanced)
   ============================================ */
.progress-fill.gradient[b-a5f8vop3u3] {
    background: linear-gradient(
        90deg,
        var(--progress-color) 0%,
        var(--progress-color-end, var(--progress-color)) 50%,
        var(--progress-color) 100%
    );
    background-size: 200% 100%;
}

.progress-fill.gradient.animated[b-a5f8vop3u3] {
    animation: progress-gradient-shift-b-a5f8vop3u3 2s ease infinite;
}

@keyframes progress-gradient-shift-b-a5f8vop3u3 {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ============================================
   Glow Variant
   ============================================ */
.progress-fill.glow[b-a5f8vop3u3] {
    box-shadow: 0 0 8px var(--progress-color),
                0 0 16px rgba(227, 25, 55, 0.3);
}

.progress-fill.glow.animated[b-a5f8vop3u3] {
    animation: progress-glow-b-a5f8vop3u3 1.5s ease-in-out infinite alternate;
}

@keyframes progress-glow-b-a5f8vop3u3 {
    0% {
        box-shadow: 0 0 4px var(--progress-color),
                    0 0 8px rgba(227, 25, 55, 0.2);
    }
    100% {
        box-shadow: 0 0 12px var(--progress-color),
                    0 0 24px rgba(227, 25, 55, 0.4);
    }
}

/* ============================================
   Labels
   ============================================ */

/* Label positioned to the right */
.progress-label-right[b-a5f8vop3u3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    min-width: 3rem;
    text-align: right;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

/* Label positioned inside the bar */
.progress-label-inside[b-a5f8vop3u3] {
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    padding-right: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Label positioned below */
.progress-label-below[b-a5f8vop3u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.progress-label-below .progress-label-text[b-a5f8vop3u3] {
    color: rgba(255, 255, 255, 0.5);
}

.progress-label-below .progress-label-value[b-a5f8vop3u3] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

/* Label positioned above */
.progress-label-above[b-a5f8vop3u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.progress-label-above .progress-label-text[b-a5f8vop3u3] {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.progress-label-above .progress-label-value[b-a5f8vop3u3] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .progress-fill[b-a5f8vop3u3],
    .progress-fill.striped[b-a5f8vop3u3],
    .progress-fill.indeterminate[b-a5f8vop3u3],
    .progress-fill.gradient[b-a5f8vop3u3],
    .progress-fill.glow[b-a5f8vop3u3] {
        animation: none;
        transition: none;
    }

    .progress-fill.indeterminate[b-a5f8vop3u3] {
        width: 100% !important;
        transform: none;
    }
}

/* ============================================
   Dark Mode Adjustments (already dark theme)
   ============================================ */

/* Glass effect variant for special use cases */
.progress-container.glass[b-a5f8vop3u3] {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* _content/Backend.HQ.Web/Components/Shared/Sidebar.razor.rz.scp.css */
/* ==========================================================================
   Sidebar Component Styles
   ========================================================================== */

.sidebar[b-yj1f0mwfdi] {
    width: 248px;
    max-width: 248px;
    min-width: 248px;
    background: var(--glass-surface);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-right: 1px solid var(--glass-border);
    padding: var(--space-2);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    overflow-y: auto;
    flex-shrink: 0;
}

/* Sidebar Header */
.sidebar-header[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--glass-border);
}

.sidebar-logo[b-yj1f0mwfdi] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    flex-shrink: 0;
}

.sidebar-logo img[b-yj1f0mwfdi] {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sidebar-brand h3[b-yj1f0mwfdi] {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

/* Sidebar Navigation */
.sidebar-nav[b-yj1f0mwfdi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.nav-item[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-standard);
    position: relative;
}

.nav-item svg[b-yj1f0mwfdi] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.nav-item:hover[b-yj1f0mwfdi] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    transform: translateX(2px);
}

.nav-item:hover svg[b-yj1f0mwfdi] {
    opacity: 1;
}

.nav-item.active[b-yj1f0mwfdi] {
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.15) 0%, rgba(227, 25, 55, 0.08) 100%);
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(227, 25, 55, 0.3);
}

.nav-item.active svg[b-yj1f0mwfdi] {
    opacity: 1;
}

.nav-item.active[b-yj1f0mwfdi]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.nav-divider[b-yj1f0mwfdi] {
    height: 1px;
    background: var(--glass-border);
    margin: var(--space-3) 0;
}

/* Nav Group / Submenu Styles */
.nav-group[b-yj1f0mwfdi] {
    display: flex;
    flex-direction: column;
}

.nav-group-header[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all var(--duration-fast) var(--ease-standard);
    position: relative;
}

.nav-group-header svg[b-yj1f0mwfdi] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.nav-group-header .chevron[b-yj1f0mwfdi] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.nav-group-header:hover[b-yj1f0mwfdi] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}

.nav-group-header:hover svg[b-yj1f0mwfdi] {
    opacity: 1;
}

.nav-group.active .nav-group-header[b-yj1f0mwfdi] {
    color: var(--accent);
}

.nav-group.active .nav-group-header svg[b-yj1f0mwfdi] {
    opacity: 1;
}

.nav-group.expanded .nav-group-header .chevron[b-yj1f0mwfdi],
.nav-group.active .nav-group-header .chevron[b-yj1f0mwfdi] {
    transform: rotate(180deg);
}

.nav-group-items[b-yj1f0mwfdi] {
    display: none;
    flex-direction: column;
    padding-left: var(--space-4);
    margin-top: var(--space-1);
    overflow: hidden;
}

/* Show items when expanded OR when containing active page */
.nav-group.expanded .nav-group-items[b-yj1f0mwfdi],
.nav-group.active .nav-group-items[b-yj1f0mwfdi] {
    display: flex;
}

.nav-subitem[b-yj1f0mwfdi] {
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
    font-size: var(--text-xs);
    border-left: 2px solid var(--glass-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-left: var(--space-2);
}

.nav-subitem:hover[b-yj1f0mwfdi] {
    border-left-color: var(--color-text-muted);
    transform: translateX(0);
}

.nav-subitem.active[b-yj1f0mwfdi] {
    border-left-color: var(--accent);
    background: linear-gradient(135deg, rgba(227, 25, 55, 0.12) 0%, rgba(227, 25, 55, 0.05) 100%);
}

.nav-subitem.active[b-yj1f0mwfdi]::before {
    display: none;
}

.nav-subitem.disabled[b-yj1f0mwfdi] {
    color: var(--color-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-subitem.disabled:hover[b-yj1f0mwfdi] {
    border-left-color: var(--glass-border);
    background: transparent;
}

/* Sidebar Footer */
.sidebar-footer[b-yj1f0mwfdi] {
    padding-top: var(--space-4);
    border-top: 1px solid var(--glass-border);
}

.user-profile[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.user-avatar[b-yj1f0mwfdi] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    display: grid;
    place-items: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-contrast);
    flex-shrink: 0;
}

.user-info[b-yj1f0mwfdi] {
    flex: 1;
    min-width: 0;
}

.user-name[b-yj1f0mwfdi] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-yj1f0mwfdi] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User Menu - Compact Footer */
.user-menu-container[b-yj1f0mwfdi] {
    position: relative;
}

.user-button[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text);
}

.user-button:hover[b-yj1f0mwfdi] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.user-avatar-small[b-yj1f0mwfdi] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-contrast);
    flex-shrink: 0;
}

.user-info-compact[b-yj1f0mwfdi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.user-name-small[b-yj1f0mwfdi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.user-role-small[b-yj1f0mwfdi] {
    font-size: 10px;
    color: var(--color-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.user-menu-chevron[b-yj1f0mwfdi] {
    flex-shrink: 0;
    color: var(--color-text-subtle);
    transition: transform var(--transition-fast);
}

.user-menu-chevron.open[b-yj1f0mwfdi] {
    transform: rotate(180deg);
}

.user-dropdown[b-yj1f0mwfdi] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 100;
    animation: slideUp-b-yj1f0mwfdi 0.15s ease-out;
}

@keyframes slideUp-b-yj1f0mwfdi {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown-item[b-yj1f0mwfdi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
}

.user-dropdown-item:hover[b-yj1f0mwfdi] {
    background: rgba(255, 255, 255, 0.08);
}

.user-dropdown-item svg[b-yj1f0mwfdi] {
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.user-dropdown-item.logout[b-yj1f0mwfdi] {
    border-top: 1px solid var(--glass-border);
    color: var(--color-error, #ef4444);
}

.user-dropdown-item.logout svg[b-yj1f0mwfdi] {
    color: var(--color-error, #ef4444);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .sidebar[b-yj1f0mwfdi] {
        width: 220px;
        max-width: 220px;
        min-width: 220px;
        padding: var(--space-4);
    }

    .nav-item[b-yj1f0mwfdi] {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sidebar[b-yj1f0mwfdi] {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: var(--z-fixed);
        transition: left var(--duration-base) var(--ease-standard);
        box-shadow: var(--shadow-3);
    }

    .sidebar.open[b-yj1f0mwfdi] {
        left: 0;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/SignageEngine/EngineView.razor.rz.scp.css */
/* EngineView Component Styles */

.engine-view-container[b-4qz1z11oy8] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0a0a0a;
    border-radius: 4px;
    /* Establish stacking context for overlay z-indices to work correctly */
    z-index: 1;
}

.engine-view-container:focus[b-4qz1z11oy8] {
    outline: none;
}

.engine-view-container.fullscreen[b-4qz1z11oy8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}

.engine-canvas[b-4qz1z11oy8] {
    position: absolute;
    background-color: #000;
    /* Position and scale set by JS via ResizeObserver */
}

/* Debug Overlay */
.engine-debug-overlay[b-4qz1z11oy8] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    color: #aaa;
    z-index: 100;
    min-width: 160px;
    pointer-events: none;
    user-select: none;
}

.debug-row[b-4qz1z11oy8] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.6;
}

.debug-label[b-4qz1z11oy8] {
    color: #666;
}

.debug-value[b-4qz1z11oy8] {
    color: #4ade80;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.debug-value.warn[b-4qz1z11oy8] {
    color: #fbbf24;
}

.debug-value.error[b-4qz1z11oy8] {
    color: #ef4444;
}

.debug-value.connected[b-4qz1z11oy8] {
    color: #4ade80;
}

.debug-value.disconnected[b-4qz1z11oy8] {
    color: #ef4444;
}

/* Blazor Overlay Layer */
.blazor-overlay-layer[b-4qz1z11oy8] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.blazor-overlay-layer.active[b-4qz1z11oy8] {
    opacity: 1;
    pointer-events: auto;
}

/* Control Panel Toggle Button */
.control-panel-toggle[b-4qz1z11oy8] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(30, 30, 40, 0.8);
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.control-panel-toggle:hover[b-4qz1z11oy8] {
    background: rgba(40, 40, 55, 0.9);
    color: #fff;
}

.control-panel-toggle.active[b-4qz1z11oy8] {
    background: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

/* Control Panel */
.control-panel[b-4qz1z11oy8] {
    position: absolute;
    bottom: 56px;
    left: 12px;
    background: rgba(20, 20, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    min-width: 220px;
    z-index: 150;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.control-section[b-4qz1z11oy8] {
    margin-bottom: 12px;
}

.control-section:last-child[b-4qz1z11oy8] {
    margin-bottom: 0;
}

.control-label[b-4qz1z11oy8] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-bottom: 6px;
}

.control-buttons[b-4qz1z11oy8] {
    display: flex;
    gap: 6px;
}

.control-btn[b-4qz1z11oy8] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.control-btn:hover[b-4qz1z11oy8] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.control-btn.active[b-4qz1z11oy8] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.control-row[b-4qz1z11oy8] {
    display: flex;
    gap: 6px;
}

.control-input[b-4qz1z11oy8] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 12px;
    font-family: 'Consolas', monospace;
}

.control-input[b-4qz1z11oy8]::placeholder {
    color: #555;
}

.control-input:focus[b-4qz1z11oy8] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.control-state[b-4qz1z11oy8] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.state-idle[b-4qz1z11oy8] {
    background: rgba(100, 100, 100, 0.3);
    color: #888;
}

.state-playing[b-4qz1z11oy8] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.state-paused[b-4qz1z11oy8] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.state-loading[b-4qz1z11oy8] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.state-transitioning[b-4qz1z11oy8] {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.state-error[b-4qz1z11oy8] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ==============================================
   Product Overlay - Full ProductView with Carousel
   TOP: Carousel gallery (70%) with info panels
   BOTTOM: Compact bar with name, QR, price (30%)
   ============================================== */

.product-overlay-backdrop[b-4qz1z11oy8] {
    position: absolute;
    z-index: 250;
    pointer-events: none;
    overflow: hidden;

    /* Position set via inline styles from Blazor */

    /* Slide-up animation */
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

.product-overlay-backdrop.active[b-4qz1z11oy8] {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
}

/* Blurred background layer - product image with heavy blur */
.product-overlay-blur[b-4qz1z11oy8] {
    position: absolute;
    inset: -30px; /* Extend beyond container to prevent blur edge artifacts */
    filter: blur(30px) brightness(0.6) saturate(1.3);
    /* background-image set via inline style from Blazor */
}

/* Full ProductView container */
.product-overlay-content[b-4qz1z11oy8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;

    /* Crisp text rendering when scaled via transform */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ProductView fills entire overlay */
.product-overlay-content[b-4qz1z11oy8]  .preview-panel {
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-overlay-content[b-4qz1z11oy8]  .preview-toggle {
    display: none !important;
}

.product-overlay-content[b-4qz1z11oy8]  .preview-content {
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Subtle ambient background */
.product-overlay-content[b-4qz1z11oy8]  .preview-ambient {
    opacity: 0.2 !important;
}

.product-overlay-content[b-4qz1z11oy8]  .ambient-layer.active {
    opacity: 0.15 !important;
}

/* ===== TOP: Carousel Gallery with Info Panels (70%) ===== */
.product-overlay-content[b-4qz1z11oy8]  .carousel-gallery {
    flex: 0 0 70% !important;
    height: 70% !important;
    min-height: 70% !important;
    max-height: 70% !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

.product-overlay-content[b-4qz1z11oy8]  .carousel-track {
    height: 100% !important;
}

.product-overlay-content[b-4qz1z11oy8]  .carousel-slide {
    height: 100% !important;
}

.product-overlay-content[b-4qz1z11oy8]  .carousel-gallery img,
.product-overlay-content[b-4qz1z11oy8]  .carousel-gallery video {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Info panels - fixed pixel size for signage */
.product-overlay-content[b-4qz1z11oy8]  .product-info-panel {
    position: absolute !important;
    padding: 5px 8px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 3px !important;
    max-width: 35% !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.product-overlay-content[b-4qz1z11oy8]  .info-panel-line {
    stroke-width: 1.5px !important;
}

/* Hide carousel nav arrows (cleaner look) */
.product-overlay-content[b-4qz1z11oy8]  .carousel-nav {
    display: none !important;
}

/* Hide carousel indicators */
.product-overlay-content[b-4qz1z11oy8]  .carousel-indicators {
    display: none !important;
}

/* Hide top controls */
.product-overlay-content[b-4qz1z11oy8]  .carousel-top-left,
.product-overlay-content[b-4qz1z11oy8]  .carousel-top-right {
    display: none !important;
}

/* ===== BOTTOM: Product Info Bar (30%) - transparent, no black overlay ===== */
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-panel {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 10px !important;
    margin: 0 10px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

/* Left side - product name and SKU */
.product-overlay-content[b-4qz1z11oy8]  .product-panel-left {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

/* Product name - fixed pixel size for signage */
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-name,
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-panel .carousel-product-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* SKU - fixed pixel size */
.product-overlay-content[b-4qz1z11oy8]  .carousel-sku,
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-panel .carousel-sku {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Right side - QR on top, price below */
.product-overlay-content[b-4qz1z11oy8]  .product-panel-right {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

/* QR code - fixed pixel size for signage */
.product-overlay-content[b-4qz1z11oy8]  .carousel-qr,
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-panel .carousel-qr {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 2px !important;
    border-radius: 2px !important;
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    aspect-ratio: 1 !important;
}

.product-overlay-content[b-4qz1z11oy8]  .carousel-qr img,
.product-overlay-content[b-4qz1z11oy8]  .carousel-qr canvas,
.product-overlay-content[b-4qz1z11oy8]  .carousel-qr svg {
    width: 100% !important;
    height: 100% !important;
}

/* Price - fixed pixel size for signage */
.product-overlay-content[b-4qz1z11oy8]  .carousel-price,
.product-overlay-content[b-4qz1z11oy8]  .carousel-product-panel .carousel-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Close button for overlay - top right of content */
.product-overlay-backdrop[b-4qz1z11oy8]::after {
    content: '×';
    position: absolute;
    top: calc(50% - 30% - 20px);
    left: calc(50% + 15% + 10px);
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
    z-index: 260;
    pointer-events: auto;
}

.product-overlay-backdrop:hover[b-4qz1z11oy8]::after {
    opacity: 1;
}

.product-overlay-backdrop[b-4qz1z11oy8]::after:hover {
    background: rgba(239, 68, 68, 0.8);
}

/* ==============================================
   SignageOverlay Layers - Persistent Background/Foreground
   ============================================== */

.signage-overlay-layer[b-4qz1z11oy8] {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
}

.signage-overlay-layer img[b-4qz1z11oy8],
.signage-overlay-layer video[b-4qz1z11oy8] {
    display: block;
}

/* Background overlays (ZOrder < 0) - behind engine canvas */
.signage-overlay-background[b-4qz1z11oy8] {
    /* Will be positioned behind viewports via z-index from inline style */
}

/* Foreground overlays (ZOrder > 0) - in front of engine canvas */
.signage-overlay-foreground[b-4qz1z11oy8] {
    /* Will be positioned in front of viewports via z-index from inline style */
}

/* Video handling for overlays */
.signage-overlay-layer video[b-4qz1z11oy8] {
    object-fit: cover;
}

/* ==============================================
   Preview Zoom Controls
   ============================================== */

/* Zoom indicator badge */
.zoom-indicator[b-4qz1z11oy8] {
    position: absolute;
    bottom: 56px;
    right: 12px;
    background: rgba(20, 20, 28, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #ccc;
    z-index: 150;
    pointer-events: none;
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease;
}

.zoom-indicator.hidden[b-4qz1z11oy8] {
    opacity: 0;
}

.zoom-indicator .zoom-value[b-4qz1z11oy8] {
    color: #4ade80;
    font-weight: 600;
}

.zoom-indicator .zoom-hint[b-4qz1z11oy8] {
    color: #666;
    font-size: 9px;
    margin-left: 8px;
}

/* Zoom reset button (shown when zoomed) */
.zoom-reset-btn[b-4qz1z11oy8] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(30, 30, 40, 0.8);
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
}

.zoom-reset-btn.visible[b-4qz1z11oy8] {
    opacity: 1;
    pointer-events: auto;
}

.zoom-reset-btn:hover[b-4qz1z11oy8] {
    background: rgba(40, 40, 55, 0.9);
    color: #fff;
}
/* _content/Backend.HQ.Web/Components/Shared/Splitter.razor.rz.scp.css */
/* Splitter Container */
.splitter-container[b-3w3phbkey5] {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.splitter-horizontal[b-3w3phbkey5] {
    flex-direction: row;
}

.splitter-vertical[b-3w3phbkey5] {
    flex-direction: column;
}

/* Panels */
.splitter-panel[b-3w3phbkey5] {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

.splitter-panel-first[b-3w3phbkey5] {
    flex: 1 1 auto;
}

.splitter-panel-second[b-3w3phbkey5] {
    flex: 1 1 auto;
}

/* Splitter Handle */
.splitter-handle[b-3w3phbkey5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    z-index: 10;
}

.splitter-horizontal .splitter-handle[b-3w3phbkey5] {
    width: 6px;
    cursor: col-resize;
    border-top: none;
    border-bottom: none;
}

.splitter-vertical .splitter-handle[b-3w3phbkey5] {
    height: 6px;
    cursor: row-resize;
    border-left: none;
    border-right: none;
}

.splitter-handle:hover[b-3w3phbkey5] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.splitter-handle.dragging[b-3w3phbkey5] {
    background: rgba(230, 40, 30, 0.3);
    border-color: rgba(230, 40, 30, 0.5);
}

/* Handle Grip (visual indicator) */
.splitter-handle-grip[b-3w3phbkey5] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: background-color 0.15s ease;
}

.splitter-horizontal .splitter-handle-grip[b-3w3phbkey5] {
    width: 2px;
    height: 24px;
}

.splitter-vertical .splitter-handle-grip[b-3w3phbkey5] {
    width: 24px;
    height: 2px;
}

.splitter-handle:hover .splitter-handle-grip[b-3w3phbkey5] {
    background: rgba(255, 255, 255, 0.4);
}

.splitter-handle.dragging .splitter-handle-grip[b-3w3phbkey5] {
    background: rgba(230, 40, 30, 0.8);
}
/* _content/Backend.HQ.Web/Components/Shared/StatCard.razor.rz.scp.css */
/* Stat Card Base Styling */
.stat-card[b-03agijnxrr] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    transition: all var(--duration-base) var(--ease-standard);
}

.stat-card:hover[b-03agijnxrr] {
    transform: translateY(-2px);
}

.stat-icon[b-03agijnxrr] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-03agijnxrr] {
    width: 24px;
    height: 24px;
}

.stat-icon-img[b-03agijnxrr] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
}

/* Apply current color to SVG icons loaded as images - using CSS mask */
.stat-icon.red .stat-icon-img[b-03agijnxrr] { filter: invert(21%) sepia(100%) saturate(3000%) hue-rotate(340deg) brightness(95%) contrast(105%); }
.stat-icon.blue .stat-icon-img[b-03agijnxrr] { filter: invert(40%) sepia(90%) saturate(1000%) hue-rotate(200deg) brightness(95%) contrast(95%); }
.stat-icon.pink .stat-icon-img[b-03agijnxrr] { filter: invert(50%) sepia(90%) saturate(1500%) hue-rotate(300deg) brightness(95%) contrast(95%); }
.stat-icon.teal .stat-icon-img[b-03agijnxrr] { filter: invert(65%) sepia(60%) saturate(500%) hue-rotate(130deg) brightness(90%) contrast(90%); }
.stat-icon.purple .stat-icon-img[b-03agijnxrr] { filter: invert(40%) sepia(90%) saturate(1500%) hue-rotate(240deg) brightness(90%) contrast(95%); }
.stat-icon.amber .stat-icon-img[b-03agijnxrr] { filter: invert(60%) sepia(90%) saturate(1500%) hue-rotate(10deg) brightness(95%) contrast(95%); }
.stat-icon.green .stat-icon-img[b-03agijnxrr] { filter: invert(55%) sepia(60%) saturate(600%) hue-rotate(100deg) brightness(90%) contrast(90%); }
.stat-icon.cyan .stat-icon-img[b-03agijnxrr] { filter: invert(50%) sepia(60%) saturate(700%) hue-rotate(150deg) brightness(90%) contrast(90%); }

.stat-emoji[b-03agijnxrr] {
    font-size: 1.5rem;
}

.stat-card > div:last-child[b-03agijnxrr] {
    flex: 1;
    min-width: 0;
}

.stat-label[b-03agijnxrr] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.stat-value[b-03agijnxrr] {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stat-prefix[b-03agijnxrr],
.stat-suffix[b-03agijnxrr] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.stat-change[b-03agijnxrr] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.stat-description[b-03agijnxrr] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
    line-height: 1.3;
}

/* Clickable State */
.stat-card.clickable[b-03agijnxrr] {
    cursor: pointer;
}

.stat-card.clickable:hover[b-03agijnxrr] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Toggleable Stat Card */
.stat-card.toggleable[b-03agijnxrr] {
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--glass-surface);
    border-radius: var(--radius-lg);
}

.stat-indicator[b-03agijnxrr] {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--stat-color, var(--accent));
    flex-shrink: 0;
    transition: all var(--duration-base) var(--ease-standard);
    opacity: 0.4;
    box-shadow: none;
}

/* Unselected state */
.stat-card.toggleable:not(.selected)[b-03agijnxrr] {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.stat-card.toggleable:not(.selected):hover[b-03agijnxrr] {
    opacity: 0.8;
    filter: grayscale(0.2);
}

/* Selected state */
.stat-card.toggleable.selected[b-03agijnxrr] {
    background: color-mix(in oklab, var(--stat-color, var(--accent)), transparent 90%);
    border-color: color-mix(in oklab, var(--stat-color, var(--accent)), transparent 70%);
    box-shadow: 0 0 20px color-mix(in oklab, var(--stat-color, var(--accent)), transparent 80%);
}

.stat-card.toggleable.selected .stat-indicator[b-03agijnxrr] {
    opacity: 1;
    box-shadow: 0 0 10px var(--stat-color, var(--accent));
}

.stat-card.toggleable.selected .stat-value[b-03agijnxrr] {
    color: var(--stat-color, var(--accent));
}

.stat-card.toggleable.selected .stat-label[b-03agijnxrr] {
    color: color-mix(in oklab, var(--stat-color, var(--accent)), var(--color-text-muted) 40%);
}

/* Compact/Small Stat Card */
.stat-card.small[b-03agijnxrr] {
    padding: var(--space-3);
    gap: var(--space-3);
}

.stat-card.small .stat-icon[b-03agijnxrr] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

.stat-card.small .stat-icon svg[b-03agijnxrr] {
    width: 18px;
    height: 18px;
}

.stat-card.small .stat-emoji[b-03agijnxrr] {
    font-size: 1.125rem;
}

.stat-card.small .stat-label[b-03agijnxrr] {
    font-size: 0.625rem;
    margin-bottom: 0;
}

.stat-card.small .stat-value[b-03agijnxrr] {
    font-size: var(--text-lg);
    margin-bottom: 0;
}

.stat-card.small .stat-indicator[b-03agijnxrr] {
    width: 10px;
    height: 10px;
}

.stat-card.small .stat-change[b-03agijnxrr] {
    font-size: 0.625rem;
}

.stat-card.small .stat-description[b-03agijnxrr] {
    display: none;
}

/* Stat Icon Color Variants */
.stat-icon.red[b-03agijnxrr] { background: rgba(227, 25, 55, 0.15); color: #E31937; }
.stat-icon.blue[b-03agijnxrr] { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.stat-icon.pink[b-03agijnxrr] { background: rgba(236, 72, 153, 0.15); color: #EC4899; }
.stat-icon.teal[b-03agijnxrr] { background: rgba(20, 184, 166, 0.15); color: #14B8A6; }
.stat-icon.purple[b-03agijnxrr] { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.stat-icon.amber[b-03agijnxrr] { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.stat-icon.green[b-03agijnxrr] { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.stat-icon.cyan[b-03agijnxrr] { background: rgba(8, 145, 178, 0.15); color: #0891B2; }
.stat-icon.indigo[b-03agijnxrr] { background: rgba(99, 102, 241, 0.15); color: #818CF8; }
.stat-icon.gray[b-03agijnxrr] { background: rgba(107, 114, 128, 0.15); color: #9CA3AF; }
.stat-icon.orange[b-03agijnxrr] { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.stat-icon.lime[b-03agijnxrr] { background: rgba(132, 204, 22, 0.15); color: #84CC16; }

/* Trend Indicator */
.stat-trend[b-03agijnxrr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-left: auto;
}

.stat-trend.positive[b-03agijnxrr] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}

.stat-trend.negative[b-03agijnxrr] {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
}

.stat-trend.neutral[b-03agijnxrr] {
    background: rgba(107, 114, 128, 0.15);
    color: #9CA3AF;
}

.trend-icon[b-03agijnxrr] {
    font-size: 0.625rem;
}
/* _content/Backend.HQ.Web/Components/Shared/StoreSelector.razor.rz.scp.css */
/* ==========================================================================
   StoreSelector Component - Tab Design
   ========================================================================== */

.store-selector[b-op3p6emhpq] {
    width: 100%;
}

/* Loading State */
.store-tabs-loading[b-op3p6emhpq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.loading-spinner[b-op3p6emhpq] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: spin-b-op3p6emhpq 0.8s linear infinite;
}

@keyframes spin-b-op3p6emhpq {
    to { transform: rotate(360deg); }
}

/* Empty State */
.store-tabs-empty[b-op3p6emhpq] {
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8125rem;
    text-align: center;
}

/* Tabs Container */
.store-tabs-container[b-op3p6emhpq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.store-tabs-label[b-op3p6emhpq] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tabs Wrapper - Horizontal scroll if needed */
.store-tabs[b-op3p6emhpq] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.store-tabs[b-op3p6emhpq]::-webkit-scrollbar {
    display: none;
}

/* Individual Tab */
.store-tab[b-op3p6emhpq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.store-tab:hover[b-op3p6emhpq] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

/* Active Tab - Badge-like styling */
.store-tab.active[b-op3p6emhpq] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ADE80;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.store-tab.active:hover[b-op3p6emhpq] {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.4);
}

.store-tab.active .tab-name[b-op3p6emhpq] {
    color: #4ADE80;
    font-weight: 600;
}

.store-tab.active .tab-code[b-op3p6emhpq] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Inactive Store Tab */
.store-tab.inactive-store[b-op3p6emhpq] {
    opacity: 0.6;
}

.store-tab.inactive-store .tab-status[b-op3p6emhpq] {
    font-size: 0.5625rem;
    padding: 0.125rem 0.25rem;
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* Tab Content */
.tab-name[b-op3p6emhpq] {
    font-weight: 500;
    transition: color 0.2s ease;
}

.tab-code[b-op3p6emhpq] {
    font-size: 0.6875rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    padding: 0.125rem 0.375rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

/* Warning Message */
.selector-warning[b-op3p6emhpq] {
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 0.375rem;
    color: #FBBF24;
    font-size: 0.75rem;
}

/* Responsive - Stack on small screens */
@media (max-width: 640px) {
    .store-tabs-container[b-op3p6emhpq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .store-tabs[b-op3p6emhpq] {
        width: 100%;
    }

    .store-tab[b-op3p6emhpq] {
        padding: 0.625rem 1rem;
    }
}

/* When there are many stores - add fade effect on edges */
.store-tabs-container[b-op3p6emhpq]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(90deg, transparent, var(--bg-primary, rgba(18, 18, 28, 1)));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.store-tabs:hover + .store-tabs-container[b-op3p6emhpq]::after {
    opacity: 1;
}
/* _content/Backend.HQ.Web/Components/Shared/Timeline.razor.rz.scp.css */
/* Timeline Component Styles */

.timeline-container[b-wicj7xyskh] {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg, rgba(20, 20, 30, 0.8));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
    height: 100%;
    position: relative;
}

.timeline-container:focus[b-wicj7xyskh] {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

/* Toolbar */
.timeline-toolbar[b-wicj7xyskh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--glass-border);
    gap: 12px;
    flex-shrink: 0;
    z-index: 20;
    position: relative;
}

.timeline-toolbar-left[b-wicj7xyskh],
.timeline-toolbar-center[b-wicj7xyskh],
.timeline-toolbar-right[b-wicj7xyskh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-btn[b-wicj7xyskh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-btn:hover[b-wicj7xyskh] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.timeline-btn:active[b-wicj7xyskh] {
    transform: scale(0.95);
}

.timeline-time-display[b-wicj7xyskh] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 8px;
    min-width: 100px;
}

.timeline-select[b-wicj7xyskh] {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
}

.timeline-input-small[b-wicj7xyskh] {
    width: 50px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}

.timeline-zoom-display[b-wicj7xyskh] {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
    text-align: center;
}

/* Scroll Container */
.timeline-scroll-container[b-wicj7xyskh] {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Time Ruler */
.timeline-ruler[b-wicj7xyskh] {
    height: 28px;
    min-height: 28px;
    min-width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
    flex-shrink: 0;
}

.timeline-ruler-mark[b-wicj7xyskh] {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 8px;
    background: var(--text-muted, rgba(255,255,255,0.3));
}

.timeline-ruler-mark.major[b-wicj7xyskh] {
    height: 14px;
    background: var(--text-secondary, rgba(255,255,255,0.5));
}

.timeline-ruler-label[b-wicj7xyskh] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-muted, rgba(255,255,255,0.5));
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
}

/* Tracks */
.timeline-tracks[b-wicj7xyskh] {
    position: relative;
    min-height: 120px;
    min-width: 100%;
    flex: 1;
}

.timeline-track[b-wicj7xyskh] {
    display: flex;
    border-bottom: 1px solid var(--glass-border);
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

.timeline-track:last-child[b-wicj7xyskh] {
    border-bottom: none;
}

.timeline-track-header[b-wicj7xyskh] {
    width: 100px;
    min-width: 100px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.timeline-track-content[b-wicj7xyskh] {
    flex: 1;
    position: relative;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

/* Playhead */
.timeline-playhead[b-wicj7xyskh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-red, #ef4444);
    z-index: 100;
    pointer-events: none;
}

.timeline-playhead[b-wicj7xyskh]::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--accent-red, #ef4444);
    border-radius: 50%;
}

/* Timeline Items */
.timeline-item[b-wicj7xyskh] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 6px;
    cursor: grab;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    min-width: 20px;
}

.timeline-item:hover[b-wicj7xyskh] {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.timeline-item.selected[b-wicj7xyskh] {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue);
}

.timeline-item.dragging[b-wicj7xyskh] {
    cursor: grabbing;
    opacity: 0.8;
    z-index: 50;
}

.timeline-item.resizing[b-wicj7xyskh] {
    opacity: 0.8;
}

.timeline-item-content[b-wicj7xyskh] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    height: 100%;
    gap: 6px;
}

.timeline-item-thumbnail[b-wicj7xyskh] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.timeline-item-label[b-wicj7xyskh] {
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.timeline-item-duration[b-wicj7xyskh] {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
}

/* Resize Handles */
.timeline-item-resize-handle[b-wicj7xyskh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background: transparent;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.timeline-item:hover .timeline-item-resize-handle[b-wicj7xyskh] {
    opacity: 1;
}

.timeline-item-resize-handle.left[b-wicj7xyskh] {
    left: 0;
    cursor: w-resize;
}

.timeline-item-resize-handle.right[b-wicj7xyskh] {
    right: 0;
    cursor: e-resize;
}

.timeline-item-resize-handle[b-wicj7xyskh]::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background: var(--accent-blue);
    border-radius: 1px;
}

.timeline-item-resize-handle.left[b-wicj7xyskh]::before {
    left: 2px;
}

.timeline-item-resize-handle.right[b-wicj7xyskh]::before {
    right: 2px;
}

/* Drag Over State */
.timeline-tracks.drag-over[b-wicj7xyskh] {
    background: rgba(99, 102, 241, 0.1);
}

/* Different item colors based on asset type */
.timeline-item[data-asset-type="video"][b-wicj7xyskh] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.timeline-item[data-asset-type="image"][b-wicj7xyskh] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.2));
    border-color: rgba(34, 197, 94, 0.5);
}

.timeline-item[data-asset-type="audio"][b-wicj7xyskh] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.2));
    border-color: rgba(168, 85, 247, 0.5);
}

/* Loop indicator */
.timeline-item[data-looping="true"][b-wicj7xyskh]::after {
    content: '↻';
    position: absolute;
    top: 2px;
    right: 12px;
    font-size: 10px;
    color: var(--text-muted);
}

/* Drag Preview (ghost element) */
.timeline-drag-preview[b-wicj7xyskh] {
    opacity: 0.4 !important;
    pointer-events: none !important;
    border: 2px dashed var(--accent-blue, #3b82f6) !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

/* Snapped to grid feedback */
.timeline-item.snapped[b-wicj7xyskh] {
    box-shadow: 0 0 0 2px var(--accent-green, #22c55e);
}

/* Collision indicator */
.timeline-item.collision[b-wicj7xyskh] {
    border-color: var(--accent-red, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

/* Better dragging visual */
.timeline-item.dragging[b-wicj7xyskh] {
    opacity: 0.9;
    transform: scale(1.02);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Better resizing visual */
.timeline-item.resizing[b-wicj7xyskh] {
    z-index: 100;
    box-shadow: 0 0 0 2px var(--accent-blue, #3b82f6);
}

/* Keyboard navigation focus */
.timeline-item:focus[b-wicj7xyskh] {
    outline: 2px solid var(--accent-blue, #3b82f6);
    outline-offset: 2px;
}

/* Selection highlight animation */
.timeline-item.selected[b-wicj7xyskh] {
    animation: pulse-selection-b-wicj7xyskh 2s infinite;
}

@keyframes pulse-selection-b-wicj7xyskh {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent-blue, #3b82f6); }
    50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-toolbar[b-wicj7xyskh] {
        flex-wrap: wrap;
    }

    .timeline-toolbar-center[b-wicj7xyskh] {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 8px;
    }

    .timeline-track-header[b-wicj7xyskh] {
        width: 60px;
        min-width: 60px;
        font-size: 10px;
    }
}
/* _content/Backend.HQ.Web/Components/Shared/Vpe/ViewPortsRenderer.razor.rz.scp.css */
/* VPE Layout Viewer - Read-only viewport layout preview */

.vpe-layout-viewer[b-y95mqkd4py] {
    background: #1a1a1e;
    border-radius: 8px;
    overflow: hidden;
}

/* Header */
.vpe-viewer-header[b-y95mqkd4py] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #252529;
    border-bottom: 1px solid #333;
}

.vpe-viewer-title h3[b-y95mqkd4py] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.vpe-viewer-info[b-y95mqkd4py] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
}

.vpe-viewer-info strong[b-y95mqkd4py] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Canvas Container */
.vpe-viewer-canvas-container[b-y95mqkd4py] {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: #0a0a0c;
}

.vpe-viewer-canvas[b-y95mqkd4py] {
    position: relative;
    width: 100%;
    max-width: 600px;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

/* Checkerboard background */
.vpe-viewer-checkerboard[b-y95mqkd4py] {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(#1a1a1e 0% 25%, #141416 0% 50%)
        50% / 16px 16px;
    z-index: 0;
}

/* Viewport Items */
.vpe-viewer-viewport[b-y95mqkd4py] {
    --layer-color: #3b82f6;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--layer-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--layer-color) 50%, transparent);
    border-radius: 2px;
    transition: all 0.15s;
    z-index: 1;
}

.vpe-viewer-viewport:hover[b-y95mqkd4py] {
    background: color-mix(in srgb, var(--layer-color) 30%, transparent);
    border-color: var(--layer-color);
    z-index: 10;
}

.vpe-viewer-viewport.auto[b-y95mqkd4py] {
    --layer-color: #f59e0b;
}

.vpe-viewer-viewport.hidden[b-y95mqkd4py] {
    opacity: 0.3;
    border-style: dashed;
}

/* Viewport Labels */
.vpe-viewer-label[b-y95mqkd4py] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.vpe-viewer-playlist[b-y95mqkd4py] {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

/* Empty State */
.vpe-viewer-empty[b-y95mqkd4py] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    gap: 0.75rem;
    z-index: 1;
}

/* Resolution Badge */
.vpe-viewer-resolution[b-y95mqkd4py] {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    z-index: 20;
}

/* Table */
.vpe-viewer-table[b-y95mqkd4py] {
    border-top: 1px solid #333;
    max-height: 200px;
    overflow-y: auto;
}

.vpe-viewer-table table[b-y95mqkd4py] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6875rem;
}

.vpe-viewer-table th[b-y95mqkd4py] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    background: #1e1e22;
    position: sticky;
    top: 0;
    z-index: 1;
}

.vpe-viewer-table td[b-y95mqkd4py] {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
}

.vpe-viewer-table td.muted[b-y95mqkd4py] {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.625rem;
}

.vpe-viewer-table tbody tr:hover[b-y95mqkd4py] {
    background: rgba(255, 255, 255, 0.03);
}

.vpe-viewer-table tbody tr.dimmed[b-y95mqkd4py] {
    opacity: 0.5;
}

/* Name Cell */
.vpe-viewer-name-cell[b-y95mqkd4py] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vpe-viewer-color[b-y95mqkd4py] {
    width: 3px;
    height: 14px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* Badges */
.vpe-viewer-badge[b-y95mqkd4py] {
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-radius: 3px;
    margin-left: 0.375rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.vpe-viewer-badge.locked[b-y95mqkd4py] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.vpe-viewer-badge.other[b-y95mqkd4py] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* Selection Mode Styles */
.vpe-layout-viewer.selection-mode .vpe-viewer-viewport.clickable[b-y95mqkd4py] {
    cursor: pointer;
}

.vpe-layout-viewer.selection-mode .vpe-viewer-viewport.clickable:hover[b-y95mqkd4py] {
    transform: scale(1.02);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.vpe-viewer-viewport.selected[b-y95mqkd4py] {
    background: rgba(34, 197, 94, 0.3) !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
}

.vpe-viewer-viewport.other-zone[b-y95mqkd4py] {
    opacity: 0.5;
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.vpe-viewer-viewport.other-zone:not(.reassignable)[b-y95mqkd4py] {
    cursor: not-allowed !important;
}

.vpe-viewer-viewport.reassignable[b-y95mqkd4py] {
    cursor: pointer !important;
    opacity: 0.7;
}

.vpe-viewer-viewport.reassignable:hover[b-y95mqkd4py] {
    opacity: 1;
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4);
    transform: scale(1.02);
}

.vpe-viewer-reassign-hint[b-y95mqkd4py] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

.vpe-viewer-check[b-y95mqkd4py] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

/* Table Selection Styles */
.vpe-viewer-table .checkbox-cell[b-y95mqkd4py] {
    text-align: center;
    width: 40px;
}

.vpe-viewer-table .checkbox-cell input[type="checkbox"][b-y95mqkd4py] {
    width: 16px;
    height: 16px;
    accent-color: #22c55e;
    cursor: pointer;
}

.vpe-viewer-table tbody tr.selected[b-y95mqkd4py] {
    background: rgba(34, 197, 94, 0.1);
}

.vpe-viewer-table tbody tr.other-zone[b-y95mqkd4py] {
    opacity: 0.6;
    background: rgba(245, 158, 11, 0.05);
}

.vpe-viewer-table tbody tr.other-zone td[b-y95mqkd4py] {
    color: rgba(255, 255, 255, 0.5);
}

.vpe-viewer-table tbody tr.reassignable[b-y95mqkd4py] {
    cursor: pointer;
    opacity: 0.8;
}

.vpe-viewer-table tbody tr.reassignable:hover[b-y95mqkd4py] {
    opacity: 1;
    background: rgba(245, 158, 11, 0.15);
}

.reassign-btn[b-y95mqkd4py] {
    width: 20px;
    height: 20px;
    background: #f59e0b;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.reassign-btn:hover[b-y95mqkd4py] {
    background: #d97706;
    transform: scale(1.1);
}