/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-b5xhwhodw5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-b5xhwhodw5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-scw6rmw1al],
.components-reconnect-repeated-attempt-visible[b-scw6rmw1al],
.components-reconnect-failed-visible[b-scw6rmw1al],
.components-pause-visible[b-scw6rmw1al],
.components-resume-failed-visible[b-scw6rmw1al],
.components-rejoining-animation[b-scw6rmw1al] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-retrying[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-failed[b-scw6rmw1al],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-scw6rmw1al] {
    display: block;
}


#components-reconnect-modal[b-scw6rmw1al] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-scw6rmw1al 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-scw6rmw1al 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-scw6rmw1al 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-scw6rmw1al]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-scw6rmw1al 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-scw6rmw1al {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-scw6rmw1al {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-scw6rmw1al {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-scw6rmw1al] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-scw6rmw1al] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-scw6rmw1al] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-scw6rmw1al] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-scw6rmw1al] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-scw6rmw1al] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-scw6rmw1al] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-scw6rmw1al 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-scw6rmw1al] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-scw6rmw1al {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AdminCampaigns.razor.rz.scp.css */
.admin-campaigns-page[b-km0lg6m20k] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.discover-url-box[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    padding: var(--space-xs) var(--space-xs);
    margin-top: 6px;
}

.discover-url-box code[b-km0lg6m20k] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-info-text);
    background: transparent;
}

/* Campaign Card Styles */
.campaigns-list[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0;
}

.campaign-card-horizontal[b-km0lg6m20k] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    position: relative;
}

.campaign-card-horizontal:hover[b-km0lg6m20k] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.campaign-card-thumbnail[b-km0lg6m20k] {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-info-bg);
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.campaign-card-thumbnail[style*="cursor: pointer"]:hover[b-km0lg6m20k] {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.thumbnail-wrapper[b-km0lg6m20k] {
    width: 96px;
    height: 96px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-info-bg);
    position: relative;
}

.creative-name-label[b-km0lg6m20k] {
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
    margin-top: 2px;
    text-transform: capitalize;
}

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

.campaign-thumbnail-img.fallback[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
}

.campaign-card-content[b-km0lg6m20k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.campaign-header-row[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.campaign-info[b-km0lg6m20k] {
    min-width: 0;
    flex: 1;
}

.campaign-title[b-km0lg6m20k] {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-subtitle[b-km0lg6m20k] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-advertiser-info[b-km0lg6m20k] {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.advertiser-info-item[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.campaign-meta[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    color: var(--color-text-muted);
}

.campaign-meta-item[b-km0lg6m20k] {
    white-space: nowrap;
}

.campaign-meta-divider[b-km0lg6m20k] {
    color: var(--color-border-strong);
}

.campaign-card-end[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.status-badge[b-km0lg6m20k] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    display: inline-block;
    text-transform: uppercase;
}

.status-badge.status-pill--pending[b-km0lg6m20k] {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.campaign-cost[b-km0lg6m20k] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.campaign-actions[b-km0lg6m20k] {
    display: flex;
    gap: var(--space-xs);
}

.action-btn-icon[b-km0lg6m20k] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.action-btn-icon.view[b-km0lg6m20k] {
    color: var(--color-primary);
}

.action-btn-icon.view:hover[b-km0lg6m20k] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.action-btn-icon.delete[b-km0lg6m20k] {
    color: var(--color-error);
}

.action-btn-icon.delete:hover[b-km0lg6m20k] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon:hover[b-km0lg6m20k] {
    transform: translateY(-1px);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .campaign-card-horizontal[b-km0lg6m20k] {
        flex-wrap: wrap;
    }

    .campaign-header-row[b-km0lg6m20k] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .campaign-meta[b-km0lg6m20k] {
        flex-wrap: wrap;
    }

    .campaign-card-end[b-km0lg6m20k] {
        width: 100%;
        justify-content: space-between;
        margin-top: var(--space-xs);
        padding-top: var(--space-xs);
        border-top: 1px solid var(--color-border-subtle);
    }

    .campaign-actions[b-km0lg6m20k] {
        order: 2;
    }
}

@media (max-width: 768px) {
    .campaigns-list[b-km0lg6m20k] {
        padding: 0 var(--space-xs) var(--space-xs);
    }

    .campaign-card-horizontal[b-km0lg6m20k] {
        padding: var(--space-xs);
        gap: var(--space-xs);
    }

    .campaign-card-thumbnail[b-km0lg6m20k] {
        width: 56px;
        height: 56px;
    }

    .thumbnail-wrapper[b-km0lg6m20k] {
        width: 56px;
        height: 56px;
    }

    .campaign-title[b-km0lg6m20k] {
        font-size: var(--font-size-sm);
    }

    .campaign-subtitle[b-km0lg6m20k],
    .campaign-meta[b-km0lg6m20k] {
        font-size: var(--font-size-xs);
    }

    .campaign-advertiser-info[b-km0lg6m20k] {
        flex-wrap: wrap;
    }

    .campaign-cost[b-km0lg6m20k] {
        font-size: 15px;
    }

    .action-btn-icon[b-km0lg6m20k] {
        width: 32px;
        height: 32px;
    }

    .campaign-card-end[b-km0lg6m20k] {
        gap: var(--space-xs);
    }
}

@media (max-width: 480px) {
    .campaign-card-horizontal[b-km0lg6m20k] {
        padding: 10px;
    }

    .campaign-card-thumbnail[b-km0lg6m20k] {
        width: 48px;
        height: 48px;
    }

    .thumbnail-wrapper[b-km0lg6m20k] {
        width: 48px;
        height: 48px;
    }

    .campaign-title[b-km0lg6m20k] {
        font-size: 13px;
    }

    .campaign-subtitle[b-km0lg6m20k],
    .campaign-meta[b-km0lg6m20k] {
        font-size: 11px;
    }

    .campaign-advertiser-info[b-km0lg6m20k] {
        font-size: 11px;
        gap: 6px;
    }

    .status-badge[b-km0lg6m20k] {
        padding: 3px 8px;
        font-size: 10px;
    }

    .campaign-cost[b-km0lg6m20k] {
        font-size: var(--font-size-sm);
    }

    .action-btn-icon[b-km0lg6m20k] {
        width: 30px;
        height: 30px;
    }

    .campaign-actions[b-km0lg6m20k] {
        gap: 6px;
    }
}

/* Stepper Active Step Styling */
.mud-stepper .mud-step.mud-step-active .mud-step-label[b-km0lg6m20k] {
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
}

.mud-stepper .mud-step.mud-step-active .mud-step-status[b-km0lg6m20k] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.mud-stepper .mud-step.mud-step-active .mud-step-status .mud-typography[b-km0lg6m20k] {
    color: var(--color-white);
}

/* Ensure long text stays inside textareas/inputs */
.contact-notes .mud-input-slot textarea[b-km0lg6m20k],
.contact-notes .mud-input-slot input[b-km0lg6m20k] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Defensive override to ensure inputs render inside the field */
.contact-notes .mud-input[b-km0lg6m20k] {
    position: relative;
    top: 0;
    transform: none;
    margin-top: 0;
}
.contact-notes .mud-input-slot[b-km0lg6m20k] {
    position: relative;
    transform: none;
}

/* Prevent double borders by removing background styling from inputs */
.no-extra-border .mud-input-root[b-km0lg6m20k] {
    background: transparent;
}

/* Ensure label notches cut the outline properly for outlined fields */
.admin-review-dialog .mud-input-root.mud-input-root-outlined .mud-input-label.mud-shrink[b-km0lg6m20k] {
    background: var(--mud-palette-surface);
    padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER - Gradient header with decorative circles
   ═══════════════════════════════════════════════════════════════ */
.hero-banner[b-km0lg6m20k] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    color: white;
}

.hero-banner[b-km0lg6m20k]::before,
.hero-banner[b-km0lg6m20k]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-banner[b-km0lg6m20k]::before {
    width: 200px;
    height: 200px;
    top: -80px;
    right: -60px;
}

.hero-banner[b-km0lg6m20k]::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    right: 100px;
}

.hero-banner-content[b-km0lg6m20k] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-kicker[b-km0lg6m20k] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.hero-title[b-km0lg6m20k] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.hero-subtitle[b-km0lg6m20k] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', 'Consolas', monospace;
}

.hero-cost-badge[b-km0lg6m20k] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    min-width: 140px;
}

.hero-cost-label[b-km0lg6m20k] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.hero-cost-value[b-km0lg6m20k] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   INFO CARDS - Rounded corners, subtle borders, icon headers
   ═══════════════════════════════════════════════════════════════ */
.info-card[b-km0lg6m20k] {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.info-card-header[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary, #1f2937);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.icon-wrapper[b-km0lg6m20k] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrapper.purple[b-km0lg6m20k] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-wrapper.amber[b-km0lg6m20k] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-wrapper.cyan[b-km0lg6m20k] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.icon-wrapper.green[b-km0lg6m20k] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-row[b-km0lg6m20k] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.info-row:not(:last-child)[b-km0lg6m20k] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.info-row .label[b-km0lg6m20k] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #9ca3af);
    margin-bottom: 2px;
}

.info-row .value[b-km0lg6m20k] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
}

.info-row .value.na[b-km0lg6m20k] {
    font-style: italic;
    color: var(--color-text-tertiary, #9ca3af);
}

/* Device List Styles */
.device-list[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.device-item[b-km0lg6m20k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.device-item:hover[b-km0lg6m20k] {
    border-color: #d1d5db;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.device-info[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.device-name[b-km0lg6m20k] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.device-meta[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

.device-meta-item[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* /Components/Pages/AdminCampaignsDialogs/Dialogs/CallDialog.razor.rz.scp.css */
/* Call Dialog Styles */
.call-dialog-content[b-ifky0zuof3] {
    padding: var(--space-lg);
}

/* Spacing helpers for MudBlazor components */
.mb-4[b-ifky0zuof3] {
    margin-bottom: var(--space-lg);
}

.mb-3[b-ifky0zuof3] {
    margin-bottom: var(--space-md);
}

    height: 1.25rem;
    margin-top: 0.125rem;[b-ifky0zuof3]
}

.form-check-label[b-ifky0zuof3] {
    margin-left: var(--space-xs);
    font-weight: var(--font-weight-medium);
}
/* /Components/Pages/AdminCampaignsDialogs/Dialogs/CampaignReviewDialog.razor.rz.scp.css */
/* Campaign Review Dialog Styles */

.campaign-review-dialog[b-0xuja5sfg3] {
    --dialog-radius: 16px;
}

.campaign-review-dialog .mud-dialog-content[b-0xuja5sfg3] {
    padding: 16px 24px;
    background: #f8fafc;
}

.campaign-review-dialog .mud-dialog-title[b-0xuja5sfg3] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.campaign-review-dialog .mud-dialog-actions[b-0xuja5sfg3] {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 16px 24px;
}

/* Card hover effects */
.campaign-review-dialog .mud-card[b-0xuja5sfg3] {
    transition: all 0.2s ease-in-out;
}

.campaign-review-dialog .mud-card:hover[b-0xuja5sfg3] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Step indicator hover */
.campaign-review-dialog .step-indicator:hover[b-0xuja5sfg3] {
    background: rgba(30, 64, 175, 0.05);
}

/* Custom scrollbar for content area */
.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar {
    width: 8px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Creative gallery item hover */
.campaign-review-dialog .mud-paper[style*="cursor: pointer"]:hover[b-0xuja5sfg3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Checkbox label styling */
.campaign-review-dialog .mud-checkbox-content[b-0xuja5sfg3] {
    padding-left: 8px;
}

/* Alert styling */
.campaign-review-dialog .mud-alert[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Table styling */
.campaign-review-dialog .mud-simple-table[b-0xuja5sfg3] {
    border-radius: 8px;
    overflow: hidden;
}

.campaign-review-dialog .mud-simple-table th[b-0xuja5sfg3] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.campaign-review-dialog .mud-simple-table td[b-0xuja5sfg3] {
    padding: 12px 16px;
}

/* Expansion panel styling */
.campaign-review-dialog .mud-expand-panel[b-0xuja5sfg3] {
    border-radius: 8px !important;
    overflow: hidden;
}

.campaign-review-dialog .mud-expand-panel-header[b-0xuja5sfg3] {
    padding: 12px 16px;
}

/* Button ripple effects */
.campaign-review-dialog .mud-button[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Chip styling */
.campaign-review-dialog .mud-chip[b-0xuja5sfg3] {
    border-radius: 6px;
}

/* Input field styling */
.campaign-review-dialog .mud-input-outlined[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Avatar in headers */
.campaign-review-dialog .section-avatar[b-0xuja5sfg3] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Info icon in data points */
.campaign-review-dialog .info-icon[b-0xuja5sfg3] {
    color: #94a3b8;
    cursor: help;
    transition: color 0.2s;
}

.campaign-review-dialog .info-icon:hover[b-0xuja5sfg3] {
    color: #3b82f6;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .campaign-review-dialog .mud-dialog-content[b-0xuja5sfg3] {
        padding: 12px 16px;
    }
    
    .campaign-review-dialog .mud-dialog-title[b-0xuja5sfg3],
    .campaign-review-dialog .mud-dialog-actions[b-0xuja5sfg3] {
        padding: 12px 16px;
    }
    
    .campaign-review-dialog .step-text[b-0xuja5sfg3] {
        display: none;
    }
}

/* Animation for step transitions */
@keyframes fadeIn-b-0xuja5sfg3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.campaign-review-dialog .step-content[b-0xuja5sfg3] {
    animation: fadeIn-b-0xuja5sfg3 0.3s ease-out;
}

/* Summary card styling in final step */
.campaign-review-dialog .summary-card[b-0xuja5sfg3] {
    background: white;
    border-left-width: 4px;
    border-left-style: solid;
}

.campaign-review-dialog .summary-card.success[b-0xuja5sfg3] {
    border-left-color: #22c55e;
}

.campaign-review-dialog .summary-card.info[b-0xuja5sfg3] {
    border-left-color: #3b82f6;
}

/* Creative card badge */
.campaign-review-dialog .creative-badge[b-0xuja5sfg3] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}
/* /Components/Pages/AdminCampaignsDialogs/Dialogs/UnifiedReviewDialog.razor.rz.scp.css */
/* Unified Review Dialog Styles */
.review-dialog-container[b-sljvm66tda] {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.review-header[b-sljvm66tda] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    padding: var(--space-xl);
    color: var(--color-bg-surface);
}

.review-title[b-sljvm66tda] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-xs) 0;
}

.step-badge[b-sljvm66tda] {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.progress-stepper[b-sljvm66tda] {
    padding: var(--space-xl) var(--space-lg);
    background: var(--color-bg-secondary);
}

.stepper-container[b-sljvm66tda] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.stepper-line[b-sljvm66tda] {
    position: absolute;
    top: 21px;
    left: 24px;
    right: 24px;
    height: 4px;
    background: var(--color-border, #e5e7eb);
    z-index: 0;
    border-radius: 2px;
}

.stepper-progress[b-sljvm66tda] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width 0.4s ease;
    border-radius: 2px;
}

.step-item[b-sljvm66tda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    z-index: 1;
}

.step-circle[b-sljvm66tda] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 3px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.step-circle.active[b-sljvm66tda] {
    border-color: transparent;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.step-circle.completed[b-sljvm66tda] {
    border-color: transparent;
    background: #10b981;
    color: white;
}

.step-circle .checkmark[b-sljvm66tda] {
    font-size: 18px;
    font-weight: 700;
}

.step-label[b-sljvm66tda] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.step-item.active .step-label[b-sljvm66tda] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.review-content[b-sljvm66tda] {
    padding: var(--space-xl);
    min-height: 450px;
    background: var(--color-bg-surface, #ffffff);
}

.form-label[b-sljvm66tda] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}

.form-label.required[b-sljvm66tda]::after {
    content: ' *';
    color: var(--color-error);
}

input[type="number"][b-sljvm66tda]::-webkit-inner-spin-button,
input[type="number"][b-sljvm66tda]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"][b-sljvm66tda] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-text[b-sljvm66tda] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER - Gradient header with decorative circles
   ═══════════════════════════════════════════════════════════════ */
.hero-banner[b-sljvm66tda] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    color: white;
}

.hero-banner[b-sljvm66tda]::before,
.hero-banner[b-sljvm66tda]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-banner[b-sljvm66tda]::before {
    width: 200px;
    height: 200px;
    top: -80px;
    right: -60px;
}

.hero-banner[b-sljvm66tda]::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    right: 100px;
}

.hero-banner-content[b-sljvm66tda] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-kicker[b-sljvm66tda] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.hero-title[b-sljvm66tda] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.hero-subtitle[b-sljvm66tda] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', 'Consolas', monospace;
}

.hero-cost-badge[b-sljvm66tda] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    min-width: 140px;
}

.hero-cost-label[b-sljvm66tda] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.hero-cost-value[b-sljvm66tda] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   INFO CARDS - Rounded corners, subtle borders, icon headers
   ═══════════════════════════════════════════════════════════════ */
.info-card[b-sljvm66tda] {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.info-card-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary, #1f2937);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.icon-wrapper[b-sljvm66tda] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrapper.purple[b-sljvm66tda] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-wrapper.amber[b-sljvm66tda] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-wrapper.cyan[b-sljvm66tda] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.icon-wrapper.green[b-sljvm66tda] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-row[b-sljvm66tda] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.info-row:not(:last-child)[b-sljvm66tda] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.info-row .label[b-sljvm66tda] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #9ca3af);
    margin-bottom: 2px;
}

.info-row .value[b-sljvm66tda] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
}

.info-row .value.na[b-sljvm66tda] {
    font-style: italic;
    color: var(--color-text-tertiary, #9ca3af);
}

/* ═══════════════════════════════════════════════════════════════
   COST CARD - Green gradient total cost display
   ═══════════════════════════════════════════════════════════════ */
.cost-card[b-sljvm66tda] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cost-value[b-sljvm66tda] {
    font-size: 36px;
    font-weight: 700;
    color: #047857;
    letter-spacing: -1px;
    margin: 12px 0 4px 0;
}

.cost-label[b-sljvm66tda] {
    font-size: 13px;
    color: #065f46;
    font-weight: 500;
}

.device-details[b-sljvm66tda] {
    margin-top: var(--space-lg);
}

.device-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.device-header:hover[b-sljvm66tda] {
    background: var(--color-bg-hover);
}

.device-count[b-sljvm66tda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-xs);
    background: var(--color-primary);
    color: var(--color-bg-surface);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.device-body[b-sljvm66tda] {
    padding: var(--space-md);
}

/* Replace Bootstrap margin classes with custom spacing */
.field-spacing[b-sljvm66tda] {
    margin-bottom: var(--space-lg);
}

.mb-4[b-sljvm66tda] {
    margin-bottom: var(--space-lg);
}

/* 
 * REMOVED: Global input overrides that were fighting MudBlazor defaults.
 * MudBlazor's outlined inputs work correctly out of the box.
 * The double-border and label overlap issues were caused by global CSS in app.css.
 */

.review-content[b-sljvm66tda] {
    padding: var(--space-xl);
    min-height: 450px;
    background: var(--color-bg-surface, #ffffff);
}

.review-actions[b-sljvm66tda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.btn-cancel[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-xl);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-cancel:hover[b-sljvm66tda] {
    background: var(--color-bg-secondary);
    border-color: var(--color-text-secondary);
}

.btn-next[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-bg-surface);
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-next:hover[b-sljvm66tda] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-next:disabled[b-sljvm66tda] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.alert[b-sljvm66tda] {
    border-radius: var(--border-radius-md);
    border: none;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.alert-warning[b-sljvm66tda] {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning-text);
}

.alert-success[b-sljvm66tda] {
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    color: var(--color-success-text);
}

.alert-danger[b-sljvm66tda] {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
    color: var(--color-error-text);
}

.btn[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.space-y-4 > * + *[b-sljvm66tda] {
    margin-top: var(--space-lg);
}

.space-y-6 > * + *[b-sljvm66tda] {
    margin-top: var(--space-xl);
}

.section-header[b-sljvm66tda] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.section-subtitle[b-sljvm66tda] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

/* Hero Banner Card */
.hero-banner[b-sljvm66tda] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.25);
}

.hero-banner[b-sljvm66tda]::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.hero-banner[b-sljvm66tda]::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.hero-banner-content[b-sljvm66tda] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-kicker[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 8px;
}

.hero-title[b-sljvm66tda] {
    color: white;
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0 0 8px 0;
}

.hero-subtitle[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.hero-cost-badge[b-sljvm66tda] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.hero-cost-label[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    margin-bottom: 4px;
}

.hero-cost-value[b-sljvm66tda] {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Enhanced Info Cards */
.info-card[b-sljvm66tda] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: var(--space-lg);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-card-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 600;
    color: #111827;
}

.info-card-header .icon-wrapper[b-sljvm66tda] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-header .icon-wrapper.purple[b-sljvm66tda] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.info-card-header .icon-wrapper.amber[b-sljvm66tda] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.info-card-header .icon-wrapper.cyan[b-sljvm66tda] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.info-card-header .icon-wrapper.green[b-sljvm66tda] {
    background: #10b981;
}

.info-row[b-sljvm66tda] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.info-row:last-child[b-sljvm66tda] {
    margin-bottom: 0;
}

.info-row .label[b-sljvm66tda] {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-row .value[b-sljvm66tda] {
    color: #111827;
    font-weight: 500;
}

.info-row .value.na[b-sljvm66tda] {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Cost Card (Green Gradient) */
.cost-card[b-sljvm66tda] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.cost-card .cost-value[b-sljvm66tda] {
    color: #059669;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 4px;
}

.cost-card .cost-label[b-sljvm66tda] {
    color: #047857;
    font-size: 13px;
}

@media (max-width: 768px) {
    .review-header[b-sljvm66tda] {
        padding: var(--space-lg);
    }

    .review-title[b-sljvm66tda] {
        font-size: var(--font-size-xl);
    }

    .progress-stepper[b-sljvm66tda] {
        padding: var(--space-lg) var(--space-md);
    }

    .stepper-container[b-sljvm66tda] {
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .step-item[b-sljvm66tda] {
        flex-direction: row;
        flex: 1 1 45%;
    }

    .review-content[b-sljvm66tda] {
        padding: var(--space-lg);
    }

    .review-actions[b-sljvm66tda] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn-cancel[b-sljvm66tda],
    .btn-next[b-sljvm66tda] {
        width: 100%;
    }
}
/* /Components/Pages/AdminDeviceConfigManagement.razor.rz.scp.css */
/* Admin Device Config Management Styles */
.device-management-container[b-utkzrtnd8t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.page-header[b-utkzrtnd8t] {
    margin-bottom: var(--space-xl);
}

.page-title[b-utkzrtnd8t] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
}

.page-subtitle[b-utkzrtnd8t] {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.search-bar[b-utkzrtnd8t] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.search-input[b-utkzrtnd8t] {
    flex: 1;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
}

.search-input:focus[b-utkzrtnd8t] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.devices-grid[b-utkzrtnd8t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.device-card[b-utkzrtnd8t] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.device-card:hover[b-utkzrtnd8t] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.device-card-row[b-utkzrtnd8t] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.device-icon[b-utkzrtnd8t] {
    width: 48px;
    height: 48px;
    background: var(--color-info-bg);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.device-main[b-utkzrtnd8t] {
    flex: 1;
    min-width: 0;
}

.device-name[b-utkzrtnd8t] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
}

.device-id[b-utkzrtnd8t] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-family: monospace;
}

.device-info[b-utkzrtnd8t] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.info-item[b-utkzrtnd8t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.info-label[b-utkzrtnd8t] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
}

.info-value[b-utkzrtnd8t] {
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

.device-details-row[b-utkzrtnd8t] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.detail-chip[b-utkzrtnd8t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.detail-chip.venue-type[b-utkzrtnd8t] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge[b-utkzrtnd8t] {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.status-badge.status-active[b-utkzrtnd8t] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.status-inactive[b-utkzrtnd8t] {
    background: var(--color-inactive);
    color: var(--color-inactive-text);
}

.configure-btn[b-utkzrtnd8t] {
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, #5b21b6 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.configure-btn:hover[b-utkzrtnd8t] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.modal-overlay[b-utkzrtnd8t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
}

.modal-content[b-utkzrtnd8t] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modal-header[b-utkzrtnd8t] {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-utkzrtnd8t] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
}

.close-btn[b-utkzrtnd8t] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
    transition: var(--transition-fast);
}

.close-btn:hover[b-utkzrtnd8t] {
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .device-management-container[b-utkzrtnd8t] {
        padding: var(--space-md);
    }

    .page-title[b-utkzrtnd8t] {
        font-size: var(--font-size-2xl);
    }

    .device-card[b-utkzrtnd8t] {
        padding: var(--space-md);
    }

    .device-card-row[b-utkzrtnd8t] {
        flex-direction: column;
        align-items: stretch;
    }

    .device-info[b-utkzrtnd8t] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .configure-btn[b-utkzrtnd8t] {
        width: 100%;
    }

    .modal-content[b-utkzrtnd8t] {
        max-height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Pages/AdminDeviceManagement.razor.rz.scp.css */
/* ============================================
   ADMIN DEVICE MANAGEMENT PAGE - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

.device-management-container[b-1myayaz0vb] {
    padding: var(--page-padding);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.page-header[b-1myayaz0vb] {
    margin-bottom: var(--space-xl);
}

.page-header h1[b-1myayaz0vb] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-sm) 0;
}

.page-header p[b-1myayaz0vb] {
    color: var(--color-text-muted);
    margin: 0;
}

.search-bar[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 12px var(--space-md);
    margin-bottom: var(--section-gap);
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-bar input[b-1myayaz0vb] {
    border: none;
    outline: none;
    flex: 1;
    font-size: var(--font-size-base);
}

.devices-grid[b-1myayaz0vb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.device-card[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-2xl);
    padding: var(--card-padding) var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.device-card:hover[b-1myayaz0vb] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.device-card-row[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--card-padding);
}

.device-icon[b-1myayaz0vb] {
    width: 48px;
    height: 48px;
    background: var(--color-blue-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.device-icon i[b-1myayaz0vb] {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.device-main[b-1myayaz0vb] {
    flex: 1;
    min-width: 0;
}

.device-name[b-1myayaz0vb] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 4px 0;
}

.device-id[b-1myayaz0vb] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.device-info[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.info-item[b-1myayaz0vb] {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.info-label[b-1myayaz0vb] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.info-value[b-1myayaz0vb] {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

.device-details-row[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.detail-chip[b-1myayaz0vb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.detail-chip i[b-1myayaz0vb] {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
}

.detail-chip.venue-type[b-1myayaz0vb] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.detail-chip.venue-type i[b-1myayaz0vb] {
    color: var(--color-success);
}

.device-location[b-1myayaz0vb] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge[b-1myayaz0vb] {
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.status-active[b-1myayaz0vb] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-inactive[b-1myayaz0vb] {
    background: var(--color-inactive);
    color: var(--color-inactive-text);
}

.configure-btn[b-1myayaz0vb] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 10px var(--card-padding);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.configure-btn:hover[b-1myayaz0vb] {
    background: var(--color-primary-hover);
}

.config-btn:hover[b-1myayaz0vb] {
    background: var(--color-primary-hover);
}

.modal-overlay[b-1myayaz0vb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--card-padding);
}

.modal-content[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-3xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.modal-header[b-1myayaz0vb] {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5[b-1myayaz0vb] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-main);
}

.modal-body[b-1myayaz0vb] {
    padding: var(--space-lg);
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.close-btn[b-1myayaz0vb] {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
}

.close-btn:hover[b-1myayaz0vb] {
    background: var(--color-bg-active);
}
/* /Components/Pages/AdminImportedInventoryManagement.razor.rz.scp.css */
.imports-page[b-uyaxdsnf34] {
    background: var(--color-bg-app);
    min-height: 100vh;
    padding: var(--space-lg);
}

.imports-container[b-uyaxdsnf34] {
    max-width: 1200px;
    margin: 0 auto;
}

.alert-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.alert-card.error[b-uyaxdsnf34] {
    border-left: 4px solid var(--color-error);
}

.alert-card.error i[b-uyaxdsnf34] {
    color: var(--color-error);
    font-size: var(--font-size-xl);
}

.page-header[b-uyaxdsnf34] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.header-left[b-uyaxdsnf34] {
    flex: 1;
}

.page-title[b-uyaxdsnf34] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-title i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

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

.header-stats[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.stat-chip[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-full);
    padding: var(--space-xs) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    transition: all var(--transition-base);
}

.stat-chip:hover[b-uyaxdsnf34] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.stat-chip.active[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.stat-chip.warning .stat-value[b-uyaxdsnf34] { color: var(--color-warning); }
.stat-chip.success .stat-value[b-uyaxdsnf34] { color: var(--color-success); }
.stat-chip.error .stat-value[b-uyaxdsnf34] { color: var(--color-error); }

.stat-chip.active .stat-value[b-uyaxdsnf34] { color: var(--color-white); }

.stat-label[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.stat-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.action-bar[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    align-items: center;
}

.search-box[b-uyaxdsnf34] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
}

.search-box i.bi-search[b-uyaxdsnf34] {
    position: absolute;
    left: var(--space-md);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

.search-box input[b-uyaxdsnf34] {
    width: 100%;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.search-box input:focus[b-uyaxdsnf34] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-box input[b-uyaxdsnf34]::placeholder {
    color: var(--color-text-light);
}

.search-box .clear-search[b-uyaxdsnf34] {
    position: absolute;
    right: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-base);
}

.search-box .clear-search:hover[b-uyaxdsnf34] {
    background: var(--color-bg-app);
    color: var(--color-text-main);
}

.btn-approve-all[b-uyaxdsnf34] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-base);
}

.btn-approve-all:hover[b-uyaxdsnf34] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-refresh[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-base);
}

.btn-refresh:hover[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: var(--color-white);
}

.loading-indicator[b-uyaxdsnf34] {
    margin: var(--space-lg) 0;
}

.empty-state[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: 60px 40px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state i[b-uyaxdsnf34] {
    font-size: 64px;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.empty-state h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
    margin: 0 0 var(--space-xs) 0;
}

.empty-state p[b-uyaxdsnf34] {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Horizontal Card List - Provider Style */
.imports-list[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.import-card-horizontal[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.import-card-horizontal:hover[b-uyaxdsnf34] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-light);
}

.import-card-icon[b-uyaxdsnf34] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-primary-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.import-card-content[b-uyaxdsnf34] {
    flex: 1;
    min-width: 0;
}

.import-header-row[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.import-info[b-uyaxdsnf34] {
    min-width: 0;
    flex: 1;
}

.import-title-row[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xs);
}

.import-title[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-subtitle[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.import-meta[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.import-meta-item[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    white-space: nowrap;
}

.import-meta-active[b-uyaxdsnf34] {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.import-meta-divider[b-uyaxdsnf34] {
    color: var(--color-border);
}

.import-card-end[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.import-uploader-info[b-uyaxdsnf34],
.import-date-info[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.uploader-label[b-uyaxdsnf34],
.date-label[b-uyaxdsnf34] {
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.uploader-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.date-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.import-actions[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.action-btn-icon[b-uyaxdsnf34] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.action-btn-icon.view[b-uyaxdsnf34] {
    color: var(--color-primary);
    border-color: var(--color-blue-border);
    background: var(--color-blue-light);
}

.action-btn-icon.view:hover[b-uyaxdsnf34] {
    background: var(--color-info-bg);
    border-color: var(--color-blue-border);
}

.action-btn-icon.approve[b-uyaxdsnf34] {
    color: var(--color-success-text);
    border-color: var(--color-success-bg);
    background: var(--color-success-bg);
}

.action-btn-icon.approve:hover[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.action-btn-icon.reject[b-uyaxdsnf34] {
    color: var(--color-error);
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.action-btn-icon.reject:hover[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon.delete[b-uyaxdsnf34] {
    color: var(--color-error);
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.action-btn-icon.delete:hover[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon.download[b-uyaxdsnf34] {
    color: var(--color-primary);
    border-color: var(--color-primary-bg);
    background: var(--color-primary-bg);
}

.action-btn-icon.download:hover[b-uyaxdsnf34] {
    background: var(--color-info-bg);
    border-color: var(--color-primary);
}

.action-btn-icon:disabled[b-uyaxdsnf34] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-badge[b-uyaxdsnf34] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--border-radius-md);
}

.status-badge.pending[b-uyaxdsnf34] {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.status-badge.approved[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.rejected[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* Detail View */
.btn-back[b-uyaxdsnf34] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-md);
}

.btn-back:hover[b-uyaxdsnf34] {
    text-decoration: underline;
}

.detail-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.detail-header[b-uyaxdsnf34] {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.detail-title[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-title h2[b-uyaxdsnf34] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
}

.detail-grid[b-uyaxdsnf34] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.detail-item[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.detail-item.full-width[b-uyaxdsnf34] {
    grid-column: 1 / -1;
}

.detail-label[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.detail-value[b-uyaxdsnf34] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.detail-value.mono[b-uyaxdsnf34] {
    font-family: monospace;
    font-size: var(--font-size-xs);
}

.detail-value.highlight[b-uyaxdsnf34] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.detail-value .success[b-uyaxdsnf34] {
    color: var(--color-success);
}

.detail-value .warning[b-uyaxdsnf34] {
    color: var(--color-warning);
}

.detail-actions[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.btn-approve[b-uyaxdsnf34] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-text) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-approve:hover[b-uyaxdsnf34] {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-reject[b-uyaxdsnf34] {
    background: linear-gradient(135deg, #ef4444 0%, var(--color-error) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-reject:hover[b-uyaxdsnf34] {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-download-csv[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-download-csv:hover:not(:disabled)[b-uyaxdsnf34] {
    background: var(--color-primary-strong);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-download-csv:disabled[b-uyaxdsnf34] {
    opacity: 0.6;
    cursor: not-allowed;
}

.stats-grid[b-uyaxdsnf34] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.stats-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.stats-card h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.stats-card h3 i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

.stats-list[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stats-row[b-uyaxdsnf34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-sm);
}

.stats-label[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stats-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: var(--color-blue-light);
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-md);
}

.sample-devices-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.sample-devices-card h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sample-devices-card h3 i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

.devices-table-wrapper[b-uyaxdsnf34] {
    overflow-x: auto;
}

.devices-table[b-uyaxdsnf34] {
    width: 100%;
    border-collapse: collapse;
}

.devices-table th[b-uyaxdsnf34] {
    text-align: left;
    padding: var(--space-md);
    background: var(--color-bg-hover);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-border-light);
}

.devices-table td[b-uyaxdsnf34] {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border-light);
}

.devices-table tr:hover td[b-uyaxdsnf34] {
    background: var(--color-bg-hover);
}

.devices-table .mono[b-uyaxdsnf34] {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.status-pill[b-uyaxdsnf34] {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--border-radius-md);
}

.status-pill.active[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-pill.inactive[b-uyaxdsnf34] {
    background: var(--color-inactive);
    color: var(--color-text-secondary);
}

/* Recent import processing indicator (list view) */
.processing-indicator[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 3px 8px;
    width: fit-content;
}

/* Recent import banner (detail view) */
.recent-import-banner[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 18px;
    margin-bottom: var(--space-md);
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-left: 4px solid #3b82f6;
    border-radius: var(--border-radius-md);
}

.recent-import-banner-icon[b-uyaxdsnf34] {
    flex-shrink: 0;
}

.recent-import-banner-text[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.recent-import-banner-text strong[b-uyaxdsnf34] {
    font-size: 13px;
    color: #1e40af;
}

.recent-import-banner-text span[b-uyaxdsnf34] {
    font-size: 12px;
    color: #3b82f6;
    line-height: 1.4;
}
/* /Components/Pages/AdminImportInventory.razor.rz.scp.css */
.upload-page[b-ru1lw08j3d] {
    padding: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.page-header[b-ru1lw08j3d] {
    margin-bottom: var(--space-2xl);
}

.page-header h1[b-ru1lw08j3d] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-header p[b-ru1lw08j3d] {
    color: var(--color-text-muted);
    margin: 0;
}

.upload-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.section-title[b-ru1lw08j3d] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-title i[b-ru1lw08j3d] {
    color: var(--color-primary);
}

.form-group[b-ru1lw08j3d] {
    margin-bottom: var(--space-lg);
}

.form-label[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
    display: block;
}

.provider-select[b-ru1lw08j3d] {
    width: 100%;
    padding: 14px var(--space-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    background: var(--color-bg-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.provider-select:focus[b-ru1lw08j3d] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.mapping-info[b-ru1lw08j3d] {
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.mapping-info h4[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mapping-grid[b-ru1lw08j3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-xs);
}

.mapping-item[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mapping-item strong[b-ru1lw08j3d] {
    color: var(--color-blue-dark);
}

.mapping-item span[b-ru1lw08j3d] {
    color: var(--color-text-muted);
}

.file-upload-zone[b-ru1lw08j3d] {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    text-align: center;
    background: var(--color-bg-hover);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.file-upload-zone:hover[b-ru1lw08j3d] {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.file-upload-zone.has-file[b-ru1lw08j3d] {
    border-color: var(--color-success);
    background: var(--color-success-light);
}

.upload-icon[b-ru1lw08j3d] {
    width: 48px;
    height: 48px;
    background: var(--color-blue-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.upload-icon i[b-ru1lw08j3d] {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.file-info[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.file-chip[b-ru1lw08j3d] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-upload[b-ru1lw08j3d] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 14px 28px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast);
    margin-top: var(--space-lg);
}

.btn-upload:hover:not(:disabled)[b-ru1lw08j3d] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

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

.result-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.result-header[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.result-icon[b-ru1lw08j3d] {
    width: 40px;
    height: 40px;
    background: var(--color-success-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-icon i[b-ru1lw08j3d] {
    color: var(--color-success);
    font-size: var(--font-size-lg);
}

.result-title[b-ru1lw08j3d] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

.result-grid[b-ru1lw08j3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.result-item[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
}

.result-item-label[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xs);
}

.result-item-value[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.warning-box[b-ru1lw08j3d] {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.warning-box h4[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-dark);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.warning-box p[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-warning-dark);
    margin: 0;
}

.btn-outline[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-outline:hover[b-ru1lw08j3d] {
    background: var(--color-blue-light);
}

/* Validation Preview Styles */
.validation-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-lg);
}

.validation-header[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap; 
    gap: var(--space-md);
}

.validation-title[b-ru1lw08j3d] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-download-report[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex; 
    align-items: center;
    gap: 6px; 
    margin-left: 12px; 
    transition: all var(--transition-fast);
}

.btn-download-report:hover[b-ru1lw08j3d] {
    background: var(--color-bg-dim);
    border-color: var(--color-border-dark);
}
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: var(--space-sm);[b-ru1lw08j3d]
}

.validation-stats[b-ru1lw08j3d] {
    display: flex;
    gap: var(--space-md);
}

.stat-badge[b-ru1lw08j3d] {
    padding: 6px 14px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.stat-badge.valid[b-ru1lw08j3d] {
    background: #d1fae5;
    color: #065f46;
}

.stat-badge.warning[b-ru1lw08j3d] {
    background: #fef3c7;
    color: #92400e;
}

.stat-badge.error[b-ru1lw08j3d] {
    background: #fee2e2;
    color: #991b1b;
}

.validation-summary[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.summary-title[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.issue-list[b-ru1lw08j3d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.issue-item[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    border-left: 3px solid;
}

.issue-item.warning[b-ru1lw08j3d] {
    border-color: var(--color-warning);
}

.issue-item.error[b-ru1lw08j3d] {
    border-color: var(--color-error);
}

.issue-field[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    margin-bottom: var(--space-2xs);
}

.issue-details[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.preview-table-container[b-ru1lw08j3d] {
    max-height: 400px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.preview-table[b-ru1lw08j3d] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

.preview-table th[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.preview-table td[b-ru1lw08j3d] {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-bg-hover);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-table tr.row-valid[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
}

.preview-table tr.row-warning[b-ru1lw08j3d] {
    background: var(--color-warning-light);
}

.preview-table tr.row-error[b-ru1lw08j3d] {
    background: var(--color-error-light);
}

.preview-table tr:hover[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
}

.cell-warning[b-ru1lw08j3d] {
    background: #fef3c7;
    border-radius: var(--border-radius-xs);
    padding: 2px 6px;
}

.cell-error[b-ru1lw08j3d] {
    background: #fee2e2;
    border-radius: var(--border-radius-xs);
    padding: 2px 6px;
}

.row-status[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.row-status i[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
}

.row-status.valid i[b-ru1lw08j3d] { color: var(--color-success); }
.row-status.warning i[b-ru1lw08j3d] { color: var(--color-warning); }
.row-status.error i[b-ru1lw08j3d] { color: var(--color-error); }

.validation-actions[b-ru1lw08j3d] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.btn-validate[b-ru1lw08j3d] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-validate:hover:not(:disabled)[b-ru1lw08j3d] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

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

.btn-clear[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-clear:hover[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-color: #cbd5e1;
}

.validation-note[b-ru1lw08j3d] {
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--color-blue-dark);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.validation-note i[b-ru1lw08j3d] {
    flex-shrink: 0;
    margin-top: 2px;
}
/* /Components/Pages/AdminProviders.razor.rz.scp.css */
/* Page Layout */
.providers-page[b-eryx8n81pr] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-eryx8n81pr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}

.header-content[b-eryx8n81pr] {
    flex: 1;
}

.page-header-title[b-eryx8n81pr] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
}

.page-header-subtitle[b-eryx8n81pr] {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.btn-primary[b-eryx8n81pr] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-button-hover);
    transition: var(--transition-fast);
}

.btn-primary:hover[b-eryx8n81pr] {
    background: var(--color-primary-strong);
}

/* Loading State */
.providers-loading[b-eryx8n81pr] {
    padding: var(--space-lg) 0;
}

/* Empty State */
.providers-empty-state[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 64px var(--space-lg);
    text-align: center;
}

.empty-icon[b-eryx8n81pr] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-md);
    border-radius: var(--border-radius-full);
    background: var(--color-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-eryx8n81pr] .empty-icon .mud-icon-root {
    color: var(--color-primary);
}

.text-muted[b-eryx8n81pr] {
    color: var(--color-text-muted);
}

/* Providers List */
.providers-list[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Provider Card */
.provider-card-horizontal[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transition: var(--transition-fast);
}

.provider-card-horizontal:hover[b-eryx8n81pr] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.provider-card-icon[b-eryx8n81pr] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-bg-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-card-content[b-eryx8n81pr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.provider-header-row[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.provider-info[b-eryx8n81pr] {
    min-width: 0;
    flex: 1;
}

.provider-title[b-eryx8n81pr] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-subtitle[b-eryx8n81pr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-meta[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.provider-meta-item[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.provider-meta-active[b-eryx8n81pr] {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.meta-icon[b-eryx8n81pr] {
    font-size: 16px;
    opacity: 0.7;
}

.provider-meta-divider[b-eryx8n81pr] {
    color: var(--color-border-strong);
}

.provider-card-end[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.provider-revenue-share[b-eryx8n81pr],
.provider-last-sync[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.revenue-label[b-eryx8n81pr],
.sync-label[b-eryx8n81pr] {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.revenue-value[b-eryx8n81pr] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.sync-value[b-eryx8n81pr] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.provider-actions[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.action-icon[b-eryx8n81pr] {
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    width: 36px;
    height: 36px;
}

.action-icon:hover[b-eryx8n81pr] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 900px) {
    .provider-card-horizontal[b-eryx8n81pr] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .provider-header-row[b-eryx8n81pr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .provider-meta[b-eryx8n81pr] {
        flex-wrap: wrap;
    }

    .provider-card-end[b-eryx8n81pr] {
        width: 100%;
        justify-content: space-between;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--color-border-subtle);
    }
}

@media (max-width: 600px) {
    .page-header[b-eryx8n81pr] {
        flex-direction: column;
        align-items: stretch;
    }

    .providers-page[b-eryx8n81pr] {
        padding: var(--space-md);
    }

    .provider-card-end[b-eryx8n81pr] {
        gap: var(--space-md);
    }

    .provider-revenue-share[b-eryx8n81pr],
    .provider-last-sync[b-eryx8n81pr] {
        align-items: flex-start;
    }
}

/* Discovery Dialog Styles */
.discover-loading[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px var(--space-lg);
    color: var(--color-text-muted);
}

.discover-content[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.discover-section[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.discover-section-title[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-subtle);
}

[b-eryx8n81pr] .discover-section-title .mud-icon-root {
    color: var(--color-primary);
}

.discover-field[b-eryx8n81pr] {
    margin-bottom: var(--space-md);
}

.discover-field:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}

.discover-label[b-eryx8n81pr] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.discover-url-box[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    overflow: hidden;
}

.discover-url-box code[b-eryx8n81pr] {
    flex: 1;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    word-break: break-all;
    overflow-wrap: anywhere;
}

.discover-url-box--example[b-eryx8n81pr] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.discover-url-box--example code[b-eryx8n81pr] {
    color: var(--color-success-text);
}

.discover-code-inline[b-eryx8n81pr] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    background: var(--color-bg-active);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-main);
}

.discover-grid[b-eryx8n81pr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.discover-chips[b-eryx8n81pr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.discover-params-table[b-eryx8n81pr] {
    margin-top: var(--space-sm);
}

[b-eryx8n81pr] .discover-params-table th {
    background: var(--color-bg-hover);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

[b-eryx8n81pr] .discover-params-table td {
    background: var(--color-bg-hover);
}

[b-eryx8n81pr] .discover-params-table code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
}

.discover-notes[b-eryx8n81pr] {
    margin: var(--space-sm) 0 0 0;
    padding-left: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.discover-notes li[b-eryx8n81pr] {
    margin-bottom: 6px;
}

.discover-notes li:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}

.action-icon--discover:hover[b-eryx8n81pr] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

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

/* Provider Status Styles */
.provider-title-row[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-badge[b-eryx8n81pr] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge--enabled[b-eryx8n81pr] {
    background: linear-gradient(135deg, var(--color-success-bg), var(--color-success-bg));
    color: var(--color-success-text);
    border: 1px solid var(--color-success);
}

.status-badge--disabled[b-eryx8n81pr] {
    background: linear-gradient(135deg, var(--color-error-bg), var(--color-error-bg));
    color: var(--color-error-text);
    border: 1px solid var(--color-error);
}

.provider-card--disabled[b-eryx8n81pr] {
    opacity: 0.7;
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.provider-card--disabled .provider-card-icon[b-eryx8n81pr] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.provider-disabled-reason[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-sm);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-bg);
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-error-text);
}

.disabled-date[b-eryx8n81pr] {
    font-size: 11px;
    color: var(--color-error);
    margin-left: auto;
}

.provider-status-toggle[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-sm);
}

.status-switch[b-eryx8n81pr] {
    margin: 0;
}

.disable-reason-radio[b-eryx8n81pr] {
    margin-bottom: var(--space-sm);
}

.disable-reason-radio:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}
/* /Components/Pages/AdminVideoUpload.razor.rz.scp.css */
/* Video Upload Zone Styles */
.upload-zone[b-wd68h9b5md] {
    border: 2px dashed var(--mud-palette-action-hover);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: var(--transition-fast);
    background: var(--color-bg-secondary);
}

.upload-zone.dragging[b-wd68h9b5md] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.file-item-valid[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-success);
    padding-left: var(--space-md);
}

.file-item-invalid[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-error);
    padding-left: var(--space-md);
}

.file-item-uploading[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-info);
    padding-left: var(--space-md);
}

.file-item-success[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-success);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-success-rgb), 0.05);
}

.file-item-failed[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-error);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-error-rgb), 0.05);
}

.file-item-warning[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-warning);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-warning-rgb), 0.05);
}
/* /Components/Pages/Analytics/CampaignAnalytics.razor.rz.scp.css */
/* Campaign Analytics Component Styles - Matching Campaigns Page Theme */

/* Main container */
.analytics-page[b-pasnz9hbgc] {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

/* Page Header - matching Campaigns page */
.page-header[b-pasnz9hbgc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 24px;
    padding: 24px 24px 0;
}

.page-header-info[b-pasnz9hbgc] {
    flex: 1;
}

.page-header-title[b-pasnz9hbgc] {
    font-size: 2rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.page-header-subtitle[b-pasnz9hbgc] {
    margin-top: 6px;
    font-size: 1rem;
    color: #6b7280;
}

.page-header-actions[b-pasnz9hbgc] {
    display: flex;
    align-items: center;
}

/* Info chips bar */
.info-chips-bar[b-pasnz9hbgc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 24px;
    flex-wrap: wrap;
}

/* KPI Cards */
.kpi-card:hover[b-pasnz9hbgc] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* Chart - let MudBlazor handle layout natively */

/* Responsive adjustments */
@media (max-width: 960px) {
    .page-header[b-pasnz9hbgc] {
        flex-direction: column;
        gap: 16px;
    }
    
    .page-header-actions[b-pasnz9hbgc] {
        width: 100%;
    }
}
/* /Components/Pages/AuthCallback.razor.rz.scp.css */
/* Auth Callback Page Styles */
.callback-container[b-n1itljgqnm] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    padding: var(--space-lg);
}

.callback-content[b-n1itljgqnm] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2xl);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.loading-state[b-n1itljgqnm],
.linking-state[b-n1itljgqnm],
.error-state[b-n1itljgqnm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.spinner-wrapper[b-n1itljgqnm] {
    width: 80px;
    height: 80px;
}

.status-icon[b-n1itljgqnm] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.status-icon.success[b-n1itljgqnm] {
    background: var(--color-success);
    color: var(--color-bg-surface);
}

.status-icon.error[b-n1itljgqnm] {
    background: var(--color-error);
    color: var(--color-bg-surface);
}

.status-title[b-n1itljgqnm] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.status-message[b-n1itljgqnm] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.redirect-message[b-n1itljgqnm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--space-md);
}

.error-details[b-n1itljgqnm] {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-family: monospace;
    text-align: left;
    word-break: break-all;
}

@media (max-width: 768px) {
    .callback-content[b-n1itljgqnm] {
        padding: var(--space-lg);
    }

    .status-title[b-n1itljgqnm] {
        font-size: var(--font-size-xl);
    }
}
/* /Components/Pages/Campaigns.razor.rz.scp.css */
/* ============================================
   CAMPAIGNS PAGE - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

.campaigns-page[b-172t96mw5k] {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.page-header[b-172t96mw5k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-lg) 0;
}

.page-header-title[b-172t96mw5k] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.page-header-subtitle[b-172t96mw5k] {
    margin-top: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.page-header-actions[b-172t96mw5k] {
    display: flex;
    align-items: center;
}

.btn-primary[b-172t96mw5k] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    padding: 10px var(--card-padding);
    font-weight: var(--font-weight-medium);
    border: none;
    box-shadow: var(--shadow-button);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    text-transform: none;
}

.btn-primary:hover[b-172t96mw5k] {
    background: var(--color-primary-strong);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Filters bar and stat chips */
.filters-bar[b-172t96mw5k] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-md);
    margin: 0 var(--space-lg) var(--section-gap);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

/* Hide mobile-only buttons on desktop */
.mobile-filter-toggle[b-172t96mw5k],
.mobile-menu-toggle[b-172t96mw5k],
.mobile-drawer-toggle[b-172t96mw5k] {
    display: none;
}

@media (max-width: 960px) {
    .mobile-filter-toggle[b-172t96mw5k],
    .mobile-menu-toggle[b-172t96mw5k],
    .mobile-drawer-toggle[b-172t96mw5k] {
        display: flex;
    }
}

.stat-chip[b-172t96mw5k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-slow);
}

.stat-chip:hover[b-172t96mw5k] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.stat-chip-pending[b-172t96mw5k] {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.stat-chip-pending.active[b-172t96mw5k] {
    background: var(--color-warning);
    color: var(--color-white);
    border-color: var(--color-warning);
}

.stat-chip-active[b-172t96mw5k] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.stat-chip-active.active[b-172t96mw5k] {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.stat-chip-completed[b-172t96mw5k] {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.stat-chip-completed.active[b-172t96mw5k] {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}

.status-tabs-wrapper[b-172t96mw5k] {
    padding: 0 0 var(--section-gap);
}

.status-tabs-bar[b-172t96mw5k] {
    background: transparent;
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0;
    justify-content: flex-start;
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner {
    display: flex;
    align-items: center;
    gap: var(--section-gap);
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-tab {
    min-height: auto;
    border-radius: 0;
    text-transform: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: 12px 4px;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-tab .mud-tab-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-tab:hover {
    color: var(--color-text-main);
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-tab.mud-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-badge-root {
    background: var(--color-inactive);
    border-radius: var(--border-radius-full);
    padding: 2px var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-left: 4px;
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-toolbar-inner .mud-tab.mud-tab-active .mud-badge-root {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

[b-172t96mw5k] .status-tabs-bar .mud-tabs-slider {
    display: none;
}

.status-tab-panel[b-172t96mw5k] {
    padding: 0;
    background: transparent;
}

.tab-empty-state[b-172t96mw5k] {
    padding: 64px var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
}

/* Campaigns List - Horizontal Cards */
.campaigns-list[b-172t96mw5k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 var(--space-lg) var(--section-gap);
}

/* Horizontal Campaign Card */
.campaign-card-horizontal[b-172t96mw5k] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    transition: box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.campaign-card-horizontal:hover[b-172t96mw5k] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.campaign-card-thumbnail[b-172t96mw5k] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-info-bg);
    position: relative;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.campaign-card-thumbnail[style*="cursor: pointer"]:hover[b-172t96mw5k] {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.campaign-thumbnail-img[b-172t96mw5k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-thumbnail-img.fallback[b-172t96mw5k] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
}

.campaign-card-content[b-172t96mw5k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.campaign-header-row[b-172t96mw5k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.campaign-info[b-172t96mw5k] {
    min-width: 0;
    flex: 1;
}

.campaign-title[b-172t96mw5k] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: var(--line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-subtitle[b-172t96mw5k] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-meta[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.campaign-meta-item[b-172t96mw5k] {
    white-space: nowrap;
}

.campaign-meta-divider[b-172t96mw5k] {
    color: var(--color-border-strong);
}

.campaign-progress[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar[b-172t96mw5k] {
    flex: 1;
    height: 4px;
    border-radius: var(--border-radius-full);
}

.progress-text[b-172t96mw5k] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.campaign-card-end[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: var(--card-padding);
    flex-shrink: 0;
}

.status-badge[b-172t96mw5k] {
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    display: inline-block;
    text-transform: uppercase;
}

.status-badge.status-pill--pending[b-172t96mw5k],
.status-badge.status-pill--draft[b-172t96mw5k] {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-badge.status-pill--active[b-172t96mw5k] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.status-pill--paused[b-172t96mw5k] {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-badge.status-pill--completed[b-172t96mw5k] {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.campaign-cost[b-172t96mw5k] {
    color: var(--color-success);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.campaign-impressions[b-172t96mw5k] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.campaign-actions[b-172t96mw5k] {
    display: flex;
    gap: var(--space-sm);
}

/* Styled Action Buttons */
.action-btn-icon[b-172t96mw5k] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.action-btn-icon.view[b-172t96mw5k] {
    color: var(--color-primary);
    border-color: var(--color-info-bg);
    background: var(--color-info-bg);
}

.action-btn-icon.view:hover[b-172t96mw5k] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.action-btn-icon.stats[b-172t96mw5k] {
    color: var(--color-primary);
    border-color: var(--color-primary-soft);
    background: var(--color-primary-soft);
}

.action-btn-icon.stats:hover[b-172t96mw5k] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.action-btn-icon.resume[b-172t96mw5k] {
    color: var(--color-success);
    border-color: var(--color-success-bg);
    background: var(--color-success-bg);
}

.action-btn-icon.resume:hover[b-172t96mw5k] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.action-btn-icon.pause[b-172t96mw5k] {
    color: var(--color-warning);
    border-color: var(--color-warning-bg);
    background: var(--color-warning-bg);
}

.action-btn-icon.pause:hover[b-172t96mw5k] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.action-btn-icon.delete[b-172t96mw5k] {
    color: var(--color-error);
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.action-btn-icon.delete:hover[b-172t96mw5k] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon:disabled[b-172t96mw5k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 960px) {
    .page-header[b-172t96mw5k] {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-lg) var(--space-md) var(--card-padding);
    }

    .page-header-actions[b-172t96mw5k] {
        width: 100%;
    }

    .btn-primary[b-172t96mw5k] {
        width: 100%;
        justify-content: center;
    }

    .status-tabs-wrapper[b-172t96mw5k] {
        padding: 0 var(--space-md) var(--space-md);
    }

    .filters-bar[b-172t96mw5k] {
        margin: 0 var(--space-md) var(--section-gap);
    }

    .campaigns-list[b-172t96mw5k] {
        padding: 0 var(--space-md) var(--section-gap);
    }

    .campaign-card-horizontal[b-172t96mw5k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .campaign-card-end[b-172t96mw5k] {
        width: 100%;
        justify-content: space-between;
    }

    .campaign-meta[b-172t96mw5k] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/CampaignSuccess.razor.rz.scp.css */
/* Success Page Styles */
.success-page[b-zigt8q2usi] {
    min-height: 100vh;
    background: transparent; /* Inherit MainLayout gradient */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.success-container[b-zigt8q2usi] {
    max-width: 700px;
    width: 100%;
}

.success-card[b-zigt8q2usi] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2xl);
    text-align: center;
}

.success-icon-wrapper[b-zigt8q2usi] {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-xl);
}

.success-icon[b-zigt8q2usi] {
    width: 120px;
    height: 120px;
    background: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    animation: scaleIn-b-zigt8q2usi 0.5s ease-out;
}

.success-icon i[b-zigt8q2usi] {
    font-size: 60px;
    color: var(--color-bg-surface);
}

.pulse-ring[b-zigt8q2usi] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 4px solid var(--color-success);
    border-radius: 50%;
    animation: pulseRing-b-zigt8q2usi 2s ease-out infinite;
}

@keyframes scaleIn-b-zigt8q2usi {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulseRing-b-zigt8q2usi {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.success-title[b-zigt8q2usi] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.success-message[b-zigt8q2usi] {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.campaign-info[b-zigt8q2usi] {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.info-row[b-zigt8q2usi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.info-label[b-zigt8q2usi] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.info-value[b-zigt8q2usi] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.status-badge[b-zigt8q2usi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.status-badge.status-pending[b-zigt8q2usi] {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-badge.status-active[b-zigt8q2usi] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge i[b-zigt8q2usi] {
    font-size: 12px;
}

.next-steps-card[b-zigt8q2usi] {
    text-align: left;
    margin-top: var(--space-xl);
}

.next-steps-title[b-zigt8q2usi] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.next-steps-title i[b-zigt8q2usi] {
    color: var(--color-primary);
}

.steps-list[b-zigt8q2usi] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-zigt8q2usi] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.step-item:last-child[b-zigt8q2usi] {
    margin-bottom: 0;
}

.step-number[b-zigt8q2usi] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.step-content h4[b-zigt8q2usi] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.step-content p[b-zigt8q2usi] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.action-buttons[b-zigt8q2usi] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.btn-primary[b-zigt8q2usi],
.btn-secondary[b-zigt8q2usi] {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-align: center;
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary[b-zigt8q2usi] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-bg-surface);
}

.btn-primary:hover[b-zigt8q2usi] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary[b-zigt8q2usi] {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover[b-zigt8q2usi] {
    background: var(--color-bg-secondary);
    border-color: var(--color-text-secondary);
}

.decorative-dots[b-zigt8q2usi] {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.1;
}

.decorative-dots.top-left[b-zigt8q2usi] {
    top: -50px;
    left: -50px;
    background: radial-gradient(circle, var(--color-bg-surface) 2px, transparent 2px);
    background-size: 20px 20px;
}

.decorative-dots.bottom-right[b-zigt8q2usi] {
    bottom: -50px;
    right: -50px;
    background: radial-gradient(circle, var(--color-bg-surface) 2px, transparent 2px);
    background-size: 20px 20px;
}

@media (max-width: 768px) {
    .success-page[b-zigt8q2usi] {
        padding: var(--space-md);
    }

    .success-card[b-zigt8q2usi] {
        padding: var(--space-lg);
    }

    .success-title[b-zigt8q2usi] {
        font-size: var(--font-size-2xl);
    }

    .success-message[b-zigt8q2usi] {
        font-size: var(--font-size-base);
    }

    .action-buttons[b-zigt8q2usi] {
        flex-direction: column;
    }

    .btn-primary[b-zigt8q2usi],
    .btn-secondary[b-zigt8q2usi] {
        width: 100%;
    }
}
/* /Components/Pages/CreateCampaign.razor.rz.scp.css */
.create-campaign-page[b-5hezby479l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
    min-height: calc(100vh - 64px);
    background: transparent;
}

.create-campaign-scroll[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: 80px;
}

.page-header[b-5hezby479l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.page-header-title[b-5hezby479l] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.page-header-subtitle[b-5hezby479l] {
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Device Summary Card */
.device-summary-card[b-5hezby479l] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-border-subtle);
}

.device-summary-header[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.device-summary-title[b-5hezby479l] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.device-chips[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.device-chip[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-xs);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.device-chip.portrait[b-5hezby479l] {
    background: var(--color-active);
    color: var(--color-active-text);
}

.device-chip.landscape[b-5hezby479l] {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.pro-tip[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-info-bg);
    border-radius: var(--border-radius-md);
    font-size: 13px;
    color: var(--color-info-text);
}

/* Orientation Card */
.orientation-card[b-5hezby479l] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border: 1px solid var(--color-border-subtle);
    transition: all var(--transition-fast);
}

.orientation-card:hover[b-5hezby479l] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.orientation-card-header[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.orientation-info[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.orientation-icon[b-5hezby479l] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.orientation-icon.landscape[b-5hezby479l] {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.orientation-icon.portrait[b-5hezby479l] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.orientation-text h3[b-5hezby479l] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 4px 0;
}

.orientation-text p[b-5hezby479l] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

.orientation-actions[b-5hezby479l] {
    display: flex;
    gap: var(--space-xs);
    width: 100%;
    flex-wrap: wrap;
}

.orientation-actions button[b-5hezby479l] {
    flex: 1;
    min-width: 150px;
}

.btn-browse[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px var(--space-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: white;
    border: 1.5px solid #d1d5db;
    color: #1f2937;
}

.btn-browse:hover[b-5hezby479l] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-upload[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px var(--space-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--color-primary);
    border: none;
    color: var(--color-white);
}

.btn-upload:hover[b-5hezby479l] {
    background: var(--color-primary-strong);
}

/* Desktop: compact action buttons (do not stretch full width) */
@media (min-width: 960px) {
    .orientation-actions[b-5hezby479l] {
        width: auto;
        flex-wrap: nowrap;
    }
    .orientation-actions button[b-5hezby479l] {
        flex: 0 0 auto;
        min-width: auto;
    }
    .btn-browse[b-5hezby479l],
    .btn-upload[b-5hezby479l] {
        padding: 8px var(--space-xs);
        font-size: 13px;
        border-radius: 6px;
    }
}

/* Selected Creatives */
.selected-creatives-section[b-5hezby479l] {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: 10px;
}

.selected-creatives-header[b-5hezby479l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.selected-count[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-text);
}

.btn-change[b-5hezby479l] {
    font-size: 13px;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-change:hover[b-5hezby479l] {
    text-decoration: underline;
}

.selected-creatives-grid[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.creative-thumb[b-5hezby479l] {
    position: relative;
    width: 120px;
}

.creative-thumb img[b-5hezby479l] {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-subtle);
}

.creative-thumb-remove[b-5hezby479l] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-text-muted);
    color: var(--color-white);
    border: 2px solid var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-xs);
}

.creative-thumb-remove:hover[b-5hezby479l] {
    background: var(--color-text-secondary);
}

.creative-thumb-name[b-5hezby479l] {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-name-input[b-5hezby479l] {
    width: 100%;
}

.campaign-name-input .mud-input-root[b-5hezby479l] {
    font-size: 15px;
}

/* Desktop: Show full Next text, hide short text */
.next-full-text[b-5hezby479l] {
    display: inline;
}

.next-short-text[b-5hezby479l] {
    display: none;
}

/* Dialog title responsive classes */
.dialog-title-full[b-5hezby479l] {
    display: inline;
}

.dialog-title-short[b-5hezby479l] {
    display: none;
}

/* Desktop: Show preview button text */
.preview-btn-text[b-5hezby479l] {
    display: inline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .create-campaign-page[b-5hezby479l] {
        padding: var(--space-md) var(--space-xs);
        padding-top: 76px;
    }
    
    .page-header-title[b-5hezby479l] {
        font-size: var(--font-size-xl);
        gap: var(--space-xs);
    }
    
    /* Campaign Footer - Mobile Optimized */
    .campaign-footer[b-5hezby479l] {
        flex-direction: row;
        padding: 8px var(--space-md);
        gap: var(--space-xs);
        align-items: center;
        justify-content: space-between;
    }
    
    /* Hide cart statistics on mobile */
    .campaign-footer > div:first-child > span:not(:first-child)[b-5hezby479l] {
        display: none;
    }
    
    /* Keep cart button compact on mobile */
    .campaign-footer > div:first-child[b-5hezby479l] {
        flex: 0 0 auto;
    }
    
    /* Make action buttons prominent */
    .campaign-footer > div:last-child[b-5hezby479l] {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: var(--space-xs);
    }
    
    /* Make buttons compact on mobile */
    .campaign-footer > div:last-child a[b-5hezby479l],
    .campaign-footer > div:last-child button[b-5hezby479l] {
        min-height: 44px;
        font-size: var(--font-size-sm);
        padding: 10px var(--space-md);
    }
    
    /* Show short text on mobile */
    .campaign-footer .next-full-text[b-5hezby479l] {
        display: none;
    }
    
    .campaign-footer .next-short-text[b-5hezby479l] {
        display: inline;
    }
    
    /* Add padding to bottom of page content */
    .create-campaign-scroll[b-5hezby479l] {
        padding-bottom: 80px;
    }
    
    /* Dialog title responsive */
    .dialog-title-full[b-5hezby479l] {
        display: none;
    }
    
    .dialog-title-short[b-5hezby479l] {
        display: inline;
    }
    
    /* Dialog content mobile optimization */
    .mud-dialog-content[b-5hezby479l] {
        padding: var(--space-xs);
    }
    
    /* Hide Preview button text on mobile, keep icon */
    .preview-btn-text[b-5hezby479l] {
        display: none;
    }
    
    /* Make creative cards more compact */
    .mud-dialog-content > div > div > div[b-5hezby479l] {
        padding: var(--space-xs);
        gap: var(--space-xs);
    }
    
    /* Reduce thumbnail size on mobile */
    .creative-thumbnail-mobile[b-5hezby479l] {
        width: 48px;
        height: 48px;
    }
    
    /* Compact filter tabs */
    .filter-tabs-mobile[b-5hezby479l] {
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .filter-tabs-mobile button[b-5hezby479l] {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
    }
}

/* Make MudDatePicker helper text more visible */
[b-5hezby479l] .mud-input-helper-text {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

/* Ensure helper text stands out on schedule section */
#schedule-section[b-5hezby479l]  .mud-input-helper-text {
    color: #334155 !important;
}
/* /Components/Pages/Creatives.razor.rz.scp.css */
.creatives-page[b-i7e9i4i6v0] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    background: transparent; /* Inherit MainLayout gradient for consistency */
}

.page-header[b-i7e9i4i6v0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}

.page-header-title[b-i7e9i4i6v0] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-sm) 0;
}

.page-header-subtitle[b-i7e9i4i6v0] {
    color: var(--color-text-muted);
    margin: 0;
}

.btn-upload-primary[b-i7e9i4i6v0] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: var(--transition-fast);
}

.btn-upload-primary:hover[b-i7e9i4i6v0] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.filters-bar[b-i7e9i4i6v0] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.filter-select[b-i7e9i4i6v0] {
    padding: 10px 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    min-width: 140px;
    cursor: pointer;
}

.filter-select:focus[b-i7e9i4i6v0] {
    outline: none;
    border-color: var(--color-primary);
}

.stat-chip[b-i7e9i4i6v0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
}

.stat-chip:hover[b-i7e9i4i6v0] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.stat-chip-total[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.stat-chip-total.active[b-i7e9i4i6v0] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary-strong);
}

.stat-chip-images[b-i7e9i4i6v0] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.stat-chip-images.active[b-i7e9i4i6v0] {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.stat-chip-videos[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.stat-chip-videos.active[b-i7e9i4i6v0] {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}

/* Horizontal Card List - Provider Style */
.creatives-list[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.creative-card-horizontal[b-i7e9i4i6v0] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    transition: var(--transition-fast);
}

.creative-card-horizontal:hover[b-i7e9i4i6v0] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.creative-card-thumbnail[b-i7e9i4i6v0] {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--border-radius-md);
    background: var(--color-bg-active);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

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

.creative-thumb-placeholder[b-i7e9i4i6v0] {
    color: var(--color-text-light);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Play/View Overlay on Thumbnail */
.creative-play-overlay[b-i7e9i4i6v0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.creative-card-thumbnail:hover .creative-play-overlay[b-i7e9i4i6v0] {
    opacity: 1;
}

.creative-play-overlay i[b-i7e9i4i6v0] {
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.creative-card-content[b-i7e9i4i6v0] {
    flex: 1;
    min-width: 0;
}

.creative-header-row[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.creative-info[b-i7e9i4i6v0] {
    min-width: 0;
    flex: 1;
}

.creative-title-row[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.creative-title[b-i7e9i4i6v0] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creative-subtitle[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.creative-usage[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    color: var(--color-success);
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.creative-meta[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.creative-meta-item[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.creative-meta-divider[b-i7e9i4i6v0] {
    color: var(--color-border-strong);
}

.creative-card-end[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.creative-type-info[b-i7e9i4i6v0],
.creative-size-info[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.type-label[b-i7e9i4i6v0],
.size-label[b-i7e9i4i6v0] {
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.type-value[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.type-value.type-image[b-i7e9i4i6v0] {
    color: var(--color-success);
}

.type-value.type-video[b-i7e9i4i6v0] {
    color: var(--color-info);
}

.size-value[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.creative-actions[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.action-btn-icon[b-i7e9i4i6v0] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.action-btn-icon.preview[b-i7e9i4i6v0] {
    color: var(--color-primary);
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

.action-btn-icon.preview:hover[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.action-btn-icon.delete[b-i7e9i4i6v0] {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.action-btn-icon.delete:hover[b-i7e9i4i6v0] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon:disabled[b-i7e9i4i6v0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.type-badge[b-i7e9i4i6v0] {
    padding: var(--space-xs) 10px;
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.type-badge-image[b-i7e9i4i6v0] {
    background: #d1fae5;
    color: #065f46;
}

.type-badge-video[b-i7e9i4i6v0] {
    background: #e0e7ff;
    color: #3730a3;
}

.empty-state[b-i7e9i4i6v0] {
    text-align: center;
    padding: 80px 40px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
}

.empty-icon[b-i7e9i4i6v0] {
    width: 80px;
    height: 80px;
    background: var(--color-bg-active);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.empty-icon i[b-i7e9i4i6v0] {
    font-size: 36px;
    color: var(--color-text-light);
}

.usage-chip[b-i7e9i4i6v0] {
    background: var(--color-bg-active);
    color: var(--color-text-muted);
    padding: var(--space-xs) 10px;
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    display: inline-block;
    margin-top: var(--space-sm);
}

/* Hover effects */
.creative-card[b-i7e9i4i6v0] {
    transition: var(--transition-fast);
}

.creative-card:hover[b-i7e9i4i6v0] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Upload Dialog Styling */
[b-i7e9i4i6v0] .mud-dialog-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-i7e9i4i6v0] .mud-dialog {
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Dialog Title Gradient Header */
[b-i7e9i4i6v0] .mud-dialog-title {
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

/* Dialog Close Button - force proper positioning */
[b-i7e9i4i6v0] .mud-dialog .mud-button-close {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

[b-i7e9i4i6v0] .mud-dialog .mud-button-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

[b-i7e9i4i6v0] .mud-dialog .mud-button-close svg {
    color: white !important;
}

[b-i7e9i4i6v0] .mud-dialog-content {
    padding: var(--space-lg) !important;
}

/* Dialog Actions */
[b-i7e9i4i6v0] .dialog-actions-modern {
    padding: var(--space-md) var(--space-lg) !important;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-hover);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

/* File Upload Button Hover Effect */
[b-i7e9i4i6v0] .file-upload-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 
 * NOTE: MudDialog renders outside component scope, so ::deep styles 
 * for .mud-input-* won't work reliably. Let MudBlazor defaults handle it.
 */

/* Dialog Alert Styling */
[b-i7e9i4i6v0] .mud-dialog .mud-alert {
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
}

/* Progress Bar in Dialog */
[b-i7e9i4i6v0] .mud-dialog .mud-progress-linear {
    height: 6px;
    border-radius: var(--border-radius-full);
}

/* Dialog Buttons */
[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-root {
    border-radius: var(--border-radius-md);
    padding: 10px 24px;
    font-weight: var(--font-weight-semibold);
    text-transform: none;
}

[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-filled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[b-i7e9i4i6v0] .mud-dialog .mud-input-slot {
    padding: 18px 14px;
}

/* Upload Dialog Grid Layout */
.upload-dialog-grid[b-i7e9i4i6v0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 24px 0;
}

.upload-form-column[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.upload-preview-column[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 24px;
    min-height: 400px;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .creatives-page[b-i7e9i4i6v0] {
        padding: var(--space-md);
    }

    .page-header[b-i7e9i4i6v0] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .page-header-title[b-i7e9i4i6v0] {
        font-size: var(--font-size-2xl);
    }

    .btn-upload-primary[b-i7e9i4i6v0] {
        width: 100%;
        justify-content: center;
        padding: var(--space-md);
    }

    .filters-bar[b-i7e9i4i6v0] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stat-chip[b-i7e9i4i6v0] {
        font-size: 0.75rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    /* Keep horizontal layout but more compact on tablet */
    .creative-card-horizontal[b-i7e9i4i6v0] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .creative-card-thumbnail[b-i7e9i4i6v0] {
        width: 60px;
        height: 45px;
    }

    .creative-title[b-i7e9i4i6v0] {
        font-size: 0.9rem;
    }

    .creative-header-row[b-i7e9i4i6v0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .creative-meta[b-i7e9i4i6v0] {
        display: none; /* Hide meta on mobile to save space */
    }

    .creative-card-end[b-i7e9i4i6v0] {
        margin-left: auto;
    }

    .action-btn-icon[b-i7e9i4i6v0] {
        width: 36px;
        height: 36px;
    }

    /* Upload Dialog Mobile Styles */
    [b-i7e9i4i6v0] .mud-dialog {
        margin: var(--space-sm);
        max-height: calc(100vh - 32px);
    }

    [b-i7e9i4i6v0] .mud-dialog-content {
        padding: var(--space-md) !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .upload-dialog-grid[b-i7e9i4i6v0] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0;
    }

    .upload-preview-column[b-i7e9i4i6v0] {
        min-height: 280px;
        padding: var(--space-md);
        order: -1; /* Show preview first on mobile */
    }

    [b-i7e9i4i6v0] .dialog-actions-modern {
        flex-direction: column-reverse;
        gap: var(--space-sm);
        padding: var(--space-md) !important;
    }

    [b-i7e9i4i6v0] .dialog-actions-modern .mud-button-root {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-header-title[b-i7e9i4i6v0] {
        font-size: var(--font-size-xl);
    }

    .page-header-subtitle[b-i7e9i4i6v0] {
        font-size: var(--font-size-sm);
    }

    .filters-bar[b-i7e9i4i6v0] {
        flex-direction: row;
        justify-content: space-between;
    }

    .stat-chip[b-i7e9i4i6v0] {
        flex: 1;
        justify-content: center;
        padding: 8px;
        font-size: 0.7rem;
    }

    .stat-chip i[b-i7e9i4i6v0] {
        display: none; /* Hide icons on very small screens */
    }

    /* Compact card for small phones */
    .creative-card-horizontal[b-i7e9i4i6v0] {
        padding: var(--space-sm);
    }

    .creative-card-thumbnail[b-i7e9i4i6v0] {
        width: 50px;
        height: 38px;
        border-radius: 4px;
    }

    .creative-title[b-i7e9i4i6v0] {
        font-size: 0.85rem;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .type-badge[b-i7e9i4i6v0] {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .creative-subtitle[b-i7e9i4i6v0] {
        font-size: 0.7rem;
    }

    .creative-actions[b-i7e9i4i6v0] {
        gap: 4px;
    }

    .action-btn-icon[b-i7e9i4i6v0] {
        width: 32px;
        height: 32px;
        padding: 4px;
    }

    .upload-preview-column[b-i7e9i4i6v0] {
        min-height: 180px;
    }

    [b-i7e9i4i6v0] .mud-dialog-title h5 {
        font-size: 1.125rem !important;
    }
}

/* /Components/Pages/DeviceManagement.razor.rz.scp.css */
/* ============================================
   DEVICE MANAGEMENT PAGE - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

.device-page[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: transparent;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.device-scroll[b-q9j3rf2iqt] {
    flex: 1;
    overflow-y: auto;
}

.page-header[b-q9j3rf2iqt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--section-gap);
    gap: var(--space-md);
}

.page-header-title[b-q9j3rf2iqt] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.page-header-subtitle[b-q9j3rf2iqt] {
    margin-top: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.provider-selector-card[b-q9j3rf2iqt] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--section-gap);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-slow);
}

.provider-selector-card:hover[b-q9j3rf2iqt] {
    box-shadow: var(--shadow-md);
}

/* 
 * REMOVED: MudSelect/MudInput overrides that were causing excessive height on dropdowns.
 * MudBlazor handles input and select sizing correctly by default.
 * See UI_Guidelines.md for best practices.
 */

.devices-card[b-q9j3rf2iqt] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.devices-table[b-q9j3rf2iqt] {
    width: 100%;
}

.empty-state[b-q9j3rf2iqt] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-state i[b-q9j3rf2iqt] {
    font-size: var(--font-size-6xl);
    color: var(--color-border-strong);
    margin-bottom: var(--space-md);
}

/* Utility classes to replace inline styles */
.address-dash[b-q9j3rf2iqt] {
    color: var(--color-border-strong);
}

.pagination-info[b-q9j3rf2iqt] {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--color-border-subtle);
}

.icon-error[b-q9j3rf2iqt] {
    color: var(--color-error);
}

/* Button styles matching Campaigns */
.btn-primary[b-q9j3rf2iqt] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    padding: var(--space-sm) 18px;
    font-weight: var(--font-weight-medium);
    border: none;
    box-shadow: var(--shadow-button);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    text-transform: none;
}

.btn-primary:hover[b-q9j3rf2iqt] {
    background: var(--color-primary-strong);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Toolbar styling */
.devices-card .toolbar[b-q9j3rf2iqt] {
    padding: var(--card-padding);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-bg-hover);
}

/* Action button icons */
.action-btn-icon[b-q9j3rf2iqt] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-slow);
}

.action-btn-icon:hover[b-q9j3rf2iqt] {
    background: var(--color-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Card Layout Styles */
.devices-list[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--card-padding);
}

.device-card-horizontal[b-q9j3rf2iqt] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
}

.device-card-horizontal:hover[b-q9j3rf2iqt] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}

.device-card-content[b-q9j3rf2iqt] {
    flex: 1;
    min-width: 0;
}

.device-header-row[b-q9j3rf2iqt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

.device-info-main[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.device-info-secondary[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.device-field[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-q9j3rf2iqt] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.field-value[b-q9j3rf2iqt] {
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

.field-value.provider-id[b-q9j3rf2iqt] {
    font-family: var(--font-family-mono);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.field-value.device-name[b-q9j3rf2iqt] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

.field-value.address[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
}

.field-value.address i[b-q9j3rf2iqt] {
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.device-card-actions[b-q9j3rf2iqt] {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.action-btn-edit[b-q9j3rf2iqt] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-slow);
}

.action-btn-edit:hover[b-q9j3rf2iqt] {
    background: var(--color-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.status-badge[b-q9j3rf2iqt] {
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xxxs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-block;
}

.status-badge.status-active[b-q9j3rf2iqt] {
    background: var(--color-active);
    color: var(--color-active-text);
}

.status-badge.status-inactive[b-q9j3rf2iqt] {
    background: var(--color-inactive);
    color: var(--color-inactive-text);
}

.results-count[b-q9j3rf2iqt] {
    padding: 0 var(--card-padding) 12px;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.results-count strong[b-q9j3rf2iqt] {
    color: var(--color-text-main);
    font-weight: var(--font-weight-semibold);
}

/* Responsive */
@media (max-width: 1200px) {
    .device-header-row[b-q9j3rf2iqt] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .action-btn-edit[b-q9j3rf2iqt] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Devices.razor.rz.scp.css */
/* Custom striped table styles for Devices page */
[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: #E3F2FD;
}

[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: #FFFFFF;
}

/* Override hover color to be slightly darker blue */
[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:hover {
    background-color: #BBDEFB;
}
/* /Components/Pages/Devices2.razor.rz.scp.css */
/* Custom striped table styles for Devices page - Reduced intensity */
[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--color-bg-hover);
    /* Lighter blue for subtlety */
}

[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--color-bg-surface);
}

/* Override hover color to be slightly darker blue */
[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:hover {
    background-color: var(--color-primary-soft);
    /* Softer hover */
}

/* Fix multi-select dropdown spacing - Using the same fix from modern-theme.css */
[b-3l57itfxd0] .mud-popover.mud-popover-open .mud-list {
    background: var(--color-bg-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

/* Compact list items for multi-select */
[b-3l57itfxd0] .mud-list-item {
    padding: 8px 16px;
    min-height: 40px;
}

/* Checkbox alignment */
[b-3l57itfxd0] .mud-list-item .mud-checkbox {
    margin-right: 12px;
}
/* /Components/Pages/Devices3.razor.rz.scp.css */
/* Main Page Container - Desktop spacing aligned with other pages */
.devices-page-container[b-g07r850tq5] {
    max-width: 1600px; /* Wider to use more screen space for device cards */
    margin: 0 auto;
    padding: var(--space-lg); /* Consistent internal padding */
    padding-bottom: 80px; /* Space for fixed footer */
    background: transparent; /* Inherit MainLayout gradient for consistency */
}

/* Override MudMainContent default padding on mobile */
@media (max-width: 768px) {
    /* Keep global MudMainContent top padding intact for consistency */
}

/* Page Header */
.page-header[b-g07r850tq5] {
    margin-bottom: var(--space-md);
}

.page-header-title[b-g07r850tq5] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

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

/* Search Card */
.search-card[b-g07r850tq5] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.search-controls[b-g07r850tq5] {
    display: grid;
    grid-template-columns: 0.5fr 350px 140px 120px auto;
    gap: var(--space-xs);
    align-items: end;
}

/* Three Column Grid */
.content-grid[b-g07r850tq5] {
    display: grid;
    gap: var(--space-md);
    height: calc(100vh - 240px);
    margin-bottom: 80px;
    transition: grid-template-columns var(--transition-base);
    align-items: stretch;
}

.content-grid.show-all[b-g07r850tq5] {
    grid-template-columns: 1fr 360px;
}

.content-grid.hide-filters[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

.content-grid.hide-map[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

.content-grid.hide-both[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

/* Panel Cards */
.panel-card[b-g07r850tq5] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

/* Tabbed Panel */
.panel-card.tabbed-panel[b-g07r850tq5] {
    overflow: hidden;
}

    .panel-card.tabbed-panel .mud-tabs[b-g07r850tq5] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .panel-card.tabbed-panel .mud-tabs-panels[b-g07r850tq5] {
        flex: 1;
        overflow: hidden;
    }

    .panel-card.tabbed-panel .mud-tab-panel[b-g07r850tq5] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

.panel-card-header[b-g07r850tq5] {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-bg-hover) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-card-title[b-g07r850tq5] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.panel-card-body[b-g07r850tq5] {
    padding: var(--space-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: calc(var(--space-md) + 20px); /* Extra padding at bottom for last filter item */
}

/* Scrollable Devices Panel */
.devices-panel .panel-card-body[b-g07r850tq5] {
    overflow-y: auto;
}

.devices-panel .devices-grid[b-g07r850tq5] {
    padding-bottom: var(--space-md);
}

/* Filter Section */
.filter-section[b-g07r850tq5] {
    margin-bottom: var(--space-md);
}

.filter-section-title[b-g07r850tq5] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Table Row Hover Effects */
.mud-table-row:hover[b-g07r850tq5] {
    background-color: var(--color-bg-hover);
    transition: background-color var(--transition-fast);
}

/* Remove vertical borders from table cells */
.mud-table td[b-g07r850tq5],
.mud-table th[b-g07r850tq5] {
    border-left: none !important;
    border-right: none !important;
}

/* Device Cards - Matching Devices2 */
.devices-grid[b-g07r850tq5] {
    display: grid;
    gap: var(--space-xs);
    transition: grid-template-columns var(--transition-base);
}

.devices-grid.cols-2[b-g07r850tq5] {
    grid-template-columns: repeat(2, 1fr);
}

/* Desktop: Show full Next text, hide short text */
.next-full-text[b-g07r850tq5] {
    display: inline;
}

.next-short-text[b-g07r850tq5] {
    display: none;
}

.devices-grid.cols-3[b-g07r850tq5] {
    grid-template-columns: repeat(3, 1fr);
}

.devices-grid.cols-4[b-g07r850tq5] {
    grid-template-columns: repeat(4, 1fr);
}

.device-card[b-g07r850tq5] {
    transition: all var(--transition-base);
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
    max-height: 180px;
    min-width: 0; /* Allow cards to shrink below default min-width */
}

/* Device card grid for card view */
.device-card-grid[b-g07r850tq5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 12px;
    padding: 8px;
}

@media (max-width: 1400px) {
    .device-card-grid[b-g07r850tq5] {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

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

.device-card:hover[b-g07r850tq5] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-info);
    background: linear-gradient(to bottom, var(--color-bg-hover) 0%, var(--color-white) 100%);
}

.device-card-selected[b-g07r850tq5] {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
    background: linear-gradient(to bottom, var(--color-info-bg) 0%, var(--color-white) 100%);
}

.device-card-selected:hover[b-g07r850tq5] {
    border: 2px solid #93c5fd;
    box-shadow: 0 6px 16px rgba(147, 197, 253, 0.5);
}

/* Map Panel */
.map-container[b-g07r850tq5] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .map-container > div[b-g07r850tq5] {
        height: 100%;
    }

.image-viewer-backdrop[b-g07r850tq5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 24px;
}

.image-viewer-content[b-g07r850tq5] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.image-viewer-content img[b-g07r850tq5] {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
    object-fit: contain;
    background: #0f172a;
}

.image-viewer-caption[b-g07r850tq5] {
    color: #e2e8f0;
    font-size: 14px;
    text-align: center;
    max-width: 80vw;
}

.image-viewer-close[b-g07r850tq5] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: rgba(15, 23, 42, 0.6) !important;
    color: #f8fafc !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 240px 1fr 320px;
    }
}

@media (max-width: 968px) {
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .search-controls[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .filter-panel[b-g07r850tq5] {
        max-height: 400px;
    }
    
    .map-panel[b-g07r850tq5] {
        position: relative;
        top: 0;
        height: 400px;
    }
    
    .devices-grid.cols-2[b-g07r850tq5],
    .devices-grid.cols-3[b-g07r850tq5],
    .devices-grid.cols-4[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .device-card[b-g07r850tq5] {
        max-height: 220px;
    }
}

/* Address Suggestions */
.address-suggestion:hover[b-g07r850tq5] {
    background: var(--color-bg-hover);
}

/* Empty State */
.empty-state[b-g07r850tq5] {
    text-align: center;
    padding: 60px var(--space-lg);
    color: var(--color-text-muted);
}

.empty-state-icon[b-g07r850tq5] {
    font-size: 64px;
    color: var(--color-border-strong);
    margin-bottom: var(--space-md);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Mobile/Desktop visibility controls with proper specificity */
.panel-card-header .hide-on-mobile[b-g07r850tq5] {
    display: inline-flex;
}

.panel-card-header .show-on-mobile[b-g07r850tq5] {
    display: none;
}

@media (max-width: 960px) {
    .panel-card-header .hide-on-mobile[b-g07r850tq5] {
        display: none;
    }
    
    .panel-card-header .show-on-mobile[b-g07r850tq5] {
        display: inline-flex;
    }
    
    .devices-page-container[b-g07r850tq5] {
        padding: 8px var(--space-xs) var(--space-xs); /* Minimal top padding on mobile */
    }
    
    /* Page Header */
    .page-header[b-g07r850tq5] {
        margin: 0; /* Remove all margins */
    }
    
    .page-header-title[b-g07r850tq5] {
        font-size: var(--font-size-xl);
        gap: var(--space-xs);
        line-height: 1.2;
        margin: 0 0 4px 0; /* Explicit margins - no top margin */
    }
    
    .page-header-title .mud-icon-root[b-g07r850tq5] {
        font-size: 24px;
    }
    
    .page-header-subtitle[b-g07r850tq5] {
        font-size: 13px;
        margin-bottom: var(--space-xs); /* Space before search card */
    }
    
    /* Search Card - Stack vertically */
    .search-card[b-g07r850tq5] {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .search-controls[b-g07r850tq5] {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .search-controls > *[b-g07r850tq5] {
        width: 100%;
        min-width: unset;
    }
    
    /* Content Grid - Single column */
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        height: auto;
        min-height: calc(100vh - 400px);
        margin-bottom: 100px;
    }
    
    /* Panel Cards */
    .panel-card[b-g07r850tq5] {
        height: auto;
        min-height: 400px;
    }
    
    .panel-card-header[b-g07r850tq5] {
        padding: var(--space-xs) var(--space-md);
    }
    
    .panel-card-title[b-g07r850tq5] {
        font-size: var(--font-size-lg);
    }
    
    /* Device Cards - Single column */
    .device-card-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        padding: var(--space-xs);
    }
    
    /* Tabbed Panel - Hide on mobile, use drawers instead */
    .tabs-panel[b-g07r850tq5] {
        display: none;
    }
    
    /* Footer Cart - Mobile Optimized */
    .footer-cart[b-g07r850tq5] {
        flex-direction: row;
        padding: 8px var(--space-md);
        gap: var(--space-xs);
        align-items: center;
        justify-content: space-between;
    }
    
    /* Hide cart statistics on mobile */
    .footer-cart > div:first-child > span:not(:first-child)[b-g07r850tq5],
    .footer-cart > div:first-child > span.MudIcon-root ~ *:not(button)[b-g07r850tq5] {
        display: none;
    }
    
    /* Keep cart button compact on mobile */
    .footer-cart > div:first-child[b-g07r850tq5] {
        flex: 0 0 auto;
    }
    
    /* Hide Add All button on mobile, keep only Next button */
    .footer-cart > div:last-child > button:first-child[b-g07r850tq5] {
        display: none;
    }
    
    /* Make Next button prominent */
    .footer-cart > div:last-child[b-g07r850tq5] {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
    
    .footer-cart > div:last-child a[b-g07r850tq5],
    .footer-cart > div:last-child button:not(:first-child)[b-g07r850tq5] {
        min-height: 44px;
        font-size: var(--font-size-sm);
        padding: 10px var(--space-lg);
    }
    
    /* Show short text on mobile */
    .footer-cart .next-full-text[b-g07r850tq5] {
        display: none;
    }
    
    .footer-cart .next-short-text[b-g07r850tq5] {
        display: inline;
    }
    
    /* Touch-friendly button sizes */
    .mud-button[b-g07r850tq5],
    .mud-icon-button[b-g07r850tq5] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Table View on Mobile */
    .mud-table[b-g07r850tq5] {
        font-size: var(--font-size-xs);
    }
    
    .mud-table th[b-g07r850tq5],
    .mud-table td[b-g07r850tq5] {
        padding: 8px 6px;
    }
    
    /* Add padding to bottom of page content so footer doesn't cover content */
    .devices-page-container[b-g07r850tq5] {
        padding-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .devices-page-container[b-g07r850tq5] {
        padding: var(--space-xs);
    }
    
    .page-header-title[b-g07r850tq5] {
        font-size: var(--font-size-xl);
        gap: var(--space-xs);
    }
    
    .search-card[b-g07r850tq5] {
        padding: var(--space-xs);
    }
    
    .search-controls[b-g07r850tq5] {
        gap: 10px;
    }
    
    .device-card-grid[b-g07r850tq5] {
        gap: 10px;
        padding: 10px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-xgrejnqw2s] {
    background: #F5F7FA; /* neutral light gray */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container[b-xgrejnqw2s] {
    display: flex;
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
}

/* Left Panel - Promotional Section */
.hero-promotional[b-xgrejnqw2s] {
    flex: 0 0 45%;
    max-width: 45%;
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-primary-soft) 50%, var(--color-info-bg) 100%),
                radial-gradient(900px 500px at 80% 10%, rgba(25, 118, 210, 0.25), rgba(25,118,210,0) 60%),
                radial-gradient(700px 400px at 0% 90%, rgba(123, 31, 162, 0.18), rgba(123,31,162,0) 55%);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient/art overlay */
.hero-art[b-xgrejnqw2s] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(900px 600px at 85% 15%, rgba(21,101,192,0.12), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 6px);
}

.hero-promotional[b-xgrejnqw2s]::before,
.hero-promotional[b-xgrejnqw2s]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.7;
    pointer-events: none;
}

.hero-promotional[b-xgrejnqw2s]::before {
    width: 38vw;
    height: 38vw;
    left: -12vw;
    top: -10vw;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%),
                radial-gradient(circle at 70% 20%, rgba(21,101,192,0.25), rgba(21,101,192,0) 60%);
}

.hero-promotional[b-xgrejnqw2s]::after {
    width: 28vw;
    height: 28vw;
    right: -10vw;
    bottom: -10vw;
    background: radial-gradient(circle at 30% 30%, rgba(123,31,162,0.25), rgba(123,31,162,0) 60%),
                radial-gradient(circle at 70% 20%, rgba(0,172,193,0.18), rgba(0,172,193,0) 60%);
}

.promo-content[b-xgrejnqw2s] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: 1rem;
}

.promo-header[b-xgrejnqw2s] {
    margin-bottom: 2.5rem;
}

/* Scrolling ad previews */
.promo-carousel[b-xgrejnqw2s] {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--border-radius-xl);
    padding: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(26,115,232,0.12); /* subtle shadow */
    touch-action: pan-x;
}

.carousel-stage[b-xgrejnqw2s] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.promo-carousel:hover .carousel-track[b-xgrejnqw2s] {
    animation-play-state: paused;
}

.carousel-item[b-xgrejnqw2s] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1);
    transition: opacity 600ms ease, transform 600ms ease;
}

.carousel-item img[b-xgrejnqw2s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-item.active[b-xgrejnqw2s] {
    opacity: 1;
    transform: scale(1.02);
}

.carousel-overlay[b-xgrejnqw2s] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    display: flex;
    pointer-events: none;
}

.overlay-content[b-xgrejnqw2s] {
    background: rgba(0,0,0,0.35);
    color: #fff;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    animation: overlayDrift-b-xgrejnqw2s 12s linear infinite;
}

.overlay-kicker[b-xgrejnqw2s] { font-size: 0.85rem; opacity: 0.9; }
.overlay-title[b-xgrejnqw2s] { font-size: 1rem; font-weight: 600; }

@keyframes overlayDrift-b-xgrejnqw2s {
    0% { transform: translateX(0%); }
    50% { transform: translateX(8%); }
    100% { transform: translateX(0%); }
}

/* Metrics Cards */
.metrics-cards[b-xgrejnqw2s] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.metric-card-horizontal[b-xgrejnqw2s] {
    background: rgba(255,255,255,0.85);
    border-radius: var(--border-radius-xl);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-subtle);
    transition: var(--transition-fast);
}

.metric-card-horizontal:hover[b-xgrejnqw2s] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.metric-icon-box[b-xgrejnqw2s] {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-text[b-xgrejnqw2s] {
    flex: 1;
}

/* Trust Badges */
.trust-section[b-xgrejnqw2s] {
    margin-top: auto;
}

.trust-badges[b-xgrejnqw2s] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.trust-badge[b-xgrejnqw2s] {
    background: rgba(255,255,255,0.9);
    border-radius: var(--border-radius-full);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
}

/* Right Panel - Login Form */
.login-form-section[b-xgrejnqw2s] {
    flex: 0 0 55%;
    max-width: 55%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 3rem 5rem;
    box-shadow: var(--shadow-lg);
}

.login-form-content[b-xgrejnqw2s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 450px;
    margin: 0 auto;
    width: 100%;
}

.brand-logo[b-xgrejnqw2s] {
    text-align: center;
}

.form-fields[b-xgrejnqw2s] {
    width: 100%;
}

.form-group[b-xgrejnqw2s] {
    margin-bottom: 1.25rem; /* 20px rhythm */
}

/* Login input styling - subtle borders like production */
[b-xgrejnqw2s] .login-input .mud-input-outlined {
    background: #F6F7FB;
    border-radius: 10px;
}

[b-xgrejnqw2s] .login-input .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-subtle);
    border-width: 1px;
    border-radius: 10px;
}

[b-xgrejnqw2s] .login-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-border-hover);
}

[b-xgrejnqw2s] .login-input .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #5A4FF3; /* brand primary */
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(90,79,243,0.18);
}

[b-xgrejnqw2s] .login-input .mud-input-outlined .mud-input-slot {
    background: transparent;
    padding: 14px 16px;
}

[b-xgrejnqw2s] .login-input input {
    color: var(--color-text-main);
    caret-color: #5A4FF3;
}

[b-xgrejnqw2s] .login-input input::placeholder {
    color: var(--color-text-light);
    opacity: 1;
}

.divider-container[b-xgrejnqw2s] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.divider-line[b-xgrejnqw2s] {
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
}

.signup-cta[b-xgrejnqw2s] {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.login-footer[b-xgrejnqw2s] {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

/* Buttons brand styling and hover */
[b-xgrejnqw2s] .mud-button-filled-primary {
    background-color: #5A4FF3 !important;
}
[b-xgrejnqw2s] .mud-button-filled-primary:hover {
    filter: brightness(1.08);
}
[b-xgrejnqw2s] .mud-button-outlined-default:hover {
    border-color: #1A73E8;
    color: #1A73E8;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .metrics-grid[b-xgrejnqw2s] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-xgrejnqw2s] {
        padding: 1.25rem;
    }

    .carousel-stage[b-xgrejnqw2s] { aspect-ratio: 16 / 9; }
}

@media (max-width: 960px) {
    .login-container[b-xgrejnqw2s] {
        flex-direction: column;
    }

    .hero-promotional[b-xgrejnqw2s] {
        display: none;
    }

    .login-form-section[b-xgrejnqw2s] {
        flex: 1;
        max-width: 100%;
        padding: 2.5rem 2rem;
    }

    .promo-header[b-xgrejnqw2s] {
        margin-bottom: 2rem;
    }
}

@media (max-width: 600px) {
    .hero-promotional[b-xgrejnqw2s] {
        display: none;
    }

    .login-form-section[b-xgrejnqw2s] {
        padding: 2rem 1.5rem;
    }
}
/* /Components/Pages/Payment.razor.rz.scp.css */
/* Payment Page Styles */
.payment-page[b-7qnszetm3h] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
    padding-bottom: 120px; /* Space for fixed footer */
}

.page-header[b-7qnszetm3h] {
    margin-bottom: var(--space-xl);
}

.page-title[b-7qnszetm3h] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.page-subtitle[b-7qnszetm3h] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.payment-layout[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-xl);
    align-items: start;
}

.payment-content[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.section-card[b-7qnszetm3h] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.section-title[b-7qnszetm3h] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-title i[b-7qnszetm3h] {
    color: var(--color-primary);
}

.creative-grid[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md);
}

.creative-item[b-7qnszetm3h] {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-bg-secondary);
    aspect-ratio: 16/9;
}

.creative-thumbnail[b-7qnszetm3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creative-name[b-7qnszetm3h] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Keep readable overlay; rgba acceptable for gradient */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-bg-surface);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.device-table[b-7qnszetm3h] {
    width: 100%;
    border-collapse: collapse;
}

.device-table thead[b-7qnszetm3h] {
    background: var(--color-bg-secondary);
}

.device-table th[b-7qnszetm3h],
.device-table td[b-7qnszetm3h] {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.device-table th[b-7qnszetm3h] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.device-table td[b-7qnszetm3h] {
    color: var(--color-text-primary);
}

.device-table tr:last-child td[b-7qnszetm3h] {
    border-bottom: none;
}

.device-name[b-7qnszetm3h] {
    font-weight: var(--font-weight-medium);
}

.device-details[b-7qnszetm3h] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.campaign-details-grid[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.detail-item[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.detail-label[b-7qnszetm3h] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.detail-value[b-7qnszetm3h] {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.payment-methods[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.payment-option[b-7qnszetm3h] {
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.payment-option:hover[b-7qnszetm3h] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.payment-option.selected[b-7qnszetm3h] {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.payment-option-header[b-7qnszetm3h] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.payment-radio[b-7qnszetm3h] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    position: relative;
}

.payment-option.selected .payment-radio[b-7qnszetm3h] {
    border-color: var(--color-primary);
}

.payment-option.selected .payment-radio[b-7qnszetm3h]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.payment-icon[b-7qnszetm3h] {
    width: 48px;
    height: 48px;
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
}

.payment-info[b-7qnszetm3h] {
    flex: 1;
}

.payment-name[b-7qnszetm3h] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.payment-description[b-7qnszetm3h] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.price-summary[b-7qnszetm3h] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: var(--space-lg);
}

.price-summary-title[b-7qnszetm3h] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
}

.price-rows[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.price-row[b-7qnszetm3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-label[b-7qnszetm3h] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.price-value[b-7qnszetm3h] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.price-divider[b-7qnszetm3h] {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-md) 0;
}

.price-total[b-7qnszetm3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    border-top: 2px solid var(--color-border);
}

.price-total-label[b-7qnszetm3h] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.price-total-value[b-7qnszetm3h] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.checkout-button[b-7qnszetm3h] {
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-bg-surface);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
    margin-top: var(--space-lg);
}

.checkout-button:hover[b-7qnszetm3h] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.checkout-button:disabled[b-7qnszetm3h] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.secure-notice[b-7qnszetm3h] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.secure-notice i[b-7qnszetm3h] {
    color: var(--color-success);
}

.footer-actions[b-7qnszetm3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.footer-full-text[b-7qnszetm3h] {
    display: inline;
}

.footer-short-text[b-7qnszetm3h] {
    display: none;
}

@media (max-width: 1024px) {
    .payment-layout[b-7qnszetm3h] {
        grid-template-columns: 1fr;
    }

    .price-summary[b-7qnszetm3h] {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .payment-page[b-7qnszetm3h] {
        padding: var(--space-md);
    }

    .page-title[b-7qnszetm3h] {
        font-size: var(--font-size-2xl);
    }

    .section-card[b-7qnszetm3h] {
        padding: var(--space-md);
    }

    .creative-grid[b-7qnszetm3h] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .campaign-details-grid[b-7qnszetm3h] {
        grid-template-columns: 1fr;
    }

    .device-table[b-7qnszetm3h] {
        font-size: var(--font-size-sm);
    }

    .device-table th[b-7qnszetm3h],
    .device-table td[b-7qnszetm3h] {
        padding: var(--space-sm);
    }

    .footer-full-text[b-7qnszetm3h] {
        display: none;
    }

    .footer-short-text[b-7qnszetm3h] {
        display: inline;
    }

    .footer-actions[b-7qnszetm3h] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .footer-actions button[b-7qnszetm3h] {
        width: 100%;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-page[b-9cr67fqkct] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.page-header[b-9cr67fqkct] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}

.page-header-title[b-9cr67fqkct] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-sm) 0;
}

.page-header-subtitle[b-9cr67fqkct] {
    color: var(--color-text-muted);
    margin: 0;
}
/* /Components/Pages/PublisherProfile.razor.rz.scp.css */
/* AdDesk MarketPlace Publisher Profile Styles */

/* Provider Card Styles moved from AdminProviders.razor.css */
.provider-card-horizontal[b-cacu7qfg7a] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transition: var(--transition-fast);
}

.provider-card-horizontal:hover[b-cacu7qfg7a] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.provider-card-icon[b-cacu7qfg7a] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-bg-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-card-content[b-cacu7qfg7a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.provider-header-row[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.provider-info[b-cacu7qfg7a] {
    min-width: 0;
    flex: 1;
}

.provider-title[b-cacu7qfg7a] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-subtitle[b-cacu7qfg7a] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-meta[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.provider-meta-item[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.provider-meta-active[b-cacu7qfg7a] {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.meta-icon[b-cacu7qfg7a] {
    font-size: 16px;
    opacity: 0.7;
}

.status-badge[b-cacu7qfg7a] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-left: 8px;
}

.status-badge--enabled[b-cacu7qfg7a] {
    background-color: var(--color-success-subtle);
    color: var(--color-success);
    border: 1px solid var(--color-success-muted);
}

.status-badge--disabled[b-cacu7qfg7a] {
    background-color: var(--color-error-subtle);
    color: var(--color-error);
    border: 1px solid var(--color-error-muted);
}

.provider-card--disabled[b-cacu7qfg7a] {
    opacity: 0.75;
    background-color: var(--color-bg-base);
}

.provider-disabled-reason[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-error);
    margin: 4px 0 0;
}

/* Page Layout Styles (matching DeviceManagement) */
.device-page[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: transparent;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.device-scroll[b-cacu7qfg7a] {
    flex: 1;
    overflow-y: auto;
}

.page-header[b-cacu7qfg7a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--section-gap);
    gap: var(--space-md);
}

.page-header-title[b-cacu7qfg7a] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.page-header-subtitle[b-cacu7qfg7a] {
    margin-top: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.empty-state[b-cacu7qfg7a] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-state i[b-cacu7qfg7a] {
    font-size: var(--font-size-6xl);
    color: var(--color-border-strong);
    margin-bottom: var(--space-md);
}
/* /Components/Pages/Register.razor.rz.scp.css */
.register-page[b-wrhlq8er0o] {
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-primary-soft) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.register-container[b-wrhlq8er0o] {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered Form Section */
.register-form-section[b-wrhlq8er0o] {
    width: 100%;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-header-actions[b-wrhlq8er0o] {
    padding: 2rem 2.5rem 0;
    text-align: right;
    background: var(--color-bg-surface);
}

.register-form[b-wrhlq8er0o] {
    padding: 1rem 2.5rem 2.5rem;
    width: 100%;
}

.form-group[b-wrhlq8er0o] {
    margin-bottom: 1.5rem;
}

.form-label[b-wrhlq8er0o] {
    display: block;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

/* Register form MudBlazor input styling - match production look */
[b-wrhlq8er0o] .register-form .mud-input-outlined {
    background: var(--color-bg-surface);
    border-radius: 10px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-subtle);
    border-width: 1px;
    border-radius: 10px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-border-hover);
}

[b-wrhlq8er0o] .register-form .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--color-primary);
    border-width: 2px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-slot {
    background: transparent;
    padding: 12px 16px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-label,
[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-label.mud-shrink {
    background: var(--color-bg-surface);
    padding: 0 4px;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .register-page[b-wrhlq8er0o] {
        padding: 1rem;
    }

    .register-container[b-wrhlq8er0o] {
        max-width: 100%;
    }

    .form-header-actions[b-wrhlq8er0o] {
        padding: 1.5rem 1.5rem 0;
    }
    
    .register-form[b-wrhlq8er0o] {
        padding: 1rem 1.5rem 2rem;
    }
}

@media (max-width: 480px) {
    .register-page[b-wrhlq8er0o] {
        padding: 0.5rem;
    }

    .form-header-actions[b-wrhlq8er0o] {
        padding: 1.25rem 1.25rem 0;
    }

    .register-form[b-wrhlq8er0o] {
        padding: 0.75rem 1.25rem 1.5rem;
    }
}
/* /Components/Pages/Revenue.razor.rz.scp.css */
/* AdDesk MarketPlace Publisher Revenue Page Styles */

/* Page Layout Styles (matching DeviceManagement and PublisherProfile) */
.device-page[b-m3zc8qa54g] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: transparent;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.device-scroll[b-m3zc8qa54g] {
    flex: 1;
    overflow-y: auto;
}

.page-header[b-m3zc8qa54g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--section-gap);
    gap: var(--space-md);
}

.page-header-title[b-m3zc8qa54g] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.page-header-subtitle[b-m3zc8qa54g] {
    margin-top: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}
/* /Components/Shared/AddDeviceDialog.razor.rz.scp.css */
/* ============================================
   ADD DEVICE DIALOG - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

/* Dialog content spacing */
[b-fx6lzokpvf] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Grid item spacing */
[b-fx6lzokpvf] .mud-grid-item {
    padding: var(--space-sm);
}

/* Form field labels */
[b-fx6lzokpvf] .mud-input-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

/* Section overline labels */
[b-fx6lzokpvf] .mud-typography-overline {
    letter-spacing: 1.2px;
    font-weight: var(--font-weight-semibold);
}

/* Divider spacing */
[b-fx6lzokpvf] .mud-divider.my-2 {
    margin: var(--space-md) 0;
}

/* Dialog actions spacing */
[b-fx6lzokpvf] .mud-dialog-actions {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
}

/* Switch label */
[b-fx6lzokpvf] .mud-switch-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Dialog title */
[b-fx6lzokpvf] .mud-dialog-title h6 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

/* Button styling within dialog */
[b-fx6lzokpvf] .mud-button-text {
    color: var(--color-text-muted);
}

[b-fx6lzokpvf] .mud-button-text:hover {
    background-color: var(--color-bg-hover);
}

[b-fx6lzokpvf] .mud-button-filled-primary {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-button);
}

[b-fx6lzokpvf] .mud-button-filled-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Summary list in confirmation */
.summary-list[b-fx6lzokpvf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-item[b-fx6lzokpvf] {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.summary-item:last-child[b-fx6lzokpvf] {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-fx6lzokpvf] .mud-dialog-content {
        padding: var(--space-md);
    }
    
    [b-fx6lzokpvf] .mud-dialog-actions {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
    }
    
    [b-fx6lzokpvf] .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}
/* /Components/Shared/CreativePreviewDialog.razor.rz.scp.css */
/* ============================================
   CREATIVE PREVIEW DIALOG - SCOPED STYLES
   Uses design tokens for consistency
   ============================================ */

.preview-container[b-jga9p42ui2] {
    max-height: 70vh;
    overflow: auto;
}

.preview-media[b-jga9p42ui2] {
    width: 100%;
    max-height: 60vh;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-md);
}

.divider-spaced[b-jga9p42ui2] {
    margin: var(--space-md) 0;
}

.meta-row[b-jga9p42ui2] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.meta-badge[b-jga9p42ui2] {
    border-radius: var(--border-radius-md);
}
/* /Components/Shared/DeviceConfigForm.razor.rz.scp.css */
/* Device Config Form Styles */
.config-form .card-header[b-mpcedu192g] {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.config-form .card-header:hover[b-mpcedu192g] {
    background: var(--color-bg-hover);
}

.form-control-color[b-mpcedu192g] {
    max-width: 60px;
}
/* /Components/Shared/DeviceManagementEditDlg.razor.rz.scp.css */
/* ============================================
   DEVICE MANAGEMENT EDIT DIALOG - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

/* Dialog content spacing */
[b-n3ppdn1bku] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Grid item spacing */
[b-n3ppdn1bku] .mud-grid-item {
    padding: var(--space-sm);
}

/* Form field labels */
[b-n3ppdn1bku] .mud-input-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

/* Read-only fields styling */
[b-n3ppdn1bku] .mud-input-outlined.mud-readonly {
    background-color: var(--color-bg-hover);
}

[b-n3ppdn1bku] .mud-input-outlined.mud-readonly input {
    color: var(--color-text-muted);
}

/* Divider spacing */
[b-n3ppdn1bku] .mud-divider.my-2 {
    margin: var(--space-md) 0;
}

/* Dialog actions spacing */
[b-n3ppdn1bku] .mud-dialog-actions {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
}

/* Switch label */
[b-n3ppdn1bku] .mud-switch-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Confirmation dialog icon */
[b-n3ppdn1bku] .d-flex.align-center.gap-2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Dialog title */
[b-n3ppdn1bku] .mud-dialog-title h6 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

/* Button styling within dialog */
[b-n3ppdn1bku] .mud-button-text {
    color: var(--color-text-muted);
}

[b-n3ppdn1bku] .mud-button-text:hover {
    background-color: var(--color-bg-hover);
}

[b-n3ppdn1bku] .mud-button-filled-primary {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-button);
}

[b-n3ppdn1bku] .mud-button-filled-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Warning icon color in confirmation */
[b-n3ppdn1bku] .mud-icon-root.mud-warning {
    color: var(--color-warning);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-n3ppdn1bku] .mud-dialog-content {
        padding: var(--space-md);
    }
    
    [b-n3ppdn1bku] .mud-dialog-actions {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
    }
    
    [b-n3ppdn1bku] .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}