@import '_content/Web.Components/Web.Components.peyu19o8x2.bundle.scp.css';

/* /Components/CommandPalette.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE — Scoped styles
   Uses CSS variables from admin-shared.css — dark mode auto-inherits.
   ════════════════════════════════════════════════════════════════════════════ */

.cp-backdrop[b-2dsaf0jgmr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9998;
    animation: cp-fade-in-b-2dsaf0jgmr 0.12s ease-out;
}

.cp-container[b-2dsaf0jgmr] {
    position: fixed;
    top: min(20%, 160px);
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 2rem));
    max-height: min(480px, calc(100vh - 200px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cp-slide-in-b-2dsaf0jgmr 0.15s ease-out;
}

/* ── Searchbar ─────────────────────────────────────────────────────── */

.cp-searchbar[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
}

.cp-search-icon[b-2dsaf0jgmr] {
    color: var(--text-tertiary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.cp-search[b-2dsaf0jgmr] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    caret-color: var(--accent-primary);
}

.cp-search[b-2dsaf0jgmr]::placeholder {
    color: var(--text-tertiary);
}

.cp-esc-hint[b-2dsaf0jgmr] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-secondary);
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ── Results List ──────────────────────────────────────────────────── */

.cp-results[b-2dsaf0jgmr] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    scroll-behavior: smooth;
}

.cp-category[b-2dsaf0jgmr] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 0.5rem 0.75rem 0.25rem;
    margin-top: 0.25rem;
}

.cp-item[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
}

.cp-item:hover[b-2dsaf0jgmr],
.cp-item-active[b-2dsaf0jgmr] {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.cp-item-icon[b-2dsaf0jgmr] {
    width: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: color 0.1s ease;
}

.cp-item:hover .cp-item-icon[b-2dsaf0jgmr],
.cp-item-active .cp-item-icon[b-2dsaf0jgmr] {
    color: var(--accent-primary);
}

.cp-item-label[b-2dsaf0jgmr] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-item-shortcut[b-2dsaf0jgmr] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.cp-item-shortcut kbd[b-2dsaf0jgmr] {
    font-size: 0.68rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-secondary);
    font-family: ui-monospace, SFMono-Regular, monospace;
    line-height: 1.3;
}

.cp-empty[b-2dsaf0jgmr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.cp-empty i[b-2dsaf0jgmr] {
    font-size: 1.5rem;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.cp-footer[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
}

.cp-hint[b-2dsaf0jgmr] {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-hint kbd[b-2dsaf0jgmr] {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-secondary);
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ── Animations ────────────────────────────────────────────────────── */

@keyframes cp-fade-in-b-2dsaf0jgmr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cp-slide-in-b-2dsaf0jgmr {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SHORTCUT HINT OVERLAY — Alt hold/tap discovery mode
   ════════════════════════════════════════════════════════════════════════════ */

.sh-backdrop[b-2dsaf0jgmr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 9998;
    animation: cp-fade-in-b-2dsaf0jgmr 0.1s ease-out;
}

.sh-overlay[b-2dsaf0jgmr] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, calc(100vw - 2rem));
    max-height: min(560px, calc(100vh - 120px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sh-pop-in-b-2dsaf0jgmr 0.15s ease-out;
}

.sh-title[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sh-title i[b-2dsaf0jgmr] {
    color: var(--accent-primary);
    font-size: 1rem;
}

.sh-subtitle[b-2dsaf0jgmr] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Grid ──────────────────────────────────────────────────────────── */

.sh-grid[b-2dsaf0jgmr] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.625rem;
}

.sh-card[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    transition: border-color 0.1s ease, background 0.1s ease;
    cursor: default;
}

.sh-card:hover[b-2dsaf0jgmr] {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.sh-key[b-2dsaf0jgmr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, monospace;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sh-card-icon[b-2dsaf0jgmr] {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.sh-card-label[b-2dsaf0jgmr] {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-footer[b-2dsaf0jgmr] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
}

@keyframes sh-pop-in-b-2dsaf0jgmr {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-3eb4o1yrua] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-3eb4o1yrua] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode #blazor-error-ui[b-3eb4o1yrua] {
    background: #422006;
    color: #fef3c7;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   SITE HEADER - ADMIN STYLE
   Moderne, professionele header voor BBuilder admin
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Logo Area ──────────────────────────────────────────────────────────────── */
.logo[b-qi1iz6hqfh] {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    gap: .85rem;
    text-decoration: none;
    margin-left: 0;
    color: #fff;
    padding-top: 0;
}

    .logo-icon[b-qi1iz6hqfh] {
        width: 20px;
        height: 40px;
        object-fit: contain;
        flex-shrink: 0;
    }

    html.dark-mode .logo-icon[b-qi1iz6hqfh] {
        mix-blend-mode: screen;
    }

/* Logo text styling */
.logo-text[b-qi1iz6hqfh] {
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

/* Dark mode logo text - needs to override scoped styles */
html.dark-mode .logo .logo-text[b-qi1iz6hqfh],
html.dark-mode .logo .logo-text[b-qi1iz6hqfh],
html.dark-mode .logo-text[b-qi1iz6hqfh] {
    color: #ffffff !important;
}

/* Spacer to push everything to the right */
.header-spacer[b-qi1iz6hqfh] {
    flex: 1;
}

/* Right side container: dropdown + buttons */
.header-right[b-qi1iz6hqfh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Book selector container */
.book-selector[b-qi1iz6hqfh] {
    margin-right: 0.5rem;
}

/* Book name badge */
.book-name[b-qi1iz6hqfh] {
    color: #64748b;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Book selector styling */
.book-selector select[b-qi1iz6hqfh] {
    pointer-events: all;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    padding-right: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #1e293b;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: all 0.2s ease;
}

.book-selector select:hover[b-qi1iz6hqfh] {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.book-selector select:focus[b-qi1iz6hqfh] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ── Hamburger Menu Button ──────────────────────────────────────────────────── */
.burger[b-qi1iz6hqfh] {
    display: none;
    background: white;
    border: 1px solid #e2e8f0;
    font-size: 1.25rem;
    color: #475569;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.burger:hover[b-qi1iz6hqfh] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* ── Mobile Menu Overlay ────────────────────────────────────────────────────── */
.mobile-menu-overlay[b-qi1iz6hqfh] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 4500;
    backdrop-filter: blur(4px);
}

/* ── Mobile Menu Panel ──────────────────────────────────────────────────────── */
.mobile-menu[b-qi1iz6hqfh] {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background: white;
    padding: 1.5rem;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: slideIn-b-qi1iz6hqfh 0.3s ease-out;
}

.mobile-menu[b-qi1iz6hqfh]::before {
    content: "Menu";
    font-weight: 600;
    font-size: 1.1rem;
    color: #1e293b;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.5rem;
}

.mobile-menu ul[b-qi1iz6hqfh] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li[b-qi1iz6hqfh] {
    margin-bottom: 0.25rem;
}

.mobile-menu a[b-qi1iz6hqfh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-menu a:hover[b-qi1iz6hqfh] {
    background: #f1f5f9;
    color: #1e293b;
    text-decoration: none;
}

.mobile-menu a i[b-qi1iz6hqfh] {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    color: #64748b;
}

.mobile-menu a:hover i[b-qi1iz6hqfh] {
    color: #3b82f6;
}

/* ── Slide-in Animation ─────────────────────────────────────────────────────── */
@keyframes slideIn-b-qi1iz6hqfh {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Responsive Breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .header-right[b-qi1iz6hqfh] {
        display: none;
    }

    .header-spacer[b-qi1iz6hqfh] {
        flex: 1;
    }

    .burger[b-qi1iz6hqfh] {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

/* Header container */
html.dark-mode .site-header[b-qi1iz6hqfh] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Logo - enforce high contrast text for dark backgrounds */
html.dark-mode .logo[b-qi1iz6hqfh] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Book name badge */
html.dark-mode .book-name[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

/* Book selector */
html.dark-mode .book-selector select[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-primary, #f1f5f9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
}

html.dark-mode .book-selector select:hover[b-qi1iz6hqfh] {
    border-color: var(--border-secondary, #64748b);
    background-color: var(--bg-hover, #475569);
}

html.dark-mode .book-selector select:focus[b-qi1iz6hqfh] {
    border-color: var(--accent-primary, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Hamburger button */
html.dark-mode .burger[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .burger:hover[b-qi1iz6hqfh] {
    background: var(--bg-hover, #475569);
    border-color: var(--border-secondary, #64748b);
    color: var(--text-primary, #f1f5f9);
}

/* Mobile menu */
html.dark-mode .mobile-menu-overlay[b-qi1iz6hqfh] {
    background: rgba(0, 0, 0, 0.6);
}

html.dark-mode .mobile-menu[b-qi1iz6hqfh] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
}

html.dark-mode .mobile-menu[b-qi1iz6hqfh]::before {
    color: var(--text-primary, #f1f5f9);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .mobile-menu a[b-qi1iz6hqfh] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .mobile-menu a:hover[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .mobile-menu a i[b-qi1iz6hqfh] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .mobile-menu a:hover i[b-qi1iz6hqfh] {
    color: var(--accent-primary, #60a5fa);
}

/* CTA buttons in header */
html.dark-mode .btn-group .cta[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
    border-color: var(--border-primary, #475569);
}

html.dark-mode .btn-group .cta:hover[b-qi1iz6hqfh] {
    background: var(--bg-hover, #475569);
    border-color: var(--border-secondary, #64748b);
}

html.dark-mode .btn-group .cta.secondary[b-qi1iz6hqfh] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .btn-group .cta.secondary:hover[b-qi1iz6hqfh] {
    background: var(--bg-hover, #475569);
}
/* /Components/Modal/Account/AccountRequiredModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-pstal6vk70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-pstal6vk70] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.modal-body .form-control[b-pstal6vk70] {
    margin-top: .6rem;
}

.modal-body .mt[b-pstal6vk70] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-pstal6vk70] {
    margin-top: .4rem;
}

.modal-footer[b-pstal6vk70] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-pstal6vk70] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-pstal6vk70] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-pstal6vk70] {
        background: var(--text-dark, #0d2545);
        color: #fff;
    }

    .btn:hover[b-pstal6vk70] {
        filter: brightness(1.05);
    }

.modalError[b-pstal6vk70] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-pstal6vk70] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-pstal6vk70] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-pstal6vk70] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-pstal6vk70 .6s linear infinite;
    vertical-align: middle;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-header h2[b-pstal6vk70] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .close-btn[b-pstal6vk70] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modalError[b-pstal6vk70] {
    background-color: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
/* /Components/Modal/Account/ForgotPasswordModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-49fzltxwnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-49fzltxwnn] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ───────── Inputs ───────── */
.form-control[b-49fzltxwnn] {
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius, 18px);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control[b-49fzltxwnn]::placeholder {
        color: var(--text-muted, #94a3b8);
    }

    .form-control:focus[b-49fzltxwnn] {
        border-color: var(--border-focus, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

.mt[b-49fzltxwnn] {
    margin-top: .9rem;
}

.mt-sm[b-49fzltxwnn] {
    margin-top: .4rem;
}

.modal-footer[b-49fzltxwnn] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-49fzltxwnn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}

    .btn.primary[b-49fzltxwnn] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

        .btn.primary:hover:not(:disabled)[b-49fzltxwnn] {
            background: #2563eb;
        }

    .btn.secondary[b-49fzltxwnn] {
        background: #1e293b;
        border-color: #1e293b;
        color: #fff;
    }

        .btn.secondary:hover:not(:disabled)[b-49fzltxwnn] {
            background: #334155;
        }

    .btn:disabled[b-49fzltxwnn] {
        opacity: .5;
        cursor: not-allowed;
    }

.modalError[b-49fzltxwnn] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-49fzltxwnn] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-49fzltxwnn] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-49fzltxwnn] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-49fzltxwnn .6s linear infinite;
    vertical-align: middle;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-header h2[b-49fzltxwnn] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .close-btn[b-49fzltxwnn] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .modalError[b-49fzltxwnn] {
    background-color: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

html.dark-mode .form-control[b-49fzltxwnn] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .form-control[b-49fzltxwnn]::placeholder {
        color: var(--text-muted, #64748b);
    }

    html.dark-mode .form-control:focus[b-49fzltxwnn] {
        border-color: var(--border-focus, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

html.dark-mode .btn.secondary[b-49fzltxwnn] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .btn.secondary:hover:not(:disabled)[b-49fzltxwnn] {
        background: var(--bg-hover, #475569);
    }

html.dark-mode .btn.primary[b-49fzltxwnn] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
}

    html.dark-mode .btn.primary:hover:not(:disabled)[b-49fzltxwnn] {
        background: var(--accent-hover, #3b82f6);
    }

html.dark-mode .close-btn:hover[b-49fzltxwnn] {
    color: var(--text-primary, #f1f5f9);
}
/* /Components/Modal/Account/LoginModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-gw6ogs1wry] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-gw6ogs1wry] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ───────── Inputs ───────── */
.form-control[b-gw6ogs1wry] {
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius, 18px);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control[b-gw6ogs1wry]::placeholder {
        color: var(--text-muted, #94a3b8);
    }

    .form-control:focus[b-gw6ogs1wry] {
        border-color: var(--border-focus, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

.mt[b-gw6ogs1wry] {
    margin-top: .9rem;
}

.mt-sm[b-gw6ogs1wry] {
    margin-top: .4rem;
}

.modal-footer[b-gw6ogs1wry] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-gw6ogs1wry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}

    .btn.primary[b-gw6ogs1wry] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

        .btn.primary:hover:not(:disabled)[b-gw6ogs1wry] {
            background: #2563eb;
        }

    .btn.secondary[b-gw6ogs1wry] {
        background: #1e293b;
        border-color: #1e293b;
        color: #fff;
    }

        .btn.secondary:hover:not(:disabled)[b-gw6ogs1wry] {
            background: #334155;
        }

    .btn:disabled[b-gw6ogs1wry] {
        opacity: .5;
        cursor: not-allowed;
    }

.modalError[b-gw6ogs1wry] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}
.forgot-link[b-gw6ogs1wry] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-gw6ogs1wry] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-gw6ogs1wry] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-gw6ogs1wry .6s linear infinite;
    vertical-align: middle;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-header h2[b-gw6ogs1wry] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .close-btn[b-gw6ogs1wry] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .modalError[b-gw6ogs1wry] {
    background-color: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

html.dark-mode .form-control[b-gw6ogs1wry] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .form-control[b-gw6ogs1wry]::placeholder {
        color: var(--text-muted, #64748b);
    }

    html.dark-mode .form-control:focus[b-gw6ogs1wry] {
        border-color: var(--border-focus, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

html.dark-mode .btn.secondary[b-gw6ogs1wry] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .btn.secondary:hover:not(:disabled)[b-gw6ogs1wry] {
        background: var(--bg-hover, #475569);
    }

html.dark-mode .btn.primary[b-gw6ogs1wry] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
}

    html.dark-mode .btn.primary:hover:not(:disabled)[b-gw6ogs1wry] {
        background: var(--accent-hover, #3b82f6);
    }

html.dark-mode .close-btn:hover[b-gw6ogs1wry] {
    color: var(--text-primary, #f1f5f9);
}

/* /Components/Modal/Account/RegisterModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-cphn03u8kh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-cphn03u8kh] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ───────── Inputs ───────── */
.form-control[b-cphn03u8kh] {
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius, 18px);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control[b-cphn03u8kh]::placeholder {
        color: var(--text-muted, #94a3b8);
    }

    .form-control:focus[b-cphn03u8kh] {
        border-color: var(--border-focus, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

.mt[b-cphn03u8kh] {
    margin-top: .9rem;
}

.mt-sm[b-cphn03u8kh] {
    margin-top: .4rem;
}

.modal-footer[b-cphn03u8kh] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-cphn03u8kh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}

    .btn.primary[b-cphn03u8kh] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

        .btn.primary:hover:not(:disabled)[b-cphn03u8kh] {
            background: #2563eb;
        }

    .btn.secondary[b-cphn03u8kh] {
        background: #1e293b;
        border-color: #1e293b;
        color: #fff;
    }

        .btn.secondary:hover:not(:disabled)[b-cphn03u8kh] {
            background: #334155;
        }

    .btn:disabled[b-cphn03u8kh] {
        opacity: .5;
        cursor: not-allowed;
    }
.modalError[b-cphn03u8kh] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}
/* ========== Spinner in knop ========== */
.spinner[b-cphn03u8kh] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-cphn03u8kh .6s linear infinite;
    vertical-align: middle;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-header h2[b-cphn03u8kh] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .close-btn[b-cphn03u8kh] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .modalError[b-cphn03u8kh] {
    background-color: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

html.dark-mode .form-control[b-cphn03u8kh] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .form-control[b-cphn03u8kh]::placeholder {
        color: var(--text-muted, #64748b);
    }

    html.dark-mode .form-control:focus[b-cphn03u8kh] {
        border-color: var(--border-focus, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

html.dark-mode .btn.secondary[b-cphn03u8kh] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .btn.secondary:hover:not(:disabled)[b-cphn03u8kh] {
        background: var(--bg-hover, #475569);
    }

html.dark-mode .btn.primary[b-cphn03u8kh] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
}

    html.dark-mode .btn.primary:hover:not(:disabled)[b-cphn03u8kh] {
        background: var(--accent-hover, #3b82f6);
    }

html.dark-mode .close-btn:hover[b-cphn03u8kh] {
    color: var(--text-primary, #f1f5f9);
}

/* /Components/Modal/Account/ResetPasswordModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-hbs6c0qohg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-hbs6c0qohg] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ───────── Inputs ───────── */
.form-control[b-hbs6c0qohg] {
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius, 18px);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control[b-hbs6c0qohg]::placeholder {
        color: var(--text-muted, #94a3b8);
    }

    .form-control:focus[b-hbs6c0qohg] {
        border-color: var(--border-focus, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

.mt[b-hbs6c0qohg] {
    margin-top: .9rem;
}

.mt-sm[b-hbs6c0qohg] {
    margin-top: .4rem;
}

.modal-footer[b-hbs6c0qohg] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-hbs6c0qohg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}

    .btn.primary[b-hbs6c0qohg] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

        .btn.primary:hover:not(:disabled)[b-hbs6c0qohg] {
            background: #2563eb;
        }

    .btn.secondary[b-hbs6c0qohg] {
        background: #1e293b;
        border-color: #1e293b;
        color: #fff;
    }

        .btn.secondary:hover:not(:disabled)[b-hbs6c0qohg] {
            background: #334155;
        }

    .btn:disabled[b-hbs6c0qohg] {
        opacity: .5;
        cursor: not-allowed;
    }

.modalError[b-hbs6c0qohg] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-hbs6c0qohg] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-hbs6c0qohg] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-hbs6c0qohg] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-hbs6c0qohg .6s linear infinite;
    vertical-align: middle;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-header h2[b-hbs6c0qohg] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .close-btn[b-hbs6c0qohg] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .modalError[b-hbs6c0qohg] {
    background-color: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

html.dark-mode .form-control[b-hbs6c0qohg] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .form-control[b-hbs6c0qohg]::placeholder {
        color: var(--text-muted, #64748b);
    }

    html.dark-mode .form-control:focus[b-hbs6c0qohg] {
        border-color: var(--border-focus, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

html.dark-mode .btn.secondary[b-hbs6c0qohg] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .btn.secondary:hover:not(:disabled)[b-hbs6c0qohg] {
        background: var(--bg-hover, #475569);
    }

html.dark-mode .btn.primary[b-hbs6c0qohg] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
}

    html.dark-mode .btn.primary:hover:not(:disabled)[b-hbs6c0qohg] {
        background: var(--accent-hover, #3b82f6);
    }

html.dark-mode .close-btn:hover[b-hbs6c0qohg] {
    color: var(--text-primary, #f1f5f9);
}
/* /Components/Modal/ConfirmActionModal.razor.rz.scp.css */
/* Reuse existing modal look from other modals */

.modal[b-wvopwxig7z] {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    z-index: 4000;
    overflow-y: auto;
}

.modal.is-visible[b-wvopwxig7z] {
    display: flex;
}

.modal-content[b-wvopwxig7z] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    width: 100%;
    max-width: 520px;
    padding: 1.6rem 2rem;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    animation: modal-pop-b-wvopwxig7z .25s ease-out;
}

@keyframes modal-pop-b-wvopwxig7z {
    0% {
        transform: scale(.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-title[b-wvopwxig7z] {
    margin: 0 0 .75rem 0;
}

.confirm-message[b-wvopwxig7z] {
    margin: 0;
    color: #243b53;
}

.modal-footer[b-wvopwxig7z] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    width: 100%;
    margin-top: 1.4rem;
}

.btn[b-wvopwxig7z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn.primary[b-wvopwxig7z] {
    background: var(--brand, #ffb44d);
    color: #fff;
}

.btn.secondary[b-wvopwxig7z] {
    background: var(--text-dark, #0d2545);
    color: #fff;
}

.btn.primary.danger[b-wvopwxig7z] {
    background: #b91c1c;
}

.btn:hover[b-wvopwxig7z] {
    filter: brightness(1.05);
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .modal[b-wvopwxig7z] {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .modal-content[b-wvopwxig7z] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}

html.dark-mode .confirm-title[b-wvopwxig7z] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .confirm-message[b-wvopwxig7z] {
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/Acknowledge.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   ACKNOWLEDGE PAGE - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ???????????????????????????????????????????????????????????????????????????? */

/* ?? Header ??????????????????????????????????????????????????????????????????? */
.ack-header[b-drty21wghe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* ?? Stats Section ???????????????????????????????????????????????????????????? */
.ack-stats[b-drty21wghe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

/* ?? Empty State (override) ??????????????????????????????????????????????????? */
.ack-content .empty-state h2[b-drty21wghe] {
    font-size: 1.5rem;
}

.ack-content .empty-state p[b-drty21wghe] {
    margin: 0 0 1.5rem;
}

/* ?? Content Area ????????????????????????????????????????????????????????????? */
.ack-content[b-drty21wghe] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 350px);
}

/* ?? Data Table ??????????????????????????????????????????????????????????????? */
.data-table[b-drty21wghe] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.data-table thead tr[b-drty21wghe] {
    background: #f8fafc;
}

.data-table th[b-drty21wghe] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td[b-drty21wghe] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.data-table tbody tr:last-child td[b-drty21wghe] {
    border-bottom: none;
}

.clickable-row[b-drty21wghe] {
    cursor: pointer;
    transition: background 0.2s;
}

.clickable-row:hover[b-drty21wghe] {
    background: #f8fafc;
}

.data-table .center[b-drty21wghe] {
    text-align: center;
}

.data-table .nowrap[b-drty21wghe] {
    white-space: nowrap;
}

/* ?? Table Cells ?????????????????????????????????????????????????????????????? */
.order-id[b-drty21wghe] {
    font-weight: 600;
    color: #1e293b;
}

.customer-name[b-drty21wghe] {
    font-weight: 500;
}

.customer-email[b-drty21wghe] {
    color: #64748b;
    font-size: 0.9rem;
}

.page-count[b-drty21wghe] {
    background: #e2e8f0;
    color: #475569;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.pending-badge[b-drty21wghe] {
    background: #fef3c7;
    color: #92400e;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.actions-col[b-drty21wghe] {
    width: 200px;
    text-align: right !important;
}

.actions-cell[b-drty21wghe] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ?? Responsive ??????????????????????????????????????????????????????????????? */
@media (max-width: 1024px) {
    .ack-stats[b-drty21wghe] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .ack-header[b-drty21wghe] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .ack-stats[b-drty21wghe] {
        padding: 1rem 1.5rem;
    }

    .ack-content[b-drty21wghe] {
        padding: 1rem 1.5rem;
    }

    .data-table[b-drty21wghe] {
        font-size: 0.85rem;
    }

    .actions-cell[b-drty21wghe] {
        flex-direction: column;
    }
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .ack-header[b-drty21wghe] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .ack-stats[b-drty21wghe] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .ack-content[b-drty21wghe] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .data-table[b-drty21wghe] {
    background: var(--bg-secondary, #1e293b) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.3));
}

html.dark-mode .data-table thead tr[b-drty21wghe] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .data-table th[b-drty21wghe] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .data-table td[b-drty21wghe] {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .clickable-row:hover[b-drty21wghe] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .order-id[b-drty21wghe] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .customer-email[b-drty21wghe] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .page-count[b-drty21wghe] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .pending-badge[b-drty21wghe] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}
/* /Components/Pages/Admin/AdminProfile.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   ADMIN PROFILE - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ???????????????????????????????????????????????????????????????????????????? */

/* ?? Header ??????????????????????????????????????????????????????????????????? */
.ap-header[b-w49558f1oh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* ?? Content Area ????????????????????????????????????????????????????????????? */
.ap-content[b-w49558f1oh] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

/* ?? Settings Form (override) ????????????????????????????????????????????????? */
.ap-content .settings-form[b-w49558f1oh] {
    max-width: 600px;
}

/* ?? Placeholder Card ????????????????????????????????????????????????????????? */
.placeholder-card[b-w49558f1oh] {
    text-align: center;
    padding: 3rem 2rem;
}

.placeholder-icon[b-w49558f1oh] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.placeholder-card h2[b-w49558f1oh] {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    border: none;
    padding: 0;
}

.placeholder-card p[b-w49558f1oh] {
    margin: 0 0 1.25rem 0;
    color: #64748b;
    font-size: 0.95rem;
}

.feature-list[b-w49558f1oh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-list li[b-w49558f1oh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.9rem;
}

.feature-list li[b-w49558f1oh]::before {
    content: "•";
    color: #3b82f6;
    font-weight: bold;
}

@media (max-width: 720px) {
    .ap-header[b-w49558f1oh] {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .ap-content[b-w49558f1oh] {
        padding: 1.5rem 1.5rem;
    }
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .ap-header[b-w49558f1oh] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .ap-content[b-w49558f1oh] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .placeholder-card h2[b-w49558f1oh] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .placeholder-card p[b-w49558f1oh] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .feature-list li[b-w49558f1oh] {
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/AgentManagement.razor.rz.scp.css */
.agent-page[b-lf1807kaq6] {
    padding: 1.5rem 2rem 3rem;
    min-height: calc(100vh - 200px);
}

.agent-mgmt-header[b-lf1807kaq6] {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
}
.header-left .breadcrumb[b-lf1807kaq6] { font-size: .85rem; margin-bottom: .25rem; }
.breadcrumb-link[b-lf1807kaq6] { color: var(--text-secondary, #475569); cursor: pointer; }
.breadcrumb-link:hover[b-lf1807kaq6] { text-decoration: underline; }
.breadcrumb-sep[b-lf1807kaq6] { margin: 0 .4rem; opacity: .5; }
.breadcrumb-current[b-lf1807kaq6] { font-weight: 600; }
.page-title[b-lf1807kaq6] { font-size: 1.5rem; margin: 0; }
.badge-warning[b-lf1807kaq6] {
    background: rgba(234,179,8,.15); color: #ca8a04;
    padding: .4rem .8rem; border-radius: 8px; font-weight: 600; font-size: .85rem;
}

.filter-tabs[b-lf1807kaq6] { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tab[b-lf1807kaq6] {
    padding: .45rem 1rem; border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px; background: none; cursor: pointer; font-size: .85rem;
    color: var(--text-secondary, #475569); transition: all .2s;
}
.tab.active[b-lf1807kaq6], .tab:hover[b-lf1807kaq6] { background: var(--bg-tertiary, #f1f5f9); font-weight: 600; }

.admin-table[b-lf1807kaq6] {
    width: 100%; border-collapse: collapse;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px; overflow: hidden;
}
.admin-table th[b-lf1807kaq6] {
    text-align: left; padding: .6rem .75rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    opacity: .6; border-bottom: 2px solid var(--border-primary, #e2e8f0);
}
.admin-table td[b-lf1807kaq6] {
    padding: .6rem .75rem; font-size: .85rem;
    border-bottom: 1px solid var(--border-primary, #f1f5f9);
}
.admin-table tr:last-child td[b-lf1807kaq6] { border-bottom: none; }
.row-pending[b-lf1807kaq6] { background: rgba(234,179,8,.04); }
.text-muted[b-lf1807kaq6] { opacity: .5; }
.balance[b-lf1807kaq6] { font-weight: 700; color: #16a34a; }

.status-badge[b-lf1807kaq6] {
    padding: .2rem .5rem; border-radius: 6px;
    font-size: .75rem; font-weight: 600;
}
.status-badge.approved[b-lf1807kaq6] { background: rgba(22,163,74,.1); color: #16a34a; }
.status-badge.pending[b-lf1807kaq6] { background: rgba(234,179,8,.1); color: #ca8a04; }

.action-cell[b-lf1807kaq6] { display: flex; gap: .3rem; }
.btn-sm[b-lf1807kaq6] {
    padding: .25rem .5rem; border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px; background: none; cursor: pointer; font-size: .8rem;
    transition: background .2s;
}
.btn-sm:hover[b-lf1807kaq6] { background: var(--bg-tertiary, #f1f5f9); }
.btn-approve:hover[b-lf1807kaq6] { background: rgba(22,163,74,.15); }
.btn-deactivate:hover[b-lf1807kaq6] { background: rgba(239,68,68,.1); }
.btn-payout:hover[b-lf1807kaq6] { background: rgba(199,160,78,.15); }

/* Modal */
.modal-overlay[b-lf1807kaq6] {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; justify-content: center; align-items: center; z-index: 100;
}
.modal-card[b-lf1807kaq6] {
    background: var(--bg-primary, #fff); border-radius: 16px;
    padding: 2rem; width: 480px; max-width: 90vw;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.modal-card h2[b-lf1807kaq6] { font-size: 1.2rem; margin-bottom: 1.25rem; }
.form-group[b-lf1807kaq6] { margin-bottom: 1rem; }
.form-group label[b-lf1807kaq6] { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.form-group input[b-lf1807kaq6], .form-group textarea[b-lf1807kaq6] {
    width: 100%; padding: .55rem .75rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px; font-size: .9rem;
    background: var(--bg-tertiary, #f1f5f9); color: inherit;
}
.modal-actions[b-lf1807kaq6] { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }
.btn[b-lf1807kaq6] { padding: .5rem 1.2rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn.primary[b-lf1807kaq6] { background: #c7a04e; color: #fff; }
.btn.primary:hover[b-lf1807kaq6] { background: #a88532; }
.btn.secondary[b-lf1807kaq6] { background: var(--bg-tertiary, #f1f5f9); }

/* Dark mode */
html.dark-mode .agent-page[b-lf1807kaq6] { background: var(--bg-primary, #0f172a); }
html.dark-mode .agent-mgmt-header[b-lf1807kaq6] { background: #1e293b; border-color: #334155; }
html.dark-mode .admin-table[b-lf1807kaq6] { background: #1e293b; border-color: #334155; }
html.dark-mode .admin-table th[b-lf1807kaq6] { border-color: #475569; }
html.dark-mode .admin-table td[b-lf1807kaq6] { border-color: #334155; }
html.dark-mode .row-pending[b-lf1807kaq6] { background: rgba(234,179,8,.06); }
html.dark-mode .modal-card[b-lf1807kaq6] { background: #1e293b; }
html.dark-mode .form-group input[b-lf1807kaq6], html.dark-mode .form-group textarea[b-lf1807kaq6] { background: #111520; border-color: #334155; }
html.dark-mode .tab[b-lf1807kaq6] { border-color: #334155; }
html.dark-mode .tab.active[b-lf1807kaq6], html.dark-mode .tab:hover[b-lf1807kaq6] { background: #334155; }
/* /Components/Pages/Admin/AppSettings.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   APP SETTINGS - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
.settings-header[b-llve10fjr4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    z-index: 250;
}

/* ── Header Action Split Button ─────────────────────────────────────────── */
.settings-action-split[b-llve10fjr4] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    isolation: isolate;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #1e293b;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    z-index: 260;
}

.settings-action-primary[b-llve10fjr4],
.settings-action-toggle[b-llve10fjr4],
.settings-action-menu-item[b-llve10fjr4] {
    font-family: inherit;
}

.settings-action-primary[b-llve10fjr4],
.settings-action-toggle[b-llve10fjr4] {
    border: 0;
    color: white;
    background: #1e293b;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.settings-action-primary[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.55rem 1.05rem 0.55rem 1rem;
    border-radius: 14px 0 0 14px;
}

.settings-action-primary:hover:not(:disabled)[b-llve10fjr4],
.settings-action-toggle:hover[b-llve10fjr4] {
    background: #334155;
}

.settings-action-primary:disabled[b-llve10fjr4] {
    cursor: wait;
    opacity: 0.72;
}

.settings-action-primary:active:not(:disabled)[b-llve10fjr4],
.settings-action-toggle:active[b-llve10fjr4] {
    transform: translateY(1px);
}

.settings-action-icon[b-llve10fjr4] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.14);
}

.settings-action-copy[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.settings-action-label[b-llve10fjr4] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.settings-action-hint[b-llve10fjr4] {
    margin-top: 0.16rem;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 500;
}

.settings-action-toggle[b-llve10fjr4] {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 48px;
    border-left: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0 14px 14px 0;
}

.settings-action-chevron[b-llve10fjr4] {
    display: block;
    color: #cbd5e1;
    transition: transform 0.2s ease, color 0.18s ease;
}

.settings-action-toggle:hover .settings-action-chevron[b-llve10fjr4] {
    color: #ffffff;
}

.settings-action-toggle[aria-expanded="true"] .settings-action-chevron[b-llve10fjr4] {
    transform: rotate(180deg);
    color: #ffffff;
}

.settings-action-menu[b-llve10fjr4] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 1000;
    width: min(330px, calc(100vw - 2rem));
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.settings-action-menu[b-llve10fjr4]::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid rgba(226, 232, 240, 0.9);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    transform: rotate(45deg);
}

.settings-action-menu-item[b-llve10fjr4] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.72rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.settings-action-menu-item:hover:not(:disabled)[b-llve10fjr4],
.settings-action-menu-item:focus-visible:not(:disabled)[b-llve10fjr4] {
    background: #f8fafc;
    border-color: #e2e8f0;
    outline: none;
    transform: translateX(2px);
}

.settings-action-menu-item:disabled[b-llve10fjr4] {
    cursor: wait;
    opacity: 0.62;
}

.settings-action-menu-icon[b-llve10fjr4] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #f1f5f9;
    color: #334155;
}

.settings-action-menu-title[b-llve10fjr4],
.settings-action-menu-description[b-llve10fjr4] {
    display: block;
}

.settings-action-menu-title[b-llve10fjr4] {
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 700;
}

.settings-action-menu-description[b-llve10fjr4] {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.3;
}

/* ── Category Bar (Level 1) ──────────────────────────────────────────────────── */
.category-bar[b-llve10fjr4] {
    display: flex;
    gap: 0.375rem;
    padding: 1rem 3rem 0;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.category-btn[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-btn:hover:not(.active)[b-llve10fjr4] {
    color: #1e293b;
    border-bottom-color: #cbd5e1;
}

.category-btn.active[b-llve10fjr4] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.category-icon[b-llve10fjr4] {
    font-size: 1.1rem;
    line-height: 1;
}

.category-label[b-llve10fjr4] {
    line-height: 1;
}

/* ── Tabs Section (Level 2) ─────────────────────────────────────────────────── */
.tabs-section[b-llve10fjr4] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 3rem;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.tabs[b-llve10fjr4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab[b-llve10fjr4] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.tab:hover:not(.active)[b-llve10fjr4] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.tab.active[b-llve10fjr4] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* ── Content Area ───────────────────────────────────────────────────────────── */
.settings-content[b-llve10fjr4] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 300px);
}

/* ── Settings Card Header ───────────────────────────────────────────────────── */
.settings-card-header[b-llve10fjr4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.settings-card-header h2[b-llve10fjr4] {
    margin: 0;
    border: none;
    padding: 0;
}

.settings-card h3[b-llve10fjr4] {
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
}

/* ── Form Grid Layouts ──────────────────────────────────────────────────────── */
.row-2[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1.25rem 2rem;
    align-items: start;
}

.row-3[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 1.25rem 2rem;
    align-items: start;
}

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

@media (max-width: 720px) {
.row-2[b-llve10fjr4], .row-3[b-llve10fjr4] {
    grid-template-columns: 1fr;
}
    
.settings-header[b-llve10fjr4] {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    gap: 1rem;
}

.settings-header .header-actions[b-llve10fjr4] {
    width: 100%;
    justify-content: space-between;
}

.settings-action-split[b-llve10fjr4] {
    flex: 1;
    max-width: 100%;
}

.settings-action-primary[b-llve10fjr4] {
    flex: 1;
}
    
.category-bar[b-llve10fjr4] {
    padding: 0.75rem 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
    
.category-bar[b-llve10fjr4]::-webkit-scrollbar {
    display: none;
}
    
.category-label[b-llve10fjr4] {
    display: none;
}
    
.category-btn[b-llve10fjr4] {
    padding: 0.625rem 0.75rem;
}
    
.category-icon[b-llve10fjr4] {
    font-size: 1.3rem;
}
    
.tabs-section[b-llve10fjr4] {
    padding: 0.75rem 1.5rem;
}
    
    .settings-content[b-llve10fjr4] {
        padding: 1.5rem 1.5rem;
    }
}

/* ── Form Groups (override) ─────────────────────────────────────────────────── */
.settings-content .form-group label[b-llve10fjr4] {
    font-size: 0.85rem;
}

.settings-form .help[b-llve10fjr4] {
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* ── Payment Fieldsets ──────────────────────────────────────────────────────── */
.payment-fieldset[b-llve10fjr4] {
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: #f8fafc;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.payment-fieldset.enabled[b-llve10fjr4] {
    background: white;
    border-color: #cbd5e1;
}

.payment-fieldset legend[b-llve10fjr4] {
    padding: 0 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.payment-disabled-text[b-llve10fjr4] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

/* ── Checkbox Styling ───────────────────────────────────────────────────────── */
.checkbox-label[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-weight: 500;
    color: #1e293b;
}

.checkbox-label input[type="checkbox"][b-llve10fjr4] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    cursor: pointer;
}

.checkbox-help[b-llve10fjr4] {
    display: block;
    margin-top: 0.25rem;
    margin-left: 1.625rem;
    color: #64748b;
    font-size: 0.8rem;
}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.settings-divider[b-llve10fjr4] {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.tbl[b-llve10fjr4] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.tbl thead[b-llve10fjr4] {
    background: #f8fafc;
}

.tbl th[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.tbl td[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.tbl tbody tr:last-child td[b-llve10fjr4] {
    border-bottom: none;
}

.tbl tbody tr:hover[b-llve10fjr4] {
    background: #f8fafc;
}

/* ── Actions Cell ───────────────────────────────────────────────────────────── */
.tbl .actions-cell[b-llve10fjr4] {
    text-align: right;
    white-space: nowrap;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success[b-llve10fjr4] {
    background: #dcfce7;
    color: #166534;
}

.badge-inactive[b-llve10fjr4] {
    background: #f1f5f9;
    color: #64748b;
}

/* ── Placeholder ────────────────────────────────────────────────────────────── */
.placeholder[b-llve10fjr4] {
    padding: 3rem 2rem;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* ── Model Prices Table ─────────────────────────────────────────────────────── */
.model-prices-table[b-llve10fjr4] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.model-prices-table thead[b-llve10fjr4] {
    background: #f8fafc;
}

.model-prices-table thead th[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.model-prices-table thead th small[b-llve10fjr4] {
    display: block;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 0.15rem;
}

.model-prices-table tbody tr[b-llve10fjr4] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.model-prices-table tbody tr:hover[b-llve10fjr4] {
    background-color: #f8fafc;
}

.model-prices-table tbody td[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: #475569;
}

.model-prices-table tbody tr:last-child[b-llve10fjr4] {
    border-bottom: none;
}

/* Model Prices Table - Utility Classes */
.model-prices-table .text-right[b-llve10fjr4] {
    text-align: right;
}

.model-prices-table .font-medium[b-llve10fjr4] {
    font-weight: 500;
}

.model-prices-table .font-mono[b-llve10fjr4] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

.model-prices-table .text-muted[b-llve10fjr4] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.model-prices-table .price-input[b-llve10fjr4] {
    color: #2563eb;
    font-weight: 500;
}

.model-prices-table .price-output[b-llve10fjr4] {
    color: #7c3aed;
    font-weight: 500;
}

.model-prices-table .price-cached[b-llve10fjr4] {
    color: #059669;
    font-weight: 500;
}

.model-prices-table .image-pricing[b-llve10fjr4] {
    font-size: 0.8rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sync result badges */
.sync-badge[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.sync-badge.success[b-llve10fjr4] {
    background: #d1fae5;
    color: #065f46;
}

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

/* ── Service Status ─────────────────────────────────────────────────────────── */
.service-grid[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.service-card[b-llve10fjr4] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.service-card[b-llve10fjr4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e2e8f0;
}

.service-card.healthy[b-llve10fjr4]::before {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.service-card.unhealthy[b-llve10fjr4]::before {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.service-card.healthy[b-llve10fjr4] {
    border-color: #d1fae5;
}

.service-card.unhealthy[b-llve10fjr4] {
    border-color: #fecaca;
    background: #fef2f2;
}

.service-header[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.service-indicator[b-llve10fjr4] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-b-llve10fjr4 2s infinite;
}

.service-indicator.indicator-healthy[b-llve10fjr4] {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.service-indicator.indicator-unhealthy[b-llve10fjr4] {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    animation: none;
}

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

.service-name[b-llve10fjr4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.service-status[b-llve10fjr4] {
    margin-bottom: 1rem;
}

.status-badge[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-ok[b-llve10fjr4] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.status-error[b-llve10fjr4] {
    background: #fee2e2;
    color: #dc2626;
}

.service-details[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-detail[b-llve10fjr4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.service-detail:last-child[b-llve10fjr4] {
    border-bottom: none;
}

.service-detail.error[b-llve10fjr4] {
    background: #fef2f2;
    margin: 0 -0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border-bottom: none;
}

.detail-label[b-llve10fjr4] {
    font-size: 0.8rem;
    color: #64748b;
}

.detail-value[b-llve10fjr4] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    text-align: right;
    word-break: break-word;
}

.service-detail.error .detail-value[b-llve10fjr4] {
    color: #dc2626;
    font-size: 0.8rem;
}

.status-loading[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: #64748b;
}

.spinner-small[b-llve10fjr4] {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.status-footer[b-llve10fjr4] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    color: #94a3b8;
    font-size: 0.85rem;
}

/* ── Version Info ───────────────────────────────────────────────────────────── */
.version-info[b-llve10fjr4] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.version-info h3[b-llve10fjr4] {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 1rem 0;
}

.version-grid[b-llve10fjr4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
}

.version-label[b-llve10fjr4] {
    font-weight: 500;
    color: #64748b;
}

.version-value[b-llve10fjr4] {
    color: #334155;
}

.version-build[b-llve10fjr4] {
    opacity: 0.7;
    font-size: 0.85em;
}

/* ── Validation Message ─────────────────────────────────────────────────────── */
.validation-message[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
}

/* ── Book Tab - Dimensions ──────────────────────────────────────────────────── */
.dims-group .dims-row[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 260px;
}

.dim-input[b-llve10fjr4] {
    width: 100%;
    text-align: center;
}

.dim-sep[b-llve10fjr4] {
    flex: 0 0 auto;
    font-weight: 600;
    color: #64748b;
    font-size: 1.1rem;
}

/* ── Card Description ───────────────────────────────────────────────────────── */
.card-description[b-llve10fjr4] {
    margin: -0.75rem 0 1.25rem 0;
    font-size: 0.85rem;
    color: #64748b;
}

h3 + .card-description[b-llve10fjr4] {
    margin: 0.15rem 0 1rem 0;
}

/* ── Textarea Styling ───────────────────────────────────────────────────────── */
.settings-form .textarea[b-llve10fjr4] {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form .textarea:focus[b-llve10fjr4] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   OAUTH TAB STYLES
   ══════════════════════════════════════════════════════════════════════════════ */

/* OAuth Card */
.oauth-card[b-llve10fjr4] {
    position: relative;
    overflow: hidden;
}

.oauth-card[b-llve10fjr4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
}

/* OAuth Header */
.oauth-header-left[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.oauth-logo[b-llve10fjr4] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.oauth-logo svg[b-llve10fjr4] {
    width: 32px;
    height: 32px;
}

.oauth-header-left h2[b-llve10fjr4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    border: none;
    padding: 0;
}

.oauth-header-left .card-description[b-llve10fjr4] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #64748b;
}

/* OAuth Toggle */
.oauth-toggle-wrapper[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-switch[b-llve10fjr4] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input[b-llve10fjr4] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-llve10fjr4] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider[b-llve10fjr4]::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider[b-llve10fjr4] {
    background: linear-gradient(135deg, #34A853, #4285F4);
}

.toggle-switch input:checked + .toggle-slider[b-llve10fjr4]::before {
    transform: translateX(24px);
}

.toggle-label[b-llve10fjr4] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

/* OAuth Message */
.oauth-message[b-llve10fjr4] {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.oauth-message.success[b-llve10fjr4] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #10b981;
    color: #065f46;
}

.oauth-message.error[b-llve10fjr4] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #ef4444;
    color: #991b1b;
}

/* OAuth Loading */
.oauth-loading[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: #64748b;
}

/* OAuth Form */
.oauth-form[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.oauth-form .form-group[b-llve10fjr4] {
    margin-bottom: 0;
}

.oauth-form .input[b-llve10fjr4] {
    font-size: 0.9rem;
}

.oauth-form .input.input-warning[b-llve10fjr4] {
    border-color: #f59e0b;
    background-color: #fffbeb;
}

/* Secret Input Group */
.secret-input-group[b-llve10fjr4] {
    display: flex;
    gap: 0;
}

.secret-input-group .input[b-llve10fjr4] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.toggle-visibility-btn[b-llve10fjr4] {
    padding: 0 1rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s ease;
}

.toggle-visibility-btn:hover[b-llve10fjr4] {
    background: #e2e8f0;
}

/* OAuth Callback Box */
.oauth-callback-box[b-llve10fjr4] {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #7dd3fc;
    border-radius: 12px;
    padding: 1.25rem;
}

html.dark-mode .oauth-callback-box[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: rgba(96, 165, 250, 0.3);
}

.oauth-callback-box h4[b-llve10fjr4] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0369a1;
}

html.dark-mode .oauth-callback-box h4[b-llve10fjr4] {
    color: #93c5fd;
}

.callback-desc[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: #0c4a6e;
}

html.dark-mode .callback-desc[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

.callback-url-row[b-llve10fjr4] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.callback-url[b-llve10fjr4] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #0c4a6e;
    word-break: break-all;
    display: flex;
    align-items: center;
}

html.dark-mode .callback-url[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: #93c5fd;
}

.copy-btn[b-llve10fjr4] {
    padding: 0 1.25rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.copy-btn:hover[b-llve10fjr4] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
}

/* OAuth Instructions */
.oauth-instructions[b-llve10fjr4] {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
}

.oauth-instructions h4[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

.oauth-instructions ol[b-llve10fjr4] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.oauth-instructions li[b-llve10fjr4] {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
}

.oauth-instructions a[b-llve10fjr4] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.oauth-instructions a:hover[b-llve10fjr4] {
    text-decoration: underline;
}

/* OAuth Footer */
.oauth-footer[b-llve10fjr4] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.btn-save-oauth[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-oauth:hover:not(:disabled)[b-llve10fjr4] {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-save-oauth:disabled[b-llve10fjr4] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-btn[b-llve10fjr4] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* OAuth Info Card */
.oauth-info-card[b-llve10fjr4] {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border: 1px solid #fde047;
}

.oauth-info-card h3[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #854d0e;
}

.info-list[b-llve10fjr4] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-list li[b-llve10fjr4] {
    font-size: 0.875rem;
    color: #713f12;
    line-height: 1.5;
    padding-left: 1.5rem;
    position: relative;
}

.info-list li[b-llve10fjr4]::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ca8a04;
    font-weight: bold;
}

.info-list li strong[b-llve10fjr4] {
    color: #854d0e;
}

/* OAuth Instructions Details (collapsible) */
.oauth-instructions-details[b-llve10fjr4] {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    margin-top: 1rem;
}

html.dark-mode .oauth-instructions-details[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

.oauth-instructions-details summary[b-llve10fjr4] {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html.dark-mode .oauth-instructions-details summary[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

.oauth-instructions-details summary[b-llve10fjr4]::-webkit-details-marker {
    display: none;
}

.oauth-instructions-details[open] summary[b-llve10fjr4] {
    border-bottom: 1px solid #e5e7eb;
}

html.dark-mode .oauth-instructions-details[open] summary[b-llve10fjr4] {
    border-bottom-color: var(--border-primary, #334155);
}

.oauth-instructions-list[b-llve10fjr4] {
    margin: 0;
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.oauth-instructions-list li[b-llve10fjr4] {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
}

html.dark-mode .oauth-instructions-list li[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

.oauth-instructions-list a[b-llve10fjr4] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

html.dark-mode .oauth-instructions-list a[b-llve10fjr4] {
    color: #60a5fa;
}

.oauth-instructions-list a:hover[b-llve10fjr4] {
    text-decoration: underline;
}

html.dark-mode .oauth-instructions-list a:hover[b-llve10fjr4] {
    color: #93c5fd;
}

/* Facebook OAuth Warning Box */
.oauth-warning-box[b-llve10fjr4] {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 8px;
}

.oauth-warning-box strong[b-llve10fjr4] {
    display: block;
    margin-bottom: 0.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

.oauth-warning-box p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.85rem;
    color: #78350f;
    line-height: 1.5;
}

/* Facebook Logo Styling */
.facebook-logo svg[b-llve10fjr4] {
    filter: drop-shadow(0 1px 2px rgba(24, 119, 242, 0.2));
}

/* ════════════════════════════════════════════════════════════════════════════
   GOOGLE ANALYTICS TAB STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* Analytics Card */
.analytics-card[b-llve10fjr4] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.analytics-header-left[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.analytics-header-left h2[b-llve10fjr4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    border: none;
    padding: 0;
}

.analytics-header-left .card-description[b-llve10fjr4] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #64748b;
}

.analytics-logo[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(249, 171, 0, 0.2);
}

.analytics-toggle-wrapper[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Measurement ID Input */
.measurement-id-input[b-llve10fjr4] {
    display: flex;
    align-items: center;
}

.measurement-prefix[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 1px solid #cbd5e1;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
}

.measurement-id-input .input[b-llve10fjr4] {
    border-radius: 0 8px 8px 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Analytics Form */
.analytics-form[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Status Box */
.analytics-status-box[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
}

.analytics-status-box.status-ready[b-llve10fjr4] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
}

.analytics-status-box.status-warning[b-llve10fjr4] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #eab308;
}

.status-icon[b-llve10fjr4] {
    font-size: 1.5rem;
    line-height: 1;
}

.status-text strong[b-llve10fjr4] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.analytics-status-box.status-ready .status-text strong[b-llve10fjr4] { color: #065f46; }
.analytics-status-box.status-warning .status-text strong[b-llve10fjr4] { color: #854d0e; }

.status-text p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.analytics-status-box.status-ready .status-text p[b-llve10fjr4] { color: #047857; }
.analytics-status-box.status-warning .status-text p[b-llve10fjr4] { color: #a16207; }

/* Warning Box for Cookie Consent */
.analytics-warning-box[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 10px;
}

.warning-icon[b-llve10fjr4] {
    font-size: 1.75rem;
    line-height: 1;
}

.warning-content strong[b-llve10fjr4] {
    display: block;
    margin-bottom: 0.5rem;
    color: #991b1b;
    font-size: 0.95rem;
}

.warning-content p[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: #b91c1c;
    line-height: 1.4;
}

.btn-enable-consent[b-llve10fjr4] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-enable-consent:hover[b-llve10fjr4] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Analytics Flow */
.analytics-flow[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

html.dark-mode .analytics-flow[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
}

.flow-step[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 200px;
}

html.dark-mode .flow-step[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.flow-number[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.flow-content strong[b-llve10fjr4] {
    display: block;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

html.dark-mode .flow-content strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

.flow-content p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
}

html.dark-mode .flow-content p[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

.flow-arrow[b-llve10fjr4] {
    font-size: 1.25rem;
    color: #94a3b8;
    font-weight: 700;
}

html.dark-mode .flow-arrow[b-llve10fjr4] {
    color: var(--text-muted, #64748b);
}

/* Analytics Features */
.analytics-features[b-llve10fjr4] {
    padding: 1.25rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

html.dark-mode .analytics-features[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

.analytics-features h4[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

html.dark-mode .analytics-features h4[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

.feature-list[b-llve10fjr4] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.feature-list li[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
}

html.dark-mode .feature-list li[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

.feature-icon[b-llve10fjr4] {
    font-size: 1.1rem;
}

/* Setup Details */
.setup-details[b-llve10fjr4] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

html.dark-mode .setup-details[b-llve10fjr4] {
    border-color: var(--border-primary, #334155);
}

.setup-details summary[b-llve10fjr4] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    list-style: none;
}

html.dark-mode .setup-details summary[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

.setup-details summary[b-llve10fjr4]::-webkit-details-marker {
    display: none;
}

.setup-details[open] summary[b-llve10fjr4] {
    border-bottom: 1px solid #e2e8f0;
}

html.dark-mode .setup-details[open] summary[b-llve10fjr4] {
    border-bottom-color: var(--border-primary, #334155);
}

.setup-steps[b-llve10fjr4] {
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    counter-reset: step-counter;
}

.setup-steps li[b-llve10fjr4] {
    position: relative;
    padding-left: 0.5rem;
}

.setup-steps li strong[b-llve10fjr4] {
    display: block;
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

html.dark-mode .setup-steps li strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

.setup-steps li p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

html.dark-mode .setup-steps li p[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

.setup-steps a[b-llve10fjr4] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

html.dark-mode .setup-steps a[b-llve10fjr4] {
    color: #60a5fa;
}

.setup-steps a:hover[b-llve10fjr4] {
    text-decoration: underline;
}

/* Dark Mode Styles for AppSettings Split Action Group and Menu */

html.dark-mode .settings-header[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .settings-action-split[b-llve10fjr4] {
    border-color: var(--border-secondary, #475569);
    background: var(--bg-tertiary, #334155);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark-mode .settings-action-primary[b-llve10fjr4],
html.dark-mode .settings-action-toggle[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .settings-action-primary:hover:not(:disabled)[b-llve10fjr4],
html.dark-mode .settings-action-toggle:hover[b-llve10fjr4] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .settings-action-icon[b-llve10fjr4] {
    background: rgba(96, 165, 250, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
}

html.dark-mode .settings-action-hint[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .settings-action-toggle[b-llve10fjr4] {
    border-left-color: rgba(148, 163, 184, 0.2);
}

html.dark-mode .settings-action-menu[b-llve10fjr4] {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(71, 85, 105, 0.9);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark-mode .settings-action-menu[b-llve10fjr4]::before {
    border-color: rgba(71, 85, 105, 0.9);
}

html.dark-mode .settings-action-menu-item[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .settings-action-menu-item:hover:not(:disabled)[b-llve10fjr4],
html.dark-mode .settings-action-menu-item:focus-visible:not(:disabled)[b-llve10fjr4] {
    background: rgba(51, 65, 85, 0.88);
    border-color: rgba(96, 165, 250, 0.22);
}

html.dark-mode .settings-action-menu-icon[b-llve10fjr4] {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .settings-action-menu-title[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .settings-action-menu-description[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* Privacy Card */
.privacy-card[b-llve10fjr4] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.privacy-card h3[b-llve10fjr4] {
    margin: 0 0 1.25rem 0 !important;
    color: #166534;
}

.privacy-grid[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.privacy-item[b-llve10fjr4] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

.privacy-icon[b-llve10fjr4] {
    font-size: 1.1rem;
    color: #16a34a;
    font-weight: 700;
}

.privacy-item strong[b-llve10fjr4] {
    display: block;
    font-size: 0.875rem;
    color: #166534;
    margin-bottom: 0.25rem;
}

.privacy-item p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.8rem;
    color: #15803d;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-header-left[b-llve10fjr4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .analytics-flow[b-llve10fjr4] {
        flex-direction: column;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SEO TAB STYLES
   ════════════════════════════════════════════════════════════════════════════ */

.seo-header[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.seo-header h2[b-llve10fjr4] {
    margin: 0 0 0.25rem 0;
    padding: 0;
    border: none;
}

.seo-icon[b-llve10fjr4] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.seo-icon svg[b-llve10fjr4] {
    width: 24px;
    height: 24px;
}

/* Textarea smaller */
.textarea-sm[b-llve10fjr4] {
    min-height: 60px;
    resize: vertical;
}

/* Section helper text */
.section-help[b-llve10fjr4] {
    color: #64748b;
    font-size: 0.875rem;
    margin: -0.5rem 0 1rem 0;
}

/* Schema toggles */
.schema-toggles[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schema-toggle-item[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.toggle-info[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.toggle-info strong[b-llve10fjr4] {
    font-size: 0.9rem;
    color: #1e293b;
}

.toggle-info span[b-llve10fjr4] {
    font-size: 0.8rem;
    color: #64748b;
}

/* SEO Tips */
.seo-tips-card[b-llve10fjr4] {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #7dd3fc;
}

.tips-grid[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.tip-item[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: white;
    border-radius: 6px;
    font-size: 0.875rem;
}

.tip-item.tip-ok[b-llve10fjr4] {
    border: 1px solid #bbf7d0;
    color: #166534;
}

.tip-item.tip-warning[b-llve10fjr4] {
    border: 1px solid #fde68a;
    color: #92400e;
    background: #fffbeb;
}

.tip-icon[b-llve10fjr4] {
    font-size: 1rem;
}

/* SERP Preview */
.serp-preview[b-llve10fjr4] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    max-width: 600px;
    font-family: Arial, sans-serif;
}

.serp-title[b-llve10fjr4] {
    color: #1a0dab;
    font-size: 1.125rem;
    font-weight: normal;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serp-title:hover[b-llve10fjr4] {
    text-decoration: underline;
    cursor: pointer;
}

.serp-url[b-llve10fjr4] {
    color: #006621;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.serp-description[b-llve10fjr4] {
    color: #545454;
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive SEO */
@media (max-width: 768px) {
    .seo-header[b-llve10fjr4] {
        flex-direction: column;
    }

    .tips-grid[b-llve10fjr4] {
        grid-template-columns: 1fr;
    }
}


    .flow-step[b-llve10fjr4] {
        max-width: 100%;
        width: 100%;
    }

    .flow-arrow[b-llve10fjr4] {
        transform: rotate(90deg);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK TAB STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* Facebook Card */
.facebook-card[b-llve10fjr4] {
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
    border: 1px solid #dbe4ff;
}

.facebook-header-left[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.facebook-header-left h2[b-llve10fjr4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    border: none;
    padding: 0;
}

.facebook-header-left .card-description[b-llve10fjr4] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #64748b;
}

.facebook-logo-large[b-llve10fjr4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #e7f0ff 0%, #dbe4ff 100%);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.15);
}

.facebook-toggle-wrapper[b-llve10fjr4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Facebook Slider (blue variant) */
.toggle-switch input:checked + .toggle-slider.facebook-slider[b-llve10fjr4] {
    background: linear-gradient(135deg, #1877F2, #0d6efd);
}

/* Facebook Form */
.facebook-form[b-llve10fjr4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Facebook Status Box */
.facebook-status-box[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
}

.facebook-status-box.status-ready[b-llve10fjr4] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
}

.facebook-status-box.status-warning[b-llve10fjr4] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #eab308;
}

.facebook-status-box .status-icon[b-llve10fjr4] {
    font-size: 1.5rem;
    line-height: 1;
}

.facebook-status-box .status-text strong[b-llve10fjr4] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.facebook-status-box.status-ready .status-text strong[b-llve10fjr4] { color: #065f46; }
.facebook-status-box.status-warning .status-text strong[b-llve10fjr4] { color: #854d0e; }

.facebook-status-box .status-text p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.facebook-status-box.status-ready .status-text p[b-llve10fjr4] { color: #047857; }
.facebook-status-box.status-warning .status-text p[b-llve10fjr4] { color: #a16207; }

/* Facebook Warning Box */
.facebook-warning-box[b-llve10fjr4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 10px;
}

.facebook-warning-box .warning-icon[b-llve10fjr4] {
    font-size: 1.75rem;
    line-height: 1;
}

.facebook-warning-box .warning-content strong[b-llve10fjr4] {
    display: block;
    margin-bottom: 0.5rem;
    color: #991b1b;
    font-size: 0.9rem;
}

.facebook-warning-box .warning-content p[b-llve10fjr4] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: #b91c1c;
    line-height: 1.4;
}

/* Pixel Features */
.pixel-features[b-llve10fjr4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pixel-feature[b-llve10fjr4] {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.pixel-feature:hover[b-llve10fjr4] {
    border-color: #1877F2;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.1);
}

.pixel-feature .feature-icon[b-llve10fjr4] {
    font-size: 1.5rem;
    line-height: 1;
}

.pixel-feature strong[b-llve10fjr4] {
    display: block;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.pixel-feature p[b-llve10fjr4] {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.3;
}

/* Facebook OAuth Card */
.facebook-oauth-card[b-llve10fjr4] {
    border-left: 4px solid #1877F2;
}

/* Facebook Footer */
.facebook-footer[b-llve10fjr4] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.btn-save-facebook[b-llve10fjr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #1877F2, #0d6efd);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-facebook:hover:not(:disabled)[b-llve10fjr4] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.btn-save-facebook:disabled[b-llve10fjr4] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Facebook Privacy Card */
.facebook-privacy-card[b-llve10fjr4] {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
}

.facebook-privacy-card h3[b-llve10fjr4] {
    margin: 0 0 1rem 0 !important;
    color: #1e40af;
}

.facebook-privacy-card .info-list li[b-llve10fjr4] {
    color: #1e3a8a;
}

.facebook-privacy-card .info-list li[b-llve10fjr4]::before {
    color: #3b82f6;
}

.facebook-privacy-card .info-list li strong[b-llve10fjr4] {
    color: #1e40af;
}

/* Responsive */
@media (max-width: 768px) {
    .facebook-header-left[b-llve10fjr4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .pixel-features[b-llve10fjr4] {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

/* Settings Header */
html.dark-mode .settings-header[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

/* Category Bar dark mode → see admin-shared.css */

/* Tabs Section */
html.dark-mode .tabs-section[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .tab[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tab:hover:not(.active)[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tab.active[b-llve10fjr4] {
    background: var(--accent-primary, #60a5fa);
    color: #ffffff;
    border-color: var(--accent-primary, #60a5fa);
}

/* Content Area */
html.dark-mode .settings-content[b-llve10fjr4] {
    background: var(--bg-primary, #0f172a);
}

/* Settings Card */
html.dark-mode .settings-card[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .settings-card h2[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .settings-card h3[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .settings-card-header[b-llve10fjr4] {
    border-bottom-color: var(--border-primary, #334155);
}

/* Tables */
html.dark-mode .tbl[b-llve10fjr4],
html.dark-mode .model-prices-table[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .tbl thead[b-llve10fjr4],
html.dark-mode .model-prices-table thead[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-llve10fjr4],
html.dark-mode .model-prices-table th[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .tbl td[b-llve10fjr4],
html.dark-mode .model-prices-table td[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .tbl tbody tr:hover[b-llve10fjr4],
html.dark-mode .model-prices-table tbody tr:hover[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
}

/* Badges */
html.dark-mode .badge-success[b-llve10fjr4] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .badge-inactive[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-muted, #64748b);
}

html.dark-mode .sync-badge.success[b-llve10fjr4] {
    background: rgba(74, 222, 128, 0.15);
    color: #6ee7b7;
}

html.dark-mode .sync-badge.error[b-llve10fjr4] {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

/* Payment Fieldsets */
html.dark-mode .payment-fieldset[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .payment-fieldset.enabled[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .payment-fieldset legend[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

/* Service Cards */
html.dark-mode .service-card[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .service-card.healthy[b-llve10fjr4] {
    border-color: rgba(74, 222, 128, 0.3);
}

html.dark-mode .service-card.unhealthy[b-llve10fjr4] {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.1);
}

html.dark-mode .service-name[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .detail-label[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .detail-value[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
    text-align: right;
    word-break: break-word;
}


    border-bottom-color: var(--border-primary, #334155);[b-llve10fjr4]
}

html.dark-mode .status-badge.status-ok[b-llve10fjr4] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .status-badge.status-error[b-llve10fjr4] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* Form Elements */
html.dark-mode .settings-form .help[b-llve10fjr4],
html.dark-mode .card-description[b-llve10fjr4],
html.dark-mode .section-help[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .checkbox-label[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .checkbox-help[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* Toggle Switch */
html.dark-mode .toggle-slider[b-llve10fjr4] {
    background-color: var(--bg-hover, #475569);
}

html.dark-mode .toggle-label[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* OAuth Cards */
html.dark-mode .oauth-card[b-llve10fjr4],
html.dark-mode .analytics-card[b-llve10fjr4],
html.dark-mode .facebook-card[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

/* Logo containers - transparent in dark mode (no visible box) */
html.dark-mode .oauth-logo[b-llve10fjr4],
html.dark-mode .analytics-logo[b-llve10fjr4],
html.dark-mode .facebook-logo[b-llve10fjr4],
html.dark-mode .facebook-logo-large[b-llve10fjr4] {
    background: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

html.dark-mode .oauth-header-left h2[b-llve10fjr4],
html.dark-mode .analytics-header-left h2[b-llve10fjr4],
html.dark-mode .facebook-header-left h2[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

/* OAuth Form */
html.dark-mode .toggle-visibility-btn[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .toggle-visibility-btn:hover[b-llve10fjr4] {
    background: var(--bg-hover, #475569);
}

/* Callback Box */
html.dark-mode .oauth-callback-box[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.15) 100%);
    border-color: rgba(96, 165, 250, 0.3);
}

html.dark-mode .oauth-callback-box h4[b-llve10fjr4] {
    color: #60a5fa;
}

html.dark-mode .callback-desc[b-llve10fjr4] {
    color: #93c5fd;
}

html.dark-mode .callback-url[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: #93c5fd;
}

/* Instructions */
html.dark-mode .oauth-instructions[b-llve10fjr4],
html.dark-mode .oauth-instructions-details[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .oauth-instructions h4[b-llve10fjr4],
html.dark-mode .oauth-instructions-details summary[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
    background: transparent !important;
}

html.dark-mode .oauth-instructions li[b-llve10fjr4],
html.dark-mode .oauth-instructions-list li[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Footer */
html.dark-mode .oauth-footer[b-llve10fjr4],
html.dark-mode .facebook-footer[b-llve10fjr4] {
    border-top-color: var(--border-primary, #334155);
}

/* Version Info */
html.dark-mode .version-info[b-llve10fjr4] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .version-info h3[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .version-label[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .version-value[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

/* Status Footer */
html.dark-mode .status-footer[b-llve10fjr4] {
    border-top-color: var(--border-primary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

/* Placeholder */
html.dark-mode .placeholder[b-llve10fjr4] {
    color: var(--text-muted, #64748b);
}

/* Divider */
html.dark-mode .settings-divider[b-llve10fjr4] {
    border-top-color: var(--border-primary, #334155);
}

/* Schema Toggle Items */
html.dark-mode .schema-toggle-item[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .toggle-info strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .toggle-info span[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* SERP Preview */
html.dark-mode .serp-preview[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .serp-title[b-llve10fjr4] {
    color: #93c5fd;
}

html.dark-mode .serp-url[b-llve10fjr4] {
    color: #4ade80;
}

html.dark-mode .serp-description[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

/* Analytics & Facebook Features */
html.dark-mode .analytics-features[b-llve10fjr4],
html.dark-mode .pixel-feature[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .analytics-features h4[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .feature-list li[b-llve10fjr4],
html.dark-mode .pixel-feature p[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .pixel-feature strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
}

/* Pixel features specific - make sure cards are dark */
html.dark-mode .pixel-features[b-llve10fjr4] {
    background: transparent !important;
}

html.dark-mode .pixel-feature:hover[b-llve10fjr4] {
    border-color: #1877F2 !important;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.2) !important;
}

/* Flow Steps */
html.dark-mode .analytics-flow[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .flow-step[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.3));
}

html.dark-mode .flow-content strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .flow-content p[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .flow-arrow[b-llve10fjr4] {
    color: var(--text-muted, #64748b);
}

/* Setup Details */
html.dark-mode .setup-details[b-llve10fjr4] {
    border-color: var(--border-primary, #334155);
}

html.dark-mode .setup-details summary[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .setup-details[open] summary[b-llve10fjr4] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .setup-steps li strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .setup-steps li p[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* ════════════════════════════════════════════════════════════════════════════
   ADDITIONAL DARK MODE - Facebook, Analytics, OAuth Status Boxes
   ════════════════════════════════════════════════════════════════════════════ */

/* Facebook status boxes */
html.dark-mode .facebook-status-box.status-ready[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .facebook-status-box.status-ready .status-text strong[b-llve10fjr4] {
    color: #4ade80 !important;
}

html.dark-mode .facebook-status-box.status-ready .status-text p[b-llve10fjr4] {
    color: #86efac !important;
}

html.dark-mode .facebook-status-box.status-warning[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .facebook-status-box.status-warning .status-text strong[b-llve10fjr4] {
    color: #fbbf24 !important;
}

html.dark-mode .facebook-status-box.status-warning .status-text p[b-llve10fjr4] {
    color: #fcd34d !important;
}

/* Analytics status boxes */
html.dark-mode .analytics-status-box.status-ready[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .analytics-status-box.status-ready .status-text strong[b-llve10fjr4] {
    color: #4ade80 !important;
}

html.dark-mode .analytics-status-box.status-ready .status-text p[b-llve10fjr4] {
    color: #86efac !important;
}

html.dark-mode .analytics-status-box.status-warning[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .analytics-status-box.status-warning .status-text strong[b-llve10fjr4] {
    color: #fbbf24 !important;
}

html.dark-mode .analytics-status-box.status-warning .status-text p[b-llve10fjr4] {
    color: #fcd34d !important;
}

/* Warning boxes */
html.dark-mode .facebook-warning-box[b-llve10fjr4],
html.dark-mode .analytics-warning-box[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .facebook-warning-box .warning-content strong[b-llve10fjr4],
html.dark-mode .analytics-warning-box .warning-content strong[b-llve10fjr4] {
    color: #f87171 !important;
}

html.dark-mode .facebook-warning-box .warning-content p[b-llve10fjr4],
html.dark-mode .analytics-warning-box .warning-content p[b-llve10fjr4] {
    color: #fca5a5 !important;
}

/* Privacy and info cards */
html.dark-mode .privacy-card[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .privacy-card h3[b-llve10fjr4] {
    color: #4ade80 !important;
}

html.dark-mode .privacy-item[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .privacy-item strong[b-llve10fjr4] {
    color: #86efac !important;
}

html.dark-mode .privacy-item p[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .facebook-privacy-card[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .facebook-privacy-card h3[b-llve10fjr4] {
    color: #60a5fa !important;
}

html.dark-mode .facebook-privacy-card .info-list li[b-llve10fjr4] {
    color: #93c5fd !important;
}

/* OAuth info card */
html.dark-mode .oauth-info-card[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .oauth-info-card h3[b-llve10fjr4] {
    color: #fbbf24 !important;
}

html.dark-mode .info-list li[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .info-list li strong[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
}

/* SEO tips card */
html.dark-mode .seo-tips-card[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .tips-grid .tip-item[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .tips-grid .tip-item.tip-ok[b-llve10fjr4] {
    border-color: rgba(74, 222, 128, 0.3) !important;
    color: #4ade80 !important;
}

html.dark-mode .tips-grid .tip-item.tip-warning[b-llve10fjr4] {
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   INFO BOXES - Yellow and Blue tip boxes in Algemeen tab
   ════════════════════════════════════════════════════════════════════════════ */

/* Settings sections with brand color background */
html.dark-mode .abandoned-cart-settings[b-llve10fjr4],
html.dark-mode .verification-reminder-settings[b-llve10fjr4],
html.dark-mode .gift-option-info[b-llve10fjr4],
html.dark-mode .cookie-consent-info[b-llve10fjr4],
html.dark-mode [style*="background: color-mix"][b-llve10fjr4],
html.dark-mode [style*="background: linear-gradient(135deg, #fef7f0"][b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .abandoned-cart-settings h3[b-llve10fjr4],
html.dark-mode .verification-reminder-settings h3[b-llve10fjr4],
html.dark-mode .gift-option-info h3[b-llve10fjr4],
html.dark-mode .cookie-consent-info h3[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .abandoned-cart-settings ul[b-llve10fjr4],
html.dark-mode .verification-reminder-settings ul[b-llve10fjr4],
html.dark-mode .gift-option-info ul[b-llve10fjr4],
html.dark-mode .cookie-consent-info ul[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .abandoned-cart-settings li[b-llve10fjr4],
html.dark-mode .verification-reminder-settings li[b-llve10fjr4],
html.dark-mode .gift-option-info li[b-llve10fjr4],
html.dark-mode .cookie-consent-info li[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .gift-option-info li strong[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GOOGLE TAB - DARK MODE FIXES
   Stijlvolle en leesbare dark mode voor OAuth/Google instellingen
   ════════════════════════════════════════════════════════════════════════════ */

/* OAuth Header Description - fix readability */
html.dark-mode .oauth-header-left .card-description[b-llve10fjr4],
html.dark-mode .analytics-header-left .card-description[b-llve10fjr4],
html.dark-mode .facebook-header-left .card-description[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* OAuth Form Help Text */
html.dark-mode .oauth-form .help[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* Input Warning State - dark mode */
html.dark-mode .oauth-form .input.input-warning[b-llve10fjr4] {
    border-color: #d97706;
    background-color: rgba(251, 191, 36, 0.1);
}

/* OAuth Callback Box - improved dark mode */
html.dark-mode .oauth-callback-box[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

html.dark-mode .oauth-callback-box h4[b-llve10fjr4] {
    color: #93c5fd !important;
}

html.dark-mode .callback-desc[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .callback-url[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: #93c5fd !important;
}

/* Copy Button - consistent in dark mode */
html.dark-mode .copy-btn[b-llve10fjr4] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

html.dark-mode .copy-btn:hover[b-llve10fjr4] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* OAuth Instructions Details */
html.dark-mode .oauth-instructions-details[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .oauth-instructions-details summary[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
    background: transparent !important;
    cursor: pointer;
}

html.dark-mode .oauth-instructions-details[open] summary[b-llve10fjr4] {
    border-bottom: 1px solid var(--border-primary, #334155) !important;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
}

html.dark-mode .oauth-instructions-list[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
    background: transparent !important;
}

html.dark-mode .oauth-instructions-list li[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .oauth-instructions-list a[b-llve10fjr4] {
    color: #60a5fa !important;
}

html.dark-mode .oauth-instructions-list a:hover[b-llve10fjr4] {
    color: #93c5fd !important;
}

/* Secret Input Group */
html.dark-mode .secret-input-group .toggle-visibility-btn[b-llve10fjr4] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .secret-input-group .toggle-visibility-btn:hover[b-llve10fjr4] {
    background: var(--bg-hover, #475569);
}

/* OAuth Message Boxes */
html.dark-mode .oauth-message.success[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

html.dark-mode .oauth-message.error[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/* OAuth Loading State */
html.dark-mode .oauth-loading[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

/* Save OAuth Button */
html.dark-mode .btn-save-oauth[b-llve10fjr4] {
    background: linear-gradient(135deg, #10b981, #059669);
}

html.dark-mode .btn-save-oauth:hover:not(:disabled)[b-llve10fjr4] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* ════════════════════════════════════════════════════════════════════════════
   SERVICE STATUS TAB - DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

/* Service Grid */
html.dark-mode .service-grid[b-llve10fjr4] {
    background: transparent;
}

/* Service Cards */
html.dark-mode .service-card[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .service-card.healthy[b-llve10fjr4] {
    border-color: rgba(74, 222, 128, 0.3);
}

html.dark-mode .service-card.unhealthy[b-llve10fjr4] {
    border-color: rgba(248, 113, 113, 0.3);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

/* Service Header - transparent background */
html.dark-mode .service-header[b-llve10fjr4] {
    background: transparent !important;
}

/* Service Name */
html.dark-mode .service-name[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9);
}

/* Service Status Badge */
html.dark-mode .status-badge.status-ok[b-llve10fjr4] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .status-badge.status-error[b-llve10fjr4] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* Service Details */
html.dark-mode .service-details[b-llve10fjr4] {
    background: transparent;
}

html.dark-mode .service-detail[b-llve10fjr4] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .detail-label[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .detail-value[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
    text-align: right;
    word-break: break-word;
}

html.dark-mode .service-detail.error .detail-value[b-llve10fjr4] {
    color: #f87171;
}

/* Version Info */
html.dark-mode .version-info[b-llve10fjr4] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .version-info h3[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .version-grid[b-llve10fjr4] {
    background: transparent;
}

html.dark-mode .version-label[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .version-value[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .version-build[b-llve10fjr4] {
    color: var(--text-muted, #64748b);
}

/* ════════════════════════════════════════════════════════════════════════════
   PAYMENT METHODS TAB - DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

/* Payment Fieldsets - styled containers for Mollie/PayPal */
html.dark-mode .payment-fieldset[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .payment-fieldset.enabled[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-secondary, #475569) !important;
}

html.dark-mode .payment-fieldset legend[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .payment-disabled-text[b-llve10fjr4] {
    color: var(--text-muted, #64748b) !important;
}

/* Payment fieldset text and labels */
html.dark-mode .payment-fieldset .checkbox-label[b-llve10fjr4],
html.dark-mode .payment-fieldset .checkbox-label span[b-llve10fjr4] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .payment-fieldset .checkbox-help[b-llve10fjr4] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .payment-fieldset label[b-llve10fjr4] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .payment-fieldset .row-2[b-llve10fjr4] {
    background: transparent !important;
}

/* Validation Message */
html.dark-mode .validation-message[b-llve10fjr4] {
    background: rgba(248, 113, 113, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #f87171 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CLEANY TAB - DARK MODE FIXES
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .warning-banner[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

html.dark-mode .info-banner[b-llve10fjr4] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

html.dark-mode .cleanup-logs-table[b-llve10fjr4] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .row-error[b-llve10fjr4] {
    background: rgba(248, 113, 113, 0.1);
}

/* ── Import Label ──────────────────────────────────────────────────────────── */
.import-label[b-llve10fjr4] {
    cursor: pointer;
}

/* ── Import Confirmation Modal ─────────────────────────────────────────────── */
.modal-overlay[b-llve10fjr4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-llve10fjr4 0.15s ease;
}

.modal-content[b-llve10fjr4] {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn-b-llve10fjr4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   ✨ MAKE-OVER LAYER (2026) — Modern, full-width, responsive, themed
   Scoped via Blazor CSS isolation → overrides admin-shared without risk.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page-level local tokens (set on elements — Blazor scoped CSS
       rewrites :root/html/body selectors so we attach vars where used). ── */
.settings-header[b-llve10fjr4],
.category-bar[b-llve10fjr4],
.category-btn[b-llve10fjr4],
.tabs-section[b-llve10fjr4],
.tabs[b-llve10fjr4],
.tab[b-llve10fjr4],
.settings-content[b-llve10fjr4],
.settings-form[b-llve10fjr4],
.settings-card[b-llve10fjr4],
.settings-action-split[b-llve10fjr4],
.settings-action-primary[b-llve10fjr4],
.settings-action-toggle[b-llve10fjr4],
.settings-action-icon[b-llve10fjr4] {
    --as-radius-lg: 18px;
    --as-radius-md: 12px;
    --as-radius-sm: 10px;
    --as-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --as-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 38px rgba(15, 23, 42, 0.10);
    --as-grad-accent: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #06b6d4 100%);
}

html.dark-mode .settings-header[b-llve10fjr4],
html.dark-mode .category-bar[b-llve10fjr4],
html.dark-mode .category-btn[b-llve10fjr4],
html.dark-mode .tabs-section[b-llve10fjr4],
html.dark-mode .tabs[b-llve10fjr4],
html.dark-mode .tab[b-llve10fjr4],
html.dark-mode .settings-content[b-llve10fjr4],
html.dark-mode .settings-form[b-llve10fjr4],
html.dark-mode .settings-card[b-llve10fjr4],
html.dark-mode .settings-action-split[b-llve10fjr4],
html.dark-mode .settings-action-primary[b-llve10fjr4],
html.dark-mode .settings-action-toggle[b-llve10fjr4],
html.dark-mode .settings-action-icon[b-llve10fjr4] {
    --as-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --as-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 42px rgba(0, 0, 0, 0.5);
    --as-grad-accent: linear-gradient(135deg, #818cf8 0%, #60a5fa 50%, #22d3ee 100%);
}

/* ── Header refresh: gradient accent strip + refined type ────────────── */
.settings-header[b-llve10fjr4] {
    padding: 1.5rem 2.5rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    align-items: center;
    gap: 1.5rem;
}

.settings-header[b-llve10fjr4]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--as-grad-accent);
    opacity: 0.95;
}

html.dark-mode .settings-header[b-llve10fjr4] {
    background: linear-gradient(180deg, #0f172a 0%, #111c33 100%);
    border-bottom-color: rgba(51, 65, 85, 0.7);
}

.page-title[b-llve10fjr4] {
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    background: var(--as-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-subtitle[b-llve10fjr4] {
    font-size: 0.88rem;
}

/* ── Category Bar: pill-segment look with smooth elevation ───────────── */
.category-bar[b-llve10fjr4] {
    gap: 0.25rem;
    padding: 0.5rem 2.5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

html.dark-mode .category-bar[b-llve10fjr4] {
    background: linear-gradient(180deg, #0f172a 0%, #0b1326 100%);
    border-bottom-color: rgba(51, 65, 85, 0.7);
}

.category-btn[b-llve10fjr4] {
    position: relative;
    padding: 0.85rem 1.15rem 0.95rem;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #64748b;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.category-btn[b-llve10fjr4]::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background 0.2s ease, left 0.2s ease, right 0.2s ease;
}

.category-btn:hover:not(.active)[b-llve10fjr4] {
    color: #1e293b;
    background: rgba(148, 163, 184, 0.10);
}

.category-btn.active[b-llve10fjr4] {
    color: #4f46e5;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0));
}

.category-btn.active[b-llve10fjr4]::after {
    background: var(--as-grad-accent);
    left: 8%;
    right: 8%;
}

html.dark-mode .category-btn[b-llve10fjr4] { color: #94a3b8; }
html.dark-mode .category-btn:hover:not(.active)[b-llve10fjr4] {
    color: #f1f5f9;
    background: rgba(148, 163, 184, 0.10);
}
html.dark-mode .category-btn.active[b-llve10fjr4] {
    color: #a5b4fc;
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.14), rgba(129, 140, 248, 0));
}

.category-icon[b-llve10fjr4] {
    font-size: 1.05rem;
    filter: saturate(1.1);
}

/* ── Sub-tabs: modern segmented control ──────────────────────────────── */
.tabs-section[b-llve10fjr4] {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding: 1rem 2.5rem 1rem;
}

html.dark-mode .tabs-section[b-llve10fjr4] {
    background: transparent;
    border-bottom-color: rgba(51, 65, 85, 0.5);
}

.tabs[b-llve10fjr4] {
    gap: 0.35rem;
    padding: 0.3rem;
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    width: fit-content;
    max-width: 100%;
}

html.dark-mode .tabs[b-llve10fjr4] {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(51, 65, 85, 0.6);
}

.tab[b-llve10fjr4] {
    padding: 0.55rem 1.1rem;
    border: 0;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    border-radius: 9px;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tab:hover:not(.active)[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.7);
    color: #1e293b;
    border-color: transparent;
}

.tab.active[b-llve10fjr4] {
    background: var(--as-grad-accent);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

html.dark-mode .tab[b-llve10fjr4] { color: #94a3b8; }
html.dark-mode .tab:hover:not(.active)[b-llve10fjr4] {
    background: rgba(51, 65, 85, 0.55);
    color: #f1f5f9;
    border-color: transparent;
}
html.dark-mode .tab.active[b-llve10fjr4] {
    background: var(--as-grad-accent);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(96, 165, 250, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ── Content area: USE FULL WIDTH ────────────────────────────────────── */
.settings-content[b-llve10fjr4] {
    padding: 1.75rem 2.5rem 3rem;
    background: #f8fafc;
}

html.dark-mode .settings-content[b-llve10fjr4] {
    background: #0b1326;
}

/* Override admin-shared.css max-width: 800px → use the full canvas */
.settings-form[b-llve10fjr4] {
    max-width: none;
    gap: 1.25rem;
}

/* ── Cards: refined surface, soft elevation, subtle hover lift ───────── */
.settings-card[b-llve10fjr4] {
    position: relative;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: var(--as-radius-lg);
    padding: 1.5rem 1.75rem;
    background: #ffffff;
    box-shadow: var(--as-shadow-card);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.settings-card:hover[b-llve10fjr4] {
    box-shadow: var(--as-shadow-card-hover);
    border-color: rgba(203, 213, 225, 0.95);
}

.settings-card:not(.oauth-card)[b-llve10fjr4]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--as-radius-lg) var(--as-radius-lg) 0 0;
    background: var(--as-grad-accent);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.settings-card:not(.oauth-card):hover[b-llve10fjr4]::before { opacity: 0.85; }

.settings-card h2[b-llve10fjr4] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
    padding-bottom: 0.85rem;
    margin-bottom: 1.25rem;
}

.settings-card h3[b-llve10fjr4] {
    font-size: 0.95rem;
    color: #334155;
    letter-spacing: -0.005em;
}

html.dark-mode .settings-card[b-llve10fjr4] {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(22, 32, 53, 0.85) 100%);
    border-color: rgba(51, 65, 85, 0.7);
}

html.dark-mode .settings-card:hover[b-llve10fjr4] {
    border-color: rgba(71, 85, 105, 0.85);
}

html.dark-mode .settings-card h2[b-llve10fjr4] {
    color: #f8fafc;
    border-bottom-color: rgba(51, 65, 85, 0.65);
}

html.dark-mode .settings-card h3[b-llve10fjr4] { color: #cbd5e1; }

/* ── Form grids: use full width when room is available ───────────────── */
@media (min-width: 1280px) {
    .settings-form .row-2[b-llve10fjr4] {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
        gap: 1.5rem 2.5rem;
    }
    .settings-form .row-3[b-llve10fjr4] {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        gap: 1.5rem 2.25rem;
    }
}

@media (min-width: 1600px) {
    .settings-content[b-llve10fjr4] { padding: 1.75rem 3rem 3rem; }
    .settings-card[b-llve10fjr4] { padding: 1.75rem 2rem; }
}

/* On very wide screens, allow side-by-side card pairs for visual balance */
@media (min-width: 1500px) {
    .settings-form[b-llve10fjr4] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

/* ── Inputs & textareas: refined focus ring, gentler borders ─────────── */
.settings-content input.input[b-llve10fjr4],
.settings-content textarea.textarea[b-llve10fjr4],
.settings-content select.input[b-llve10fjr4] {
    border-radius: var(--as-radius-sm);
    border: 1px solid rgba(203, 213, 225, 0.85);
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-content input.input:hover:not(:focus)[b-llve10fjr4],
.settings-content textarea.textarea:hover:not(:focus)[b-llve10fjr4],
.settings-content select.input:hover:not(:focus)[b-llve10fjr4] {
    border-color: #94a3b8;
}

.settings-content input.input:focus[b-llve10fjr4],
.settings-content textarea.textarea:focus[b-llve10fjr4],
.settings-content select.input:focus[b-llve10fjr4] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

html.dark-mode .settings-content input.input[b-llve10fjr4],
html.dark-mode .settings-content textarea.textarea[b-llve10fjr4],
html.dark-mode .settings-content select.input[b-llve10fjr4] {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(71, 85, 105, 0.75);
    color: #f1f5f9;
}

html.dark-mode .settings-content input.input:hover:not(:focus)[b-llve10fjr4],
html.dark-mode .settings-content textarea.textarea:hover:not(:focus)[b-llve10fjr4],
html.dark-mode .settings-content select.input:hover:not(:focus)[b-llve10fjr4] {
    border-color: #64748b;
}

html.dark-mode .settings-content input.input:focus[b-llve10fjr4],
html.dark-mode .settings-content textarea.textarea:focus[b-llve10fjr4],
html.dark-mode .settings-content select.input:focus[b-llve10fjr4] {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.22);
    background: rgba(15, 23, 42, 0.85);
}

/* ── Checkboxes: nicer hit-area, accent color ────────────────────────── */
.checkbox-label[b-llve10fjr4] {
    padding: 0.5rem 0.65rem;
    margin: -0.5rem -0.65rem 0;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.checkbox-label:hover[b-llve10fjr4] {
    background: rgba(99, 102, 241, 0.06);
}

.checkbox-label input[type="checkbox"][b-llve10fjr4] {
    accent-color: #6366f1;
    width: 18px;
    height: 18px;
}

html.dark-mode .checkbox-label:hover[b-llve10fjr4] {
    background: rgba(129, 140, 248, 0.10);
}

html.dark-mode .checkbox-label input[type="checkbox"][b-llve10fjr4] {
    accent-color: #818cf8;
}

/* ── Help text: lighter weight, better contrast ──────────────────────── */
.settings-form .help[b-llve10fjr4],
.checkbox-help[b-llve10fjr4],
.card-description[b-llve10fjr4] {
    color: #64748b;
    line-height: 1.5;
}

html.dark-mode .settings-form .help[b-llve10fjr4],
html.dark-mode .checkbox-help[b-llve10fjr4],
html.dark-mode .card-description[b-llve10fjr4] {
    color: #94a3b8;
}

/* ── Divider: subtler ────────────────────────────────────────────────── */
.settings-divider[b-llve10fjr4] {
    border-top-color: rgba(226, 232, 240, 0.7);
    margin: 1.75rem 0;
}

html.dark-mode .settings-divider[b-llve10fjr4] {
    border-top-color: rgba(51, 65, 85, 0.6);
}

/* ── Save button: make it more inviting ──────────────────────────────── */
.settings-action-split[b-llve10fjr4] {
    border-color: transparent;
    background: var(--as-grad-accent);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.28), 0 1px 2px rgba(15, 23, 42, 0.08);
}

.settings-action-split .settings-action-primary[b-llve10fjr4],
.settings-action-split .settings-action-toggle[b-llve10fjr4] {
    background: transparent;
    color: #ffffff;
}

.settings-action-split .settings-action-primary:hover:not(:disabled)[b-llve10fjr4],
.settings-action-split .settings-action-toggle:hover[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.settings-action-split .settings-action-icon[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

html.dark-mode .settings-action-split[b-llve10fjr4] {
    box-shadow: 0 10px 28px rgba(96, 165, 250, 0.30), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Responsive polish ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .settings-header[b-llve10fjr4] { padding: 1.25rem 1.75rem; }
    .category-bar[b-llve10fjr4] { padding: 0.5rem 1.75rem 0; }
    .tabs-section[b-llve10fjr4] { padding: 0.85rem 1.75rem; }
    .settings-content[b-llve10fjr4] { padding: 1.5rem 1.75rem 2.5rem; }
}

@media (max-width: 720px) {
    .page-title[b-llve10fjr4] { font-size: 1.35rem; }
    .settings-card[b-llve10fjr4] { padding: 1.25rem 1.1rem; border-radius: 14px; }
    .settings-card h2[b-llve10fjr4] { font-size: 0.98rem; }
    .tabs-section[b-llve10fjr4] { padding: 0.75rem 1.25rem; }
    .tabs[b-llve10fjr4] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .tabs[b-llve10fjr4]::-webkit-scrollbar { display: none; }
    .tab[b-llve10fjr4] { white-space: nowrap; }
    .settings-content[b-llve10fjr4] { padding: 1.25rem 1rem 2.5rem; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .settings-card[b-llve10fjr4],
    .settings-card[b-llve10fjr4]::before,
    .tab[b-llve10fjr4],
    .category-btn[b-llve10fjr4],
    .category-btn[b-llve10fjr4]::after,
    .settings-content input.input[b-llve10fjr4],
    .settings-content textarea.textarea[b-llve10fjr4] {
        transition: none !important;
    }
}

/* ── Color picker row: swatch + hex on one line ──────────────────────── */
.color-input-row[b-llve10fjr4] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
}

.color-input-row .color-input[b-llve10fjr4] {
    flex: 0 0 auto;
    width: 56px;
    min-width: 56px;
    height: 44px;
    padding: 4px;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.color-input-row .color-input:hover[b-llve10fjr4] {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);
    transform: translateY(-1px);
}

.color-input-row .color-input:focus[b-llve10fjr4],
.color-input-row .color-input:focus-visible[b-llve10fjr4] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

/* Normalize the native color swatch across browsers */
.color-input-row .color-input[b-llve10fjr4]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 6px;
}
.color-input-row .color-input[b-llve10fjr4]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}
.color-input-row .color-input[b-llve10fjr4]::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-input-row > .input:not(.color-input)[b-llve10fjr4] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

html.dark-mode .color-input-row .color-input[b-llve10fjr4] {
    background: #0f172a;
    border-color: rgba(51, 65, 85, 0.75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.dark-mode .color-input-row .color-input:hover[b-llve10fjr4] {
    border-color: rgba(129, 140, 248, 0.65);
    box-shadow: 0 2px 10px rgba(129, 140, 248, 0.25);
}

html.dark-mode .color-input-row .color-input:focus[b-llve10fjr4],
html.dark-mode .color-input-row .color-input:focus-visible[b-llve10fjr4] {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.28);
}


/* Fallback mode segmented switcher */
.settings-form .segmented[b-llve10fjr4] {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 999px;
    padding: 3px;
    background: var(--surface-2, #f3f4f6);
}
.settings-form .segmented-btn[b-llve10fjr4] {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.settings-form .segmented-btn:hover[b-llve10fjr4] { background: rgba(0,0,0,0.04); }
.settings-form .segmented-btn.active[b-llve10fjr4] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* Fallback mode segmented - dark mode */
html.dark-mode .settings-form .segmented[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}
html.dark-mode .settings-form .segmented-btn[b-llve10fjr4] {
    color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .settings-form .segmented-btn:hover:not(.active)[b-llve10fjr4] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
html.dark-mode .settings-form .segmented-btn.active[b-llve10fjr4] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.45);
}
/* /Components/Pages/Admin/BoekstijlTester.razor.rz.scp.css */
.style-tester-page[b-reuql1cgg5] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 32px 56px;
    color: #17233f;
}

.style-tester-page .page-header[b-reuql1cgg5] {
    align-items: flex-end;
    border-bottom: 1px solid #e6eaf2;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.style-tester-page .page-title[b-reuql1cgg5] { margin: 8px 0 4px; }
.style-tester-page .header-subtitle[b-reuql1cgg5] { color: #71809d; }
.style-tester-page label[b-reuql1cgg5] { display: block; margin: 16px 0 7px; color: #33415f; font-size: .82rem; font-weight: 700; }
.style-tester-page select[b-reuql1cgg5],
.style-tester-page textarea[b-reuql1cgg5],
.style-tester-page input[type=file][b-reuql1cgg5] {
    width: 100%;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    background: #fff;
    color: #24324f;
    box-sizing: border-box;
}
.style-tester-page select[b-reuql1cgg5] { min-height: 42px; padding: 0 12px; }
.style-tester-page textarea[b-reuql1cgg5] { min-height: 180px; padding: 13px 14px; line-height: 1.5; resize: vertical; }
.style-tester-page input[type=file][b-reuql1cgg5] { padding: 8px; }
.style-tester-page select:focus[b-reuql1cgg5],
.style-tester-page textarea:focus[b-reuql1cgg5] { border-color: #6c63ff; box-shadow: 0 0 0 3px rgba(108,99,255,.12); outline: none; }

.tester-intro[b-reuql1cgg5] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin: 0 0 20px;
    padding: 22px 26px;
    border: 1px solid #e4e8f1;
    border-radius: 16px;
    background: linear-gradient(120deg, #f7f7ff, #f8fbff);
}
.tester-intro h2[b-reuql1cgg5] { margin: 5px 0 4px; font-size: 1.2rem; }
.tester-intro p[b-reuql1cgg5] { margin: 0; color: #71809d; }
.eyebrow[b-reuql1cgg5] { color: #6c63ff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.tester-status-pill[b-reuql1cgg5] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 13px; border-radius: 999px; background: #fff3d9; color: #8a6417; font-size: .78rem; font-weight: 700; }
.tester-status-pill.is-ready[b-reuql1cgg5] { background: #e4f8ed; color: #187449; }
.status-dot[b-reuql1cgg5] { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.style-tester-grid[b-reuql1cgg5] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: start; }
.content-card[b-reuql1cgg5] { min-width: 0; padding: 24px; border: 1px solid #e1e6f0; border-radius: 16px; background: #fff; box-shadow: 0 5px 20px rgba(32,49,89,.05); }
.card-heading[b-reuql1cgg5] { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.card-heading h2[b-reuql1cgg5] { margin: 0; font-size: 1.15rem; }
.card-heading p[b-reuql1cgg5] { margin: 3px 0 0; color: #8490a8; font-size: .8rem; }
.step-number[b-reuql1cgg5] { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #ecebff; color: #655cf2; font-size: .75rem; font-weight: 800; }
.result-step[b-reuql1cgg5] { background: #e5f7ef; color: #21855a; }
.muted[b-reuql1cgg5] { color: #7c89a2; font-size: .78rem; line-height: 1.45; }
.tester-card .action-btn[b-reuql1cgg5] { width: 100%; justify-content: center; margin-top: 18px; }
.tester-defaults[b-reuql1cgg5] { display: grid; gap: 3px; margin-top: 15px; padding: 12px 14px; border-left: 3px solid #6c63ff; border-radius: 8px; background: #f7f7ff; color: #586680; font-size: .78rem; }
.tester-defaults strong[b-reuql1cgg5] { color: #303c5b; }

.result-frame[b-reuql1cgg5] { position: relative; display: grid; min-height: 460px; place-items: center; overflow: hidden; border: 1px dashed #cfd7e7; border-radius: 14px; background: repeating-conic-gradient(#f7f9fc 0 25%, #f1f4f9 0 50%) 50% / 24px 24px; }
.result-frame.has-result[b-reuql1cgg5] { border-style: solid; background: #f4f6fb; }
.result-frame img[b-reuql1cgg5] { display: block; width: 100%; height: 100%; max-height: 590px; object-fit: contain; }
.result-badge[b-reuql1cgg5] { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 999px; background: #e4f8ed; color: #187449; font-size: .72rem; font-weight: 800; }
.empty-result[b-reuql1cgg5], .processing-placeholder[b-reuql1cgg5] { display: grid; gap: 8px; max-width: 250px; text-align: center; color: #75839d; font-size: .82rem; }
.empty-result strong[b-reuql1cgg5], .processing-placeholder strong[b-reuql1cgg5] { color: #33415f; font-size: .95rem; }
.empty-result-icon[b-reuql1cgg5] { color: #9d95ff; font-size: 2.2rem; }
.processing-placeholder small[b-reuql1cgg5] { color: #a0a9ba; }
.placeholder-orbit[b-reuql1cgg5] { position: relative; width: 62px; height: 62px; margin: 0 auto 8px; border: 2px solid #dcd9ff; border-radius: 50%; animation: tester-spin-b-reuql1cgg5 2.2s linear infinite; }
.placeholder-orbit span[b-reuql1cgg5] { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #7067f5; }
.placeholder-orbit span:nth-child(1)[b-reuql1cgg5] { top: -5px; left: 25px; }
.placeholder-orbit span:nth-child(2)[b-reuql1cgg5] { right: -5px; bottom: 12px; background: #68c99b; }
.placeholder-orbit span:nth-child(3)[b-reuql1cgg5] { bottom: 2px; left: 8px; background: #f2b451; }
@keyframes tester-spin-b-reuql1cgg5 { to { transform: rotate(360deg); } }
.result-error[b-reuql1cgg5] { margin-top: 12px; padding: 11px 13px; border-radius: 9px; background: #fff0f0; color: #a03b47; font-size: .8rem; }
.page-test-card[b-reuql1cgg5] { grid-column: 1 / -1; }
.notice-box[b-reuql1cgg5] { margin-top: 16px; padding: 13px 15px; border-radius: 10px; background: #fff8e9; color: #85651d; font-size: .78rem; line-height: 1.45; }
.notice-box p[b-reuql1cgg5] { margin: 4px 0 0; }

@media (max-width: 850px) {
    .style-tester-page[b-reuql1cgg5] { padding: 20px 16px 42px; }
    .tester-intro[b-reuql1cgg5] { align-items: flex-start; flex-direction: column; }
    .style-tester-grid[b-reuql1cgg5] { grid-template-columns: 1fr; }
    .page-test-card[b-reuql1cgg5] { grid-column: auto; }
    .result-frame[b-reuql1cgg5] { min-height: 340px; }
}

/* Upload preview */
.upload-preview[b-reuql1cgg5] { margin: 0.5rem 0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; max-width: 200px; }
.upload-preview img[b-reuql1cgg5] { display: block; width: 100%; height: auto; }

/* Side-by-side compare */
.compare-grid[b-reuql1cgg5] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.compare-col[b-reuql1cgg5] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.compare-col img[b-reuql1cgg5] { width: 100%; height: auto; border-radius: 6px; border: 1px solid #e0e0e0; }
.compare-label[b-reuql1cgg5] { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }

/* Button spinner */
.btn-spinner[b-reuql1cgg5] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: btn-spin-b-reuql1cgg5 0.6s linear infinite; vertical-align: middle; }
@keyframes btn-spin-b-reuql1cgg5 { to { transform: rotate(360deg); } }
/* /Components/Pages/Admin/BookAssetsModal.razor.rz.scp.css */
.modal-backdrop[b-vhtin1cznh] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.asset-modal[b-vhtin1cznh] {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    width: min(900px, 95vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asset-modal-header[b-vhtin1cznh] {
    position: relative;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

    .asset-modal-header h2[b-vhtin1cznh] {
        margin: 0 0 .3rem;
        font-size: 1.35rem;
    }

.asset-subtitle[b-vhtin1cznh] {
    margin: 0;
    color: #64748b;
    font-size: .875rem;
}

.modal-close[b-vhtin1cznh] {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
    padding: .3rem;
}

    .modal-close:hover[b-vhtin1cznh] {
        color: #334155;
    }

.asset-modal-body[b-vhtin1cznh] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.asset-loading[b-vhtin1cznh] {
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
}

.asset-grid[b-vhtin1cznh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
}

.asset-card[b-vhtin1cznh] {
    border: 2px dashed #cbd5e1;
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

    .asset-card.has-image[b-vhtin1cznh] {
        border-style: solid;
        border-color: #3b82f6;
    }

    .asset-card:hover[b-vhtin1cznh] {
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }

.asset-preview[b-vhtin1cznh] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
}

    .asset-preview img[b-vhtin1cznh] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.asset-fallback[b-vhtin1cznh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
}

.fallback-icon[b-vhtin1cznh] {
    font-size: 2rem;
}

.fallback-text[b-vhtin1cznh] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.asset-info[b-vhtin1cznh] {
    padding: .75rem 1rem .4rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.asset-label[b-vhtin1cznh] {
    font-weight: 600;
    font-size: .9rem;
    color: #1e293b;
}

.asset-key[b-vhtin1cznh] {
    font-size: .75rem;
    color: #94a3b8;
    font-family: monospace;
}

.asset-file[b-vhtin1cznh] {
    font-size: .75rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-actions[b-vhtin1cznh] {
    padding: .6rem 1rem 1rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.upload-label[b-vhtin1cznh] {
    cursor: pointer;
}

.asset-modal-footer[b-vhtin1cznh] {
    padding: 1rem 2rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.asset-toast[b-vhtin1cznh] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #059669;
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 500;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: toast-in-b-vhtin1cznh .3s ease-out;
}

    .asset-toast.error[b-vhtin1cznh] {
        background: #dc2626;
    }

@keyframes toast-in-b-vhtin1cznh {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Dark mode ── */
html.dark-mode .asset-modal[b-vhtin1cznh] {
    background: #1e293b;
}

html.dark-mode .asset-modal-header[b-vhtin1cznh] {
    border-color: #334155;
}

html.dark-mode .asset-modal-header h2[b-vhtin1cznh] {
    color: #f1f5f9;
}

html.dark-mode .asset-subtitle[b-vhtin1cznh] {
    color: #94a3b8;
}

html.dark-mode .modal-close[b-vhtin1cznh] {
    color: #64748b;
}

    html.dark-mode .modal-close:hover[b-vhtin1cznh] {
        color: #e2e8f0;
    }

html.dark-mode .asset-card[b-vhtin1cznh] {
    border-color: #475569;
}

    html.dark-mode .asset-card.has-image[b-vhtin1cznh] {
        border-color: #3b82f6;
    }

html.dark-mode .asset-preview[b-vhtin1cznh] {
    background: #0f172a;
}

html.dark-mode .asset-fallback[b-vhtin1cznh] {
    color: #64748b;
}

html.dark-mode .asset-label[b-vhtin1cznh] {
    color: #f1f5f9;
}

html.dark-mode .asset-key[b-vhtin1cznh] {
    color: #64748b;
}

html.dark-mode .asset-file[b-vhtin1cznh] {
    color: #94a3b8;
}

html.dark-mode .asset-modal-footer[b-vhtin1cznh] {
    border-color: #334155;
}
/* /Components/Pages/Admin/BookBuilder.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   BOOK BUILDER - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
/* ── Full-page shell ──────────────────────────────────────────────────── */
.bb-page[b-kbr3m6kbmx] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.bb-topbar[b-kbr3m6kbmx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.bb-topbar-left[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}

.bb-topbar-title[b-kbr3m6kbmx] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}

.bb-topbar-center[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.bb-topbar-right[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

/* ── Title icon ───────────────────────────────────────────────────────── */
.bb-title-icon[b-kbr3m6kbmx] {
    color: #3b82f6;
    vertical-align: -0.15em;
}

/* ── Toolbar: grouped button system ─────────────────────────────────────────── */
.bb-toolbar-group[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
}

.bb-tool-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    position: relative;
}

.bb-tool-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #ffffff);
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.bb-tool-btn:active[b-kbr3m6kbmx] {
    transform: scale(0.97);
}

.bb-tool-label[b-kbr3m6kbmx] {
    pointer-events: none;
}

.bb-tool-chevron[b-kbr3m6kbmx] {
    transition: transform 0.2s ease;
    opacity: 0.5;
    margin-left: -0.1rem;
}

.bb-tool-chevron.open[b-kbr3m6kbmx] {
    transform: rotate(180deg);
}

/* ── Toolbar divider ────────────────────────────────────────────────────────── */
.bb-toolbar-divider[b-kbr3m6kbmx] {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.4rem;
    background: var(--border-primary, #e2e8f0);
    opacity: 0.6;
}

/* ── Toolbar spacer (push save to far right) ────────────────────────────────── */
.bb-toolbar-spacer[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0.5rem;
}

/* ── Dashboard nav button ───────────────────────────────────────────────────── */
.bb-tool-nav[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .bb-topbar-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

.bb-tool-nav:hover[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
}

/* ── Transfer dropdown ──────────────────────────────────────────────────────── */
.bb-toolbar-dropdown[b-kbr3m6kbmx] {
    position: relative;
}

.bb-dropdown-backdrop[b-kbr3m6kbmx] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.bb-dropdown-menu[b-kbr3m6kbmx] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
    z-index: 1000;
    animation: bbDropIn-b-kbr3m6kbmx 0.18s cubic-bezier(.4,0,.2,1);
}

@keyframes bbDropIn-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bb-dropdown-item[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #475569);
    font-size: 0.84rem;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.bb-dropdown-item:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.bb-dropdown-item:disabled[b-kbr3m6kbmx] {
    opacity: 0.45;
    cursor: not-allowed;
}

.bb-dropdown-separator[b-kbr3m6kbmx] {
    height: 1px;
    background: var(--border-primary, #e2e8f0);
    margin: 0.25rem 0.5rem;
}

/* ── Save button (elevated primary CTA) ─────────────────────────────────────── */
.bb-save-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    white-space: nowrap;
}

.bb-save-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.bb-save-btn:active:not(:disabled)[b-kbr3m6kbmx] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.25);
}

.bb-save-btn:disabled[b-kbr3m6kbmx] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Dark mode: toolbar ─────────────────────────────────────────────────────── */
html.dark-mode .bb-toolbar-group[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
}

html.dark-mode .bb-tool-btn[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .bb-tool-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-hover, #334155);
    color: var(--text-primary, #f1f5f9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

html.dark-mode .bb-toolbar-divider[b-kbr3m6kbmx] {
    background: var(--border-primary, #334155);
}

html.dark-mode .bb-tool-nav:hover[b-kbr3m6kbmx] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

html.dark-mode .bb-dropdown-menu[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #334155);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.15);
}

html.dark-mode .bb-dropdown-item[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .bb-dropdown-item:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .bb-dropdown-separator[b-kbr3m6kbmx] {
    background: var(--border-primary, #334155);
}

html.dark-mode .bb-save-btn[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

html.dark-mode .bb-save-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.3);
}

/* ── Header-actions override for toolbar layout ─────────────────────────────── */
.bb-topbar .header-actions[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    justify-content: flex-end;
    margin-left: 2rem;
}

/* ── Info Icon ──────────────────────────────────────────────────────────────── */
.bb-info-icon[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #94a3b8);
    font-size: .6rem;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}

.bb-info-icon:hover[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, .1);
}

/* ── SVG Button Icons ───────────────────────────────────────────────────────── */
.btn-svg-icon[b-kbr3m6kbmx] {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ── Save Check Animation ───────────────────────────────────────────────────── */
.bb-save-check[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.25rem;
    animation: bbSavePopIn-b-kbr3m6kbmx 0.4s cubic-bezier(.175, .885, .32, 1.275);
}

@keyframes bbSavePopIn-b-kbr3m6kbmx {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(0); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}



/* ── Modal Styles ───────────────────────────────────────────────────────────── */
.modal-backdrop[b-kbr3m6kbmx],
.txt-modal-overlay[b-kbr3m6kbmx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    animation: fadeIn 0.2s ease;
}

.pte-fullpage-overlay[b-kbr3m6kbmx] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pte-fullpage-overlay .pte-editor-panel[b-kbr3m6kbmx] {
    flex: 1;
}

/* ── Empty state (no pages) ─── */
.pte-empty-state[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary, #64748b);
    gap: 0.5rem;
}

.pte-empty-state .pte-empty-icon[b-kbr3m6kbmx] {
    font-size: 0;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 0.5rem;
}

.pte-empty-state h2[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.pte-empty-state p[b-kbr3m6kbmx] {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    max-width: 360px;
}

/* ── Loading state ──────────────────────────────────────── */

.pte-loading-state[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    color: var(--text-secondary, #64748b);
    animation: fadeIn .2s ease;
}

.pte-loading-visual[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}

.pte-loading-book[b-kbr3m6kbmx] {
    width: 64px;
    height: 64px;
    display: block;
    color: var(--text-tertiary, #94a3b8);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .06));
}

.pte-loading-line[b-kbr3m6kbmx] {
    fill: currentColor;
    opacity: 0;
    animation: pte-line-pulse-b-kbr3m6kbmx 1.6s ease-in-out infinite;
}

.pte-loading-line-1[b-kbr3m6kbmx] { animation-delay: 0s; }
.pte-loading-line-2[b-kbr3m6kbmx] { animation-delay: .12s; }
.pte-loading-line-3[b-kbr3m6kbmx] { animation-delay: .24s; }
.pte-loading-line-4[b-kbr3m6kbmx] { animation-delay: .36s; }
.pte-loading-line-5[b-kbr3m6kbmx] { animation-delay: .18s; }
.pte-loading-line-6[b-kbr3m6kbmx] { animation-delay: .30s; }
.pte-loading-line-7[b-kbr3m6kbmx] { animation-delay: .42s; }
.pte-loading-line-8[b-kbr3m6kbmx] { animation-delay: .54s; }

@keyframes pte-line-pulse-b-kbr3m6kbmx {
    0%, 100% { opacity: .18; }
    50% { opacity: .7; }
}

.pte-loading-label[b-kbr3m6kbmx] {
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    letter-spacing: .01em;
}



@keyframes slideIn-b-kbr3m6kbmx {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.editor-modal[b-kbr3m6kbmx],
.txt-modal[b-kbr3m6kbmx] {
    background: var(--bg-secondary, white);
    border-radius: 16px;
    width: 700px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    animation: slideIn-b-kbr3m6kbmx 0.25s ease;
    border: 1px solid var(--border-primary, #e2e8f0);
}

/* Txt-modal specific - needs padding since it uses inline styles */
.txt-modal[b-kbr3m6kbmx] {
    padding: 1.5rem 2rem;
}

.txt-modal h3[b-kbr3m6kbmx] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.txt-modal label[b-kbr3m6kbmx] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    margin-bottom: 0.375rem;
}

.txt-modal .input[b-kbr3m6kbmx],
.txt-modal input[b-kbr3m6kbmx],
.txt-modal select[b-kbr3m6kbmx] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    transition: all 0.2s ease;
}

.txt-modal .input:focus[b-kbr3m6kbmx],
.txt-modal input:focus[b-kbr3m6kbmx],
.txt-modal select:focus[b-kbr3m6kbmx] {
    outline: none;
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--bg-primary, white);
}

.txt-modal .muted[b-kbr3m6kbmx],
.txt-modal small[b-kbr3m6kbmx] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-top: 0.375rem;
}

.txt-modal-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

.txt-modal-actions .cta[b-kbr3m6kbmx] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.txt-modal-actions .cta.secondary[b-kbr3m6kbmx] {
    background: var(--bg-primary, white);
    border: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-secondary, #475569);
}

.txt-modal-actions .cta.secondary:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}

.txt-modal-actions .cta:not(.secondary)[b-kbr3m6kbmx] {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    color: white;
}

.txt-modal-actions .cta:not(.secondary):hover[b-kbr3m6kbmx] {
    background: #2563eb;
}

.modal-header[b-kbr3m6kbmx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.modal-header h3[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1e293b);
}

.modal-close[b-kbr3m6kbmx] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    padding: 0.25rem;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

.modal-close:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.modal-body[b-kbr3m6kbmx] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.modal-description[b-kbr3m6kbmx] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 0.9rem;
}


.modal-footer[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}


/* ── Character Grid (Modals) ────
.character-grid,
.indiv-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr;
    gap: 0.75rem 1rem;
    align-items: center;
}

.grid-header,
.indiv-grid-header {
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grid-role,
.indiv-role {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grid-role code,
.indiv-role code {
    background: var(--text-primary, #1e293b);
    color: var(--bg-secondary, #f1f5f9);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.grid-input,
.indiv-grid input.input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
}

.gender-options,
.indiv-gender {
    display: flex;
    gap: 1rem;
}

.gender-option,
.indiv-gender label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.muted {
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.8rem;
}


/* ── Character Selector ─────────────────────────────────────────────────────── */
.page-chars-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    flex-wrap: wrap;
}

.chars-label[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
    flex-shrink: 0;
}

.chars-selector[b-kbr3m6kbmx] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

.no-chars[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.85rem;
    font-style: italic;
}

.char-check[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    transition: all 0.2s;
}

.char-check:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}

.char-check input[type="checkbox"][b-kbr3m6kbmx] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.char-check span[b-kbr3m6kbmx] {
    margin: 0;
    line-height: 1;
}

/* ── Form Group (Acknowledgement checkbox) ──────────────────────────────────── */
.form-group[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

.form-group > label[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    width: fit-content;
}

.form-group > label input[type="checkbox"][b-kbr3m6kbmx] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #3b82f6;
}

.form-group > small[b-kbr3m6kbmx] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-left: 0;
    line-height: 1.4;
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.btn-spinner[b-kbr3m6kbmx] {
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-kbr3m6kbmx 0.8s linear infinite;
    margin-right: 0.35rem;
}

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

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

@media (max-width: 1100px) {
    .bb-layout[b-kbr3m6kbmx] {
        flex-direction: column;
        padding: 1rem 1.5rem;
    }

    .bb-sidebar[b-kbr3m6kbmx] {
        flex: 0 0 auto;
        max-height: none;
    }

    .page-list[b-kbr3m6kbmx] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-item[b-kbr3m6kbmx] {
        flex: 0 0 auto;
    }

    .spread-grid[b-kbr3m6kbmx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
.bb-topbar[b-kbr3m6kbmx] {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
}

.bb-topbar-center[b-kbr3m6kbmx] {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
}

.bb-tool-label[b-kbr3m6kbmx] { display: none; }

    .editor-modal[b-kbr3m6kbmx],
    .txt-modal[b-kbr3m6kbmx] {
        width: 95vw;
    }
}


/* -- Spread neighbor page images & text (used by WYSIWYG neighbor rendering) --- */
.sp-bg-img[b-kbr3m6kbmx],
.sp-overlay-img[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sp-overlay-img[b-kbr3m6kbmx] {
    z-index: 2;
}

/* ── Text blocks within spread pages ─── */
.sp-text[b-kbr3m6kbmx] {
    position: absolute;
    z-index: 1;
    line-height: 1.4;
    box-sizing: border-box;
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   WYSIWYG SPREAD CANVAS (neighbor page context + spine in editor)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Spread toggle in zoom bar ─── */
.pte-spread-toggle[b-kbr3m6kbmx] {
    margin-left: 0.25rem;
}

.pte-spread-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pte-spread-btn:hover:not(.active)[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
}

.pte-spread-btn.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
    border-color: var(--accent, #3b82f6);
}

/* ── Spread canvas container (flex: neighbor + spine + active) ─── */
.pte-spread-canvas[b-kbr3m6kbmx] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-primary, #cbd5e1);
    border-radius: 3px;
    overflow: visible;
}

/* ── Page navigation overlay (auto-hide on idle) ──────────────────────── */
/* Buttons live inside pte-scroller-wrap (outside the scrolling area) so
   they stay fixed while the canvas content scrolls freely.
   JS adds .pte-nav-visible on pointermove, removes it after 3 s idle. */

.pte-scroller-wrap[b-kbr3m6kbmx] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pte-scroller-wrap > .pte-canvas-scroller[b-kbr3m6kbmx] {
    flex: 1;
    min-height: 0;
}

.pte-page-nav[b-kbr3m6kbmx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, .55);
    color: white;
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .2s ease, background .15s ease;
}

.pte-nav-visible .pte-page-nav[b-kbr3m6kbmx] {
    opacity: 1;
    pointer-events: auto;
}

.pte-page-nav:hover[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(59, 130, 246, .4);
}

.pte-page-nav:active[b-kbr3m6kbmx] {
    transform: translateY(-50%) scale(.92);
}

.pte-page-nav-prev[b-kbr3m6kbmx] {
    left: 12px;
}

.pte-page-nav-next[b-kbr3m6kbmx] {
    right: 12px;
}

.pte-page-nav-indicator[b-kbr3m6kbmx] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.pte-nav-visible .pte-page-nav-indicator[b-kbr3m6kbmx] {
    opacity: 1;
}

/* ── Page-flip animation ─────────────────────────────────────────────── */
.pte-spread-canvas.pte-flip-forward[b-kbr3m6kbmx],
.pte-canvas.pte-flip-forward[b-kbr3m6kbmx] {
    animation: pteFlipForward-b-kbr3m6kbmx .42s cubic-bezier(.23, 1, .32, 1);
}

.pte-spread-canvas.pte-flip-backward[b-kbr3m6kbmx],
.pte-canvas.pte-flip-backward[b-kbr3m6kbmx] {
    animation: pteFlipBackward-b-kbr3m6kbmx .42s cubic-bezier(.23, 1, .32, 1);
}

@keyframes pteFlipForward-b-kbr3m6kbmx {
    0%   { opacity: .3; transform: translateX(5%) scale(.96) perspective(800px) rotateY(-4deg); }
    50%  { opacity: .85; }
    100% { opacity: 1; transform: translateX(0) scale(1) perspective(800px) rotateY(0deg); }
}

@keyframes pteFlipBackward-b-kbr3m6kbmx {
    0%   { opacity: .3; transform: translateX(-5%) scale(.96) perspective(800px) rotateY(4deg); }
    50%  { opacity: .85; }
    100% { opacity: 1; transform: translateX(0) scale(1) perspective(800px) rotateY(0deg); }
}

html.dark-mode .pte-page-nav[b-kbr3m6kbmx] {
    background: rgba(30, 41, 59, .7);
}

html.dark-mode .pte-page-nav:hover[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
}

/* ── Active page wrapper (holds the interactive pte-canvas) ─── */
.pte-spread-page[b-kbr3m6kbmx] {
    position: relative;
    overflow: visible;
    container-type: inline-size;
}

.pte-spread-page-active .pte-spread-active-canvas[b-kbr3m6kbmx] {
    width: 100% !important;
    position: relative;
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pte-spread-page-active .pte-spread-active-canvas:hover[b-kbr3m6kbmx] {
    border-color: transparent;
}

/* ── Passive page (clickable neighbor — switches on interact) ─── */
.pte-spread-page-passive[b-kbr3m6kbmx] {
    cursor: pointer;
    transition: opacity 0.2s, filter 0.2s;
    opacity: 1;
    filter: none;
}

.pte-spread-page-passive:hover[b-kbr3m6kbmx] {
    opacity: 1;
    filter: none;
}

.pte-spread-clickable-neighbor[b-kbr3m6kbmx] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    container-type: inline-size;
    background: #ffffff;
}

/* Clickable text blocks on neighbor page */
.pte-spread-nb-block[b-kbr3m6kbmx] {
    cursor: pointer;
    transition: outline 0.12s, background-color 0.12s;
    border-radius: 2px;
}

.pte-spread-nb-text[b-kbr3m6kbmx] {
    position: absolute;
    z-index: 1;
    line-height: 1.4;
    box-sizing: border-box;
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.pte-spread-nb-text-inner[b-kbr3m6kbmx] {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: visible;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.pte-spread-nb-block:hover[b-kbr3m6kbmx] {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
    background-color: rgba(59, 130, 246, 0.06);
}

.pte-spread-neighbor-blank[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8fafc);
    border: 2px dashed var(--border-primary, #e2e8f0);
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.8rem;
    font-style: italic;
}

.pte-spread-neighbor-badge[b-kbr3m6kbmx] {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/* ── Spine between active + neighbor ─── */
.pte-spread-spine[b-kbr3m6kbmx] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.05) 0%,
        rgba(15, 23, 42, 0.10) 30%,
        rgba(15, 23, 42, 0.16) 50%,
        rgba(15, 23, 42, 0.10) 70%,
        rgba(15, 23, 42, 0.05) 100%
    );
    z-index: 10;
    flex-shrink: 0;
}

.pte-spread-spine-line[b-kbr3m6kbmx] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        var(--accent, #3b82f6) 0,
        var(--accent, #3b82f6) 5px,
        transparent 5px,
        transparent 10px
    );
    opacity: 0.4;
}

.pte-spread-spine-label[b-kbr3m6kbmx] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary, #94a3b8);
    pointer-events: none;
    user-select: none;
}

/* ── WYSIWYG spread dark mode ─── */
html.dark-mode .pte-spread-neighbor-blank[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .pte-spread-page-passive[b-kbr3m6kbmx] {
    opacity: 1;
    filter: none;
}

html.dark-mode .pte-spread-page-passive:hover[b-kbr3m6kbmx] {
    opacity: 1;
    filter: none;
}

html.dark-mode .pte-spread-clickable-neighbor[b-kbr3m6kbmx] {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

html.dark-mode .pte-spread-page-passive .pte-spread-nb-text[b-kbr3m6kbmx],
html.dark-mode .pte-spread-page-passive .pte-spread-nb-text-inner[b-kbr3m6kbmx],
html.dark-mode .pte-spread-page-passive .pte-spread-nb-text-inner svg[b-kbr3m6kbmx],
html.dark-mode .pte-spread-page-passive .pte-spread-nb-block[b-kbr3m6kbmx],
html.dark-mode .pte-spread-page-passive .pte-spread-nb-block *[b-kbr3m6kbmx],
html.dark-mode .pte-spread-page-passive .pte-spread-nb-block[b-kbr3m6kbmx]::before,
html.dark-mode .pte-spread-page-passive .pte-spread-nb-block[b-kbr3m6kbmx]::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html.dark-mode .pte-spread-nb-block:hover[b-kbr3m6kbmx] {
    outline-color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.08);
}

html.dark-mode .pte-spread-spine[b-kbr3m6kbmx] {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.06) 70%,
        rgba(255, 255, 255, 0.02) 100%
    );
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID, GUIDES & MARGINS — toolbar + canvas overlays
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar group ─── */
.pte-grid-group[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 0.35rem;
    position: relative;
}

.pte-grid-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 5px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.pte-grid-btn:hover:not(.active)[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.pte-grid-btn.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
    border-color: var(--accent, #3b82f6);
}

.pte-grid-divider[b-kbr3m6kbmx] {
    width: 1px;
    height: 18px;
    background: var(--border-primary, #e2e8f0);
    margin: 0 2px;
}

.pte-guide-count[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #f43f5e;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

/* ── Settings dropdown ─── */
.pte-grid-dropdown[b-kbr3m6kbmx] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 220px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pte-gd-section[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pte-gd-label[b-kbr3m6kbmx] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pte-gd-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pte-gd-chip[b-kbr3m6kbmx] {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #334155);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.pte-gd-chip:hover:not(.active)[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.pte-gd-chip.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
    border-color: var(--accent, #3b82f6);
}

.pte-gd-clear[b-kbr3m6kbmx] {
    font-size: 0.68rem;
    color: #f43f5e;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
}

.pte-gd-clear:hover[b-kbr3m6kbmx] {
    text-decoration: underline;
}

.pte-gd-guide-list[b-kbr3m6kbmx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pte-gd-guide-tag[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: rgba(244, 63, 94, 0.08);
    border: 1px solid rgba(244, 63, 94, 0.25);
    border-radius: 4px;
    color: #e11d48;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.pte-gd-guide-remove[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #e11d48;
    font-size: 0.6rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s;
}

.pte-gd-guide-remove:hover[b-kbr3m6kbmx] {
    background: rgba(244, 63, 94, 0.18);
}

.pte-gd-hint[b-kbr3m6kbmx] {
    font-size: 0.65rem;
    color: var(--text-tertiary, #94a3b8);
    font-style: italic;
    padding-top: 0.15rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

/* ── Canvas grid overlay ─── */
.pte-grid-overlay[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(to right, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
    background-size: var(--grid-x) var(--grid-y);
    background-position: 0 0;
}

/* ── Margin preset overlay ─── */
.pte-margin-overlay[b-kbr3m6kbmx] {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    border: 1.5px dashed rgba(245, 158, 11, 0.55);
    border-radius: 1px;
}

.pte-margin-label[b-kbr3m6kbmx] {
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 7px;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 0 0 3px 0;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0.8;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* ── Custom guide lines (user-placed, double-click to remove) ─── */
.pte-custom-guide[b-kbr3m6kbmx] {
    position: absolute;
    z-index: 3;
    cursor: pointer;
    transition: opacity 0.12s;
}

/* Wider invisible hit area for easier interaction */
.pte-custom-guide[b-kbr3m6kbmx]::before {
    content: '';
    position: absolute;
}

.pte-custom-guide-v[b-kbr3m6kbmx] {
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px solid rgba(244, 63, 94, 0.55);
}

.pte-custom-guide-v[b-kbr3m6kbmx]::before {
    top: 0;
    left: -4px;
    width: 9px;
    height: 100%;
    cursor: col-resize;
}

.pte-custom-guide-v:hover[b-kbr3m6kbmx] {
    border-left-width: 2px;
    border-left-color: #f43f5e;
}

.pte-custom-guide-h[b-kbr3m6kbmx] {
    left: 0;
    height: 0;
    width: 100%;
    border-top: 1px solid rgba(244, 63, 94, 0.55);
}

.pte-custom-guide-h[b-kbr3m6kbmx]::before {
    left: 0;
    top: -4px;
    height: 9px;
    width: 100%;
    cursor: row-resize;
}

.pte-custom-guide-h:hover[b-kbr3m6kbmx] {
    border-top-width: 2px;
    border-top-color: #f43f5e;
}

/* ── Dark mode for grid/guides/margins ─── */
html.dark-mode .pte-grid-overlay[b-kbr3m6kbmx] {
    background-image:
        linear-gradient(to right, rgba(129, 140, 248, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(129, 140, 248, 0.18) 1px, transparent 1px);
}

html.dark-mode .pte-margin-overlay[b-kbr3m6kbmx] {
    border-color: rgba(245, 158, 11, 0.45);
}

html.dark-mode .pte-margin-label[b-kbr3m6kbmx] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

html.dark-mode .pte-custom-guide-v[b-kbr3m6kbmx] {
    border-left-color: rgba(244, 63, 94, 0.65);
}

html.dark-mode .pte-custom-guide-v:hover[b-kbr3m6kbmx] {
    border-left-color: #fb7185;
}

html.dark-mode .pte-custom-guide-h[b-kbr3m6kbmx] {
    border-top-color: rgba(244, 63, 94, 0.65);
}

html.dark-mode .pte-custom-guide-h:hover[b-kbr3m6kbmx] {
    border-top-color: #fb7185;
}

html.dark-mode .pte-grid-dropdown[b-kbr3m6kbmx] {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border-primary, #334155);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

html.dark-mode .pte-gd-guide-tag[b-kbr3m6kbmx] {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fb7185;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   (Base styles use CSS variables — most elements auto-switch.
    Only special overrides that need different dark values live here.)
   ════════════════════════════════════════════════════════════════════════════ */

/* Modals need stronger backdrop blur in dark mode */
html.dark-mode .modal-backdrop[b-kbr3m6kbmx],
html.dark-mode .txt-modal-overlay[b-kbr3m6kbmx] {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}


/* ── Undo/Redo buttons ─────────────────── */

.pte-undo-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all .15s;
}
.pte-undo-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, .06);
}
.pte-undo-btn:disabled[b-kbr3m6kbmx] {
    opacity: .35;
    cursor: default;
}

.pte-undo-group[b-kbr3m6kbmx] {
    display: flex;
    gap: .2rem;
}

.pte-action-divider[b-kbr3m6kbmx] {
    width: 1px;
    height: 24px;
    background: var(--border-primary, #e2e8f0);
    margin: 0 .35rem;
    flex-shrink: 0;
}

/* ── Toolbar action buttons (Annuleren / Opslaan) ── */

.pte-action-btn[b-kbr3m6kbmx] {
    height: 32px;
    padding: 0 .85rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 30px;
}
.pte-action-btn:hover[b-kbr3m6kbmx] {
    border-color: var(--text-secondary, #64748b);
    color: var(--text-primary, #1e293b);
    background: var(--bg-tertiary, #f1f5f9);
}

.pte-action-primary[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    color: #fff;
}
.pte-action-primary:hover[b-kbr3m6kbmx] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.pte-action-danger[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    border-color: var(--border-primary, #e2e8f0);
    color: #ef4444;
}
.pte-action-danger:hover[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .08);
    border-color: #ef4444;
    color: #dc2626;
}
.pte-action-danger:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    pointer-events: none;
}

/* ── Variant quick-nav buttons ─── */

.pte-variant-nav-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35rem !important;
    min-width: 28px;
}
.pte-variant-nav-btn:disabled[b-kbr3m6kbmx] {
    opacity: .35;
    pointer-events: none;
}

/* ── Layer flash animation (add / duplicate) ── */

@keyframes pte-flash-b-kbr3m6kbmx {
    0%   { background: rgba(59, 130, 246, .25); }
    100% { background: transparent; }
}

.pte-layer-flash[b-kbr3m6kbmx] {
    animation: pte-flash-b-kbr3m6kbmx .6s ease-out;
}

/* ── Layer drag handle ─────────────────── */

.pte-layer-drag-handle[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-tertiary, #94a3b8);
    cursor: grab;
    user-select: none;
    line-height: 1;
    opacity: .5;
    transition: opacity .15s;
}
.pte-layer-item:hover .pte-layer-drag-handle[b-kbr3m6kbmx] {
    opacity: 1;
}
.pte-layer-drag-handle:active[b-kbr3m6kbmx] {
    cursor: grabbing;
}

/* ── Drag-over drop indicator ──────────── */

.pte-layer-item[b-kbr3m6kbmx] {
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.pte-layer-dragover[b-kbr3m6kbmx] {
    box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
    background: rgba(59, 130, 246, .06);
}

/* ── Layer list focus styling ─────────── */

.pte-layer-list:focus[b-kbr3m6kbmx] {
    outline: none;
}
.pte-layer-list:focus-visible[b-kbr3m6kbmx] {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 2px;
    border-radius: 8px;
}



/* ════════════════════════════════════════════════════════════════════════════
   VISUAL TEXT EDITOR (page-text-editor canvas)
   ════════════════════════════════════════════════════════════════════════════ */

.pte-editor-panel[b-kbr3m6kbmx] {
    background: var(--bg-primary, #fff);
    border-radius: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pteSlideIn-b-kbr3m6kbmx .2s ease-out;
}

@keyframes pteSlideIn-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── (pte-editor-top removed — merged into pte-zoom-bar) ──────────────── */

.pte-back-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.pte-back-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.pte-editor-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ── WYSIWYG insert dropdown ─── */
.pte-insert-dropdown[b-kbr3m6kbmx] {
    position: relative;
}

.pte-insert-trigger[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--accent, #3b82f6);
    cursor: pointer;
    transition: all .15s ease;
}

.pte-insert-trigger.pte-insert-spread[b-kbr3m6kbmx] {
    width: auto;
    height: auto;
    gap: .35rem;
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
}

.pte-insert-trigger.pte-insert-spread:hover[b-kbr3m6kbmx] {
    background: var(--accent-dark, #2563eb);
    border-color: var(--accent-dark, #2563eb);
    transform: scale(1.03);
}

.pte-insert-trigger.pte-insert-page[b-kbr3m6kbmx] {
    width: auto;
    height: auto;
    gap: .35rem;
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--bg-primary, #fff);
    color: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
}

.pte-insert-trigger.pte-insert-page:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
    border-color: var(--accent-dark, #2563eb);
    color: var(--accent-dark, #2563eb);
    transform: scale(1.03);
}

.pte-insert-chevron[b-kbr3m6kbmx] {
    opacity: .6;
    transition: transform .15s ease;
}

.pte-insert-trigger.pte-insert-spread:hover .pte-insert-chevron[b-kbr3m6kbmx] {
    opacity: 1;
}

.pte-insert-trigger.pte-insert-page .pte-insert-chevron[b-kbr3m6kbmx] {
    opacity: .5;
}

.pte-insert-trigger.pte-insert-page:hover .pte-insert-chevron[b-kbr3m6kbmx] {
    opacity: .8;
}

.pte-insert-trigger:not(.pte-insert-spread):hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
    border-color: var(--accent, #3b82f6);
    transform: scale(1.05);
}

.pte-insert-trigger:active[b-kbr3m6kbmx] {
    transform: scale(.95);
}

.pte-insert-trigger:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    pointer-events: none;
}

.pte-insert-menu[b-kbr3m6kbmx] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    min-width: 185px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
    padding: 4px;
    display: flex;
    flex-direction: column;
    animation: bb-menu-in .15s ease;
}

.pte-insert-menu-header[b-kbr3m6kbmx] {
    padding: .3rem .75rem .15rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-tertiary, #94a3b8);
    user-select: none;
}

.pte-insert-menu-item[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary, #1e293b);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
    text-align: left;
}

.pte-insert-menu-item:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
    color: var(--accent, #3b82f6);
}

.pte-insert-menu-item:active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .15);
}

.pte-insert-menu-item:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    pointer-events: none;
}

.pte-insert-menu-item svg[b-kbr3m6kbmx] {
    flex-shrink: 0;
    color: var(--accent, #3b82f6);
}

.pte-editor-body[b-kbr3m6kbmx] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Canvas area ──────────────────────── */

.pte-canvas-wrapper[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--bg-primary, #fff);
    position: relative;
    isolation: isolate;
}

.pte-zoom-bar[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .5rem;
    flex-wrap: wrap;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.pte-bar-divider[b-kbr3m6kbmx] {
    width: 1px;
    height: 1.4rem;
    background: var(--border-primary, #e2e8f0);
    opacity: .5;
    flex-shrink: 0;
}

.pte-zoom-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.pte-zoom-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}

.pte-zoom-label[b-kbr3m6kbmx] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    min-width: 2.5rem;
    text-align: center;
}

.pte-image-actions[b-kbr3m6kbmx] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pte-img-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.pte-img-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.pte-img-group[b-kbr3m6kbmx] {
    position: relative;
}

.pte-img-reset[b-kbr3m6kbmx] {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid rgba(220, 38, 38, .35);
    border-radius: 50%;
    background: rgba(220, 38, 38, .12);
    color: #f87171;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
    z-index: 1;
    padding: 0;
}

.pte-img-group:hover .pte-img-reset[b-kbr3m6kbmx] {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.pte-img-reset:hover[b-kbr3m6kbmx] {
    background: rgba(220, 38, 38, .22);
    border-color: rgba(220, 38, 38, .6);
    color: #ef4444;
}

.pte-pdf-btn[b-kbr3m6kbmx] {
    margin-left: .6rem;
    border-color: #e879a0;
    color: #be185d;
}
.pte-pdf-btn:hover[b-kbr3m6kbmx] {
    background: #fdf2f8;
    border-color: #be185d;
    color: #9d174d;
}
.pte-pdf-btn.active[b-kbr3m6kbmx] {
    background: #fce7f3;
    border-color: #be185d;
    color: #9d174d;
}
.pte-pdf-btn:disabled[b-kbr3m6kbmx] {
    opacity: .35;
    cursor: default;
}

/* ── PDF Generation Side Panel ──────────────── */

.pte-pdf-panel[b-kbr3m6kbmx] {
    flex: 0 0 320px;
    border-left: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ptePdfSlideIn-b-kbr3m6kbmx .25s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ptePdfSlideIn-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateX(40px); flex-basis: 0; }
    to   { opacity: 1; transform: translateX(0);    flex-basis: 320px; }
}

.pte-pdf-panel-top[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    flex-shrink: 0;
}

.pte-pdf-panel-title[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 700;
    color: #9d174d;
    letter-spacing: .02em;
}

.pte-pdf-panel-close[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #9d174d;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pte-pdf-panel-close:hover[b-kbr3m6kbmx] {
    background: rgba(157, 23, 77, .1);
    color: #831843;
}

.pte-pdf-panel-body[b-kbr3m6kbmx] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.pte-pdf-panel-body:hover[b-kbr3m6kbmx] {
    scrollbar-color: var(--border-primary, #cbd5e1) transparent;
}

.pte-pdf-panel-page-info[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
}

.pte-pdf-panel-page-badge[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.pte-pdf-panel-page-title[b-kbr3m6kbmx] {
    font-size: .8rem;
    color: var(--text-primary, #1e293b);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pte-pdf-panel-section-label[b-kbr3m6kbmx] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary, #64748b);
    margin-top: .25rem;
}

.pte-pdf-panel-hint[b-kbr3m6kbmx] {
    font-size: .78rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
    margin: 0;
}

/* Cast list */

.pte-pdf-cast-list[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pte-pdf-cast-row[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .6rem .7rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    transition: border-color .15s;
}
.pte-pdf-cast-row:hover[b-kbr3m6kbmx] {
    border-color: #f9a8d4;
}

.pte-pdf-cast-role[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.pte-pdf-cast-role code[b-kbr3m6kbmx] {
    background: #1e293b;
    color: #f1f5f9;
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .72rem;
}

.pte-pdf-cast-role small[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
}

.pte-pdf-cast-name[b-kbr3m6kbmx] {
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    font-size: .82rem;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    transition: border-color .15s, box-shadow .15s;
}
.pte-pdf-cast-name:focus[b-kbr3m6kbmx] {
    outline: none;
    border-color: #f472b6;
    box-shadow: 0 0 0 2px rgba(244, 114, 182, .15);
    background: var(--bg-primary, #fff);
}
.pte-pdf-cast-name:disabled[b-kbr3m6kbmx] {
    opacity: .5;
}

.pte-pdf-cast-gender[b-kbr3m6kbmx] {
    display: flex;
    gap: .3rem;
}

.pte-pdf-g-btn[b-kbr3m6kbmx] {
    flex: 1;
    padding: .3rem .5rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.pte-pdf-g-btn:hover[b-kbr3m6kbmx] {
    border-color: #f9a8d4;
    color: #be185d;
}
.pte-pdf-g-btn.active[b-kbr3m6kbmx] {
    background: #fce7f3;
    border-color: #f472b6;
    color: #be185d;
}
.pte-pdf-g-btn:disabled[b-kbr3m6kbmx] {
    opacity: .5;
    cursor: default;
}

/* Panel footer */

.pte-pdf-panel-footer[b-kbr3m6kbmx] {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    flex-shrink: 0;
}

.pte-pdf-cancel-btn[b-kbr3m6kbmx] {
    flex: 0 0 auto;
    padding: .5rem .85rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #475569);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.pte-pdf-cancel-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-primary, #cbd5e1);
}
.pte-pdf-cancel-btn:disabled[b-kbr3m6kbmx] {
    opacity: .5;
    cursor: default;
}

.pte-pdf-generate-btn[b-kbr3m6kbmx] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: white;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 1px 3px rgba(190, 24, 93, .3);
}
.pte-pdf-generate-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #f472b6 0%, #9d174d 100%);
    box-shadow: 0 2px 8px rgba(190, 24, 93, .4);
    transform: translateY(-1px);
}
.pte-pdf-generate-btn:active:not(:disabled)[b-kbr3m6kbmx] {
    transform: translateY(0);
}
.pte-pdf-generate-btn:disabled[b-kbr3m6kbmx] {
    opacity: .7;
    cursor: default;
}

.pte-pdf-spinner[b-kbr3m6kbmx] {
    width: .9em;
    height: .9em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-kbr3m6kbmx 0.8s linear infinite;
}

/* ── Inline PDF Preview Split-View ──────────── */

.pte-pdf-preview-panel[b-kbr3m6kbmx] {
    flex: 0 0 420px;
    min-width: 280px;
    max-width: 50vw;
    border-left: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ptePdfSlideIn-b-kbr3m6kbmx .25s cubic-bezier(.4, 0, .2, 1);
}

.pte-pdf-preview-header[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    flex-shrink: 0;
    min-height: 38px;
}

.pte-pdf-preview-title[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #64748b);
    user-select: none;
}

.pte-pdf-preview-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pte-pdf-preview-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}
.pte-pdf-preview-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
    border-color: rgba(59, 130, 246, .4);
    color: #3b82f6;
}
.pte-pdf-preview-btn:disabled[b-kbr3m6kbmx] {
    opacity: .5;
    cursor: default;
}
.pte-pdf-preview-btn.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .5);
    color: #3b82f6;
}

.pte-pdf-preview-body[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-tertiary, #e8e8e8);
}

.pte-pdf-preview-frame[b-kbr3m6kbmx] {
    flex: 1;
    width: 100%;
    border: none;
    background: white;
}

.pte-pdf-preview-loading[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--text-tertiary, #94a3b8);
    font-size: .82rem;
}

.pte-pdf-preview-loading .pte-pdf-spinner[b-kbr3m6kbmx] {
    width: 1.5em;
    height: 1.5em;
    border-color: rgba(59, 130, 246, .2);
    border-top-color: #3b82f6;
}

.pte-pdf-preview-empty[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #94a3b8);
    font-size: .82rem;
    padding: 1.5rem;
    text-align: center;
}

@keyframes pte-spin-b-kbr3m6kbmx {
    to { transform: rotate(360deg); }
}
.pte-spin[b-kbr3m6kbmx] {
    animation: pte-spin-b-kbr3m6kbmx .8s linear infinite;
}

/* ── PDF Overlay Comparison ─────────────────── */

.pte-overlay-container[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.pte-overlay-compare-img[b-kbr3m6kbmx] {
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.pte-overlay-loading-state[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: rgba(15, 23, 42, .35);
    color: white;
    font-size: .78rem;
    font-weight: 500;
    backdrop-filter: blur(2px);
}

.pte-overlay-loading-state .pte-pdf-spinner[b-kbr3m6kbmx] {
    width: 1.5em;
    height: 1.5em;
    border-color: rgba(255, 255, 255, .3);
    border-top-color: white;
}

.pte-overlay-controls[b-kbr3m6kbmx] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .8rem;
    background: rgba(15, 23, 42, .85);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    z-index: 51;
    color: white;
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}

.pte-overlay-controls input[type="range"][b-kbr3m6kbmx] {
    width: 120px;
    height: 4px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.pte-overlay-controls button[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: white;
    cursor: pointer;
    padding: 0;
    transition: background .15s;
}
.pte-overlay-controls button:hover[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .3);
}
.pte-overlay-controls .pte-overlay-label[b-kbr3m6kbmx] {
    min-width: 3ch;
    text-align: right;
}

/* ── Overlay comparison mode indicator on toolbar ── */
.pte-overlay-btn.active[b-kbr3m6kbmx] {
    background: rgba(249, 115, 22, .15) !important;
    border-color: rgba(249, 115, 22, .5) !important;
    color: #f97316 !important;
}

.pte-canvas-scroller[b-kbr3m6kbmx] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 12px 12px 0;
    background: var(--bg-tertiary, #e8e8e8);
    position: relative;
    z-index: 0;
}

/* ── Mm rulers ────────────────────────── */

.pte-ruler-area[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.pte-ruler-body[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.pte-ruler[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #f8fafc);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.pte-ruler-h[b-kbr3m6kbmx] {
    height: 18px;
    margin-left: 18px;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px 8px 0 0;
}

.pte-ruler-v[b-kbr3m6kbmx] {
    width: 18px;
    border-right: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px 0 0 8px;
}

.pte-ruler-hidden[b-kbr3m6kbmx] {
    display: none !important;
}

.pte-ruler-inner[b-kbr3m6kbmx] {
    position: relative;
}

.pte-tick[b-kbr3m6kbmx] {
    position: absolute;
    pointer-events: none;
}

.pte-ruler-h .pte-tick[b-kbr3m6kbmx] {
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px solid rgba(148,163,184,.3);
}

.pte-ruler-h .pte-tick-major[b-kbr3m6kbmx] {
    border-left-color: rgba(100,116,139,.5);
}

.pte-ruler-h .pte-tick span[b-kbr3m6kbmx] {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 7px;
    font-family: ui-monospace, monospace;
    color: var(--text-secondary, #94a3b8);
    line-height: 1;
    white-space: nowrap;
}

.pte-ruler-v .pte-tick[b-kbr3m6kbmx] {
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(148,163,184,.3);
}

.pte-ruler-v .pte-tick-major[b-kbr3m6kbmx] {
    border-top-color: rgba(100,116,139,.5);
}

.pte-ruler-v .pte-tick span[b-kbr3m6kbmx] {
    position: absolute;
    left: 1px;
    top: 2px;
    font-size: 7px;
    font-family: ui-monospace, monospace;
    color: var(--text-secondary, #94a3b8);
    line-height: 1;
    writing-mode: vertical-lr;
    white-space: nowrap;
}

.pte-ruler-cursor[b-kbr3m6kbmx] {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    z-index: 5;
}

.pte-ruler-h .pte-ruler-cursor[b-kbr3m6kbmx] {
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1.5px solid #ef4444;
}

.pte-ruler-v .pte-ruler-cursor[b-kbr3m6kbmx] {
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1.5px solid #ef4444;
}

/* ── Format painter ───────────────────── */

.pte-format-painter[b-kbr3m6kbmx] {
    display: flex;
    gap: .4rem;
    margin-bottom: .4rem;
}

.pte-fp-btn[b-kbr3m6kbmx] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .5rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.pte-fp-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.pte-fp-btn:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    cursor: default;
}

.pte-fp-btn.pte-fp-ready[b-kbr3m6kbmx] {
    border-color: #22c55e;
    color: #16a34a;
    background: rgba(34, 197, 94, .06);
}

.pte-fp-btn.pte-fp-ready:hover[b-kbr3m6kbmx] {
    background: rgba(34, 197, 94, .12);
}

/* ── Block action bar (macro buttons on selected block) ── */

.pte-block-actions[b-kbr3m6kbmx] {
    position: absolute;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    padding: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    z-index: 20;
    white-space: nowrap;
    pointer-events: auto;
}

.pte-block-actions[b-kbr3m6kbmx],
.pte-block-actions *[b-kbr3m6kbmx],
.pte-block-delete-wrap[b-kbr3m6kbmx],
.pte-block-delete-wrap *[b-kbr3m6kbmx],
.pte-popconfirm[b-kbr3m6kbmx],
.pte-popconfirm *[b-kbr3m6kbmx] {
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
    paint-order: normal !important;
}

.pte-ba-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .4rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: .62rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
    line-height: 1.1;
}
.pte-ba-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}
.pte-ba-btn.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}

/* ── Block delete button (top-right corner) ── */

.pte-block-delete-wrap[b-kbr3m6kbmx] {
    position: absolute;
    top: -0.7rem;
    right: -0.7rem;
    z-index: 25;
    pointer-events: auto;
}

.pte-block-delete[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 50%;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    transition: background .15s, color .15s, border-color .15s;
}
.pte-block-delete:hover[b-kbr3m6kbmx] {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fca5a5;
}
.pte-block-delete:active[b-kbr3m6kbmx] {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Inline popconfirm ── */

.pte-popconfirm[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .45rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,.13);
    white-space: nowrap;
    animation: ptePopIn-b-kbr3m6kbmx .15s ease;
}

@keyframes ptePopIn-b-kbr3m6kbmx {
    from { opacity: 0; transform: scale(.9) translateY(-3px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pte-popconfirm span[b-kbr3m6kbmx] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.pte-popconfirm-yes[b-kbr3m6kbmx],
.pte-popconfirm-no[b-kbr3m6kbmx] {
    border: none;
    border-radius: 4px;
    padding: .15rem .4rem;
    font-size: .65rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.pte-popconfirm-yes[b-kbr3m6kbmx] {
    background: #ef4444;
    color: white;
}
.pte-popconfirm-yes:hover[b-kbr3m6kbmx] {
    background: #dc2626;
}
.pte-popconfirm-no[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}
.pte-popconfirm-no:hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #e2e8f0);
}

/* ── Ghost macro preview ──────────────── */

.pte-text-dimmed[b-kbr3m6kbmx] {
    opacity: .3;
    transition: opacity .2s;
}

.pte-ghost[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: inherit;
    padding-top: calc(.1rem + .35rem);
    background: rgba(234, 179, 8, .08);
    border: 1.5px solid rgba(234, 179, 8, .35);
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    animation: pteGhostIn-b-kbr3m6kbmx .25s ease;
}

@keyframes pteGhostIn-b-kbr3m6kbmx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pte-ghost-badge[b-kbr3m6kbmx] {
    position: absolute;
    top: 0;
    left: 0;
    padding: .05rem .35rem;
    background: #eab308;
    color: #422006;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    border-radius: 0 0 5px 0;
    pointer-events: none;
}

.pte-ghost-dismiss[b-kbr3m6kbmx] {
    position: absolute;
    top: .15rem;
    right: .15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    border-radius: 50%;
    background: rgba(234, 179, 8, .2);
    color: #92400e;
    font-size: .6rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background .12s, color .12s;
    line-height: 1;
}
.pte-ghost-dismiss:hover[b-kbr3m6kbmx] {
    background: #eab308;
    color: #422006;
}

.pte-ghost-text[b-kbr3m6kbmx] {
    font-size: inherit;
    line-height: inherit;
    color: #92400e;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
}

.pte-canvas[b-kbr3m6kbmx] {
    container-type: inline-size;
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 2px dashed var(--border-primary, #cbd5e1);
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,.03);
    transition: border-color .2s;
}
.pte-canvas:hover[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
}

.pte-bg-img[b-kbr3m6kbmx],
.pte-overlay-img[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.pte-overlay-img[b-kbr3m6kbmx] {
    opacity: .6;
    mix-blend-mode: multiply;
}

/* ── Bleed & safe-zone overlays ──────── */

.pte-zone[b-kbr3m6kbmx] {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.pte-zone-bleed[b-kbr3m6kbmx] {
    border: 1px dashed rgba(239, 68, 68, .45);
}

.pte-zone-safe[b-kbr3m6kbmx] {
    border: 1px dashed rgba(34, 197, 94, .50);
}

.pte-zone-label[b-kbr3m6kbmx] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 8px;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px 0 0 0;
    line-height: 1.5;
    pointer-events: none;
    opacity: .7;
}

.pte-zone-bleed .pte-zone-label[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.pte-zone-safe .pte-zone-label[b-kbr3m6kbmx] {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

.pte-canvas-info[b-kbr3m6kbmx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .2rem 0;
    font-size: .75rem;
    color: var(--text-secondary, #94a3b8);
}

.pte-hint[b-kbr3m6kbmx] {
    font-style: italic;
    opacity: .7;
}

/* ── Text blocks ──────────────────────── */

.pte-block[b-kbr3m6kbmx] {
    position: absolute;
    box-sizing: border-box;
    background: rgba(59, 130, 246, .08);
    border: 1.5px solid rgba(59, 130, 246, .3);
    border-radius: 6px;
    padding: .35rem .5rem;
    cursor: grab;
    min-height: 1.8rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    line-height: 1.4;
}

.pte-block:hover[b-kbr3m6kbmx] {
    border-color: rgba(59, 130, 246, .6);
    background: rgba(59, 130, 246, .12);
    box-shadow: 0 2px 12px rgba(59, 130, 246, .15);
}

.pte-block.pte-selected[b-kbr3m6kbmx] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, .1);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .25), 0 4px 16px rgba(59, 130, 246, .12);
    z-index: 9990 !important;
}

.pte-block.pte-dragging[b-kbr3m6kbmx] {
    cursor: grabbing;
    opacity: .85;
    box-shadow: 0 8px 32px rgba(59, 130, 246, .25);
    z-index: 9995 !important;
}

.pte-block.pte-resizing[b-kbr3m6kbmx] {
    z-index: 9995 !important;
}

.pte-block.pte-overflow[b-kbr3m6kbmx] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, .08);
}

.pte-block.pte-overflow .pte-block-label[b-kbr3m6kbmx] {
    background: #ef4444;
}

.pte-block.pte-overflow[b-kbr3m6kbmx]::before {
    content: 'âš  overflow';
    position: absolute;
    bottom: -1px;
    right: -1px;
    background: rgba(239, 68, 68, .9);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px 0 6px 0;
    line-height: 1.3;
    pointer-events: none;
    z-index: 15;
}

.pte-block-label[b-kbr3m6kbmx] {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px 0 6px 0;
    line-height: 1.3;
    pointer-events: none;
}

/* ── Image block ── */
.pte-block-image[b-kbr3m6kbmx] {
    overflow: hidden;
}

.pte-block-img[b-kbr3m6kbmx] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.pte-block-img-empty[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    gap: 4px;
    background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 12px 12px;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
    user-select: none;
}

/* ── Shape block ── */
.pte-block-shape[b-kbr3m6kbmx] {
    padding: 0;
    overflow: visible;
}

.pte-block-shape-svg[b-kbr3m6kbmx] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── AI image block ── */
.pte-block-ai[b-kbr3m6kbmx] {
    overflow: visible;
}

.pte-block-ai-empty[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(59,130,246,.08));
    border: 2px dashed rgba(139,92,246,.3);
    border-radius: 6px;
    gap: 6px;
    overflow: hidden;
}

.pte-ai-placeholder-text[b-kbr3m6kbmx] {
    font-size: 11px;
    color: rgba(139,92,246,.7);
    text-align: center;
    padding: 0 8px;
    line-height: 1.3;
    max-height: 3.9em;
    overflow: hidden;
    pointer-events: none;
}

.pte-ai-badge[b-kbr3m6kbmx],
.pte-ai-badge-placeholder[b-kbr3m6kbmx] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    letter-spacing: .3px;
    z-index: 1;
}

.pte-ai-badge-placeholder[b-kbr3m6kbmx] {
    opacity: .6;
}

/* ── AI properties panel ── */
.pte-ai-prompt-wrap[b-kbr3m6kbmx] {
    margin-bottom: 8px;
}

.pte-ai-prompt-textarea[b-kbr3m6kbmx] {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.pte-ai-neg-textarea[b-kbr3m6kbmx] {
    width: 100%;
    min-height: 40px;
    resize: vertical;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.pte-ai-prompt-toolbar[b-kbr3m6kbmx] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.pte-ai-macro-chips[b-kbr3m6kbmx] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.pte-ai-macro-chip[b-kbr3m6kbmx] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-primary, #334155);
}

.pte-ai-macro-chip:hover[b-kbr3m6kbmx] {
    background: rgba(139,92,246,.15);
}

.pte-ai-macro-chip-sm[b-kbr3m6kbmx] {
    font-size: 9px;
    padding: 1px 4px;
    opacity: .7;
}

.pte-ai-advanced[b-kbr3m6kbmx] {
    margin: 8px 0;
}

.pte-ai-advanced summary[b-kbr3m6kbmx] {
    font-size: 11px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    margin-bottom: 6px;
}

.pte-ai-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}

.pte-ai-generate-btn[b-kbr3m6kbmx] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pte-ai-generate-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.pte-ai-generate-btn:disabled[b-kbr3m6kbmx] {
    opacity: .5;
    cursor: not-allowed;
}

.pte-ai-remove-preview-btn[b-kbr3m6kbmx] {
    padding: 8px;
    border-radius: 6px;
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 11px;
    cursor: pointer;
    color: var(--text-primary, #334155);
}

.pte-ai-spinner[b-kbr3m6kbmx] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pte-spin-b-kbr3m6kbmx .6s linear infinite;
}

.pte-ai-prompt-info[b-kbr3m6kbmx] {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-secondary, #94a3b8);
    margin-top: 4px;
}

.pte-ai-prompt-length.pte-warn[b-kbr3m6kbmx] {
    color: #f59e0b;
}

.pte-ai-prompt-warning[b-kbr3m6kbmx] {
    color: #ef4444;
}

.pte-ai-check-label[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
}

.pte-ai-check-label input[type="checkbox"][b-kbr3m6kbmx] {
    width: auto;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.pte-ai-model-label[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: .15rem;
}

.pte-block-text[b-kbr3m6kbmx] {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    pointer-events: none;
    padding-top: .1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Hint: dblclick to edit inline (only on selected block's text area) */
.pte-block.pte-selected .pte-block-text[b-kbr3m6kbmx] {
    cursor: text;
}

/* ── Inline editing (Phase 3A) ───────────── */

.pte-block-text.pte-inline-editing[b-kbr3m6kbmx] {
    pointer-events: auto;
    cursor: text;
    outline: none;
    min-height: 1em;
    caret-color: currentColor;
    white-space: pre-wrap;
}


.pte-block.pte-editing[b-kbr3m6kbmx] {
    z-index: 9999 !important;
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 1px;
}

/* ── Section toggle (collapsible) ────── */

.pte-section-toggle[b-kbr3m6kbmx] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.pte-section-toggle:hover[b-kbr3m6kbmx] {
    color: var(--accent-primary, #3b82f6);
}
.pte-toggle-arrow[b-kbr3m6kbmx] {
    font-size: .65rem;
    transition: transform .15s;
}
.pte-toggle-arrow.pte-toggle-open[b-kbr3m6kbmx] {
    transform: rotate(90deg);
}

/* ── Template panel (Phase 3C) ───────── */

.pte-template-panel[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pte-template-save-row[b-kbr3m6kbmx] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pte-template-name-input[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
    font-size: .75rem;
    padding: 3px 6px;
}

.pte-template-save-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    font-size: .65rem;
    font-weight: 600;
    border: 1px solid var(--border-primary, #cbd5e1);
    border-radius: 4px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.pte-template-save-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-accent, #dbeafe);
    border-color: var(--accent-primary, #3b82f6);
}
.pte-template-save-btn:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    cursor: not-allowed;
}
.pte-template-save-global[b-kbr3m6kbmx] {
    border-color: var(--accent-secondary, #a78bfa);
}
.pte-template-save-global:hover:not(:disabled)[b-kbr3m6kbmx] {
    border-color: var(--accent-secondary, #a78bfa);
    background: rgba(167, 139, 250, .1);
}

.pte-template-empty[b-kbr3m6kbmx] {
    font-size: .72rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
    padding: 8px 0;
}

.pte-template-list[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 160px;
    overflow-y: auto;
}

.pte-template-item[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: .72rem;
    transition: background .1s;
}
.pte-template-item:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
}

.pte-template-scope[b-kbr3m6kbmx] {
    font-size: .65rem;
    flex-shrink: 0;
}

.pte-template-name[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.pte-template-rename-input[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
    font-size: .72rem;
    padding: 1px 4px;
}

.pte-template-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.pte-template-action-btn[b-kbr3m6kbmx] {
    width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    transition: background .1s, color .1s;
}
.pte-template-action-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-accent, #dbeafe);
    color: var(--accent-primary, #3b82f6);
}
.pte-template-del-btn:hover[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

/* Dark mode */
html.dark-mode .pte-template-save-btn[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #e2e8f0);
}
html.dark-mode .pte-template-save-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .15);
}
html.dark-mode .pte-template-item:hover[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .05);
}

/* ── Resize handles ───────────────────── */

.pte-handle[b-kbr3m6kbmx] {
    position: absolute;
    z-index: 20;
}

.pte-handle[data-edge="w"][b-kbr3m6kbmx],
.pte-handle[data-edge="e"][b-kbr3m6kbmx] {
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
}
.pte-handle[data-edge="w"][b-kbr3m6kbmx] { left: -4px; }
.pte-handle[data-edge="e"][b-kbr3m6kbmx] { right: -4px; }

.pte-handle[data-edge="n"][b-kbr3m6kbmx] {
    top: -4px;
    left: 8px;
    right: 8px;
    height: 8px;
    cursor: ns-resize;
}

.pte-handle[data-edge="nw"][b-kbr3m6kbmx] {
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
}

.pte-handle[data-edge="ne"][b-kbr3m6kbmx] {
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    cursor: nesw-resize;
}

.pte-handle[data-edge="s"][b-kbr3m6kbmx] {
    bottom: -4px;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
}

.pte-handle[data-edge="sw"][b-kbr3m6kbmx] {
    bottom: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    cursor: nesw-resize;
}

.pte-handle[data-edge="se"][b-kbr3m6kbmx] {
    bottom: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
}

.pte-handle[b-kbr3m6kbmx]::after {
    content: '';
    position: absolute;
    background: #3b82f6;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    opacity: 0;
    transition: opacity .15s;
}

.pte-selected .pte-handle[b-kbr3m6kbmx]::after {
    opacity: 1;
}

.pte-handle[data-edge="w"][b-kbr3m6kbmx]::after,
.pte-handle[data-edge="e"][b-kbr3m6kbmx]::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pte-handle[data-edge="n"][b-kbr3m6kbmx]::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pte-handle[data-edge="nw"][b-kbr3m6kbmx]::after {
    top: 1px;
    left: 1px;
}

.pte-handle[data-edge="ne"][b-kbr3m6kbmx]::after {
    top: 1px;
    right: 1px;
}

.pte-handle[data-edge="s"][b-kbr3m6kbmx]::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pte-handle[data-edge="sw"][b-kbr3m6kbmx]::after {
    bottom: 1px;
    left: 1px;
}

.pte-handle[data-edge="se"][b-kbr3m6kbmx]::after {
    bottom: 1px;
    right: 1px;
}

/* ── Resize handle (between canvas and props) ─── */

.pte-resize-handle[b-kbr3m6kbmx] {
    flex: 0 0 6px;
    position: relative;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-primary, #e2e8f0);
    transition: background .15s, box-shadow .15s;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
}

.pte-resize-handle[b-kbr3m6kbmx]::before {
    content: '';
    position: absolute;
    inset: 0 -4px;
    z-index: 1;
}

.pte-resize-handle:hover[b-kbr3m6kbmx],
.pte-resize-handle.pte-resizing[b-kbr3m6kbmx] {
    background: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 8px rgba(59, 130, 246, .3);
}

.pte-resize-grip[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}

.pte-resize-grip[b-kbr3m6kbmx]::before,
.pte-resize-grip[b-kbr3m6kbmx]::after {
    content: '';
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--text-tertiary, #94a3b8);
    transition: background .15s;
}

.pte-resize-grip[b-kbr3m6kbmx]::before {
    box-shadow: 0 5px 0 var(--text-tertiary, #94a3b8),
                0 10px 0 var(--text-tertiary, #94a3b8);
}

.pte-resize-handle:hover .pte-resize-grip[b-kbr3m6kbmx]::before,
.pte-resize-handle:hover .pte-resize-grip[b-kbr3m6kbmx]::after,
.pte-resize-handle.pte-resizing .pte-resize-grip[b-kbr3m6kbmx]::before,
.pte-resize-handle.pte-resizing .pte-resize-grip[b-kbr3m6kbmx]::after {
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
}

.pte-resize-handle:hover .pte-resize-grip[b-kbr3m6kbmx]::before,
.pte-resize-handle.pte-resizing .pte-resize-grip[b-kbr3m6kbmx]::before {
    box-shadow: 0 5px 0 rgba(255, 255, 255, .9),
                0 10px 0 rgba(255, 255, 255, .9);
}

/* ── Properties sidebar ───────────────── */

.pte-props[b-kbr3m6kbmx] {
flex: 0 0 auto;
min-width: 240px;
max-width: 600px;
border-left: none;
    padding: 1.2rem 1.25rem;
    overflow-y: auto;
    background: var(--bg-secondary, #f8fafc);
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.pte-props:hover[b-kbr3m6kbmx] {
    scrollbar-color: var(--border-primary, #cbd5e1) transparent;
}

.pte-props[b-kbr3m6kbmx]::-webkit-scrollbar {
    width: 5px;
}
.pte-props[b-kbr3m6kbmx]::-webkit-scrollbar-track {
    background: transparent;
}
.pte-props[b-kbr3m6kbmx]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.pte-props:hover[b-kbr3m6kbmx]::-webkit-scrollbar-thumb {
    background: var(--border-primary, #cbd5e1);
}

.pte-section-label[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary, #64748b);
    margin-bottom: .5rem;
}

.pte-prop-divider[b-kbr3m6kbmx] {
    height: 1px;
    background: var(--border-primary, #e2e8f0);
    margin: .7rem 0;
}

/* ── Layer panel ──────────────────────── */

.pte-layers[b-kbr3m6kbmx] {
    margin-bottom: .3rem;
}

.pte-layers-top[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.pte-layer-add-group[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
}

/* ── Image block property panel ── */
.pte-img-upload-area[b-kbr3m6kbmx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pte-img-thumb[b-kbr3m6kbmx] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-primary, #e2e8f0);
}

.pte-img-upload-btn[b-kbr3m6kbmx] {
    cursor: pointer;
}

.pte-layer-action-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pte-layer-action-btn:hover[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    color: white;
}

.pte-layer-list[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pte-layer-item[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .4rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    min-height: 32px;
}
.pte-layer-item:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-primary, #e2e8f0);
}
.pte-layer-active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08) !important;
    border-color: var(--accent, #3b82f6) !important;
}

.pte-layer-seq[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    font-size: .65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pte-layer-active .pte-layer-seq[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}

.pte-layer-label[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
    font-size: .75rem;
    color: var(--text-primary, #1e293b);
    min-width: 0;
    cursor: default;
    border-radius: 3px;
    padding: 0 2px;
}
.pte-layer-label-text[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pte-layer-type-icon[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    line-height: 1;
}
.pte-layer-type-icon-ai[b-kbr3m6kbmx] {
    color: #f59e0b;
}
.pte-layer-type-icon-ai svg[b-kbr3m6kbmx] {
    display: block;
}
.pte-layer-label:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
}

.pte-layer-name-input[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
    font-size: .75rem;
    padding: .1rem .3rem;
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .2);
}

.pte-layer-btns[b-kbr3m6kbmx] {
    display: flex;
    gap: 1px;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}
.pte-layer-item:hover .pte-layer-btns[b-kbr3m6kbmx],
.pte-layer-active .pte-layer-btns[b-kbr3m6kbmx] {
    opacity: 1;
}

.pte-layer-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: background .1s, color .1s;
    padding: 0;
}
.pte-layer-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}
.pte-layer-btn:disabled[b-kbr3m6kbmx] {
    opacity: .3;
    cursor: default;
}

.pte-layers-empty[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .8rem .5rem;
    text-align: center;
}
.pte-layers-empty p[b-kbr3m6kbmx] {
    font-size: .78rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

.pte-layers-empty-add[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    border: 1px dashed var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--accent, #3b82f6);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pte-layers-empty-add:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .06);
    border-color: var(--accent, #3b82f6);
}

/* ── Position row (X / Y / B) ─────────── */

.pte-pos-row[b-kbr3m6kbmx] {
    display: flex;
    gap: .4rem;
}

.pte-pos-field[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pte-pos-field > label[b-kbr3m6kbmx] {
    font-size: .65rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pte-input-unit[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    overflow: hidden;
    transition: border-color .2s;
}

.pte-input-unit:focus-within[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
}

.pte-input-unit .input[b-kbr3m6kbmx] {
    border: none !important;
    border-radius: 0;
    padding: .3rem .35rem;
    font-size: .8rem;
    width: 100%;
    min-width: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.pte-input-unit .input:focus[b-kbr3m6kbmx] {
    outline: none;
    box-shadow: none !important;
}

.pte-unit[b-kbr3m6kbmx] {
    font-size: .65rem;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    padding-right: .35rem;
    white-space: nowrap;
    user-select: none;
}

/* ── Text content section ─────────────── */

/* ── Canvas context bar (text block selected) ── */

.pte-context-bar[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    flex-shrink: 0;
}

/* ── Preview / Source toggle pill ── */

.pte-view-toggle[b-kbr3m6kbmx] {
    display: inline-flex;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-tertiary, #f1f5f9);
}

.pte-vt-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: .7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pte-vt-btn.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}
.pte-vt-btn:not(.active):hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1e293b);
}

/* ── Source-view text (monospace, raw markdown visible) ── */

.pte-source-view[b-kbr3m6kbmx] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    pointer-events: none;
    padding-top: .1rem;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: .85;
}

/* ── Floating macro overlay (above canvas) ── */

.pte-macro-overlay[b-kbr3m6kbmx] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(26rem, 90%);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .65rem .75rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    animation: pteMacroSlideDown-b-kbr3m6kbmx .2s ease;
}

@keyframes pteMacroSlideDown-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pte-macro-overlay-header[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pte-macro-overlay-close[b-kbr3m6kbmx] {
    border: none;
    background: none;
    color: var(--text-secondary, #94a3b8);
    font-size: .85rem;
    cursor: pointer;
    padding: .1rem .3rem;
    line-height: 1;
    border-radius: 4px;
}
.pte-macro-overlay-close:hover[b-kbr3m6kbmx] {
    color: var(--text-primary, #1e293b);
    background: var(--bg-tertiary, #f1f5f9);
}

.pte-macro-overlay-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: .4rem;
    margin-top: .15rem;
}

.pte-macro-help[b-kbr3m6kbmx],
.pte-macro-empty[b-kbr3m6kbmx] {
    font-size: .75rem;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px dashed var(--border-primary, #e2e8f0);
    border-radius: 6px;
    padding: .45rem .55rem;
}

.pte-ai-macro-chips-overlay[b-kbr3m6kbmx] {
    gap: .35rem;
}

.pte-macro-go[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex: 1;
    padding: .4rem;
    border: none;
    border-radius: 6px;
    background: var(--accent, #3b82f6);
    color: white;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.pte-macro-go:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: #2563eb;
}
.pte-macro-go:disabled[b-kbr3m6kbmx] {
    opacity: .6;
    cursor: not-allowed;
}

.pte-macro-result[b-kbr3m6kbmx] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px dashed var(--border-primary, #e2e8f0);
    border-radius: 6px;
    padding: .4rem .55rem;
    max-height: 5rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Macro inputs (shared between old panel and new overlay) ── */

.pte-macro-row[b-kbr3m6kbmx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .3rem;
    align-items: center;
}

.pte-macro-role[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}
.pte-macro-role code[b-kbr3m6kbmx] {
    font-size: .65rem;
    background: var(--bg-secondary, #fff);
    padding: .1rem .3rem;
    border-radius: 4px;
    border: 1px solid var(--border-primary, #e2e8f0);
}

.pte-macro-name[b-kbr3m6kbmx] {
    padding: .3rem .4rem !important;
    font-size: .78rem !important;
    min-width: 0;
    border-radius: 6px !important;
}

.pte-macro-gender[b-kbr3m6kbmx] {
    display: flex;
    gap: 1px;
    background: var(--border-primary, #e2e8f0);
    border-radius: 5px;
    overflow: hidden;
}

.pte-macro-g-btn[b-kbr3m6kbmx] {
    border: none;
    background: var(--bg-secondary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .45rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pte-macro-g-btn.active[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}
.pte-macro-g-btn:hover:not(.active)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
}



.pte-align-group[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 8px;
    padding: 2px;
}

.pte-align-group .pte-align-btn[b-kbr3m6kbmx] {
    flex: 1;
    border: none;
    background: transparent;
    padding: .35rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    display: grid;
    place-items: center;
    transition: background .15s, color .15s;
}
.pte-align-group .pte-align-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1e293b);
}
.pte-align-group .pte-align-btn.active[b-kbr3m6kbmx] {
    background: #fff;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.pte-style-toggles[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 8px;
    padding: 2px;
}

.pte-style-btn[b-kbr3m6kbmx] {
    flex: 0 0 auto;
    min-width: 2rem;
    border: none;
    background: transparent;
    padding: .35rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    display: grid;
    place-items: center;
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.pte-style-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1e293b);
}
.pte-style-btn.active[b-kbr3m6kbmx] {
    background: #fff;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.pte-props-empty[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary, #94a3b8);
    font-size: .85rem;
    padding: 1.5rem;
}

/* ── Page settings: characters & approval (WYSIWYG sidebar) ─── */
.pte-page-settings[b-kbr3m6kbmx] {
    padding: .5rem .75rem .75rem;
}

.pte-page-chars-row[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.pte-chars-selector[b-kbr3m6kbmx] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.pte-no-chars[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
    font-size: .78rem;
    font-style: italic;
}

.pte-char-check[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    padding: .25rem .55rem;
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    transition: all .2s;
}
.pte-char-check:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}
.pte-char-check input[type="checkbox"][b-kbr3m6kbmx] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #3b82f6;
}
.pte-char-check span[b-kbr3m6kbmx] {
    margin: 0;
    line-height: 1;
}

.pte-approval-check[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    margin-top: .5rem;
}
.pte-approval-check input[type="checkbox"][b-kbr3m6kbmx] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* ── Administratie section (collapsible, in sidebar) ─── */
.pte-admin-section[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .35rem .75rem .75rem;
}

.pte-admin-label[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
}

.pte-admin-input[b-kbr3m6kbmx] {
    width: 100%;
    font-size: .8rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    transition: border-color .15s, box-shadow .15s;
}
.pte-admin-input:focus[b-kbr3m6kbmx] {
    outline: none;
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
}
.pte-admin-input[b-kbr3m6kbmx]::placeholder {
    color: var(--text-tertiary, #94a3b8);
    font-style: italic;
}

.pte-admin-textarea[b-kbr3m6kbmx] {
    width: 100%;
    font-size: .78rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    resize: vertical;
    line-height: 1.45;
    transition: border-color .15s, box-shadow .15s;
}
.pte-admin-textarea:focus[b-kbr3m6kbmx] {
    outline: none;
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
}

.pte-admin-prompt-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.pte-admin-default-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    padding: .15rem .45rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 5px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    font-size: .62rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.pte-admin-default-btn:hover[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, .06);
}

.pte-props label[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: .15rem;
    display: block;
}

.pte-props .input[b-kbr3m6kbmx] {
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    padding: .35rem .5rem;
    font-size: .8rem;
    background: transparent;
    color: inherit;
    transition: border-color .2s;
}
.pte-props .input:focus[b-kbr3m6kbmx] {
    outline: none;
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
}

.pte-props select.input[b-kbr3m6kbmx] {
    cursor: pointer;
}

.pte-mt-xs[b-kbr3m6kbmx] { margin-top: .25rem; }
.pte-mt-sm[b-kbr3m6kbmx] { margin-top: .4rem; }

.pte-row-2col[b-kbr3m6kbmx] {
    display: flex;
    gap: .5rem;
    margin-top: .4rem;
}
.pte-row-2col > div[b-kbr3m6kbmx] { flex: 1; }

.pte-clear-btn[b-kbr3m6kbmx] {
    font-size: .65rem;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

/* ── Color group (Photoshop-style picker) ── */

.pte-color-ps[b-kbr3m6kbmx] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    position: relative;
}

.pte-ps-swatches[b-kbr3m6kbmx] {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.pte-ps-fg[b-kbr3m6kbmx],
.pte-ps-bg[b-kbr3m6kbmx] {
    position: absolute;
    border: 2px solid var(--border-secondary, #aaa);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
    border-radius: 3px;
    padding: 0;
    outline: none;
}

.pte-ps-fg[b-kbr3m6kbmx] {
    width: 28px;
    height: 28px;
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
}

.pte-ps-bg[b-kbr3m6kbmx] {
    width: 28px;
    height: 28px;
    bottom: 0;
    right: 0;
    z-index: 1;
    box-shadow: 1px 1px 3px rgba(0,0,0,.15);
}

.pte-ps-fg.active[b-kbr3m6kbmx],
.pte-ps-bg.active[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .35), 1px 1px 4px rgba(0,0,0,.2);
    z-index: 3;
}

.pte-ps-right[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.pte-ps-labels[b-kbr3m6kbmx] {
    display: flex;
    gap: .5rem;
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
}

.pte-ps-labels span[b-kbr3m6kbmx] {
    cursor: pointer;
    transition: color .15s;
    line-height: 1.3;
}

.pte-ps-labels span.active[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    font-weight: 600;
}

.pte-ps-sep[b-kbr3m6kbmx] {
    display: none;
}

.pte-ps-hex-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pte-ps-hex-input[b-kbr3m6kbmx] {
    flex: 1;
    min-width: 0;
}

.pte-ps-native[b-kbr3m6kbmx] {
    display: none;
}

.pte-ps-overlay-picker[b-kbr3m6kbmx] {
    display: none;
}

/* ── Inline color picker (Phase 2C) ── */

.pte-cp-panel[b-kbr3m6kbmx] {
    margin-top: .5rem;
    padding: .6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.pte-cp-preview[b-kbr3m6kbmx] {
    width: 100%;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border-secondary, #cbd5e1);
    background-image: linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),
                      linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    position: relative;
}

.pte-cp-preview[b-kbr3m6kbmx]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: inherit;
}

.pte-cp-slider-group[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.pte-cp-slider-group > label[b-kbr3m6kbmx] {
    width: 14px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-align: center;
    flex-shrink: 0;
}

.pte-cp-slider-track[b-kbr3m6kbmx] {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    position: relative;
    border: 1px solid var(--border-secondary, #cbd5e1);
}

.pte-cp-alpha-track[b-kbr3m6kbmx] {
    background-image: linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),
                      linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
}

.pte-cp-alpha-track[b-kbr3m6kbmx]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: inherit;
}

.pte-cp-range[b-kbr3m6kbmx] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    background: transparent;
    position: relative;
    z-index: 1;
    margin: 0;
    cursor: pointer;
}

.pte-cp-range[b-kbr3m6kbmx]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--text-secondary, #475569);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: grab;
}

.pte-cp-range[b-kbr3m6kbmx]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--text-secondary, #475569);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: grab;
}

.pte-cp-val[b-kbr3m6kbmx] {
    width: 36px;
    font-size: .65rem;
    color: var(--text-secondary, #64748b);
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.pte-cp-hex-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .1rem;
}

.pte-cp-hash[b-kbr3m6kbmx] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.pte-cp-hex-field[b-kbr3m6kbmx] {
    flex: 1;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pte-cp-swatch-label[b-kbr3m6kbmx] {
    font-size: .65rem;
    color: var(--text-secondary, #64748b);
    margin-top: .15rem;
    font-weight: 500;
}

.pte-cp-swatch-row[b-kbr3m6kbmx] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pte-cp-swatch[b-kbr3m6kbmx] {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid var(--border-secondary, #cbd5e1);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}

.pte-cp-swatch:hover[b-kbr3m6kbmx] {
    border-color: var(--text-secondary, #64748b);
    transform: scale(1.12);
}

.pte-cp-swatch.active[b-kbr3m6kbmx] {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .35);
}

/* ── Font management panel (Phase 2D) ── */

.pte-font-manage-btn[b-kbr3m6kbmx] {
    margin-left: auto;
    font-size: .7rem;
    opacity: .6;
}

.pte-font-manage-btn:hover[b-kbr3m6kbmx] {
    opacity: 1;
}

.pte-font-panel[b-kbr3m6kbmx] {
    margin-bottom: .5rem;
    padding: .5rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pte-font-panel-header[b-kbr3m6kbmx] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

.pte-font-empty[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
}

.pte-font-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
    border-bottom: 1px solid var(--border-primary, #f1f5f9);
}

.pte-font-row:last-of-type[b-kbr3m6kbmx] {
    border-bottom: none;
}

.pte-font-name[b-kbr3m6kbmx] {
    flex: 1;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pte-font-meta[b-kbr3m6kbmx] {
    font-size: .6rem;
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
}

.pte-font-upload-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .25rem;
}

.pte-font-name-input[b-kbr3m6kbmx] {
    flex: 1;
    font-size: .75rem !important;
}

.pte-font-upload-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    font-size: .7rem;
    border-radius: 4px;
    background: var(--accent, #3b82f6);
    color: #fff;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background .15s;
}

.pte-font-upload-btn:hover:not(.disabled)[b-kbr3m6kbmx] {
    background: var(--accent-dark, #2563eb);
}

.pte-font-upload-btn.disabled[b-kbr3m6kbmx] {
    opacity: .5;
    cursor: not-allowed;
}

.pte-font-select[b-kbr3m6kbmx] {
    width: 100%;
}

/* ── Dark mode ────────────────────────── */

html.dark-mode .bb-page[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .bb-topbar[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .bb-title-icon[b-kbr3m6kbmx] {
    color: #60a5fa;
}

html.dark-mode .pte-editor-panel[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .pte-fullpage-overlay[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .pte-empty-state h2[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pte-empty-state .pte-empty-icon[b-kbr3m6kbmx] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .pte-input-unit[b-kbr3m6kbmx] {
    background: transparent;
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-input-unit .input[b-kbr3m6kbmx] {
    background: transparent !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .pte-props .input[b-kbr3m6kbmx] {
    background: transparent !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}
html.dark-mode .pte-props .input:focus[b-kbr3m6kbmx] {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .15) !important;
}

html.dark-mode .pte-context-bar[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
}
html.dark-mode .pte-view-toggle[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
}
html.dark-mode .pte-vt-btn:not(.active)[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-macro-overlay[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
html.dark-mode .pte-macro-result[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-block-actions[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
html.dark-mode .pte-ba-btn[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-ba-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #e2e8f0);
}
html.dark-mode .pte-block-delete[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-block-delete:hover[b-kbr3m6kbmx] {
    background: #451a1a;
    color: #f87171;
    border-color: #b91c1c;
}
html.dark-mode .pte-popconfirm[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
html.dark-mode .pte-popconfirm span[b-kbr3m6kbmx] {
    color: var(--text-primary, #e2e8f0);
}
html.dark-mode .pte-popconfirm-no[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-ghost[b-kbr3m6kbmx] {
    background: rgba(234, 179, 8, .06);
    border-color: rgba(234, 179, 8, .25);
}
html.dark-mode .pte-ghost-text[b-kbr3m6kbmx] {
    color: #fbbf24;
}
html.dark-mode .pte-ghost-badge[b-kbr3m6kbmx] {
    background: #a16207;
    color: #fef3c7;
}
html.dark-mode .pte-ghost-dismiss[b-kbr3m6kbmx] {
    background: rgba(234, 179, 8, .15);
    color: #fbbf24;
}
html.dark-mode .pte-ghost-dismiss:hover[b-kbr3m6kbmx] {
    background: #a16207;
    color: #fef3c7;
}

html.dark-mode .pte-ps-fg[b-kbr3m6kbmx],
html.dark-mode .pte-ps-bg[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #64748b);
    box-shadow: 1px 1px 4px rgba(0,0,0,.4);
}

html.dark-mode .pte-ps-fg.active[b-kbr3m6kbmx],
html.dark-mode .pte-ps-bg.active[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .35), 1px 1px 4px rgba(0,0,0,.3);
}

html.dark-mode .pte-ps-native[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-cp-panel[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-cp-preview[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-cp-slider-track[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-cp-range[b-kbr3m6kbmx]::-webkit-slider-thumb {
    background: var(--bg-primary, #0f172a);
    border-color: #94a3b8;
}

html.dark-mode .pte-cp-range[b-kbr3m6kbmx]::-moz-range-thumb {
    background: var(--bg-primary, #0f172a);
    border-color: #94a3b8;
}

html.dark-mode .pte-cp-val[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pte-cp-hash[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pte-cp-swatch-label[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pte-cp-swatch[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-cp-swatch:hover[b-kbr3m6kbmx] {
    border-color: #94a3b8;
}

html.dark-mode .pte-cp-swatch.active[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .35);
}

html.dark-mode .pte-font-panel[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pte-font-row[b-kbr3m6kbmx] {
    border-color: var(--border-secondary, #334155);
}

html.dark-mode .pte-font-upload-btn[b-kbr3m6kbmx] {
    background: #3b82f6;
}

html.dark-mode .pte-zoom-bar[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .pte-bar-divider[b-kbr3m6kbmx] {
    background: var(--border-primary, #475569);
}

html.dark-mode .pte-action-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-action-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-hover, #475569);
    border-color: var(--text-secondary, #94a3b8);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pte-action-primary[b-kbr3m6kbmx] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
html.dark-mode .pte-action-primary:hover[b-kbr3m6kbmx] {
    background: #2563eb;
    border-color: #2563eb;
}

html.dark-mode .pte-action-danger[b-kbr3m6kbmx] {
    background: transparent;
    border-color: var(--border-secondary, #475569);
    color: #f87171;
}
html.dark-mode .pte-action-danger:hover[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .12);
    border-color: #ef4444;
    color: #ef4444;
}

html.dark-mode .pte-undo-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-undo-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(96, 165, 250, .1);
}

html.dark-mode .pte-canvas-scroller[b-kbr3m6kbmx] {
    background: #0a0e1a;
}

html.dark-mode .pte-canvas[b-kbr3m6kbmx] {
    background: #e8e8e8;
    border-color: var(--border-primary, #334155);
}

html.dark-mode .pte-canvas:hover[b-kbr3m6kbmx] {
    border-color: #60a5fa;
}

html.dark-mode .pte-block[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .1);
    border-color: rgba(96, 165, 250, .3);
}

html.dark-mode .pte-block:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .15);
    border-color: rgba(96, 165, 250, .5);
}

html.dark-mode .pte-block.pte-selected[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, .12);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .3), 0 4px 16px rgba(96, 165, 250, .15);
}

html.dark-mode .pte-block-label[b-kbr3m6kbmx] {
    background: #60a5fa;
}

html.dark-mode .pte-resize-handle[b-kbr3m6kbmx] {
    background: var(--border-primary, #334155);
}
html.dark-mode .pte-resize-handle:hover[b-kbr3m6kbmx],
html.dark-mode .pte-resize-handle.pte-resizing[b-kbr3m6kbmx] {
    background: var(--accent-primary, #3b82f6);
}

html.dark-mode .pte-props[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .pte-align-group[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .pte-align-group .pte-align-btn[b-kbr3m6kbmx] {
    color: #94a3b8;
}
html.dark-mode .pte-align-group .pte-align-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    color: #e2e8f0;
}
html.dark-mode .pte-align-group .pte-align-btn.active[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: #60a5fa;
    box-shadow: none;
}

html.dark-mode .pte-style-toggles[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .pte-style-btn.active[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: #60a5fa;
    box-shadow: none;
}

html.dark-mode .pte-handle[b-kbr3m6kbmx]::after {
    background: #60a5fa;
}

html.dark-mode .pte-img-reset[b-kbr3m6kbmx] {
    border-color: rgba(248, 113, 113, .3);
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}
html.dark-mode .pte-img-reset:hover[b-kbr3m6kbmx] {
    background: rgba(220, 38, 38, .28);
    border-color: rgba(248, 113, 113, .5);
    color: #fca5a5;
}

/* Section Labels */

/* SVG icons in action buttons */
html.dark-mode .btn-svg-icon[b-kbr3m6kbmx] {
    color: inherit;
}

/* Page chars row — border */
html.dark-mode .page-chars-row[b-kbr3m6kbmx] {
    border-top-color: var(--border-primary, #334155) !important;
}

/* Form group — border + colors */
html.dark-mode .form-group[b-kbr3m6kbmx] {
    border-top-color: var(--border-primary, #334155) !important;
}

html.dark-mode .form-group > label[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .form-group > small[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* Checkbox accent in dark mode */
html.dark-mode .char-check input[type="checkbox"][b-kbr3m6kbmx],
html.dark-mode .form-group input[type="checkbox"][b-kbr3m6kbmx] {
    accent-color: var(--accent-primary, #60a5fa);
}

/* PDF button in zoom bar */
html.dark-mode .pte-pdf-btn[b-kbr3m6kbmx] {
    border-color: rgba(236, 72, 153, .4);
    color: #f472b6;
}
html.dark-mode .pte-pdf-btn:hover[b-kbr3m6kbmx],
html.dark-mode .pte-pdf-btn.active[b-kbr3m6kbmx] {
    background: rgba(190, 24, 93, .2);
    border-color: #f472b6;
    color: #fbcfe8;
}

/* PDF Side Panel dark mode */
html.dark-mode .pte-pdf-panel[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-left-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pdf-panel-top[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, rgba(190, 24, 93, .1) 0%, rgba(157, 23, 77, .06) 100%);
    border-bottom-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pdf-panel-title[b-kbr3m6kbmx] {
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-panel-close[b-kbr3m6kbmx] {
    color: #94a3b8;
}
html.dark-mode .pte-pdf-panel-close:hover[b-kbr3m6kbmx] {
    background: rgba(244, 114, 182, .12);
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-panel-page-info[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
}
html.dark-mode .pte-pdf-panel-page-badge[b-kbr3m6kbmx] {
    background: rgba(244, 114, 182, .12);
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-panel-page-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-pdf-panel-section-label[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}
html.dark-mode .pte-pdf-panel-hint[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}
html.dark-mode .pte-pdf-cast-row[b-kbr3m6kbmx] {
    background: rgba(51, 65, 85, .5);
    border-color: var(--border-primary, #475569);
}
html.dark-mode .pte-pdf-cast-row:hover[b-kbr3m6kbmx] {
    border-color: rgba(244, 114, 182, .35);
}
html.dark-mode .pte-pdf-cast-role code[b-kbr3m6kbmx] {
    background: rgba(244, 114, 182, .12);
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-cast-role small[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}
html.dark-mode .pte-pdf-cast-name[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-pdf-cast-name:focus[b-kbr3m6kbmx] {
    border-color: #f472b6;
    box-shadow: 0 0 0 2px rgba(244, 114, 182, .12);
    background: var(--bg-secondary, #1e293b);
}
html.dark-mode .pte-pdf-g-btn[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-pdf-g-btn:hover[b-kbr3m6kbmx] {
    border-color: rgba(244, 114, 182, .35);
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-g-btn.active[b-kbr3m6kbmx] {
    background: rgba(244, 114, 182, .1);
    border-color: rgba(244, 114, 182, .4);
    color: #f9a8d4;
}
html.dark-mode .pte-pdf-panel-footer[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-top-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pdf-cancel-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-pdf-cancel-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-hover, #475569);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-pdf-generate-btn[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
    box-shadow: 0 1px 3px rgba(157, 23, 77, .4);
}
html.dark-mode .pte-pdf-generate-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    box-shadow: 0 2px 8px rgba(236, 72, 153, .3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMPORT LABEL
   ═══════════════════════════════════════════════════════════════════════════ */
.bb-import-label[b-kbr3m6kbmx] {
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STORY IMPORT CONFIRMATION MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.bb-import-overlay[b-kbr3m6kbmx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    animation: fadeIn 0.15s ease;
}

.bb-import-dialog[b-kbr3m6kbmx] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bb-import-dialog h3[b-kbr3m6kbmx] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.bb-import-dialog p[b-kbr3m6kbmx] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.bb-import-warning[b-kbr3m6kbmx] {
    font-size: 0.85rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}

.bb-import-summary[b-kbr3m6kbmx] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.bb-import-summary li[b-kbr3m6kbmx] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.bb-import-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */
.bb-toast[b-kbr3m6kbmx] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 9000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: toastSlideUp-b-kbr3m6kbmx 0.3s ease;
    pointer-events: none;
}

.bb-toast-success[b-kbr3m6kbmx] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.bb-toast-error[b-kbr3m6kbmx] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@keyframes toastSlideUp-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMPORT MODAL + TOAST – DARK MODE
   → Moved to admin-shared.css (global, !important) to bypass CSS isolation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 1 — NEW FEATURE STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dirty Indicator ────────────────────────────────────────────────────────── */
.bb-dirty-indicator[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    font-size: 1.4rem;
    line-height: 1;
    animation: bbDirtyPulse-b-kbr3m6kbmx 1.5s ease-in-out infinite;
    margin: 0 .2rem;
    cursor: default;
}

@keyframes bbDirtyPulse-b-kbr3m6kbmx {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ── Confirm Modal ──────────────────────────────────────────────────────────── */
.bb-confirm-modal[b-kbr3m6kbmx] {
    max-width: 440px;
}

.bb-confirm-modal .modal-body p[b-kbr3m6kbmx] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-primary, #1e293b);
}

/* ── Dark mode: page settings (characters & approval) in WYSIWYG sidebar ── */
html.dark-mode .pte-char-check[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-char-check:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .08);
    border-color: rgba(96, 165, 250, .4);
}
html.dark-mode .pte-approval-check[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

/* ── Dark mode: page insert button (single-page mode) ── */
html.dark-mode .pte-insert-trigger.pte-insert-page[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
    color: #60a5fa;
    border-color: #60a5fa;
}
html.dark-mode .pte-insert-trigger.pte-insert-page:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .1);
    border-color: #93bbfd;
    color: #93bbfd;
}

/* ── Dark mode: administratie section in WYSIWYG sidebar ── */
html.dark-mode .pte-admin-input[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-admin-input:focus[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .15);
}
html.dark-mode .pte-admin-textarea[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-admin-textarea:focus[b-kbr3m6kbmx] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .15);
}
html.dark-mode .pte-admin-label[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-admin-default-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-admin-default-btn:hover[b-kbr3m6kbmx] {
    color: #60a5fa;
    border-color: #60a5fa;
    background: rgba(96, 165, 250, .08);
}

/* ── Dark mode additions ────────────────────────────────────────────────────── */
html.dark-mode .bb-dirty-indicator[b-kbr3m6kbmx] {
    color: #60a5fa;
}

html.dark-mode .bb-confirm-modal .modal-body p[b-kbr3m6kbmx] {
    color: #e2e8f0;
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2A — LAYER MANAGEMENT PRO
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Lock badge on canvas block ─────────────────────────────────────────── */
.pte-lock-badge[b-kbr3m6kbmx] {
    position: absolute;
    top: -2px;
    right: 2px;
    font-size: .6rem;
    pointer-events: none;
    opacity: .7;
    z-index: 5;
}

.pte-block.pte-locked[b-kbr3m6kbmx] {
    cursor: not-allowed;
}

.pte-block.pte-locked .pte-handle[b-kbr3m6kbmx] {
    display: none;
}

.pte-block.pte-locked[b-kbr3m6kbmx]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px dashed rgba(239, 68, 68, .4);
    border-radius: 3px;
    pointer-events: none;
}

/* ── Layer list visibility & lock buttons ────────────────────────────────── */
.pte-layer-vis-btn[b-kbr3m6kbmx] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .7rem;
    padding: 0 2px;
    opacity: .7;
    flex-shrink: 0;
}

.pte-layer-vis-btn:hover[b-kbr3m6kbmx] { opacity: 1; }
.pte-layer-vis-btn.pte-vis-off[b-kbr3m6kbmx] { opacity: .35; }

.pte-layer-item.pte-layer-hidden[b-kbr3m6kbmx] {
    opacity: .5;
}

.pte-layer-item.pte-layer-hidden .pte-layer-label[b-kbr3m6kbmx] {
    text-decoration: line-through;
    color: #94a3b8;
}

.pte-lock-active[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .12) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2E — TYPOGRAPHY CONTROLS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Opacity range slider ─────────────────────────────────────────────────── */
.pte-input-unit input[type="range"][b-kbr3m6kbmx] {
    flex: 1;
    height: 4px;
    accent-color: var(--accent, #3b82f6);
    cursor: pointer;
}

/* ── Dark mode additions ──────────────────────────────────────────────────── */
html.dark-mode .pte-block.pte-locked[b-kbr3m6kbmx]::after {
    border-color: rgba(239, 68, 68, .5);
}

html.dark-mode .pte-layer-item.pte-layer-hidden .pte-layer-label[b-kbr3m6kbmx] {
    color: #64748b;
}
html.dark-mode .pte-layer-name-input[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: #60a5fa;
    color: var(--text-primary, #e2e8f0);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .2);
}
html.dark-mode .pte-layer-label:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .1);
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2B — MULTI-SELECT + ALIGN/DISTRIBUTE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Multi-selected block indicator ─────────────────────────────────────── */
.pte-block.pte-multi-selected[b-kbr3m6kbmx] {
    outline: 2px solid rgba(59, 130, 246, .6);
    outline-offset: 1px;
    z-index: 9980 !important;
}

.pte-block.pte-multi-selected.pte-selected[b-kbr3m6kbmx] {
    outline-color: rgba(59, 130, 246, .9);
}

/* ── Cut block indicator (dimmed + dashed border) ──────────────────────── */
.pte-block.pte-cut[b-kbr3m6kbmx] {
    opacity: .35;
    outline: 2px dashed rgba(239, 68, 68, .7);
    outline-offset: 2px;
    pointer-events: none;
    transition: opacity .25s ease;
}

.pte-block.pte-cut[b-kbr3m6kbmx]::before {
    content: '✂';
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 13px;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
    animation: pte-cut-snip-b-kbr3m6kbmx .6s ease-out;
}

@keyframes pte-cut-snip-b-kbr3m6kbmx {
    0%   { opacity: 0; transform: scale(.5) rotate(-20deg); }
    60%  { opacity: 1; transform: scale(1.15) rotate(5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Align/Distribute toolbar ────────────────────────────────────────────── */
.pte-align-bar[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: var(--surface-2, #f1f5f9);
    border-bottom: 1px solid var(--border, #e2e8f0);
    flex-shrink: 0;
}

.pte-align-label[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    margin-right: 4px;
    font-weight: 600;
}

.pte-align-divider[b-kbr3m6kbmx] {
    width: 1px;
    height: 18px;
    background: var(--border, #cbd5e1);
    margin: 0 4px;
    flex-shrink: 0;
}

.pte-align-btn[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text, #334155);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pte-align-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--surface-3, #e2e8f0);
    color: var(--accent, #3b82f6);
}

.pte-align-btn:active:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}

.pte-align-btn:disabled[b-kbr3m6kbmx] {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Layer list multi-select indicator ───────────────────────────────────── */
.pte-layer-item.pte-layer-multi[b-kbr3m6kbmx] {
    border-left: 3px solid var(--accent, #3b82f6);
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
html.dark-mode .pte-align-bar[b-kbr3m6kbmx] {
    background: var(--surface-2, #1e293b);
    border-color: var(--border, #334155);
}

html.dark-mode .pte-align-btn[b-kbr3m6kbmx] {
    color: #e2e8f0;
}

html.dark-mode .pte-align-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--surface-3, #334155);
}

html.dark-mode .pte-block.pte-multi-selected[b-kbr3m6kbmx] {
    outline-color: rgba(96, 165, 250, .6);
}

/* ════════════════════════════════════════════════════════════════════════════
   DOCKABLE / FLOATABLE PROPERTY PANE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dock-left: reverse order of resize handle + props ── */
.pte-editor-body.pte-dock-left[b-kbr3m6kbmx] {
    flex-direction: row;
}
.pte-editor-body.pte-dock-left > .pte-canvas-wrapper[b-kbr3m6kbmx] {
    order: 3;
}
.pte-editor-body.pte-dock-left > .pte-resize-handle[b-kbr3m6kbmx] {
    order: 2;
}
.pte-editor-body.pte-dock-left > .pte-props[b-kbr3m6kbmx] {
    order: 1;
}
.pte-editor-body.pte-dock-left > .pte-props-collapsed[b-kbr3m6kbmx] {
    order: 1;
}
.pte-editor-body.pte-dock-left > .pte-pdf-panel[b-kbr3m6kbmx] {
    order: 4;
}

.pte-resize-left[b-kbr3m6kbmx] {
    order: 2;
}

.pte-props-docked-left[b-kbr3m6kbmx] {
    order: 1;
    border-left: none;
    border-right: none;
}

/* ── Floating mode ──────────────────── */
.pte-props.pte-props-floating[b-kbr3m6kbmx] {
    position: fixed;
    z-index: 3600;
    top: 80px;
    right: 24px;
    max-height: calc(100vh - 100px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .1);
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    overflow-y: auto;
}

/* ── Floating panel edge-resize strips ── */
.pte-float-resize-edge[b-kbr3m6kbmx] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 10;
    transition: background .15s;
}
.pte-float-resize-left[b-kbr3m6kbmx] {
    left: 0;
    border-radius: 12px 0 0 12px;
}
.pte-float-resize-right[b-kbr3m6kbmx] {
    right: 0;
    border-radius: 0 12px 12px 0;
}
.pte-float-resize-edge:hover[b-kbr3m6kbmx],
.pte-float-resize-edge.pte-resizing[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .35);
}

/* ── Dock toolbar (inside pte-props) ──── */
.pte-dock-toolbar[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    padding: 0 0 .5rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    min-height: 28px;
    cursor: default;
}

.pte-props-floating .pte-dock-toolbar[b-kbr3m6kbmx] {
    cursor: grab;
    justify-content: space-between;
}
.pte-props-floating .pte-dock-toolbar:active[b-kbr3m6kbmx] {
    cursor: grabbing;
}

.pte-dock-toolbar-title[b-kbr3m6kbmx] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.pte-dock-toolbar-actions[b-kbr3m6kbmx] {
    display: flex;
    gap: 2px;
    align-items: center;
}

.pte-dock-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    padding: 0;
}
.pte-dock-btn:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    border-color: var(--border-primary, #e2e8f0);
}
.pte-dock-btn.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .1);
    color: var(--accent, #3b82f6);
    border-color: rgba(59, 130, 246, .3);
}

/* ── Collapsed icon bar ─────────────── */
.pte-props-collapsed[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: .5rem .3rem;
    background: var(--bg-secondary, #f8fafc);
    border-left: 1px solid var(--border-primary, #e2e8f0);
    min-height: 0;
}

.pte-props-collapsed-left[b-kbr3m6kbmx] {
    border-left: none;
    border-right: 1px solid var(--border-primary, #e2e8f0);
    order: 1;
}

.pte-collapsed-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0;
}
.pte-collapsed-btn:hover[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    color: white;
}

/* ── Dark mode overrides ─────────────── */
html.dark-mode .pte-props-collapsed[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-left-color: var(--border-primary, #334155);
}
html.dark-mode .pte-props-collapsed-left[b-kbr3m6kbmx] {
    border-right-color: var(--border-primary, #334155);
}
html.dark-mode .pte-collapsed-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-collapsed-btn:hover[b-kbr3m6kbmx] {
    background: var(--accent-primary, #3b82f6);
    border-color: var(--accent-primary, #3b82f6);
    color: white;
}
html.dark-mode .pte-dock-btn[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}
html.dark-mode .pte-dock-btn:hover[b-kbr3m6kbmx] {
    background: var(--surface-3, #334155);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-dock-btn.active[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .15);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, .3);
}
html.dark-mode .pte-dock-toolbar[b-kbr3m6kbmx] {
    border-bottom-color: var(--border-primary, #334155);
}
html.dark-mode .pte-props.pte-props-floating[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
}

/* ── Dark mode: PDF Preview Panel ─────── */
html.dark-mode .pte-pdf-preview-panel[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-left-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pdf-preview-header[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pdf-preview-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-pdf-preview-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .12);
    border-color: rgba(96, 165, 250, .4);
    color: #60a5fa;
}
html.dark-mode .pte-pdf-preview-body[b-kbr3m6kbmx] {
    background: var(--bg-primary, #0f172a);
}
html.dark-mode .pte-pdf-preview-loading[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

/* ════════════════════════════════════════════════════════════════════════════
   DOCKABLE / FLOATABLE PAGES NAVIGATION PANEL
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base panel ─────────────────────── */
.pte-pages[b-kbr3m6kbmx] {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 400px;
    padding: .8rem .9rem;
    overflow-y: auto;
    background: transparent;
    border-right: 1px solid var(--border-primary, #e2e8f0);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.pte-pages:hover[b-kbr3m6kbmx] {
    scrollbar-color: var(--border-primary, #cbd5e1) transparent;
}
.pte-pages[b-kbr3m6kbmx]::-webkit-scrollbar { width: 5px; }
.pte-pages[b-kbr3m6kbmx]::-webkit-scrollbar-track { background: transparent; }
.pte-pages[b-kbr3m6kbmx]::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.pte-pages:hover[b-kbr3m6kbmx]::-webkit-scrollbar-thumb { background: var(--border-primary, #cbd5e1); }

/* ── Docked-right positioning ─────── */
.pte-pages-docked-right[b-kbr3m6kbmx] {
    order: 99;
    border-right: none;
    border-left: 1px solid var(--border-primary, #e2e8f0);
}

/* ── Floating mode ────────────────── */
.pte-pages.pte-pages-floating[b-kbr3m6kbmx] {
    position: fixed;
    z-index: 3500;
    top: 80px;
    left: 24px;
    max-height: calc(100vh - 100px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .1);
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    overflow-y: auto;
    order: unset;
}

/* ── Dock toolbar ─────────────────── */
.pte-pages-dock-toolbar[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    padding: 0 0 .4rem;
    margin-bottom: .15rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    min-height: 26px;
    cursor: default;
}

.pte-pages-floating .pte-pages-dock-toolbar[b-kbr3m6kbmx] {
    cursor: grab;
    justify-content: space-between;
}
.pte-pages-floating .pte-pages-dock-toolbar:active[b-kbr3m6kbmx] {
    cursor: grabbing;
}

/* ── Header (icon + title + count) ── */
.pte-pages-header[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .1rem 0;
    color: var(--text-secondary, #64748b);
}

.pte-pages-title[b-kbr3m6kbmx] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-primary, #1e293b);
}

.pte-pages-count[b-kbr3m6kbmx] {
    margin-left: auto;
    font-size: .68rem;
    color: var(--text-tertiary, #94a3b8);
    white-space: nowrap;
}

/* ── Mini navigation (prev / indicator / next) ── */
.pte-pages-nav[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem 0 .35rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.pte-pages-nav-btn[b-kbr3m6kbmx] {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    color: var(--text-secondary, #475569);
    padding: 0;
}

.pte-pages-nav-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}
.pte-pages-nav-btn:active:not(:disabled)[b-kbr3m6kbmx] {
    transform: scale(.93);
}
.pte-pages-nav-btn:disabled[b-kbr3m6kbmx] {
    opacity: .35;
    cursor: not-allowed;
}

.pte-pages-nav-indicator[b-kbr3m6kbmx] {
    font-weight: 600;
    font-size: .72rem;
    color: var(--text-secondary, #64748b);
    min-width: 42px;
    text-align: center;
}

/* ── Spread list ──────────────────── */
.pte-pages-list[b-kbr3m6kbmx] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.pte-pages-list:hover[b-kbr3m6kbmx] {
    scrollbar-color: var(--border-primary, #cbd5e1) transparent;
}
.pte-pages-list[b-kbr3m6kbmx]::-webkit-scrollbar { width: 4px; }
.pte-pages-list[b-kbr3m6kbmx]::-webkit-scrollbar-track { background: transparent; }
.pte-pages-list[b-kbr3m6kbmx]::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.pte-pages-list:hover[b-kbr3m6kbmx]::-webkit-scrollbar-thumb { background: var(--border-primary, #cbd5e1); }

/* ── Spread item ──────────────────── */
.pte-pages-item[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
    border: 1px solid transparent;
    position: relative;
}

.pte-pages-item:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    transform: translateX(2px);
}

.pte-pages-item.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .07);
    border-color: rgba(59, 130, 246, .35);
    box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
}

.pte-pages-item-number[b-kbr3m6kbmx] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    transition: background .15s, color .15s;
}

.pte-pages-item.active .pte-pages-item-number[b-kbr3m6kbmx] {
    background: var(--accent, #3b82f6);
    color: white;
}

.pte-pages-item-label[b-kbr3m6kbmx] {
    flex: 1;
    font-size: .78rem;
    color: var(--text-primary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.pte-pages-item.active .pte-pages-item-label[b-kbr3m6kbmx] {
    color: var(--accent, #3b82f6);
    font-weight: 600;
}

/* ── Resize handle for pages panel ── */
.pte-pages-resize-handle[b-kbr3m6kbmx] {
    flex: 0 0 6px;
    position: relative;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-primary, #e2e8f0);
    transition: background .15s, box-shadow .15s;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
}
.pte-pages-resize-handle[b-kbr3m6kbmx]::before {
    content: '';
    position: absolute;
    inset: 0 -4px;
    z-index: 1;
}
.pte-pages-resize-handle:hover[b-kbr3m6kbmx],
.pte-pages-resize-handle.pte-resizing[b-kbr3m6kbmx] {
    background: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 8px rgba(59, 130, 246, .3);
}

.pte-pages-resize-handle .pte-resize-grip[b-kbr3m6kbmx] {
    pointer-events: none;
}

.pte-pages-resize-right[b-kbr3m6kbmx] {
    order: 97;
}

/* ── Collapsed icon bar ─────────────── */
.pte-pages-collapsed[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: .5rem .3rem;
    background: transparent;
    border-right: 1px solid var(--border-primary, #e2e8f0);
    min-height: 0;
}

.pte-pages-collapsed-right[b-kbr3m6kbmx] {
    border-right: none;
    border-left: 1px solid var(--border-primary, #e2e8f0);
    order: 99;
}

/* ── Dark mode: Pages panel ─────────── */
html.dark-mode .pte-pages[b-kbr3m6kbmx] {
    background: transparent;
    border-right-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pages-docked-right[b-kbr3m6kbmx] {
    border-left-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pages.pte-pages-floating[b-kbr3m6kbmx] {
    background: #18181b;
    border-color: var(--border-primary, #334155);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
}
html.dark-mode .pte-pages-dock-toolbar[b-kbr3m6kbmx] {
    border-bottom-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pages-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-pages-count[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}
html.dark-mode .pte-pages-nav[b-kbr3m6kbmx] {
    border-bottom-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pages-nav-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-pages-nav-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--surface-3, #475569);
    color: var(--text-primary, #f1f5f9);
}
html.dark-mode .pte-pages-item:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .06);
}
html.dark-mode .pte-pages-item.active[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .1);
    border-color: rgba(96, 165, 250, .3);
    box-shadow: inset 3px 0 0 #60a5fa;
}
html.dark-mode .pte-pages-item-number[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #94a3b8);
}
html.dark-mode .pte-pages-item.active .pte-pages-item-number[b-kbr3m6kbmx] {
    background: #3b82f6;
    color: white;
}
html.dark-mode .pte-pages-item-label[b-kbr3m6kbmx] {
    color: var(--text-primary, #e2e8f0);
}
html.dark-mode .pte-pages-item.active .pte-pages-item-label[b-kbr3m6kbmx] {
    color: #60a5fa;
}
html.dark-mode .pte-pages-resize-handle[b-kbr3m6kbmx] {
    background: var(--border-primary, #334155);
}
html.dark-mode .pte-pages-resize-handle:hover[b-kbr3m6kbmx],
html.dark-mode .pte-pages-resize-handle.pte-resizing[b-kbr3m6kbmx] {
    background: #3b82f6;
}
html.dark-mode .pte-pages-collapsed[b-kbr3m6kbmx] {
    background: transparent;
    border-right-color: var(--border-primary, #334155);
}
html.dark-mode .pte-pages-collapsed-right[b-kbr3m6kbmx] {
    border-left-color: var(--border-primary, #334155);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5: Text Enhancements — curved text, content overflow, vertical align
   ═══════════════════════════════════════════════════════════════════════════ */

/* Curved text container */
.pte-curved-text[b-kbr3m6kbmx] {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pte-curved-text svg[b-kbr3m6kbmx] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Content overflow warning (text exceeds block height) */
.pte-content-overflow[b-kbr3m6kbmx]::after {
    content: 'âš ';
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbbf24;
    color: #78350f;
    border-radius: 50%;
    font-size: .6rem;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE SHEET OPTIONS MODAL
   Class names avoid admin-shared.css wildcards: no -content, -header, -label, -section
   ═══════════════════════════════════════════════════════════════════════════ */

.tso[b-kbr3m6kbmx] {
    width: 440px;
    max-width: 92vw;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 !important;
}

.tso-head[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.3rem 1.6rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.tso-head-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #3b82f6;
    flex-shrink: 0;
}

.tso-head h3[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary, #1e293b);
}

.tso-sub[b-kbr3m6kbmx] {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    background: transparent;
}

.tso-body[b-kbr3m6kbmx] {
    padding: 1rem 1.6rem 0.5rem;
    background: transparent;
}

.tso-hint[b-kbr3m6kbmx] {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.45;
    background: transparent;
}

/* ── Toggle row ──────────────────────────── */
.tso-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    margin: 0 -0.7rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
}

.tso-row:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, 0.05);
}

.tso-row-icon[b-kbr3m6kbmx] {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    background: transparent;
}

.tso-row-info[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    background: transparent;
}

.tso-row-title[b-kbr3m6kbmx] {
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--text-primary, #334155);
    background: transparent;
}

.tso-row-count[b-kbr3m6kbmx] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
    background: transparent;
}

/* ── Toggle switch ───────────────────────── */
.tso-toggle[b-kbr3m6kbmx] {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    background: transparent;
}

.tso-toggle input[b-kbr3m6kbmx] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tso-toggle-track[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: #cbd5e1;
    transition: background 0.2s ease;
    cursor: pointer;
}

.tso-toggle-track[b-kbr3m6kbmx]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.tso-toggle input:checked + .tso-toggle-track[b-kbr3m6kbmx] {
    background: #3b82f6;
}

.tso-toggle input:checked + .tso-toggle-track[b-kbr3m6kbmx]::after {
    transform: translateX(18px);
}

/* ── Actions ─────────────────────────────── */
.tso-actions[b-kbr3m6kbmx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem 1.2rem;
    background: transparent;
}

.tso-actions .action-btn.primary[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Dark mode ───────────────────────────── */
html.dark-mode .tso[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .tso-head[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .tso-head-icon[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(59, 130, 246, .22));
    color: #60a5fa;
}

html.dark-mode .tso-head h3[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tso-sub[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
    background: transparent;
}

html.dark-mode .tso-body[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tso-hint[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
    background: transparent;
}

html.dark-mode .tso-row[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tso-row:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, 0.08);
}

html.dark-mode .tso-row-icon[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tso-row-info[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tso-row-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
    background: transparent;
}

html.dark-mode .tso-row-count[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
    background: transparent;
}

html.dark-mode .tso-toggle[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tso-toggle-track[b-kbr3m6kbmx] {
    background: #475569;
}

html.dark-mode .tso-toggle input:checked + .tso-toggle-track[b-kbr3m6kbmx] {
    background: #3b82f6;
}

html.dark-mode .tso-actions[b-kbr3m6kbmx] {
    background: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE SHEET PROGRESS MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.tsm[b-kbr3m6kbmx] {
    width: 500px;
    max-width: 92vw;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 !important;
}

.tsm-head[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.3rem 1.6rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.tsm-head-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #3b82f6;
    flex-shrink: 0;
}

.tsm-head h3[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary, #1e293b);
}

.tsm-subtitle[b-kbr3m6kbmx] {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.tsm-body[b-kbr3m6kbmx] {
    padding: 1rem 1.6rem 1.5rem;
    background: transparent;
}

.tsm-steps[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Step row ─────────────────────────────── */
.tsm-step[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 10px;
    position: relative;
    transition: background 0.25s ease, color 0.25s ease;
    background: transparent;
}

.tsm-step.pending[b-kbr3m6kbmx] {
    background: transparent;
}

.tsm-step.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, 0.06);
}

.tsm-step.done[b-kbr3m6kbmx] {
    background: transparent;
}

.tsm-step.failed[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, 0.05);
}

/* ── Left indicator (dot / spinner / check / fail) ─── */
.tsm-step-indicator[b-kbr3m6kbmx] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.tsm-dot[b-kbr3m6kbmx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-secondary, #cbd5e1);
}

.tsm-spinner[b-kbr3m6kbmx] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: tsmSpin-b-kbr3m6kbmx 0.7s linear infinite;
}

@keyframes tsmSpin-b-kbr3m6kbmx {
    to { transform: rotate(360deg); }
}

.tsm-check[b-kbr3m6kbmx] {
    color: #22c55e;
    animation: tsmPopIn-b-kbr3m6kbmx 0.3s cubic-bezier(.175, .885, .32, 1.275);
}

.tsm-fail[b-kbr3m6kbmx] {
    color: #ef4444;
    animation: tsmPopIn-b-kbr3m6kbmx 0.3s cubic-bezier(.175, .885, .32, 1.275);
}

@keyframes tsmPopIn-b-kbr3m6kbmx {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Step info ────────────────────────────── */
.tsm-step-info[b-kbr3m6kbmx] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    background: transparent;
}

.tsm-step-icon[b-kbr3m6kbmx] {
    font-size: 0.95rem;
    flex-shrink: 0;
    line-height: 1;
    background: transparent;
}

.tsm-step-name[b-kbr3m6kbmx] {
    font-size: 0.88rem;
    font-weight: 520;
    color: var(--text-primary, #334155);
    white-space: nowrap;
    background: transparent;
}

.tsm-step.pending .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 450;
}

.tsm-step.active .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-primary, #1e293b);
    font-weight: 600;
}

.tsm-step.done .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-secondary, #64748b);
}

.tsm-step.failed .tsm-step-name[b-kbr3m6kbmx] {
    color: #ef4444;
}

.tsm-step-detail[b-kbr3m6kbmx] {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
}

.tsm-step.active .tsm-step-detail[b-kbr3m6kbmx] {
    color: #3b82f6;
    font-weight: 500;
}

.tsm-step.done .tsm-step-detail[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #94a3b8);
}

/* ── Progress bar (thumbnails) ────────────── */
.tsm-progress-wrap[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0 0.5rem 2.5rem;
    animation: tsmFadeSlide-b-kbr3m6kbmx 0.25s ease;
    background: transparent;
}

@keyframes tsmFadeSlide-b-kbr3m6kbmx {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tsm-progress-bar[b-kbr3m6kbmx] {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

.tsm-progress-fill[b-kbr3m6kbmx] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 3px;
    transition: width 0.15s ease;
}

.tsm-progress-pct[b-kbr3m6kbmx] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3b82f6;
    min-width: 2.5rem;
    text-align: right;
    background: transparent;
}

/* ── Error state ──────────────────────────── */
.tsm-error[b-kbr3m6kbmx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c;
    font-size: 0.84rem;
    line-height: 1.45;
    animation: tsmFadeSlide-b-kbr3m6kbmx 0.25s ease;
}

.tsm-error svg[b-kbr3m6kbmx] {
    flex-shrink: 0;
    margin-top: 1px;
    color: #ef4444;
    background: transparent;
}

.tsm-footer[b-kbr3m6kbmx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    background: transparent;
}

/* ── Dark mode ────────────────────────────── */
html.dark-mode .tsm[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .tsm-head[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .tsm-head-icon[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(59, 130, 246, .22));
    color: #60a5fa;
}

html.dark-mode .tsm-head h3[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tsm-subtitle[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .tsm-body[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tsm-step[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tsm-step.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, 0.08);
}

html.dark-mode .tsm-step.failed[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, 0.08);
}

html.dark-mode .tsm-step-indicator[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tsm-step-info[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tsm-step-icon[b-kbr3m6kbmx] {
    background: transparent;
}

html.dark-mode .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-secondary, #cbd5e1);
    background: transparent;
}

html.dark-mode .tsm-step.pending .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

html.dark-mode .tsm-step.active .tsm-step-name[b-kbr3m6kbmx] {
    color: #f1f5f9;
}

html.dark-mode .tsm-step.done .tsm-step-name[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .tsm-step-detail[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
    background: transparent;
}

html.dark-mode .tsm-step.active .tsm-step-detail[b-kbr3m6kbmx] {
    color: #60a5fa;
}

html.dark-mode .tsm-dot[b-kbr3m6kbmx] {
    background: var(--border-primary, #475569);
}

html.dark-mode .tsm-spinner[b-kbr3m6kbmx] {
    border-color: rgba(96, 165, 250, 0.2);
    border-top-color: #60a5fa;
}

html.dark-mode .tsm-progress-bar[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tsm-progress-fill[b-kbr3m6kbmx] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

html.dark-mode .tsm-progress-pct[b-kbr3m6kbmx] {
    color: #60a5fa;
    background: transparent;
}

html.dark-mode .tsm-error[b-kbr3m6kbmx] {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .25);
    color: #fca5a5;
}

html.dark-mode .tsm-error svg[b-kbr3m6kbmx] {
    color: #f87171;
    background: transparent;
}

html.dark-mode .tsm-footer[b-kbr3m6kbmx] {
    border-color: var(--border-primary, #334155);
    background: transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET UPLOAD PROGRESS MODAL  (.aup)
   Niet-wegklikbare modal met progressindicator bij template/overlay upload.
   ══════════════════════════════════════════════════════════════════════════ */

.aup[b-kbr3m6kbmx] {
    position: relative;
    width: 420px;
    max-width: 92vw;
    border-radius: 22px;
    overflow: hidden;
    padding: 0 !important;
    background: var(--bg-primary, #fff);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35),
                0 0 0 1px rgba(148, 163, 184, 0.12);
    animation: aupPopIn-b-kbr3m6kbmx 0.32s cubic-bezier(.21, 1.02, .73, 1);
}

@keyframes aupPopIn-b-kbr3m6kbmx {
    0%   { opacity: 0; transform: translateY(14px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.aup-glow[b-kbr3m6kbmx] {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 240px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.20), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.aup--error .aup-glow[b-kbr3m6kbmx] {
    background: radial-gradient(closest-side, rgba(239, 68, 68, 0.18), transparent 70%);
}

.aup-head[b-kbr3m6kbmx] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 1.6rem 0.9rem;
}

.aup-head-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.aup-head-icon--error[b-kbr3m6kbmx] {
    color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.aup-head-text[b-kbr3m6kbmx] {
    min-width: 0;
}

.aup-head h3[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--text-primary, #1e293b);
    line-height: 1.25;
}

.aup-subtitle[b-kbr3m6kbmx] {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}

.aup-subtitle .aup-file[b-kbr3m6kbmx] {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 560;
    color: var(--text-primary, #475569);
}

.aup-body[b-kbr3m6kbmx] {
    position: relative;
    z-index: 1;
    padding: 0.4rem 1.6rem 1.6rem;
}

.aup-stage[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0 1.3rem;
}

.aup-ring[b-kbr3m6kbmx] {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aup-ring-spinner[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(59, 130, 246, 0.16);
    border-top-color: #3b82f6;
    border-right-color: #60a5fa;
    animation: aupSpin-b-kbr3m6kbmx 0.85s linear infinite;
}

@keyframes aupSpin-b-kbr3m6kbmx {
    to { transform: rotate(360deg); }
}

.aup-ring-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    animation: aupPulse-b-kbr3m6kbmx 1.6s ease-in-out infinite;
}

@keyframes aupPulse-b-kbr3m6kbmx {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.92); opacity: 0.85; }
}

.aup-track[b-kbr3m6kbmx] {
    height: 6px;
    border-radius: 4px;
    background: var(--bg-tertiary, #f1f5f9);
    overflow: hidden;
}

.aup-track-fill[b-kbr3m6kbmx] {
    height: 100%;
    width: 40%;
    border-radius: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    background-size: 200% 100%;
    animation: aupSlide-b-kbr3m6kbmx 1.25s ease-in-out infinite, aupShimmer-b-kbr3m6kbmx 1.6s linear infinite;
}

@keyframes aupSlide-b-kbr3m6kbmx {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

@keyframes aupShimmer-b-kbr3m6kbmx {
    to { background-position: 200% 0; }
}

.aup-hint[b-kbr3m6kbmx] {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
}

.aup-error[b-kbr3m6kbmx] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.aup-error svg[b-kbr3m6kbmx] {
    flex-shrink: 0;
    margin-top: 1px;
    color: #ef4444;
}

.aup-footer[b-kbr3m6kbmx] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding: 0 1.6rem 1.4rem;
}

html.dark-mode .aup[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(148, 163, 184, 0.14);
}

html.dark-mode .aup-glow[b-kbr3m6kbmx] {
    background: radial-gradient(closest-side, rgba(96, 165, 250, 0.22), transparent 70%);
}

html.dark-mode .aup--error .aup-glow[b-kbr3m6kbmx] {
    background: radial-gradient(closest-side, rgba(248, 113, 113, 0.2), transparent 70%);
}

html.dark-mode .aup-head-icon[b-kbr3m6kbmx] {
    color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.22) 100%);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

html.dark-mode .aup-head-icon--error[b-kbr3m6kbmx] {
    color: #f87171;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(220, 38, 38, 0.22) 100%);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.3);
}

html.dark-mode .aup-head h3[b-kbr3m6kbmx] {
    color: #f1f5f9;
}

html.dark-mode .aup-subtitle[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .aup-subtitle .aup-file[b-kbr3m6kbmx] {
    color: #e2e8f0;
}

html.dark-mode .aup-ring-spinner[b-kbr3m6kbmx] {
    border-color: rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-right-color: #93c5fd;
}

html.dark-mode .aup-ring-icon[b-kbr3m6kbmx] {
    color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.26) 100%);
}

html.dark-mode .aup-track[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .aup-hint[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

html.dark-mode .aup-error[b-kbr3m6kbmx] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

html.dark-mode .aup-error svg[b-kbr3m6kbmx] {
    color: #f87171;
}


/* 
   PAGE VARIANT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar variant badge ─────────────────────────────── */
.pte-variant-badge[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(59, 130, 246, .1);
    color: var(--accent, #3b82f6);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Toolbar variant indicator ─────────────────────────── */
.pte-variant-indicator[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    margin-left: .35rem;
}

.pte-variant-trigger[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 28px;
    padding: 0 .65rem;
    border: 1px solid rgba(59, 130, 246, .3);
    border-radius: 6px;
    background: rgba(59, 130, 246, .06);
    color: var(--accent, #3b82f6);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.pte-variant-trigger:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .45);
}

/* ── Action bar variant button ─────────────────────────── */
.pte-action-variant[b-kbr3m6kbmx] {
    position: relative;
}

.pte-variant-count[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent, #3b82f6);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    margin-left: .15rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE VARIANT MODAL (.pvm)
   ═══════════════════════════════════════════════════════════════════════════ */

.pvm[b-kbr3m6kbmx] {
    width: 520px;
    max-width: 92vw;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Header ────────────────────────────────────────────── */
.pvm-head[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.3rem 1.6rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.pvm-head-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #3b82f6;
    flex-shrink: 0;
}

.pvm-head h3[b-kbr3m6kbmx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary, #1e293b);
}

.pvm-sub[b-kbr3m6kbmx] {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}

.pvm-close[b-kbr3m6kbmx] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
    line-height: 1;
}

.pvm-close:hover[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

/* ── Variant list ──────────────────────────────────────── */
.pvm-list[b-kbr3m6kbmx] {
    padding: 0.75rem 1.6rem 0;
}

.pvm-list-header[b-kbr3m6kbmx] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.pvm-variant-row[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    margin: 0 -0.7rem;
    border-radius: 10px;
    transition: background .15s ease;
}

.pvm-variant-row:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .04);
}

.pvm-variant-row.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .06);
}

.pvm-variant-info[b-kbr3m6kbmx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pvm-variant-title[b-kbr3m6kbmx] {
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pvm-variant-active-badge[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: rgba(34, 197, 94, .1);
    color: #16a34a;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.4;
}

.pvm-variant-meta[b-kbr3m6kbmx] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
}

/* ── Variant row actions ───────────────────────────────── */
.pvm-variant-actions[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pvm-variant-btn[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 7px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.pvm-variant-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-secondary, #cbd5e1);
}

.pvm-variant-btn:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    cursor: not-allowed;
}

.pvm-activate:hover:not(:disabled)[b-kbr3m6kbmx] {
    color: #16a34a;
    border-color: rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .06);
}

.pvm-delete:hover:not(:disabled)[b-kbr3m6kbmx] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, .4);
    background: rgba(239, 68, 68, .06);
}

/* ── Add variant section ───────────────────────────────── */
.pvm-add-section[b-kbr3m6kbmx] {
    padding: 1rem 1.6rem 0.5rem;
}

.pvm-add-hint[b-kbr3m6kbmx] {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.45;
}

.pvm-add-cards[b-kbr3m6kbmx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.pvm-add-card[b-kbr3m6kbmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.75rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    text-align: center;
}

.pvm-add-card:hover:not(:disabled)[b-kbr3m6kbmx] {
    border-color: rgba(59, 130, 246, .4);
    background: rgba(59, 130, 246, .03);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .08);
}

.pvm-add-card:disabled[b-kbr3m6kbmx] {
    opacity: .4;
    cursor: not-allowed;
}

.pvm-card-icon[b-kbr3m6kbmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.15rem;
    transition: background .15s, color .15s;
}

.pvm-add-card:hover:not(:disabled) .pvm-card-icon[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .1);
    color: var(--accent, #3b82f6);
}

.pvm-card-title[b-kbr3m6kbmx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.pvm-card-desc[b-kbr3m6kbmx] {
    font-size: 0.72rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.4;
}

/* ── Modal footer ──────────────────────────────────────── */
.pvm-actions[b-kbr3m6kbmx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem 1.2rem;
}

/* ── Dark mode ─────────────────────────────────────────── */
html.dark-mode .pte-variant-badge[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .15);
    color: #60a5fa;
}

html.dark-mode .pte-variant-trigger[b-kbr3m6kbmx] {
    border-color: rgba(96, 165, 250, .3);
    background: rgba(96, 165, 250, .08);
    color: #60a5fa;
}

html.dark-mode .pte-variant-trigger:hover[b-kbr3m6kbmx] {
    background: rgba(96, 165, 250, .15);
    border-color: rgba(96, 165, 250, .45);
}

html.dark-mode .pte-variant-count[b-kbr3m6kbmx] {
    background: #3b82f6;
}

html.dark-mode .pvm[b-kbr3m6kbmx] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .pvm-head[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .pvm-head-icon[b-kbr3m6kbmx] {
    background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(59, 130, 246, .22));
    color: #60a5fa;
}

html.dark-mode .pvm-head h3[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pvm-sub[b-kbr3m6kbmx] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pvm-close:hover[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .08);
}

html.dark-mode .pvm-list-header[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

html.dark-mode .pvm-variant-row:hover[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .08);
}

html.dark-mode .pvm-variant-row.active[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .1);
}

html.dark-mode .pvm-variant-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pvm-variant-active-badge[b-kbr3m6kbmx] {
    background: rgba(34, 197, 94, .12);
    color: #4ade80;
}

html.dark-mode .pvm-variant-meta[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

html.dark-mode .pvm-variant-btn[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pvm-variant-btn:hover:not(:disabled)[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .06);
}

html.dark-mode .pvm-activate:hover:not(:disabled)[b-kbr3m6kbmx] {
    color: #4ade80;
    border-color: rgba(74, 222, 128, .35);
    background: rgba(34, 197, 94, .1);
}

html.dark-mode .pvm-delete:hover:not(:disabled)[b-kbr3m6kbmx] {
    color: #f87171;
    border-color: rgba(248, 113, 113, .35);
    background: rgba(239, 68, 68, .1);
}

html.dark-mode .pvm-add-hint[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

html.dark-mode .pvm-add-card[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
}

html.dark-mode .pvm-add-card:hover:not(:disabled)[b-kbr3m6kbmx] {
    border-color: rgba(96, 165, 250, .4);
    background: rgba(59, 130, 246, .08);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .1);
}

html.dark-mode .pvm-card-icon[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .06);
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .pvm-add-card:hover:not(:disabled) .pvm-card-icon[b-kbr3m6kbmx] {
    background: rgba(59, 130, 246, .15);
    color: #60a5fa;
}

html.dark-mode .pvm-card-title[b-kbr3m6kbmx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pvm-card-desc[b-kbr3m6kbmx] {
    color: var(--text-tertiary, #64748b);
}

/* ─── Per-pagina stijl-override tabs ────────────────────────────────────── */

.pte-style-tabs[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    margin-right: .5rem;
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pte-style-tab[b-kbr3m6kbmx] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-secondary, #475569);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, box-shadow .12s;
    position: relative;
}

.pte-style-tab:hover:not(.pte-style-tab--active)[b-kbr3m6kbmx] {
    background: var(--bg-hover, rgba(0, 0, 0, .04));
    color: var(--text-primary, #1e293b);
}

.pte-style-tab--active[b-kbr3m6kbmx] {
    background: #fff;
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    cursor: default;
}

.pte-style-tab-icon[b-kbr3m6kbmx] {
    font-size: .7rem;
    color: #f59e0b;
    line-height: 1;
}

.pte-style-tab-name[b-kbr3m6kbmx] {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pte-style-tab-badge[b-kbr3m6kbmx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #6c63ff);
    flex: 0 0 6px;
    margin-left: 2px;
    text-indent: -9999px;
    overflow: hidden;
    line-height: 1;
}

.pte-style-tab--has-override .pte-style-tab-name[b-kbr3m6kbmx] {
    font-weight: 600;
}

html.dark-mode .pte-style-tabs[b-kbr3m6kbmx] {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border-color, #334155);
}

html.dark-mode .pte-style-tab[b-kbr3m6kbmx] {
    color: #cbd5e1;
}

html.dark-mode .pte-style-tab:hover:not(.pte-style-tab--active)[b-kbr3m6kbmx] {
    background: rgba(255, 255, 255, .06);
    color: #f1f5f9;
}

html.dark-mode .pte-style-tab--active[b-kbr3m6kbmx] {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

html.dark-mode .pte-style-tab--active .pte-style-tab-name[b-kbr3m6kbmx],
html.dark-mode .pte-style-tab--active .pte-style-tab-icon[b-kbr3m6kbmx] {
    color: #ffffff;
}

html.dark-mode .pte-style-tab-icon[b-kbr3m6kbmx] {
    color: #fbbf24;
}

html.dark-mode .pte-style-tab-badge[b-kbr3m6kbmx] {
    background: #818cf8;
}

html.dark-mode .pte-style-tab--active .pte-style-tab-badge[b-kbr3m6kbmx] {
    background: #ffffff;
}

/* ─── Placeholder wanneer er geen template is voor de actieve stijl ─── */
.pte-bg-empty[b-kbr3m6kbmx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-align: center;
    padding: 1.5rem;
    background: repeating-linear-gradient(
        135deg,
        #f8fafc 0,
        #f8fafc 12px,
        #eef2f7 12px,
        #eef2f7 24px
    );
    color: #64748b;
    border: 2px dashed #cbd5e1;
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
}

.pte-bg-empty-title[b-kbr3m6kbmx] {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.pte-bg-empty-sub[b-kbr3m6kbmx] {
    font-size: .85rem;
    font-weight: 500;
    color: #475569;
}

.pte-bg-empty-hint[b-kbr3m6kbmx] {
    font-size: .75rem;
    max-width: 26ch;
    line-height: 1.35;
    color: #64748b;
}

html.dark-mode .pte-bg-empty[b-kbr3m6kbmx] {
    background: repeating-linear-gradient(
        135deg,
        #1e293b 0,
        #1e293b 12px,
        #273245 12px,
        #273245 24px
    );
    border-color: #475569;
    color: #cbd5e1;
}

html.dark-mode .pte-bg-empty-title[b-kbr3m6kbmx] {
    color: #f1f5f9;
}

html.dark-mode .pte-bg-empty-sub[b-kbr3m6kbmx] {
    color: #cbd5e1;
}

html.dark-mode .pte-bg-empty-hint[b-kbr3m6kbmx] {
    color: #94a3b8;
}

/* /Components/Pages/Admin/BookDomains.razor.rz.scp.css */
.domains-page[b-wkq4xpghrk] {
    padding: 1.5rem 2rem 3rem;
    min-height: calc(100vh - 200px);
}

.domains-header[b-wkq4xpghrk] {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
}
.header-left .breadcrumb[b-wkq4xpghrk] { font-size: .85rem; margin-bottom: .25rem; }
.breadcrumb-link[b-wkq4xpghrk] { color: var(--text-secondary, #475569); cursor: pointer; }
.breadcrumb-link:hover[b-wkq4xpghrk] { text-decoration: underline; }
.breadcrumb-sep[b-wkq4xpghrk] { margin: 0 .4rem; opacity: .5; }
.breadcrumb-current[b-wkq4xpghrk] { font-weight: 600; }
.page-title[b-wkq4xpghrk] { font-size: 1.5rem; margin: 0; }
.header-subtitle[b-wkq4xpghrk] { font-size: .85rem; color: var(--text-secondary, #475569); }

/* ─── Action buttons ─────────────────────────────────────────── */
.action-btn[b-wkq4xpghrk] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px; background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b); cursor: pointer; font-size: .85rem;
    transition: all .2s;
}
.action-btn:hover[b-wkq4xpghrk] { background: var(--bg-tertiary, #f1f5f9); }
.action-btn.primary[b-wkq4xpghrk] {
    background: var(--accent-primary, #3b82f6); color: #fff;
    border-color: var(--accent-primary, #3b82f6);
}
.action-btn.primary:hover[b-wkq4xpghrk] { opacity: .9; }
.action-btn.danger[b-wkq4xpghrk] {
    background: #dc2626; color: #fff;
    border-color: #dc2626;
}
.action-btn.danger:hover[b-wkq4xpghrk] { opacity: .9; }
.btn-icon[b-wkq4xpghrk] { font-size: 1rem; }

/* ─── Table ──────────────────────────────────────────────────── */
.admin-table[b-wkq4xpghrk] {
    width: 100%; border-collapse: collapse;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px; overflow: hidden;
}
.admin-table th[b-wkq4xpghrk] {
    text-align: left; padding: .6rem .75rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    opacity: .6; border-bottom: 2px solid var(--border-primary, #e2e8f0);
}
.admin-table td[b-wkq4xpghrk] {
    padding: .6rem .75rem; font-size: .85rem;
    border-bottom: 1px solid var(--border-primary, #f1f5f9);
}
.admin-table tr:last-child td[b-wkq4xpghrk] { border-bottom: none; }
.domain-name code[b-wkq4xpghrk] {
    background: var(--bg-tertiary, #f1f5f9);
    padding: .15rem .4rem; border-radius: 4px; font-size: .85rem;
}

/* ─── Status badges ──────────────────────────────────────────── */
.status-badge[b-wkq4xpghrk] {
    display: inline-block;
    padding: .2rem .5rem; border-radius: 6px;
    font-size: .75rem; font-weight: 600;
}
.status-badge.active[b-wkq4xpghrk] { background: rgba(22,163,74,.1); color: #16a34a; }
.status-badge.inactive[b-wkq4xpghrk] { background: rgba(239,68,68,.1); color: #dc2626; }
.status-badge.primary[b-wkq4xpghrk] { background: rgba(234,179,8,.1); color: #ca8a04; }
.status-badge.ssl-active[b-wkq4xpghrk] { background: rgba(22,163,74,.1); color: #16a34a; }
.status-badge.ssl-pending[b-wkq4xpghrk] { background: rgba(234,179,8,.1); color: #ca8a04; }
.status-badge.ssl-failed[b-wkq4xpghrk] { background: rgba(239,68,68,.1); color: #dc2626; }
.status-badge.ssl-expired[b-wkq4xpghrk] { background: rgba(249,115,22,.1); color: #ea580c; }

/* ─── Small action buttons ───────────────────────────────────── */
.action-cell[b-wkq4xpghrk] { display: flex; gap: .3rem; }
.btn-sm[b-wkq4xpghrk] {
    padding: .25rem .5rem; border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 6px; background: none; cursor: pointer; font-size: .8rem;
    transition: all .15s;
}
.btn-sm:hover[b-wkq4xpghrk] { background: var(--bg-tertiary, #f1f5f9); }
.btn-sm:disabled[b-wkq4xpghrk] { opacity: .4; cursor: not-allowed; }
.btn-verify[b-wkq4xpghrk] { border-color: #3b82f6; }
.btn-primary-set[b-wkq4xpghrk] { border-color: #ca8a04; }
.btn-edit[b-wkq4xpghrk] { border-color: #475569; }
.btn-delete[b-wkq4xpghrk] { border-color: #dc2626; color: #dc2626; }

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state[b-wkq4xpghrk] {
    text-align: center; padding: 3rem 2rem;
    background: var(--bg-secondary, #f8fafc);
    border: 2px dashed var(--border-primary, #e2e8f0);
    border-radius: 12px; margin: 1rem 0;
}
.empty-icon[b-wkq4xpghrk] { font-size: 3rem; margin-bottom: .5rem; }
.empty-state h3[b-wkq4xpghrk] { margin: 0 0 .5rem; }
.empty-state p[b-wkq4xpghrk] { color: var(--text-secondary, #475569); margin-bottom: 1rem; }

/* ─── DNS Instructions ───────────────────────────────────────── */
.dns-instructions[b-wkq4xpghrk] {
    margin-top: 2rem; padding: 1.5rem;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
}
.dns-instructions h3[b-wkq4xpghrk] { margin: 0 0 .75rem; font-size: 1.1rem; }
.dns-instructions p[b-wkq4xpghrk] { margin: 0 0 1rem; color: var(--text-secondary, #475569); font-size: .85rem; }
.instruction-block[b-wkq4xpghrk] {
    margin-bottom: .75rem; padding: .75rem 1rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px; font-size: .85rem;
}
.instruction-block strong[b-wkq4xpghrk] { display: block; margin-bottom: .3rem; }
.instruction-block code[b-wkq4xpghrk] {
    display: block; margin-top: .25rem;
    padding: .4rem .6rem; background: var(--bg-tertiary, #f1f5f9);
    border-radius: 4px; font-size: .8rem;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-overlay[b-wkq4xpghrk] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.modal-card[b-wkq4xpghrk] {
    background: var(--bg-primary, #fff);
    border-radius: 16px; padding: 2rem;
    width: 90%; max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-card h2[b-wkq4xpghrk] { margin: 0 0 1.5rem; font-size: 1.25rem; }
.modal-actions[b-wkq4xpghrk] { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.5rem; }

.form-group[b-wkq4xpghrk] { margin-bottom: 1rem; }
.form-group label[b-wkq4xpghrk] { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .85rem; }
.form-group input[type="text"][b-wkq4xpghrk],
.form-group select[b-wkq4xpghrk] {
    width: 100%; padding: .5rem .75rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px; font-size: .85rem;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
}
.form-group small[b-wkq4xpghrk] { display: block; margin-top: .25rem; color: var(--text-secondary, #475569); font-size: .75rem; }
.error-msg[b-wkq4xpghrk] {
    padding: .5rem .75rem; background: rgba(239,68,68,.1);
    color: #dc2626; border-radius: 8px; font-size: .85rem; margin-top: .5rem;
}

/* ─── Verification result ────────────────────────────────────── */
.verification-result[b-wkq4xpghrk] {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.5rem; border-radius: 12px; text-align: center;
}
.verification-result.success[b-wkq4xpghrk] { background: rgba(22,163,74,.06); }
.verification-result.failure[b-wkq4xpghrk] { background: rgba(239,68,68,.06); }
.result-icon[b-wkq4xpghrk] { font-size: 2.5rem; margin-bottom: .5rem; }
.verification-result p[b-wkq4xpghrk] { margin: .25rem 0; font-size: .9rem; }
.resolved-ips[b-wkq4xpghrk] { font-size: .8rem; color: var(--text-secondary, #475569); }

/* ─── Dark mode ──────────────────────────────────────────────── */
html.dark-mode .domains-header[b-wkq4xpghrk],
html.dark-mode .dns-instructions[b-wkq4xpghrk],
html.dark-mode .empty-state[b-wkq4xpghrk] { background: var(--bg-secondary, #1e293b); border-color: var(--border-primary, #334155); }
html.dark-mode .admin-table[b-wkq4xpghrk] { background: var(--bg-primary, #0f172a); border-color: var(--border-primary, #334155); }
html.dark-mode .admin-table th[b-wkq4xpghrk] { border-color: var(--border-primary, #334155); }
html.dark-mode .admin-table td[b-wkq4xpghrk] { border-color: var(--border-primary, #1e293b); }
html.dark-mode .modal-card[b-wkq4xpghrk] { background: var(--bg-primary, #0f172a); }
html.dark-mode .instruction-block[b-wkq4xpghrk] { background: var(--bg-primary, #0f172a); border-color: var(--border-primary, #334155); }
html.dark-mode .domain-name code[b-wkq4xpghrk] { background: var(--bg-tertiary, #334155); }
/* /Components/Pages/Admin/BookExamplesModal.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   BookExamplesModal — Redesigned 2026
   Premium, practical admin UI for the homepage examples carousel.
   ════════════════════════════════════════════════════════════════ */

/* Icons never swallow clicks — the click must reach the button/label. */
.em-modal button svg[b-xqkzi9d1q0],
.em-modal label svg[b-xqkzi9d1q0] {
    pointer-events: none;
}

/* ── Modal shell ─────────────────────────────────────────────── */

.em-modal[b-xqkzi9d1q0] {
    background: var(--bg-secondary, #fff);
    border-radius: 1.25rem;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .32);
    width: min(1040px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: em-pop-b-xqkzi9d1q0 .18s ease-out;
}

@keyframes em-pop-b-xqkzi9d1q0 {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────── */

.em-header[b-xqkzi9d1q0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(168, 85, 247, .05));
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

    .em-header h2[b-xqkzi9d1q0] {
        margin: 0 0 .3rem;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--text-primary, #1e293b);
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.em-header-icon[b-xqkzi9d1q0] {
    font-size: 1.3rem;
}

.em-subtitle[b-xqkzi9d1q0] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: .9rem;
}

    .em-subtitle strong[b-xqkzi9d1q0] {
        color: var(--text-primary, #475569);
        font-weight: 600;
    }

.em-close[b-xqkzi9d1q0] {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all .15s ease;
}

    .em-close:hover[b-xqkzi9d1q0] {
        background: #fff;
        color: var(--text-primary, #334155);
        transform: rotate(90deg);
    }

/* ── Toolbar ─────────────────────────────────────────────────── */

.em-toolbar[b-xqkzi9d1q0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.75rem;
    border-bottom: 1px solid var(--border-primary, #eef2f6);
    background: var(--bg-secondary, #fff);
}

.em-toolbar-left[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.em-count-badge[b-xqkzi9d1q0] {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .45rem;
    border-radius: .5rem;
    background: var(--accent-primary, #6366f1);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.em-count-label[b-xqkzi9d1q0] {
    color: var(--text-secondary, #64748b);
    font-size: .9rem;
    font-weight: 500;
}

.em-toolbar-divider[b-xqkzi9d1q0] {
    width: 1px;
    height: 1.3rem;
    background: var(--border-primary, #e2e8f0);
    margin: 0 .25rem;
}

.em-style-label[b-xqkzi9d1q0] {
    color: var(--text-secondary, #64748b);
    font-size: .85rem;
    font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.em-btn[b-xqkzi9d1q0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: .65rem;
    border: 1px solid transparent;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

    .em-btn:disabled[b-xqkzi9d1q0] {
        opacity: .55;
        cursor: not-allowed;
    }

.em-btn--primary[b-xqkzi9d1q0] {
    background: var(--accent-primary, #6366f1);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, .3);
}

    .em-btn--primary:not(:disabled):hover[b-xqkzi9d1q0] {
        background: var(--accent-primary-hover, #4f46e5);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, .38);
    }

.em-btn--ghost[b-xqkzi9d1q0] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #334155);
    border-color: var(--border-primary, #e2e8f0);
}

    .em-btn--ghost:not(:disabled):hover[b-xqkzi9d1q0] {
        background: var(--bg-hover, #e2e8f0);
    }

.em-btn--generate[b-xqkzi9d1q0] {
    width: 100%;
    margin-top: .65rem;
    padding: .6rem 1rem;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124, 58, 237, .32);
}

    .em-btn--generate:not(:disabled):hover[b-xqkzi9d1q0] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(124, 58, 237, .42);
    }

.em-btn-icon[b-xqkzi9d1q0] {
    font-size: 1rem;
    line-height: 1;
}

/* ── Body / list ─────────────────────────────────────────────── */

.em-body[b-xqkzi9d1q0] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
    background: var(--bg-primary, #f8fafc);
}

.em-list[b-xqkzi9d1q0] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Card ────────────────────────────────────────────────────── */

.em-card[b-xqkzi9d1q0] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-primary, #e7ecf2);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    transition: box-shadow .18s ease, border-color .18s ease;
}

    .em-card:hover[b-xqkzi9d1q0] {
        box-shadow: 0 6px 20px rgba(15, 23, 42, .09);
        border-color: var(--border-hover, #d4dbe4);
    }

    .em-card.is-inactive[b-xqkzi9d1q0] {
        opacity: .72;
        background: var(--bg-tertiary, #f8fafc);
    }

/* card top bar */

.em-card-bar[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--border-primary, #eef2f6);
    background: var(--bg-tertiary, #fafbfc);
}

.em-card-bar-spacer[b-xqkzi9d1q0] {
    flex: 1;
}

.em-order[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.em-order-btn[b-xqkzi9d1q0] {
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: .45rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all .12s ease;
}

    .em-order-btn:not(:disabled):hover[b-xqkzi9d1q0] {
        background: var(--bg-hover, #eef2f6);
        color: var(--accent-primary, #6366f1);
    }

    .em-order-btn:disabled[b-xqkzi9d1q0] {
        opacity: .35;
        cursor: not-allowed;
    }

.em-order-num[b-xqkzi9d1q0] {
    min-width: 1.5rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
}

.em-status-toggle[b-xqkzi9d1q0] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 2rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #fff);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all .15s ease;
}

    .em-status-toggle:not(:disabled):hover[b-xqkzi9d1q0] {
        border-color: var(--border-hover, #cbd5e1);
    }

    .em-status-toggle.is-active[b-xqkzi9d1q0] {
        color: #15803d;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

.em-status-dot[b-xqkzi9d1q0] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #cbd5e1;
}

.em-status-toggle.is-active .em-status-dot[b-xqkzi9d1q0] {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.em-icon-btn[b-xqkzi9d1q0] {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all .15s ease;
}

.em-icon-btn--danger:not(:disabled):hover[b-xqkzi9d1q0] {
    background: #fef2f2;
    color: #dc2626;
}

.em-icon-btn:disabled[b-xqkzi9d1q0] {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Transform (photo → result) ──────────────────────────────── */

.em-transform[b-xqkzi9d1q0] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1rem;
    padding: 1.25rem;
}

.em-slot[b-xqkzi9d1q0] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}

.em-slot-head[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

.em-source-tag[b-xqkzi9d1q0] {
    text-transform: none;
    letter-spacing: 0;
    font-size: .68rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 1rem;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}

    .em-source-tag.is-generated[b-xqkzi9d1q0] {
        background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .12));
        color: #7c3aed;
    }

/* image frame */

.em-frame[b-xqkzi9d1q0] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: .85rem;
    overflow: hidden;
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px solid var(--border-primary, #e7ecf2);
}

.em-img[b-xqkzi9d1q0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gestapelde varianten: alle vooraf geladen, alleen de geselecteerde zichtbaar.
   Wisselen = directe CSS-swap zonder netwerk-fetch. */
.em-img--variant[b-xqkzi9d1q0] {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

    .em-img--variant.is-shown[b-xqkzi9d1q0] {
        position: relative;
        opacity: 1;
        visibility: visible;
    }

.em-frame-empty[b-xqkzi9d1q0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--text-secondary, #cbd5e1);
    font-size: .78rem;
    font-weight: 500;
}

/* upload chip (bottom of frame) */

.em-frame-upload[b-xqkzi9d1q0] {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%) translateY(.4rem);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    background: rgba(15, 23, 42, .78);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: all .18s ease;
}

.em-frame:hover .em-frame-upload[b-xqkzi9d1q0] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.em-frame-upload:hover[b-xqkzi9d1q0] {
    background: var(--accent-primary, #6366f1);
}

/* overlays (upload / generating spinner) */

.em-frame-overlay[b-xqkzi9d1q0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: color-mix(in srgb, var(--bg-secondary, #fff) 82%, transparent);
    backdrop-filter: blur(2px);
    color: var(--text-secondary, #64748b);
    font-size: .8rem;
    font-weight: 600;
    z-index: 3;
}

.em-frame-overlay--gen[b-xqkzi9d1q0] {
    background: linear-gradient(135deg, rgba(99, 102, 241, .9), rgba(168, 85, 247, .88));
    color: #fff;
}

/* variant navigation arrows on frame */

.em-nav[b-xqkzi9d1q0] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-primary, #e2e8f0);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    color: var(--text-primary, #334155);
    cursor: pointer;
    z-index: 2;
    transition: all .15s ease;
}

    .em-nav:not(:disabled):hover[b-xqkzi9d1q0] {
        background: var(--accent-primary, #6366f1);
        color: #fff;
        border-color: var(--accent-primary, #6366f1);
    }

    .em-nav:disabled[b-xqkzi9d1q0] {
        opacity: .4;
        cursor: not-allowed;
    }

.em-nav--prev[b-xqkzi9d1q0] { left: .5rem; }
.em-nav--next[b-xqkzi9d1q0] { right: .5rem; }

/* variant strip (dots + delete) */

.em-variant-strip[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    min-height: 1.4rem;
}

.em-variant-dots[b-xqkzi9d1q0] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.em-dot[b-xqkzi9d1q0] {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--border-primary, #cbd5e1);
    transition: all .15s ease;
}

    .em-dot.is-on[b-xqkzi9d1q0] {
        background: var(--accent-primary, #6366f1);
        transform: scale(1.25);
    }

.em-variant-pos[b-xqkzi9d1q0] {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

.em-variant-del[b-xqkzi9d1q0] {
    margin-left: auto;
    background: none;
    border: none;
    padding: .15rem .3rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    border-radius: .35rem;
    transition: color .15s ease;
}

    .em-variant-del:not(:disabled):hover[b-xqkzi9d1q0] {
        color: #dc2626;
    }

/* arrow between slots */

.em-transform-arrow[b-xqkzi9d1q0] {
    align-self: center;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--accent-primary, #818cf8);
    margin-top: 2.5rem;
}

/* caption inputs */

.em-caption[b-xqkzi9d1q0] {
    width: 100%;
    padding: .5rem .7rem;
    border-radius: .6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #fff);
    font-size: .82rem;
    color: var(--text-primary, #334155);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .em-caption:focus[b-xqkzi9d1q0] {
        outline: none;
        border-color: var(--accent-primary, #6366f1);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
    }

/* ── Per-card model picker ───────────────────────────────────── */

.em-modelpicker[b-xqkzi9d1q0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.em-modelpicker-row[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.em-modelpicker-icon[b-xqkzi9d1q0] {
    font-size: .9rem;
    line-height: 1;
    flex: 0 0 auto;
    opacity: .85;
}

.em-select--model[b-xqkzi9d1q0] {
    flex: 1 1 auto;
    min-width: 0;
    padding: .4rem .55rem;
    font-size: .78rem;
    border-radius: .55rem;
    cursor: pointer;
}

    .em-select--model:disabled[b-xqkzi9d1q0] {
        opacity: .55;
        cursor: not-allowed;
    }

/* model labels on the selected variant */

.em-variant-models[b-xqkzi9d1q0] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: -.15rem;
}

.em-model-chip[b-xqkzi9d1q0] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent-primary, #6366f1);
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .2);
    white-space: nowrap;
}

@@media (max-width: 720px) {
    .em-modelpicker[b-xqkzi9d1q0] {
        grid-template-columns: 1fr;
    }
}

/* ── Generation settings (collapsible) ───────────────────────── */

.em-settings[b-xqkzi9d1q0] {
    border-top: 1px solid var(--border-primary, #eef2f6);
    background: var(--bg-tertiary, #fafbfc);
}

    .em-settings > summary[b-xqkzi9d1q0] {
        display: flex;
        align-items: center;
        gap: .45rem;
        padding: .75rem 1.25rem;
        font-size: .82rem;
        font-weight: 600;
        color: var(--text-secondary, #64748b);
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: color .15s ease;
    }

        .em-settings > summary[b-xqkzi9d1q0]::-webkit-details-marker {
            display: none;
        }

        .em-settings > summary:hover[b-xqkzi9d1q0] {
            color: var(--accent-primary, #6366f1);
        }

        .em-settings > summary svg[b-xqkzi9d1q0] {
            transition: transform .2s ease;
        }

    .em-settings[open] > summary svg[b-xqkzi9d1q0] {
        transform: rotate(45deg);
    }

.em-settings-grid[b-xqkzi9d1q0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
    padding: 0 1.25rem 1.1rem;
}

.em-field[b-xqkzi9d1q0] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .em-field > span[b-xqkzi9d1q0] {
        font-size: .72rem;
        font-weight: 600;
        color: var(--text-secondary, #94a3b8);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.em-input[b-xqkzi9d1q0],
.em-select[b-xqkzi9d1q0] {
    padding: .5rem .7rem;
    border-radius: .6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #fff);
    font-size: .85rem;
    color: var(--text-primary, #334155);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .em-input:focus[b-xqkzi9d1q0],
    .em-select:focus[b-xqkzi9d1q0] {
        outline: none;
        border-color: var(--accent-primary, #6366f1);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
    }

.em-select--inline[b-xqkzi9d1q0] {
    padding: .35rem .6rem;
    font-size: .85rem;
    border-radius: .55rem;
}

/* ── Empty / loading states ──────────────────────────────────── */

.em-loading[b-xqkzi9d1q0],
.em-empty[b-xqkzi9d1q0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--text-secondary, #64748b);
}

.em-empty-icon[b-xqkzi9d1q0] {
    font-size: 3rem;
}

.em-empty h3[b-xqkzi9d1q0] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary, #334155);
}

.em-empty p[b-xqkzi9d1q0] {
    margin: 0 0 .5rem;
    font-size: .9rem;
    max-width: 28rem;
}

/* ── Spinners ────────────────────────────────────────────────── */

.em-spinner[b-xqkzi9d1q0] {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(99, 102, 241, .2);
    border-top-color: var(--accent-primary, #6366f1);
    border-radius: 50%;
    animation: em-spin-b-xqkzi9d1q0 .7s linear infinite;
}

.em-frame-overlay--gen .em-spinner[b-xqkzi9d1q0] {
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #fff;
}

.em-spinner--sm[b-xqkzi9d1q0] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2.5px;
}

.em-spinner--xs[b-xqkzi9d1q0] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .4);
    border-top-color: #fff;
}

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

/* ── Save bar ────────────────────────────────────────────────── */

.em-save-bar[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.75rem;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
}

.em-save-bar-inner[b-xqkzi9d1q0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #92400e;
    font-size: .85rem;
    font-weight: 500;
}

/* ── Footer ──────────────────────────────────────────────────── */

.em-footer[b-xqkzi9d1q0] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #fff);
}

/* ── Toast ───────────────────────────────────────────────────── */

.em-toast[b-xqkzi9d1q0] {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .65rem 1.1rem;
    border-radius: .7rem;
    background: #1e293b;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
    z-index: 10;
    animation: em-toast-in-b-xqkzi9d1q0 .2s ease-out;
}

    .em-toast.is-error[b-xqkzi9d1q0] {
        background: #dc2626;
    }

@keyframes em-toast-in-b-xqkzi9d1q0 {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

@media (max-width: 720px) {
    .em-transform[b-xqkzi9d1q0] {
        grid-template-columns: 1fr;
    }

    .em-transform-arrow[b-xqkzi9d1q0] {
        margin-top: 0;
        transform: rotate(90deg);
        justify-self: center;
    }

    .em-settings-grid[b-xqkzi9d1q0] {
        grid-template-columns: 1fr;
    }
}

/* ── Dark mode polish ────────────────────────────────────────── */

html.dark-mode .em-header[b-xqkzi9d1q0] {
    background: linear-gradient(135deg, rgba(99, 102, 241, .16), rgba(168, 85, 247, .1));
}

html.dark-mode .em-close[b-xqkzi9d1q0] {
    background: rgba(255, 255, 255, .06);
}

    html.dark-mode .em-close:hover[b-xqkzi9d1q0] {
        background: rgba(255, 255, 255, .12);
    }

html.dark-mode .em-save-bar[b-xqkzi9d1q0] {
    background: rgba(245, 158, 11, .12);
    border-top-color: rgba(245, 158, 11, .35);
}

html.dark-mode .em-save-bar-inner[b-xqkzi9d1q0] {
    color: #fcd34d;
}

html.dark-mode .em-status-toggle.is-active[b-xqkzi9d1q0] {
    color: #4ade80;
    background: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .4);
}

html.dark-mode .em-icon-btn--danger:not(:disabled):hover[b-xqkzi9d1q0] {
    background: rgba(220, 38, 38, .18);
    color: #f87171;
}

html.dark-mode .em-variant-del:not(:disabled):hover[b-xqkzi9d1q0] {
    color: #f87171;
}

html.dark-mode .em-source-tag.is-generated[b-xqkzi9d1q0] {
    background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(168, 85, 247, .22));
    color: #c4b5fd;
}

html.dark-mode .em-model-chip[b-xqkzi9d1q0] {
    color: #c7d2fe;
    background: rgba(99, 102, 241, .18);
    border-color: rgba(129, 140, 248, .35);
}
/* /Components/Pages/Admin/BookPricing.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   BOOK PRICING - PAGE SPECIFIC STYLES
   ???????????????????????????????????????????????????????????????????????????? */

/* ?? Header ??????????????????????????????????????????????????????????????????? */
.pricing-header[b-i5pueoy5j2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.header-left[b-i5pueoy5j2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breadcrumb[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.breadcrumb-link[b-i5pueoy5j2] {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-link:hover[b-i5pueoy5j2] {
    text-decoration: underline;
}

.breadcrumb-sep[b-i5pueoy5j2] {
    color: #94a3b8;
}

.page-title[b-i5pueoy5j2] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.header-subtitle[b-i5pueoy5j2] {
    font-size: 0.9rem;
    color: #64748b;
}

.header-actions[b-i5pueoy5j2] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.action-btn[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-i5pueoy5j2] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.action-btn.primary[b-i5pueoy5j2] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.action-btn.primary:hover:not(:disabled)[b-i5pueoy5j2] {
    background: #2563eb;
}

.action-btn:disabled[b-i5pueoy5j2] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ?? Tabs Section ????????????????????????????????????????????????????????????? */
.tabs-section[b-i5pueoy5j2] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 3rem;
}

.tabs[b-i5pueoy5j2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab[b-i5pueoy5j2] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.tab:hover:not(.active)[b-i5pueoy5j2] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.tab.active[b-i5pueoy5j2] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* ?? Content Area ????????????????????????????????????????????????????????????? */
.pricing-content[b-i5pueoy5j2] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

/* ?? Pricing Card ????????????????????????????????????????????????????????????? */
.pricing-card[b-i5pueoy5j2] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.pricing-card h2[b-i5pueoy5j2] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.card-header[b-i5pueoy5j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-description[b-i5pueoy5j2] {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ?? Prices Table ????????????????????????????????????????????????????????????? */
.prices-table[b-i5pueoy5j2] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.table-header[b-i5pueoy5j2] {
    display: grid;
    grid-template-columns: 80px 140px 140px 120px 140px 60px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.table-row[b-i5pueoy5j2] {
    display: grid;
    grid-template-columns: 80px 140px 140px 120px 140px 60px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}

.table-row:last-child[b-i5pueoy5j2] {
    border-bottom: none;
}

.table-row.empty[b-i5pueoy5j2] {
    display: flex;
    justify-content: center;
    color: #94a3b8;
    font-style: italic;
    padding: 2rem;
}

/* ?? Form Controls ???????????????????????????????????????????????????????????? */
.input[b-i5pueoy5j2] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1e293b;
    transition: border-color 0.2s ease;
}

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

.input-sm[b-i5pueoy5j2] {
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
}

.input-group[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
}

.input-prefix[b-i5pueoy5j2] {
    padding: 0.375rem 0.5rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.input-group .input[b-i5pueoy5j2] {
    border-radius: 0 6px 6px 0;
}

.total-value[b-i5pueoy5j2] {
    font-weight: 600;
    color: #1e293b;
}

.margin-value[b-i5pueoy5j2] {
    font-weight: 600;
}

.margin-value.positive[b-i5pueoy5j2] {
    color: #16a34a;
}

.margin-value.negative[b-i5pueoy5j2] {
    color: #dc2626;
}

.no-cost-warning[b-i5pueoy5j2] {
    display: block;
    font-size: 0.7rem;
    color: #f59e0b;
}

/* ?? Buttons ?????????????????????????????????????????????????????????????????? */
.btn-primary[b-i5pueoy5j2] {
    padding: 0.625rem 1.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-i5pueoy5j2] {
    background: #2563eb;
}

.btn-primary:disabled[b-i5pueoy5j2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger[b-i5pueoy5j2] {
    padding: 0.625rem 1.25rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-danger:hover[b-i5pueoy5j2] {
    background: #b91c1c;
}

.btn-secondary[b-i5pueoy5j2] {
    padding: 0.5rem 1rem;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-i5pueoy5j2] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.btn-icon-danger[b-i5pueoy5j2] {
    padding: 0.375rem 0.625rem;
    background: transparent;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-icon-danger:hover[b-i5pueoy5j2] {
    background: #fef2f2;
    border-color: #dc2626;
}

/* ?? Warning Banner ??????????????????????????????????????????????????????????? */
.warning-banner[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: #92400e;
}

.warning-icon[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ?? Provider Card ???????????????????????????????????????????????????????????? */
.provider-card[b-i5pueoy5j2] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: #fafafa;
}

.provider-card.active[b-i5pueoy5j2] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.provider-header[b-i5pueoy5j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.provider-info[b-i5pueoy5j2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.provider-info h3[b-i5pueoy5j2] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.badge[b-i5pueoy5j2] {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success[b-i5pueoy5j2] {
    background: #dcfce7;
    color: #166534;
}

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

.provider-form[b-i5pueoy5j2] {
    margin-top: 1rem;
}

.provider-form h4[b-i5pueoy5j2] {
    margin: 1rem 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.form-row[b-i5pueoy5j2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 0.75rem;
}

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

.form-group label[b-i5pueoy5j2] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
}

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

.checkbox-label input[type="checkbox"][b-i5pueoy5j2] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.help[b-i5pueoy5j2] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ?? Input with Action Button ??????????????????????????????????????????????? */
.input-with-action[b-i5pueoy5j2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-action .input[b-i5pueoy5j2] {
    flex: 1;
}

.btn-browse[b-i5pueoy5j2] {
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-browse:hover:not(:disabled)[b-i5pueoy5j2] {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #1e293b;
}

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

/* ?? Empty State ???????????????????????????????????????????????????????????? */
.empty-state[b-i5pueoy5j2] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.add-provider-section[b-i5pueoy5j2] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* ?? Modal ???????????????????????????????????????????????????????????????????? */
.modal-overlay[b-i5pueoy5j2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-i5pueoy5j2] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 400px;
    max-width: 90vw;
}

.modal-content h3[b-i5pueoy5j2] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-actions[b-i5pueoy5j2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ?? Cost Info ???????????????????????????????????????????????????????????????? */
.cost-info[b-i5pueoy5j2] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f1f5f9;
    border-radius: 8px;
}

.manual-badge[b-i5pueoy5j2] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: #e2e8f0;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #64748b;
}

/* ?? Loading ?????????????????????????????????????????????????????????????????? */
.loading-container[b-i5pueoy5j2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: #64748b;
}

.loading-spinner[b-i5pueoy5j2] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-i5pueoy5j2 1s linear infinite;
}

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

.ai-cost-card[b-i5pueoy5j2] {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-left: 4px solid var(--success, #16a34a);
    border-radius: 12px;
    color: var(--text-primary, #1e293b);
}

.ai-cost-card.unavailable[b-i5pueoy5j2] {
    border-left-color: var(--warning, #f59e0b);
}

.ai-cost-heading[b-i5pueoy5j2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ai-cost-heading h2[b-i5pueoy5j2] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.ai-cost-heading p[b-i5pueoy5j2] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
}

.ai-cost-total[b-i5pueoy5j2] {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    background: var(--success-bg, #ecfdf5);
    border-radius: 8px;
    color: var(--success, #15803d);
    font-size: 1.15rem;
    font-weight: 700;
}

.ai-cost-metrics[b-i5pueoy5j2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.ai-cost-metric[b-i5pueoy5j2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.75rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
}

.ai-cost-metric span[b-i5pueoy5j2] {
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
}

.ai-cost-metric strong[b-i5pueoy5j2] {
    overflow-wrap: anywhere;
    font-size: 0.875rem;
}

.ai-cost-breakdown[b-i5pueoy5j2],
.ai-cost-note[b-i5pueoy5j2] {
    display: block;
    margin-top: 0.75rem;
    color: var(--text-secondary, #64748b);
    font-size: 0.78rem;
}

.ai-cost-warning[b-i5pueoy5j2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--warning-bg, #fffbeb);
    border: 1px solid var(--warning, #f59e0b);
    border-radius: 8px;
    color: var(--text-primary, #92400e);
    font-size: 0.85rem;
}

/* ?? Responsive ??????????????????????????????????????????????????????????????? */
@media (max-width: 1024px) {
    .pricing-header[b-i5pueoy5j2],
    .tabs-section[b-i5pueoy5j2],
    .pricing-content[b-i5pueoy5j2] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .table-header[b-i5pueoy5j2],
    .table-row[b-i5pueoy5j2] {
        grid-template-columns: 60px 1fr 1fr 1fr 1fr 40px;
        font-size: 0.8rem;
    }

    .form-row[b-i5pueoy5j2] {
        grid-template-columns: 1fr;
    }

    .ai-cost-metrics[b-i5pueoy5j2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ai-cost-heading[b-i5pueoy5j2] {
        flex-direction: column;
    }

    .ai-cost-metrics[b-i5pueoy5j2] {
        grid-template-columns: 1fr;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   FAILURE TRACKING STATUS
   ??????????????????????????????????????????????????????????????????????????? */

.failure-status[b-i5pueoy5j2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.failure-status.critical[b-i5pueoy5j2] {
    background: #fee2e2;
    border-color: #ef4444;
}

.failure-status .failure-icon[b-i5pueoy5j2] {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.failure-info[b-i5pueoy5j2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.failure-count[b-i5pueoy5j2] {
    font-weight: 600;
    color: #92400e;
}

.failure-status.critical .failure-count[b-i5pueoy5j2] {
    color: #991b1b;
}

.failure-time[b-i5pueoy5j2] {
    font-size: 0.85rem;
    color: #a16207;
}

.failure-status.critical .failure-time[b-i5pueoy5j2] {
    color: #b91c1c;
}

.failure-message[b-i5pueoy5j2] {
    font-size: 0.8rem;
    color: #78716c;
    font-family: monospace;
    background: rgba(0,0,0,0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.failure-disabled[b-i5pueoy5j2] {
    font-weight: 600;
    color: #991b1b;
    font-size: 0.85rem;
}

.btn-reset[b-i5pueoy5j2] {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover[b-i5pueoy5j2] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.success-status[b-i5pueoy5j2] {
    padding: 0.5rem 0.75rem;
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #059669;
}

.form-group-sm[b-i5pueoy5j2] {
    max-width: 120px;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .pricing-header[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .page-title[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .header-subtitle[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .breadcrumb[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .breadcrumb-link[b-i5pueoy5j2] {
    color: var(--accent-primary, #60a5fa);
}

html.dark-mode .tabs-section[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .tab[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tab:hover:not(.active)[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tab.active[b-i5pueoy5j2] {
    background: var(--accent-primary, #60a5fa);
    color: #ffffff;
    border-color: var(--accent-primary, #60a5fa);
}

html.dark-mode .pricing-content[b-i5pueoy5j2] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .pricing-card[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .pricing-card h2[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .card-description[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .card-header[b-i5pueoy5j2] {
    background: transparent !important;
}

html.dark-mode .table-header[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .table-row[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .table-row:hover[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .table-row .cell[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .form-group label[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .form-group input[b-i5pueoy5j2],
html.dark-mode .form-group select[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .action-btn[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .action-btn:hover:not(:disabled)[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .action-btn.primary[b-i5pueoy5j2] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
    color: #ffffff;
}

html.dark-mode .btn-secondary[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .btn-secondary:hover[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .provider-card[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .provider-card.active[b-i5pueoy5j2] {
    background: rgba(96, 165, 250, 0.1);
    border-color: var(--accent-primary, #60a5fa);
}

html.dark-mode .provider-info h3[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .warning-banner[b-i5pueoy5j2] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

html.dark-mode .failure-status[b-i5pueoy5j2] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .failure-status.critical[b-i5pueoy5j2] {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}

html.dark-mode .failure-count[b-i5pueoy5j2] {
    color: #fbbf24;
}

html.dark-mode .failure-status.critical .failure-count[b-i5pueoy5j2] {
    color: #f87171;
}

html.dark-mode .success-status[b-i5pueoy5j2] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

html.dark-mode .modal-overlay[b-i5pueoy5j2] {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .modal-content[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .modal-content h3[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .cost-info[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .manual-badge[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .empty-state[b-i5pueoy5j2] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .add-provider-section[b-i5pueoy5j2] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .loading-container[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .loading-spinner[b-i5pueoy5j2] {
    border-color: var(--border-primary, #334155);
    border-top-color: var(--accent-primary, #60a5fa);
}

/* ── Prices Table Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .prices-table[b-i5pueoy5j2] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .prices-table .table-header[b-i5pueoy5j2] {
    background: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .table-header[b-i5pueoy5j2] {
    background: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .prices-table .table-row[b-i5pueoy5j2] {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .table-row[b-i5pueoy5j2] {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .table-row:hover[b-i5pueoy5j2] {
    background: #334155 !important;
}

html.dark-mode .table-row.empty[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b) !important;
    color: var(--text-muted, #64748b) !important;
}

/* ── Input Fields Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .input[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .input:focus[b-i5pueoy5j2] {
    border-color: var(--accent-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .input[b-i5pueoy5j2]::placeholder {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .input-group[b-i5pueoy5j2] {
    background: transparent !important;
}

html.dark-mode .input-prefix[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .input-group .input[b-i5pueoy5j2] {
    border-left-color: var(--border-primary, #334155) !important;
}

/* ── Values and Text Dark Mode ──────────────────────────────────────────────── */
html.dark-mode .total-value[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .margin-value[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .margin-value.positive[b-i5pueoy5j2] {
    color: #4ade80;
}

html.dark-mode .margin-value.negative[b-i5pueoy5j2] {
    color: #f87171;
}

html.dark-mode .no-cost-warning[b-i5pueoy5j2] {
    color: #fbbf24;
}

/* ── Badges Dark Mode ───────────────────────────────────────────────────────── */
html.dark-mode .badge-success[b-i5pueoy5j2] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .badge-warning[b-i5pueoy5j2] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* ── Buttons Dark Mode ──────────────────────────────────────────────────────── */
html.dark-mode .btn-primary[b-i5pueoy5j2] {
    background: var(--accent-primary, #60a5fa);
    color: #ffffff;
}

html.dark-mode .btn-primary:hover:not(:disabled)[b-i5pueoy5j2] {
    background: var(--accent-hover, #3b82f6);
}

html.dark-mode .btn-danger[b-i5pueoy5j2] {
    background: #ef4444;
    color: #ffffff;
}

html.dark-mode .btn-danger:hover[b-i5pueoy5j2] {
    background: #dc2626;
}

html.dark-mode .btn-icon-danger[b-i5pueoy5j2] {
    background: transparent;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

html.dark-mode .btn-icon-danger:hover[b-i5pueoy5j2] {
    background: rgba(248, 113, 113, 0.15);
    border-color: #f87171;
}

html.dark-mode .btn-browse[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .btn-browse:hover:not(:disabled)[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .btn-browse:disabled[b-i5pueoy5j2] {
    opacity: 0.5;
    cursor: not-allowed;
}

html.dark-mode .btn-reset[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .btn-reset:hover[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569);
}

/* ── Provider Form Dark Mode ────────────────────────────────────────────────── */
html.dark-mode .provider-form h4[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .checkbox-label[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .help[b-i5pueoy5j2] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .input-with-action .input[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

/* ── Failure Status Text Dark Mode ──────────────────────────────────────────── */
html.dark-mode .failure-time[b-i5pueoy5j2] {
    color: #fbbf24;
}

html.dark-mode .failure-status.critical .failure-time[b-i5pueoy5j2] {
    color: #f87171;
}

html.dark-mode .failure-message[b-i5pueoy5j2] {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .failure-disabled[b-i5pueoy5j2] {
    color: #f87171;
}

/* ── Cost Info Section Dark Mode ────────────────────────────────────────────── */
html.dark-mode .cost-info[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .cost-info p[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .cost-info strong[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

/* ── Select Elements Dark Mode ──────────────────────────────────────────────── */
html.dark-mode select.input[b-i5pueoy5j2],
html.dark-mode .form-group select[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode select.input option[b-i5pueoy5j2],
html.dark-mode .form-group select option[b-i5pueoy5j2] {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

/* ── Modal Dark Mode Enhancements ───────────────────────────────────────────── */
html.dark-mode .modal-content p[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .modal-content strong[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .modal-actions[b-i5pueoy5j2] {
    border-top-color: var(--border-primary, #334155);
}

/* ── Provider Card Text Dark Mode ───────────────────────────────────────────── */
html.dark-mode .provider-card h3[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .provider-card label[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .provider-card .help[b-i5pueoy5j2],
html.dark-mode .provider-card small[b-i5pueoy5j2] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .provider-form h4[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

/* ── Badge Dark Mode - Better Contrast ──────────────────────────────────────── */
html.dark-mode .badge.badge-success[b-i5pueoy5j2] {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

html.dark-mode .badge.badge-warning[b-i5pueoy5j2] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ── Table Text Colors ──────────────────────────────────────────────────────── */
html.dark-mode .table-row div[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .table-row .col-country[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .table-row .col-total[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9) !important;
    font-weight: 600;
}

html.dark-mode .table-row .col-sync span[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ── Empty State & Manual Badge ─────────────────────────────────────────────── */
html.dark-mode .table-row.empty span[b-i5pueoy5j2] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .manual-badge[b-i5pueoy5j2] {
    background: var(--bg-hover, #475569) !important;
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ── Success Status Dark Mode ───────────────────────────────────────────────── */
html.dark-mode .success-status span[b-i5pueoy5j2] {
    color: #4ade80 !important;
}

/* ─── IMPORT LABEL (styled as action-btn) ─────────────────────────────────── */
.import-label[b-i5pueoy5j2] {
    cursor: pointer;
}

/* ─── IMPORT CONFIRMATION MODAL EXTRAS ────────────────────────────────────── */
.import-confirm[b-i5pueoy5j2] {
    max-width: 520px;
}

.import-summary[b-i5pueoy5j2] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-i5pueoy5j2] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* ─── TOAST NOTIFICATION ──────────────────────────────────────────────────── */
.toast[b-i5pueoy5j2] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2000;
    animation: fadeIn-b-i5pueoy5j2 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.toast.success[b-i5pueoy5j2] {
    background: #059669;
    color: white;
}

.toast.error[b-i5pueoy5j2] {
    background: #dc2626;
    color: white;
}

@keyframes fadeIn-b-i5pueoy5j2 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── IMPORT DARK MODE ────────────────────────────────────────────────────── */
html.dark-mode .import-summary li[b-i5pueoy5j2] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

html.dark-mode .import-confirm[b-i5pueoy5j2] {
    background: #1e293b;
}

html.dark-mode .import-confirm h3[b-i5pueoy5j2] {
    color: #f1f5f9;
}

html.dark-mode .import-confirm p[b-i5pueoy5j2] {
    color: #cbd5e1;
}

/* ── Provider Validation Status & Report ─────────────────────────────────── */
.validation-status[b-i5pueoy5j2] {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: #1f2937;
}

.validation-status.ok[b-i5pueoy5j2] {
    background: #e6f7ec;
    border-color: #b7e4c7;
}

.validation-status.warn[b-i5pueoy5j2] {
    background: #fff4e5;
    border-color: #f5d9a8;
}

.validation-status.none[b-i5pueoy5j2] {
    background: #f3f3f3;
    border-color: #e2e2e2;
}

.validation-status .validation-time[b-i5pueoy5j2] {
    margin-left: 8px;
    color: #555;
}

.validation-report[b-i5pueoy5j2] {
    margin: 8px 0;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #1f2937;
}

.validation-report h4[b-i5pueoy5j2] {
    margin: 0 0 8px 0;
}

.validation-report ul[b-i5pueoy5j2] {
    margin: 0;
    padding-left: 18px;
}

.validation-report small[b-i5pueoy5j2] {
    color: #555;
}

/* ── Validation Status & Report Dark Mode ────────────────────────────────── */
html.dark-mode .validation-status[b-i5pueoy5j2] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .validation-status.ok[b-i5pueoy5j2] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
}

html.dark-mode .validation-status.warn[b-i5pueoy5j2] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .validation-status.none[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
}

html.dark-mode .validation-status .validation-time[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .validation-report[b-i5pueoy5j2] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .validation-report h4[b-i5pueoy5j2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .validation-report small[b-i5pueoy5j2] {
    color: var(--text-tertiary, #94a3b8);
}
/* /Components/Pages/Admin/Books.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   ADMIN / BOOKS - PAGE SPECIFIC STYLES
   Afgestemd op Dashboard.razor.css en admin-shared.css
   ════════════════════════════════════════════════════════════════════════════ */

.books-page[b-i90ll4pbx7] {
    min-height: 100vh;
    background: var(--bg-primary, #f8fafc);
    padding-bottom: 5rem; /* ruimte voor fixed admin-footer */
}

/* ── Page Header ──────────────────────────────────────────────────────────── */
.books-page .page-header[b-i90ll4pbx7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.5rem 3rem 1.25rem;
    background: var(--bg-primary, #f8fafc);
    border-bottom: 1px solid #e2e8f0;
}

.books-page .page-header .header-left[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.books-page .page-header .page-title[b-i90ll4pbx7] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
}

.books-page .breadcrumb[b-i90ll4pbx7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

.books-page .breadcrumb-link[b-i90ll4pbx7] {
    color: #3b82f6;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.books-page .breadcrumb-link:hover[b-i90ll4pbx7] {
    text-decoration: underline;
}

.books-page .breadcrumb-sep[b-i90ll4pbx7] {
    color: #cbd5e1;
}

.books-page .breadcrumb-current[b-i90ll4pbx7] {
    color: #64748b;
    font-weight: 500;
}

.books-page .header-subtitle[b-i90ll4pbx7] {
    font-size: 0.9rem;
    color: #64748b;
}

.books-page .header-actions[b-i90ll4pbx7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Content Area ─────────────────────────────────────────────────────────── */
.books-content[b-i90ll4pbx7] {
    padding: 1.5rem 3rem;
    background: var(--bg-primary, #f8fafc);
}

.books-meta[b-i90ll4pbx7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.books-meta .count-badge[b-i90ll4pbx7] {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Books Grid ───────────────────────────────────────────────────────────── */
.books-grid[b-i90ll4pbx7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ── Book Card ────────────────────────────────────────────────────────────── */
.book-card[b-i90ll4pbx7] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    border-left: 4px solid #3b82f6;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    position: relative;
}

.book-card:hover[b-i90ll4pbx7] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.book-card.deleting[b-i90ll4pbx7] {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
}

/* Card header ───────────────────────── */
.book-card-header[b-i90ll4pbx7] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0;
    border: 0;
    margin: 0;
}

.book-avatar[b-i90ll4pbx7] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.book-card-title[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.book-name[b-i90ll4pbx7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-id[b-i90ll4pbx7] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}

/* Card body ─────────────────────────── */
.book-card-body[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-row[b-i90ll4pbx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.status-pill[b-i90ll4pbx7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-pill .pill-dot[b-i90ll4pbx7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.status-pill.pill-ok[b-i90ll4pbx7] {
    background: #dcfce7;
    color: #166534;
}

.status-pill.pill-muted[b-i90ll4pbx7] {
    background: #f1f5f9;
    color: #64748b;
}

.book-meta[b-i90ll4pbx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary, #f8fafc);
    border-radius: 8px;
    font-size: 0.78rem;
}

.book-meta .meta-label[b-i90ll4pbx7] {
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.book-meta .meta-value[b-i90ll4pbx7] {
    color: #1e293b;
    font-weight: 600;
}

/* Card actions ──────────────────────── */
.book-card-actions[b-i90ll4pbx7] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    margin: 0;
}

.book-card-actions .action-btn[b-i90ll4pbx7] {
    flex: 1;
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px dashed #cbd5e1;
    text-align: center;
    gap: 0.5rem;
}

.empty-state .empty-icon[b-i90ll4pbx7] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    filter: grayscale(0.2);
    opacity: 0.85;
}

.empty-state h2[b-i90ll4pbx7] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
}

.empty-state p[b-i90ll4pbx7] {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.9rem;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay[b-i90ll4pbx7] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn-b-i90ll4pbx7 0.2s ease-out;
    padding: 1.5rem;
}

@keyframes fadeIn-b-i90ll4pbx7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-i90ll4pbx7] {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    animation: slideUp-b-i90ll4pbx7 0.25s cubic-bezier(.4,0,.2,1);
}

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

.modal-header[b-i90ll4pbx7] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header-danger[b-i90ll4pbx7] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-bottom-color: #fecaca;
    border-radius: 16px 16px 0 0;
}

.modal-title[b-i90ll4pbx7] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #991b1b;
    letter-spacing: -0.01em;
}

.modal-subtitle[b-i90ll4pbx7] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #b91c1c;
}

.modal-body[b-i90ll4pbx7] {
    padding: 1.5rem;
}

.warning-box[b-i90ll4pbx7] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.warning-box p[b-i90ll4pbx7] {
    margin: 0 0 0.6rem;
    color: #7f1d1d;
    font-size: 0.88rem;
    line-height: 1.5;
}

.warning-box p:last-of-type[b-i90ll4pbx7] {
    margin-bottom: 0;
}

.delete-book-info[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary, white);
    border-radius: 10px;
    border: 1px solid #fecaca;
    margin: 0.85rem 0;
}

.delete-book-name[b-i90ll4pbx7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.delete-book-id[b-i90ll4pbx7] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.delete-impact-list[b-i90ll4pbx7] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: #7f1d1d;
    font-size: 0.82rem;
}

.delete-impact-list li[b-i90ll4pbx7] {
    margin: 0.2rem 0;
}

.confirmation-input[b-i90ll4pbx7] {
    margin-top: 1rem;
}

.confirmation-input label[b-i90ll4pbx7] {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.form-control[b-i90ll4pbx7] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg-input, white);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-primary, #cbd5e1);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

.form-control:focus[b-i90ll4pbx7] {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.modal-footer[b-i90ll4pbx7] {
    padding: 1rem 1.5rem;
    background: var(--bg-primary, #f8fafc);
    border-top: 1px solid var(--border-primary, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-radius: 0 0 16px 16px;
}

/* Solid danger button voor de modal bevestiging */
.action-btn.danger-solid[b-i90ll4pbx7] {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.action-btn.danger-solid:hover:not(:disabled)[b-i90ll4pbx7] {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast[b-i90ll4pbx7] {
    position: fixed;
    top: 5rem;
    right: 2rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    min-width: 300px;
    max-width: 500px;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 100000;
    animation: slideIn-b-i90ll4pbx7 0.3s cubic-bezier(.4,0,.2,1);
}

@keyframes slideIn-b-i90ll4pbx7 {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-error[b-i90ll4pbx7] {
    border-left: 4px solid #dc2626;
}

.toast-success[b-i90ll4pbx7] {
    border-left: 4px solid #10b981;
}

.toast-icon[b-i90ll4pbx7] {
    font-size: 1.1rem;
}

.toast-message[b-i90ll4pbx7] {
    color: #1e293b;
    font-size: 0.9rem;
    flex: 1;
}

.toast-close[b-i90ll4pbx7] {
    background: none;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 0.25rem;
}

.toast-close:hover[b-i90ll4pbx7] {
    color: #475569;
}

/* ── Loading / Spinner ────────────────────────────────────────────────────── */
.loading-container[b-i90ll4pbx7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #64748b;
    gap: 1rem;
}

.loading-spinner[b-i90ll4pbx7] {
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-i90ll4pbx7 0.8s linear infinite;
}

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

.spinner-border[b-i90ll4pbx7] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-i90ll4pbx7 0.75s linear infinite;
}

.spinner-border-sm[b-i90ll4pbx7] {
    width: 0.85rem;
    height: 0.85rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .books-page .page-header[b-i90ll4pbx7],
    .books-content[b-i90ll4pbx7] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .books-page .page-header[b-i90ll4pbx7] {
        align-items: flex-start;
    }

    .header-actions[b-i90ll4pbx7] {
        width: 100%;
    }

    .books-grid[b-i90ll4pbx7] {
        grid-template-columns: 1fr;
    }
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */
/* App gebruikt class toggle (html.dark-mode) via BBuilder/wwwroot/js/dark-mode.js,
   NIET prefers-color-scheme. CSS isolation vereist  voor ancestor match. */

/* CSS variabelen --bg-primary, --text-primary etc. worden automatisch
   aangepast door html.dark-mode in admin-shared.css. Geen expliciete
   overrides nodig voor backgrounds die var(--bg-primary) gebruiken. */

html.dark-mode .books-page .page-header[b-i90ll4pbx7] {
    border-bottom-color: #1e293b;
}

html.dark-mode .books-page .page-header .page-title[b-i90ll4pbx7] {
    color: #f1f5f9;
}

html.dark-mode .books-page .header-subtitle[b-i90ll4pbx7],
html.dark-mode .books-page .breadcrumb-current[b-i90ll4pbx7] {
    color: #94a3b8;
}

html.dark-mode .books-page .breadcrumb-sep[b-i90ll4pbx7] {
    color: #475569;
}

html.dark-mode .books-meta .count-badge[b-i90ll4pbx7] {
    background: #1e293b;
    color: #cbd5e1;
}

html.dark-mode .book-card[b-i90ll4pbx7] {
    background: #1e293b;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
}

html.dark-mode .book-card:hover[b-i90ll4pbx7] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}

html.dark-mode .book-name[b-i90ll4pbx7] {
    color: #f1f5f9;
}

html.dark-mode .book-id[b-i90ll4pbx7] {
    color: #64748b;
}

html.dark-mode .status-pill.pill-muted[b-i90ll4pbx7] {
    background: #0f172a;
    color: #94a3b8;
}

html.dark-mode .status-pill.pill-ok[b-i90ll4pbx7] {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

/* book-meta gebruikt var(--bg-primary) dus geen expliciete override nodig */

html.dark-mode .book-meta .meta-label[b-i90ll4pbx7] {
    color: #64748b;
}

html.dark-mode .book-meta .meta-value[b-i90ll4pbx7] {
    color: #e2e8f0;
}

html.dark-mode .book-card-actions[b-i90ll4pbx7] {
    border-top-color: #334155;
}

html.dark-mode .empty-state[b-i90ll4pbx7] {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode .empty-state h2[b-i90ll4pbx7] {
    color: #f1f5f9;
}

html.dark-mode .empty-state p[b-i90ll4pbx7] {
    color: #94a3b8;
}

html.dark-mode .modal-dialog[b-i90ll4pbx7] {
    background: #1e293b;
}

html.dark-mode .modal-header[b-i90ll4pbx7] {
    border-bottom-color: #334155;
}

html.dark-mode .modal-header-danger[b-i90ll4pbx7] {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.4), rgba(153, 27, 27, 0.35));
    border-bottom-color: #7f1d1d;
}

html.dark-mode .modal-title[b-i90ll4pbx7] {
    color: #fca5a5;
}

html.dark-mode .modal-subtitle[b-i90ll4pbx7] {
    color: #fecaca;
}

/* NOTE: Dark mode styles voor .warning-box staan in admin-shared.css
   (globale CSS file) vanwege Blazor CSS isolation issues.
   Zie SKILLS.md sectie 19 voor uitleg. */

/* delete-book-info en form-control gebruiken CSS variabelen, 
   dus background/border/text worden automatisch aangepast */

html.dark-mode .delete-book-info[b-i90ll4pbx7] {
    border-color: #334155;
}

/* Text colors gebruiken ook CSS variabelen, geen overrides nodig voor:
   - .delete-book-name (var(--text-primary))
   - .delete-book-id (var(--text-tertiary))
   - .confirmation-input label (var(--text-primary)) */

/* modal-footer gebruikt var(--bg-primary) en var(--border-primary) */

html.dark-mode .toast[b-i90ll4pbx7] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6);
}

html.dark-mode .toast-message[b-i90ll4pbx7] {
    color: #f1f5f9;
}

html.dark-mode .toast-close[b-i90ll4pbx7] {
    color: #64748b;
}

html.dark-mode .toast-close:hover[b-i90ll4pbx7] {
    color: #cbd5e1;
}

html.dark-mode .loading-spinner[b-i90ll4pbx7] {
    border-color: #334155;
    border-top-color: #60a5fa;
}

/* Gedeelde action-btn classes uit admin-shared.css hebben eigen dark-mode regels,
   dus die niet opnieuw overriden hier. */
/* /Components/Pages/Admin/BookStyleModal.razor.rz.scp.css */
/* ── BookStyleModal styles ─────────────────────────────────── */

/* ── Modal shell (cm-* shared with CharacterManagementModal but scoped here) ── */

.cm-modal[b-s7sx3pxu52] {
    background: var(--bg-secondary, #fff);
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
    width: min(960px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cm-head[b-s7sx3pxu52] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.75rem .9rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.cm-head h2[b-s7sx3pxu52] {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cm-subtitle[b-s7sx3pxu52] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: .825rem;
    line-height: 1.4;
    max-width: 640px;
}

.modal-close[b-s7sx3pxu52] {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-secondary, #94a3b8);
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
}

.modal-close:hover[b-s7sx3pxu52] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #0f172a);
}

.cm-toolbar[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.75rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.cm-count[b-s7sx3pxu52] {
    font-size: .8rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.cm-toolbar-actions[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cm-body[b-s7sx3pxu52] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.75rem 1.5rem;
}

.cm-loading[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--text-secondary, #94a3b8);
    font-size: .9rem;
}

.cm-spinner[b-s7sx3pxu52] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-primary, #e2e8f0);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: bsm-spin-b-s7sx3pxu52 .6s linear infinite;
}

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

.cm-empty[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #64748b);
}

.cm-empty-icon[b-s7sx3pxu52] {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: .25rem;
}

.cm-toast[b-s7sx3pxu52] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #059669;
    color: #fff;
    padding: .65rem 1.3rem;
    border-radius: .5rem;
    font-size: .85rem;
    font-weight: 500;
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    animation: bsm-pop-b-s7sx3pxu52 .25s ease-out;
}

.cm-toast--err[b-s7sx3pxu52] {
    background: #dc2626;
}

@keyframes bsm-pop-b-s7sx3pxu52 {
    from { opacity: 0; transform: translateX(-50%) translateY(.8rem); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bsm-edit-form[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .25rem .25rem 1rem;
}

.bsm-edit-title[b-s7sx3pxu52] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 .4rem;
}

.bsm-grid[b-s7sx3pxu52] {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
    align-items: start;
}

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

.bsm-col[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.bsm-col-preview[b-s7sx3pxu52] {
    align-items: stretch;
}

.bsm-label[b-s7sx3pxu52] {
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: .3rem;
}

.bsm-required[b-s7sx3pxu52] {
    color: var(--danger, #e04);
}

.bsm-input[b-s7sx3pxu52] {
    width: 100%;
    font-size: .8rem;
}

.bsm-input-sm[b-s7sx3pxu52] {
    max-width: 100px;
}

.bsm-textarea[b-s7sx3pxu52] {
    width: 100%;
    font-size: .8rem;
    resize: vertical;
    font-family: inherit;
}

.bsm-row-fields[b-s7sx3pxu52] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: .25rem;
}

.bsm-check-label[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    cursor: pointer;
    padding: .25rem 0;
}

.bsm-edit-actions[b-s7sx3pxu52] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* ── Preview ── */

.bsm-preview-box[b-s7sx3pxu52] {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px dashed var(--border-color, #d0d0d0);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: .5rem;
}

.bsm-preview-img[b-s7sx3pxu52] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bsm-preview-empty[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: var(--text-muted);
    font-size: 2rem;
    opacity: .5;
}

.bsm-preview-empty small[b-s7sx3pxu52] {
    font-size: .7rem;
}

.bsm-upload-label[b-s7sx3pxu52] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.bsm-hint[b-s7sx3pxu52] {
    font-size: .7rem;
    color: var(--text-muted);
    margin: .25rem 0 0;
    text-align: center;
    font-style: italic;
}

/* ── List ── */

.bsm-list[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.bsm-row[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: 8px;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    transition: border-color .15s, background .15s;
}

.bsm-row:hover[b-s7sx3pxu52] {
    background: var(--bg-hover, #efefef);
}

.bsm-row--default[b-s7sx3pxu52] {
    border-color: var(--accent, #6c63ff);
    border-width: 2px;
}

.bsm-row-thumb[b-s7sx3pxu52] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-tertiary, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.bsm-row-thumb img[b-s7sx3pxu52] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bsm-thumb-placeholder[b-s7sx3pxu52] {
    opacity: .4;
}

.bsm-row-info[b-s7sx3pxu52] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.bsm-name-row[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.bsm-name[b-s7sx3pxu52] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bsm-desc[b-s7sx3pxu52] {
    font-size: .73rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.bsm-badge-default[b-s7sx3pxu52] {
    display: inline-block;
    font-size: .65rem;
    font-weight: 600;
    background: var(--accent, #6c63ff);
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bsm-row-actions[b-s7sx3pxu52] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.bsm-action-btn[b-s7sx3pxu52] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #fff);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.bsm-action-btn svg[b-s7sx3pxu52] {
    display: block;
    width: 18px;
    height: 18px;
}

.bsm-action-btn:hover:not(:disabled)[b-s7sx3pxu52] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #0f172a);
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.bsm-action-btn:active:not(:disabled)[b-s7sx3pxu52] {
    transform: translateY(1px);
}

.bsm-action-btn:focus-visible[b-s7sx3pxu52] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.bsm-action-btn:disabled[b-s7sx3pxu52] {
    opacity: .4;
    cursor: not-allowed;
}

.bsm-action-btn--star:hover:not(:disabled)[b-s7sx3pxu52] {
    color: #d97706;
    border-color: #fcd34d;
    background: #fffbeb;
}

.bsm-action-btn--edit:hover:not(:disabled)[b-s7sx3pxu52] {
    color: #2563eb;
    border-color: #93c5fd;
    background: #eff6ff;
}

.bsm-action-btn--danger:hover:not(:disabled)[b-s7sx3pxu52] {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}

.bsm-action-divider[b-s7sx3pxu52] {
    width: 1px;
    align-self: stretch;
    background: var(--border-primary, #e2e8f0);
    margin: 4px 2px;
}
/* /Components/Pages/Admin/BulkExportImport.razor.rz.scp.css */
/* ── Page Top ───────────────────────────────────────────────────── */
.bulk-top[b-vdafi6lgz7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 3rem;
    background: var(--bg-secondary, #ffffff);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.bulk-top-left[b-vdafi6lgz7] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-btn[b-vdafi6lgz7] {
    background: none;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-tertiary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover[b-vdafi6lgz7] {
    background: var(--bg-primary, #f8fafc);
    color: var(--text-primary, #1e293b);
}

.page-title[b-vdafi6lgz7] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary, #1e293b);
}

.bulk-subtitle[b-vdafi6lgz7] {
    color: var(--text-tertiary, #64748b);
    font-size: 0.9rem;
}

/* ── Status Banner ─────────────────────────────────────────────────── */
.status-banner[b-vdafi6lgz7] {
    padding: 0.75rem 3rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.status-banner.success[b-vdafi6lgz7] {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}

.status-banner.error[b-vdafi6lgz7] {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

/* ── Section Card ──────────────────────────────────────────────────── */
.section-card[b-vdafi6lgz7] {
    margin: 1.5rem 3rem;
    background: var(--bg-secondary, white);
    border-radius: 16px;
    border: 1px solid var(--border-primary, #e2e8f0);
    overflow: hidden;
}

.bulk-section-bar[b-vdafi6lgz7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.bulk-section-bar h2[b-vdafi6lgz7] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1e293b);
}

.select-actions[b-vdafi6lgz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link-btn[b-vdafi6lgz7] {
    background: none;
    border: none;
    color: var(--accent-primary, #3b82f6);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.link-btn:hover:not(:disabled)[b-vdafi6lgz7] {
    text-decoration: underline;
}

.link-btn:disabled[b-vdafi6lgz7] {
    color: var(--text-tertiary, #64748b);
    cursor: default;
}

.divider[b-vdafi6lgz7] {
    color: var(--border-primary, #e2e8f0);
}

/* ── Category Grid ─────────────────────────────────────────────────── */
.category-grid[b-vdafi6lgz7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.category-card[b-vdafi6lgz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-primary, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    background: var(--bg-primary, #f8fafc);
}

.category-card:hover[b-vdafi6lgz7] {
    border-color: var(--accent-primary, #3b82f6);
    background: var(--bg-hover, #e2e8f0);
}

.category-card.selected[b-vdafi6lgz7] {
    border-color: #3b82f6;
    background: var(--bg-hover, #e2e8f0);
}

.cat-icon[b-vdafi6lgz7] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cat-name[b-vdafi6lgz7] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.cat-check[b-vdafi6lgz7] {
    font-size: 1.1rem;
    color: var(--accent-primary, #3b82f6);
    flex-shrink: 0;
}

/* ── Action Bar ────────────────────────────────────────────────────── */
.action-bar[b-vdafi6lgz7] {
    display: flex;
    gap: 2rem;
    margin: 0 3rem 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary, white);
    border-radius: 16px;
    border: 1px solid var(--border-primary, #e2e8f0);
}

.action-group[b-vdafi6lgz7] {
    flex: 1;
}

.action-group h3[b-vdafi6lgz7] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--text-primary, #1e293b);
}

.action-desc[b-vdafi6lgz7] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    line-height: 1.5;
}

.action-divider[b-vdafi6lgz7] {
    width: 1px;
    background: var(--border-primary, #e2e8f0);
    align-self: stretch;
}

.import-file-trigger[b-vdafi6lgz7] {
    cursor: pointer;
}

/* ── Spinner ───────────────────────────────────────────────────────── */
.spinner-sm[b-vdafi6lgz7] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-vdafi6lgz7 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.35rem;
}

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

/* ── Import Confirmation Modal ─────────────────────────────────────── */
.modal-overlay[b-vdafi6lgz7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-vdafi6lgz7 0.15s ease;
}

.modal-content[b-vdafi6lgz7] {
    background: var(--bg-secondary, #fff);
    border-radius: 16px;
    padding: 2rem;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-content h3[b-vdafi6lgz7] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: var(--text-primary, #1e293b);
}

.modal-content p[b-vdafi6lgz7] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary, #475569);
    font-size: 0.9rem;
    line-height: 1.5;
}

.import-meta[b-vdafi6lgz7] {
    color: var(--text-tertiary, #64748b) !important;
    font-size: 0.85rem !important;
}

.import-category-list[b-vdafi6lgz7] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.import-category-list li[b-vdafi6lgz7] {
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
    padding: 0.3rem 0;
}

.import-warning[b-vdafi6lgz7] {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #92400e;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.modal-actions[b-vdafi6lgz7] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@keyframes fadeIn-b-vdafi6lgz7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Dark Mode (only for values that can't use CSS variables) ──────── */

html.dark-mode .status-banner.success[b-vdafi6lgz7] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.2);
}

html.dark-mode .status-banner.error[b-vdafi6lgz7] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.2);
}

html.dark-mode .category-card.selected[b-vdafi6lgz7] {
    background: rgba(59, 130, 246, 0.15);
}

html.dark-mode .modal-overlay[b-vdafi6lgz7] {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .import-warning[b-vdafi6lgz7] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fbbf24;
}
/* /Components/Pages/Admin/CharacterManagementModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   CharacterManagementModal — Redesigned 2026
   ══════════════════════════════════════════════════════════════ */

/* ── Modal shell ─────────────────────────────────────────── */

.cm-modal[b-ge0duot6ks] {
    background: var(--bg-secondary, #fff);
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
    width: min(1100px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */

.cm-head[b-ge0duot6ks] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

    .cm-head h2[b-ge0duot6ks] {
        margin: 0 0 .25rem;
        font-size: 1.35rem;
        color: var(--text-primary, #1e293b);
    }

.cm-subtitle[b-ge0duot6ks] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: .875rem;
}

.modal-close[b-ge0duot6ks] {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary, #94a3b8);
    line-height: 1;
    padding: .3rem;
    transition: color .15s;
}

    .modal-close:hover[b-ge0duot6ks] {
        color: var(--text-primary, #334155);
    }

/* ── Tabs ────────────────────────────────────────────────── */

.cm-tabs[b-ge0duot6ks] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-primary, #e2e8f0);
    padding: 0 2rem;
}

.cm-tab[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.5rem;
    border: none;
    background: none;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .15s;
}

    .cm-tab.cm-tab--active[b-ge0duot6ks] {
        color: #3b82f6;
        border-bottom-color: #3b82f6;
    }

    .cm-tab:hover:not(.cm-tab--active)[b-ge0duot6ks] {
        color: var(--text-primary, #334155);
    }

    .cm-tab svg[b-ge0duot6ks] {
        opacity: .6;
    }

    .cm-tab.cm-tab--active svg[b-ge0duot6ks] {
        opacity: 1;
    }

.cm-badge[b-ge0duot6ks] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    border-radius: 1rem;
    background: var(--bg-tertiary, #e2e8f0);
    color: var(--text-secondary, #475569);
    font-size: .7rem;
    font-weight: 700;
    margin-left: .25rem;
    padding: 0 .4rem;
}

.cm-tab.cm-tab--active .cm-badge[b-ge0duot6ks] {
    background: #dbeafe;
    color: #2563eb;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.cm-toolbar[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 2rem;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.cm-count[b-ge0duot6ks] {
    font-size: .8rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

/* ── Body ────────────────────────────────────────────────── */

.cm-body[b-ge0duot6ks] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 2rem;
}

/* ── Loading / Empty ─────────────────────────────────────── */

.cm-loading[b-ge0duot6ks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--text-secondary, #94a3b8);
    font-size: .9rem;
}

.cm-spinner[b-ge0duot6ks] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-primary, #e2e8f0);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: cm-spin-b-ge0duot6ks .6s linear infinite;
}

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

.cm-empty[b-ge0duot6ks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #64748b);
}

    .cm-empty h3[b-ge0duot6ks] {
        margin: 0;
        font-size: 1.05rem;
        color: var(--text-primary, #334155);
    }

    .cm-empty p[b-ge0duot6ks] {
        margin: 0 0 .75rem;
        font-size: .85rem;
        max-width: 340px;
    }

.cm-empty-icon[b-ge0duot6ks] {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: .25rem;
}

/* ── Filter pills (Characters tab) ──────────────────────── */

.cm-filter-bar[b-ge0duot6ks] {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cm-filter-pill[b-ge0duot6ks] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem 1rem;
    border: 1px solid var(--border-primary, #cbd5e1);
    border-radius: 2rem;
    background: var(--bg-secondary, #f8fafc);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary, #475569);
    transition: all .15s;
}

    .cm-filter-pill.cm-filter-pill--active[b-ge0duot6ks] {
        background: #3b82f6;
        color: #fff;
        border-color: #3b82f6;
    }

    .cm-filter-pill:hover:not(.cm-filter-pill--active)[b-ge0duot6ks] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .cm-filter-pill .cm-badge[b-ge0duot6ks] {
        margin-left: 0;
    }

    .cm-filter-pill.cm-filter-pill--active .cm-badge[b-ge0duot6ks] {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

/* ── Card ────────────────────────────────────────────────── */

.cm-list[b-ge0duot6ks] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.cm-card[b-ge0duot6ks] {
    display: flex;
    gap: .8rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: .75rem;
    padding: .85rem;
    background: var(--bg-secondary, #fff);
    transition: border-color .15s, box-shadow .15s;
}

    .cm-card:hover[b-ge0duot6ks] {
        border-color: #93c5fd;
        box-shadow: 0 2px 8px rgba(59, 130, 246, .08);
    }

/* ── Card handle (reorder) ───────────────────────────────── */

.cm-card-handle[b-ge0duot6ks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 32px;
    padding-top: .2rem;
}

.cm-handle-btn[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    background: none;
    border: 1px solid var(--border-primary, #cbd5e1);
    border-radius: .25rem;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    transition: all .15s;
}

    .cm-handle-btn:hover:not(:disabled)[b-ge0duot6ks] {
        background: var(--bg-tertiary, #f1f5f9);
        color: #3b82f6;
        border-color: #3b82f6;
    }

    .cm-handle-btn:disabled[b-ge0duot6ks] {
        opacity: .25;
        cursor: default;
    }

.cm-handle-num[b-ge0duot6ks] {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-primary, #334155);
    line-height: 1.2;
}

/* ── Character portrait ──────────────────────────────────── */

.cm-char-portrait[b-ge0duot6ks] {
    flex-shrink: 0;
}

.cm-portrait-wrap[b-ge0duot6ks] {
    position: relative;
    width: 64px;
    height: 90px;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

.cm-portrait-img[b-ge0duot6ks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-portrait-empty[b-ge0duot6ks] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #94a3b8);
}

.cm-upload-overlay[b-ge0duot6ks] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s;
    cursor: pointer;
}

.cm-portrait-wrap:hover .cm-upload-overlay[b-ge0duot6ks] {
    opacity: 1;
}

/* ── Card body & fields ──────────────────────────────────── */

.cm-card-body[b-ge0duot6ks] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.cm-fields[b-ge0duot6ks] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: end;
}

.cm-field[b-ge0duot6ks] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 100px;
}

    .cm-field.cm-field--wide[b-ge0duot6ks] {
        flex: 2;
        min-width: 180px;
    }

    .cm-field.cm-field--narrow[b-ge0duot6ks] {
        flex: 0 0 80px;
        min-width: 80px;
    }

    .cm-field label[b-ge0duot6ks] {
        font-size: .7rem;
        color: var(--text-secondary, #64748b);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .cm-field input[b-ge0duot6ks],
    .cm-field select[b-ge0duot6ks] {
        padding: .4rem .55rem;
        border: 1px solid var(--border-primary, #cbd5e1);
        border-radius: .4rem;
        font-size: .82rem;
        width: 100%;
        background: var(--bg-primary, #fff);
        color: var(--text-primary, #1e293b);
        transition: border-color .15s, box-shadow .15s;
    }

    .cm-field input:focus[b-ge0duot6ks],
    .cm-field select:focus[b-ge0duot6ks] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
    }

    .cm-field input[type="number"][b-ge0duot6ks] {
        width: 100%;
    }

/* ── Card meta (toggle + delete) ─────────────────────────── */

.cm-card-meta[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cm-toggle[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .8rem;
    color: var(--text-secondary, #64748b);
}

    .cm-toggle input[type="checkbox"][b-ge0duot6ks] {
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .cm-toggle span[b-ge0duot6ks] {
        font-weight: 500;
    }

/* ── Save bar ────────────────────────────────────────────── */

.cm-save-bar[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 2rem;
    background: #fef3c7;
    color: #92400e;
    font-size: .82rem;
    font-weight: 500;
    border-top: 1px solid #fde68a;
}

.cm-save-bar-inner[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Footer ──────────────────────────────────────────────── */

.cm-footer[b-ge0duot6ks] {
    padding: .85rem 2rem;
    border-top: 1px solid var(--border-primary, #e2e8f0);
    display: flex;
    justify-content: flex-end;
}

/* ── Toast ────────────────────────────────────────────────── */

.cm-toast[b-ge0duot6ks] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #059669;
    color: #fff;
    padding: .65rem 1.3rem;
    border-radius: .5rem;
    font-size: .85rem;
    font-weight: 500;
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    animation: cm-pop-b-ge0duot6ks .25s ease-out;
}

    .cm-toast.cm-toast--error[b-ge0duot6ks] {
        background: #dc2626;
    }

@keyframes cm-pop-b-ge0duot6ks {
    from { opacity: 0; transform: translateX(-50%) translateY(.8rem); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Toolbar actions ─────────────────────────────────────── */

.cm-toolbar-actions[b-ge0duot6ks] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cm-import-label[b-ge0duot6ks] { cursor: pointer; }

/* ── Import overlay ──────────────────────────────────────── */

.cm-import-overlay[b-ge0duot6ks] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.cm-import-dialog[b-ge0duot6ks] {
    background: var(--bg-secondary, #fff);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

    .cm-import-dialog h3[b-ge0duot6ks] { margin: 0 0 .5rem; }

.cm-import-summary[b-ge0duot6ks] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

    .cm-import-summary li[b-ge0duot6ks] {
        padding: .4rem 0;
        font-size: .9rem;
    }

.cm-import-actions[b-ge0duot6ks] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
/* /Components/Pages/Admin/ContactRequests.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ContactRequests — admin pagina voor contactaanvragen
   Gebruikt themavariabelen uit admin-shared.css → werkt automatisch in
   light én dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-page[b-qoyjpnrb5m] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    color: var(--text-primary);
}

.contact-header[b-qoyjpnrb5m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.breadcrumb[b-qoyjpnrb5m] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.breadcrumb-link[b-qoyjpnrb5m] {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-link:hover[b-qoyjpnrb5m] { text-decoration: underline; }
.breadcrumb-sep[b-qoyjpnrb5m] { margin: 0 0.5rem; color: var(--text-muted); }

.page-title[b-qoyjpnrb5m] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Status-pill ──────────────────────────────────────────────────────── */
.badge-warning[b-qoyjpnrb5m],
.badge-ok[b-qoyjpnrb5m] {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: var(--transition-theme);
}

.badge-warning[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-warning) 18%, transparent);
    color: var(--accent-warning);
    border: 1px solid color-mix(in srgb, var(--accent-warning) 45%, transparent);
}

.badge-ok[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-success) 18%, transparent);
    color: var(--accent-success);
    border: 1px solid color-mix(in srgb, var(--accent-success) 45%, transparent);
}

/* ── Filter tabs ──────────────────────────────────────────────────────── */
.filter-tabs[b-qoyjpnrb5m] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-primary);
}

.tab[b-qoyjpnrb5m] {
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-tertiary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    border-radius: 6px 6px 0 0;
}

.tab:hover[b-qoyjpnrb5m] {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.tab.active[b-qoyjpnrb5m] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

/* ── Tabel ────────────────────────────────────────────────────────────── */
.admin-table[b-qoyjpnrb5m] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition-theme);
}

.admin-table thead[b-qoyjpnrb5m] {
    background: var(--bg-tertiary);
}

.admin-table th[b-qoyjpnrb5m] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.admin-table td[b-qoyjpnrb5m] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: top;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.admin-table tbody tr[b-qoyjpnrb5m] { transition: background 0.15s ease; }
.admin-table tbody tr:last-child td[b-qoyjpnrb5m] { border-bottom: none; }
.admin-table tbody tr:hover[b-qoyjpnrb5m] { background: var(--bg-hover); }

.row-open[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-warning) 6%, transparent);
}
.row-open:hover[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-warning) 14%, transparent) !important;
}
.row-done[b-qoyjpnrb5m] { opacity: 0.65; }

/* Prioriteit accent-rand */
.admin-table tr.prio-urgent td:first-child[b-qoyjpnrb5m] { border-left: 4px solid var(--accent-error); }
.admin-table tr.prio-high   td:first-child[b-qoyjpnrb5m] { border-left: 4px solid var(--accent-warning); }
.admin-table tr.prio-normal td:first-child[b-qoyjpnrb5m] { border-left: 4px solid var(--accent-primary); }
.admin-table tr.prio-low    td:first-child[b-qoyjpnrb5m] { border-left: 4px solid var(--text-muted); }

/* Prioriteit select */
.prio-select[b-qoyjpnrb5m] {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-theme);
}

.prio-select:focus[b-qoyjpnrb5m] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.prio-select.prio-urgent[b-qoyjpnrb5m] { color: var(--accent-error);   border-color: color-mix(in srgb, var(--accent-error) 50%, transparent); }
.prio-select.prio-high[b-qoyjpnrb5m]   { color: var(--accent-warning); border-color: color-mix(in srgb, var(--accent-warning) 50%, transparent); }
.prio-select.prio-normal[b-qoyjpnrb5m] { color: var(--accent-primary); }
.prio-select.prio-low[b-qoyjpnrb5m]    { color: var(--text-tertiary); }

/* Naam / e-mail cel */
.contact-name[b-qoyjpnrb5m] { font-weight: 600; color: var(--text-primary); }
.contact-email[b-qoyjpnrb5m] {
    display: block;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.contact-email:hover[b-qoyjpnrb5m] { text-decoration: underline; }
.contact-phone[b-qoyjpnrb5m] {
    color: var(--accent-primary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.contact-phone:hover[b-qoyjpnrb5m] { text-decoration: underline; }

/* Datum cel */
.date-cell[b-qoyjpnrb5m] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.date-cell .date-time[b-qoyjpnrb5m] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.age-badge[b-qoyjpnrb5m] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.15rem 0.5rem;
    background: color-mix(in srgb, var(--accent-error) 15%, transparent);
    color: var(--accent-error);
    border: 1px solid color-mix(in srgb, var(--accent-error) 35%, transparent);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.reason-cell[b-qoyjpnrb5m] { max-width: 320px; }
.reason-preview[b-qoyjpnrb5m] {
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ── Status chips (Nieuw/InProgress/etc.) ─────────────────────────────── */
.status-chip[b-qoyjpnrb5m] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
}
.status-chip.status-new[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
}
.status-chip.status-inprogress[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-warning) 15%, transparent);
    color: var(--accent-warning);
    border-color: color-mix(in srgb, var(--accent-warning) 40%, transparent);
}
.status-chip.status-handled[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-success) 15%, transparent);
    color: var(--accent-success);
    border-color: color-mix(in srgb, var(--accent-success) 40%, transparent);
}
.status-chip.status-archived[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-tertiary);
    border-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
}

/* ── Actieknoppen ─────────────────────────────────────────────────────── */
.action-cell[b-qoyjpnrb5m] {
    white-space: nowrap;
    text-align: right;
}

.btn-sm[b-qoyjpnrb5m] {
    padding: 0.35rem 0.6rem;
    margin-left: 0.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-sm:hover[b-qoyjpnrb5m] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-view[b-qoyjpnrb5m] { border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent); color: var(--accent-primary); }
.btn-view:hover[b-qoyjpnrb5m] { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); }

.btn-approve[b-qoyjpnrb5m] { border-color: color-mix(in srgb, var(--accent-success) 55%, transparent); color: var(--accent-success); }
.btn-approve:hover[b-qoyjpnrb5m] { background: color-mix(in srgb, var(--accent-success) 15%, transparent); }

.btn-deactivate[b-qoyjpnrb5m] { border-color: color-mix(in srgb, var(--accent-error) 55%, transparent); color: var(--accent-error); }
.btn-deactivate:hover[b-qoyjpnrb5m] { background: color-mix(in srgb, var(--accent-error) 15%, transparent); }

.empty-state[b-qoyjpnrb5m] {
    padding: 3rem;
    text-align: center;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-primary);
    border-radius: 8px;
}

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-backdrop[b-qoyjpnrb5m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in-b-qoyjpnrb5m 0.15s ease-out;
}

@keyframes fade-in-b-qoyjpnrb5m {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal[b-qoyjpnrb5m] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    width: 90%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: pop-in-b-qoyjpnrb5m 0.18s ease-out;
}

@keyframes pop-in-b-qoyjpnrb5m {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header[b-qoyjpnrb5m] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-qoyjpnrb5m] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.btn-close[b-qoyjpnrb5m] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.modal-body[b-qoyjpnrb5m] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.detail-grid[b-qoyjpnrb5m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-grid label[b-qoyjpnrb5m],
.detail-section label[b-qoyjpnrb5m] {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 0.3rem;
    letter-spacing: 0.6px;
}

.detail-grid > div > a[b-qoyjpnrb5m],
.detail-grid > div[b-qoyjpnrb5m] {
    color: var(--text-primary);
}

.detail-section[b-qoyjpnrb5m] { margin-bottom: 1.25rem; }

.reason-full[b-qoyjpnrb5m] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: 6px;
    white-space: pre-wrap;
    line-height: 1.5;
    border-left: 3px solid var(--accent-primary);
}

.notes-input[b-qoyjpnrb5m] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    transition: var(--transition-theme);
}

.notes-input:focus[b-qoyjpnrb5m] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.notes-input[b-qoyjpnrb5m]::placeholder { color: var(--text-muted); }

.handled-info[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-success) 14%, transparent);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    color: var(--accent-success);
    font-size: 0.9rem;
    border-left: 3px solid var(--accent-success);
}

.modal-footer[b-qoyjpnrb5m] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: var(--bg-tertiary);
    border-radius: 0 0 10px 10px;
}

.btn[b-qoyjpnrb5m] {
    padding: 0.55rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover[b-qoyjpnrb5m] { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-primary[b-qoyjpnrb5m] {
    background: var(--accent-success);
    color: #ffffff;
    border-color: var(--accent-success);
}
.btn-primary:hover[b-qoyjpnrb5m] {
    background: color-mix(in srgb, var(--accent-success) 85%, black);
}

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

.btn-link[b-qoyjpnrb5m] {
    background: transparent;
    color: var(--text-tertiary);
    border-color: transparent;
}
.btn-link:hover[b-qoyjpnrb5m] { color: var(--text-primary); box-shadow: none; transform: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .detail-grid[b-qoyjpnrb5m] { grid-template-columns: 1fr; }
    .contact-header[b-qoyjpnrb5m] { flex-direction: column; align-items: stretch; }
    .admin-table th:nth-child(4)[b-qoyjpnrb5m],
    .admin-table td:nth-child(4)[b-qoyjpnrb5m] { display: none; } /* telefoon kolom */
}
/* /Components/Pages/Admin/CoverAndSpineModal.razor.rz.scp.css */
/* ─── Backdrop + shell ─────────────────────────────────────────── */
.modal-backdrop[b-k3zocfrkwm] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.cs-modal[b-k3zocfrkwm] {
    position: relative; /* anchor for .cs-toast */
    background: #fff;
    width: min(1040px, 100%);
    max-height: 92vh;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cs-in-b-k3zocfrkwm .18s ease-out;
}

/* ─── Validation banner ───────────────────────────────────────── */
.cs-validation[b-k3zocfrkwm] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .85rem;
}

.cs-validation-error[b-k3zocfrkwm] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.cs-validation-warn[b-k3zocfrkwm] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.cs-validation-title[b-k3zocfrkwm] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cs-validation ul[b-k3zocfrkwm] {
    margin: 0;
    padding-left: 1.2rem;
}

/* ─── Spine SVG preview ───────────────────────────────────────── */
.cs-spine-visual[b-k3zocfrkwm] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.cs-spine-visual svg[b-k3zocfrkwm] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.cs-spine-visual-legend[b-k3zocfrkwm] {
    font-size: .8rem;
    color: #475569;
    line-height: 1.4;
}

/* ─── Dirty indicator ─────────────────────────────────────────── */
.cs-dirty-dot[b-k3zocfrkwm] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    margin-right: .5rem;
    animation: cs-pulse-b-k3zocfrkwm 1.6s ease-in-out infinite;
}

@keyframes cs-pulse-b-k3zocfrkwm {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.85); }
}

@keyframes cs-in-b-k3zocfrkwm {
    from {
        transform: translateY(8px) scale(.98);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* ─── Header ──────────────────────────────────────────────────── */
.cs-modal-header[b-k3zocfrkwm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fafbff, #fff);
}

    .cs-modal-header h2[b-k3zocfrkwm] {
        margin: 0 0 .25rem 0;
        font-size: 1.25rem;
        color: #0f172a;
    }

.cs-subtitle[b-k3zocfrkwm] {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
}

.modal-close[b-k3zocfrkwm] {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: .25rem .5rem;
    border-radius: 8px;
}

    .modal-close:hover[b-k3zocfrkwm] {
        background: #f1f5f9;
        color: #0f172a;
    }

/* ─── Body ────────────────────────────────────────────────────── */
.cs-modal-body[b-k3zocfrkwm] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-loading[b-k3zocfrkwm],
.cs-empty[b-k3zocfrkwm] {
    text-align: center;
    color: #64748b;
    padding: 2rem 1rem;
}

.cs-empty-icon[b-k3zocfrkwm] {
    font-size: 2rem;
    margin-bottom: .5rem;
}

/* ─── Provider banner ─────────────────────────────────────────── */
.cs-providers-banner[b-k3zocfrkwm] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cs-provider-chip[b-k3zocfrkwm] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.cs-chip-dot[b-k3zocfrkwm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
}

.cs-provider-peecho .cs-chip-dot[b-k3zocfrkwm] {
    background: #22c55e;
}

.cs-provider-gelato .cs-chip-dot[b-k3zocfrkwm] {
    background: #f97316;
}

.cs-provider-lulu .cs-chip-dot[b-k3zocfrkwm] {
    background: #6366f1;
}

.cs-chip-badge[b-k3zocfrkwm] {
    margin-left: .25rem;
    padding: .1rem .5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ─── Sections ────────────────────────────────────────────────── */
.cs-section[b-k3zocfrkwm] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
}

.cs-section-header h3[b-k3zocfrkwm] {
    margin: 0 0 .1rem 0;
    font-size: 1rem;
    color: #0f172a;
}

.cs-section-header p[b-k3zocfrkwm] {
    margin: 0 0 .9rem 0;
    color: #64748b;
    font-size: .85rem;
}

/* ─── Fields ──────────────────────────────────────────────────── */
.cs-grid-2[b-k3zocfrkwm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem;
}

.cs-field[b-k3zocfrkwm] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .85rem;
    color: #334155;
}

    .cs-field-wide[b-k3zocfrkwm] {
        grid-column: 1 / -1;
    }

    .cs-field input[type="text"][b-k3zocfrkwm],
    .cs-field select[b-k3zocfrkwm] {
        padding: .55rem .7rem;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: .9rem;
        background: #fff;
        transition: border-color .12s;
    }

        .cs-field input[type="text"]:focus[b-k3zocfrkwm],
        .cs-field select:focus[b-k3zocfrkwm] {
            border-color: #6366f1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
        }

    .cs-field input[type="color"][b-k3zocfrkwm] {
        height: 40px;
        padding: 2px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }

.cs-note[b-k3zocfrkwm] {
    margin: .6rem 0 0;
    color: #64748b;
    font-size: .8rem;
}

/* ─── Cover mode radios ───────────────────────────────────────── */
.cs-radio-group[b-k3zocfrkwm] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cs-radio[b-k3zocfrkwm] {
    display: flex;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}

    .cs-radio:hover[b-k3zocfrkwm] {
        background: #f8fafc;
    }

    .cs-radio input[type="radio"][b-k3zocfrkwm] {
        margin-top: .25rem;
    }

    .cs-radio span b[b-k3zocfrkwm] {
        display: block;
        color: #0f172a;
        font-size: .95rem;
    }

    .cs-radio span small[b-k3zocfrkwm] {
        color: #64748b;
        font-size: .8rem;
    }

/* ─── Back cover upload ──────────────────────────────────────── */
.cs-backcover[b-k3zocfrkwm] {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbff;
}

.cs-backcover-preview[b-k3zocfrkwm] {
    width: 160px;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cs-backcover-preview img[b-k3zocfrkwm] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cs-backcover-empty[b-k3zocfrkwm] {
    text-align: center;
    color: #94a3b8;
}

    .cs-backcover-empty span[b-k3zocfrkwm] {
        font-size: 2rem;
    }

    .cs-backcover-empty small[b-k3zocfrkwm] {
        display: block;
        margin-top: .25rem;
    }

.cs-backcover-actions[b-k3zocfrkwm] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ─── Spine table ────────────────────────────────────────────── */
.cs-spine-table[b-k3zocfrkwm] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    font-size: .85rem;
}

.cs-spine-row[b-k3zocfrkwm] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    padding: .6rem .9rem;
    border-bottom: 1px solid #f1f5f9;
}

    .cs-spine-row:last-child[b-k3zocfrkwm] {
        border-bottom: 0;
    }

.cs-spine-head[b-k3zocfrkwm] {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .03em;
}

/* ─── Hints ──────────────────────────────────────────────────── */
.cs-section-hints[b-k3zocfrkwm] {
    background: #fafbff;
}

.cs-hints[b-k3zocfrkwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
}

.cs-hint[b-k3zocfrkwm] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;
    border-radius: 8px;
    padding: .75rem .9rem;
}

.cs-hint-peecho[b-k3zocfrkwm] {
    border-left-color: #22c55e;
}

.cs-hint-gelato[b-k3zocfrkwm] {
    border-left-color: #f97316;
}

.cs-hint-lulu[b-k3zocfrkwm] {
    border-left-color: #6366f1;
}

.cs-hint-header[b-k3zocfrkwm] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    font-size: .9rem;
}

.cs-hint ul[b-k3zocfrkwm] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .82rem;
    color: #475569;
    line-height: 1.45;
}

    .cs-hint ul li[b-k3zocfrkwm] {
        margin-bottom: .2rem;
    }

/* ─── Buttons ────────────────────────────────────────────────── */
.cs-btn[b-k3zocfrkwm] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    background: #fff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: .9rem;
    cursor: pointer;
    font-weight: 500;
    transition: background .1s, border-color .1s;
}

    .cs-btn:hover:not(:disabled)[b-k3zocfrkwm] {
        background: #f1f5f9;
    }

    .cs-btn.primary[b-k3zocfrkwm] {
        background: #6366f1;
        color: #fff;
        border-color: #6366f1;
    }

        .cs-btn.primary:hover:not(:disabled)[b-k3zocfrkwm] {
            background: #4f46e5;
        }

    .cs-btn.danger[b-k3zocfrkwm] {
        color: #b91c1c;
        border-color: #fecaca;
    }

        .cs-btn.danger:hover:not(:disabled)[b-k3zocfrkwm] {
            background: #fef2f2;
        }

    .cs-btn:disabled[b-k3zocfrkwm] {
        opacity: .6;
        cursor: not-allowed;
    }

.upload-label[b-k3zocfrkwm] {
    cursor: pointer;
}

/* ─── Footer + toast ─────────────────────────────────────────── */
.cs-modal-footer[b-k3zocfrkwm] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #fafbff;
}

.cs-toast[b-k3zocfrkwm] {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
    animation: cs-in-b-k3zocfrkwm .15s ease-out;
}

    .cs-toast.error[b-k3zocfrkwm] {
        background: #b91c1c;
    }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
    .cs-grid-2[b-k3zocfrkwm] {
        grid-template-columns: 1fr;
    }

    .cs-backcover[b-k3zocfrkwm] {
        grid-template-columns: 1fr;
    }

    .cs-spine-row[b-k3zocfrkwm] {
        grid-template-columns: 1fr 1fr;
    }

        .cs-spine-row span:nth-child(n+3)[b-k3zocfrkwm] {
            font-size: .75rem;
            color: #64748b;
        }
}

/* Upload label disabled state */
.upload-label.disabled[b-k3zocfrkwm] {
    pointer-events: none;
    opacity: .6;
    cursor: not-allowed;
}

/* Responsive spine visual */
.cs-spine-visual svg[b-k3zocfrkwm] {
    max-width: 100%;
    height: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-backdrop[b-k3zocfrkwm] {
    background: rgba(0, 0, 0, .65);
}

html.dark-mode .cs-modal[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Header */
html.dark-mode .cs-modal-header[b-k3zocfrkwm] {
    background: linear-gradient(180deg, var(--bg-tertiary, #334155), var(--bg-secondary, #1e293b));
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .cs-modal-header h2[b-k3zocfrkwm] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .cs-subtitle[b-k3zocfrkwm] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modal-close[b-k3zocfrkwm] {
    color: var(--text-tertiary, #94a3b8);
}

    html.dark-mode .modal-close:hover[b-k3zocfrkwm] {
        background: var(--bg-hover, #475569);
        color: var(--text-primary, #f1f5f9);
    }

/* Loading + empty */
html.dark-mode .cs-loading[b-k3zocfrkwm],
html.dark-mode .cs-empty[b-k3zocfrkwm] {
    color: var(--text-tertiary, #94a3b8);
}

/* Provider chips */
html.dark-mode .cs-provider-chip[b-k3zocfrkwm] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .cs-chip-badge[b-k3zocfrkwm] {
    background: rgba(251, 191, 36, .15);
    color: #fbbf24;
}

/* Validation banners */
html.dark-mode .cs-validation-error[b-k3zocfrkwm] {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .35);
    color: #fca5a5;
}

html.dark-mode .cs-validation-warn[b-k3zocfrkwm] {
    background: rgba(251, 191, 36, .12);
    border-color: rgba(251, 191, 36, .35);
    color: #fcd34d;
}

/* Sections */
html.dark-mode .cs-section[b-k3zocfrkwm] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .cs-section-hints[b-k3zocfrkwm] {
    background: rgba(99, 102, 241, .08);
}

html.dark-mode .cs-section-header h3[b-k3zocfrkwm] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .cs-section-header p[b-k3zocfrkwm] {
    color: var(--text-tertiary, #94a3b8);
}

/* Fields */
html.dark-mode .cs-field[b-k3zocfrkwm] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .cs-field input[type="text"][b-k3zocfrkwm],
html.dark-mode .cs-field select[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

    html.dark-mode .cs-field input[type="text"]:focus[b-k3zocfrkwm],
    html.dark-mode .cs-field select:focus[b-k3zocfrkwm] {
        border-color: var(--border-focus, #60a5fa);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

html.dark-mode .cs-field select option[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .cs-field input[type="color"][b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .cs-note[b-k3zocfrkwm] {
    color: var(--text-tertiary, #94a3b8);
}

/* Cover-mode radios */
html.dark-mode .cs-radio[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

    html.dark-mode .cs-radio:hover[b-k3zocfrkwm] {
        background: var(--bg-hover, #475569);
    }

    html.dark-mode .cs-radio span b[b-k3zocfrkwm] {
        color: var(--text-primary, #f1f5f9);
    }

    html.dark-mode .cs-radio span small[b-k3zocfrkwm] {
        color: var(--text-tertiary, #94a3b8);
    }

/* Back-cover upload */
html.dark-mode .cs-backcover[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .cs-backcover-preview[b-k3zocfrkwm] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .cs-backcover-empty[b-k3zocfrkwm] {
    color: var(--text-muted, #64748b);
}

/* Spine table */
html.dark-mode .cs-spine-table[b-k3zocfrkwm] {
    border-color: var(--border-primary, #334155);
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .cs-spine-row[b-k3zocfrkwm] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .cs-spine-head[b-k3zocfrkwm] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

/* Spine visual */
html.dark-mode .cs-spine-visual[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

    html.dark-mode .cs-spine-visual svg[b-k3zocfrkwm] {
        background: var(--bg-tertiary, #334155);
        border-color: var(--border-primary, #334155);
    }

html.dark-mode .cs-spine-visual-legend[b-k3zocfrkwm] {
    color: var(--text-secondary, #cbd5e1);
}

/* Provider hints */
html.dark-mode .cs-hint[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .cs-hint ul[b-k3zocfrkwm] {
    color: var(--text-secondary, #cbd5e1);
}

/* Buttons */
html.dark-mode .cs-btn[b-k3zocfrkwm] {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
    border-color: var(--border-secondary, #475569);
}

    html.dark-mode .cs-btn:hover:not(:disabled)[b-k3zocfrkwm] {
        background: var(--bg-hover, #475569);
    }

    html.dark-mode .cs-btn.primary[b-k3zocfrkwm] {
        background: #6366f1;
        color: #fff;
        border-color: #6366f1;
    }

        html.dark-mode .cs-btn.primary:hover:not(:disabled)[b-k3zocfrkwm] {
            background: #4f46e5;
        }

    html.dark-mode .cs-btn.danger[b-k3zocfrkwm] {
        color: #fca5a5;
        border-color: rgba(248, 113, 113, .4);
    }

        html.dark-mode .cs-btn.danger:hover:not(:disabled)[b-k3zocfrkwm] {
            background: rgba(248, 113, 113, .12);
        }

/* Footer */
html.dark-mode .cs-modal-footer[b-k3zocfrkwm] {
    background: var(--bg-tertiary, #334155);
    border-top-color: var(--border-primary, #334155);
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── User type chips (admin / test / user) ─────────────────────── */
.user-type-chips[b-8aqjyn4zlu] {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.user-chip[b-8aqjyn4zlu] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.user-chip.admin[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: #fcd34d;
}

.user-chip.test[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
    border-color: #c4b5fd;
}

.user-chip.user[b-8aqjyn4zlu] {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

/* ── Alert Banner ─────────────────────────────────────────────────────────── */
.alert-banner[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 3rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-banner.testimonial-alert[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-bottom: 1px solid #fde68a;
}

.alert-banner.testimonial-alert:hover[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.alert-banner.warning-alert[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-bottom: 1px solid #fecaca;
}

.alert-banner.warning-alert:hover[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.alert-banner.warning-alert .alert-text[b-8aqjyn4zlu] {
    color: #991b1b;
}

.alert-banner.warning-alert .alert-text code[b-8aqjyn4zlu] {
    background: rgba(153, 27, 27, 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
}

.alert-banner.warning-alert .alert-action[b-8aqjyn4zlu] {
    color: #dc2626;
}

.alert-banner .alert-icon[b-8aqjyn4zlu] {
    font-size: 1.5rem;
}

.alert-banner .alert-text[b-8aqjyn4zlu] {
    flex: 1;
    color: #92400e;
    font-size: 0.95rem;
}

.alert-banner .alert-action[b-8aqjyn4zlu] {
    color: #d97706;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Button Badge ─────────────────────────────────────────────────────────── */
.action-btn.has-badge[b-8aqjyn4zlu] {
    position: relative;
}

.action-btn .btn-badge[b-8aqjyn4zlu] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    animation: pulse-b-8aqjyn4zlu 2s ease-in-out infinite;
}

@keyframes pulse-b-8aqjyn4zlu {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ── Dashboard Header ─────────────────────────────────────────────────────── */
.dashboard-header[b-8aqjyn4zlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    position: relative;
    z-index: 250;
}

.dashboard-header .header-left[b-8aqjyn4zlu] {
    gap: 0.15rem;
}

.dashboard-header .page-title[b-8aqjyn4zlu] {
    letter-spacing: -0.025em;
}

/* ── Primary Action Split Button ─────────────────────────────────────────── */
.action-split[b-8aqjyn4zlu] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    isolation: isolate;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #1e293b;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    z-index: 260;
}

.action-split-primary[b-8aqjyn4zlu],
.action-split-toggle[b-8aqjyn4zlu],
.action-menu-item[b-8aqjyn4zlu] {
    font-family: inherit;
}

.action-split-primary[b-8aqjyn4zlu],
.action-split-toggle[b-8aqjyn4zlu] {
    border: 0;
    color: white;
    background: #1e293b;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.action-split-primary[b-8aqjyn4zlu] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.55rem 1.05rem 0.55rem 1rem;
    border-radius: 14px 0 0 14px;
}

.action-split-primary:hover[b-8aqjyn4zlu],
.action-split-toggle:hover[b-8aqjyn4zlu] {
    background: #334155;
}

.action-split-primary:active[b-8aqjyn4zlu],
.action-split-toggle:active[b-8aqjyn4zlu] {
    transform: translateY(1px);
}

.action-split-icon[b-8aqjyn4zlu] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.14);
}

.action-split-copy[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.action-split-label[b-8aqjyn4zlu] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.action-split-hint[b-8aqjyn4zlu] {
    margin-top: 0.16rem;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 500;
}

.action-split-toggle[b-8aqjyn4zlu] {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 48px;
    border-left: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0 14px 14px 0;
}

.action-split-chevron[b-8aqjyn4zlu] {
    display: block;
    color: #cbd5e1;
    transition: transform 0.2s ease, color 0.18s ease;
}

.action-split-toggle:hover .action-split-chevron[b-8aqjyn4zlu] {
    color: #ffffff;
}

.action-split-toggle[aria-expanded="true"] .action-split-chevron[b-8aqjyn4zlu] {
    transform: rotate(180deg);
    color: #ffffff;
}

.action-menu[b-8aqjyn4zlu] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 1000;
    width: min(330px, calc(100vw - 2rem));
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.action-menu[b-8aqjyn4zlu]::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid rgba(226, 232, 240, 0.9);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    transform: rotate(45deg);
}

.action-menu-item[b-8aqjyn4zlu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.72rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.action-menu-item:hover:not(:disabled)[b-8aqjyn4zlu],
.action-menu-item:focus-visible:not(:disabled)[b-8aqjyn4zlu] {
    background: #f8fafc;
    border-color: #e2e8f0;
    outline: none;
    transform: translateX(2px);
}

.action-menu-item:disabled[b-8aqjyn4zlu] {
    cursor: not-allowed;
    opacity: 0.58;
}

.action-menu-icon[b-8aqjyn4zlu] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #f1f5f9;
    color: #334155;
}

.action-menu-title[b-8aqjyn4zlu],
.action-menu-description[b-8aqjyn4zlu] {
    display: block;
}

.action-menu-title[b-8aqjyn4zlu] {
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 700;
}

.action-menu-description[b-8aqjyn4zlu] {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.3;
}

.action-menu-item.danger[b-8aqjyn4zlu] {
    margin-top: 0.25rem;
    background: #fff7f7;
    border-color: #fecaca;
}

.action-menu-item.danger .action-menu-icon[b-8aqjyn4zlu] {
    background: #fee2e2;
    color: #b91c1c;
}

.action-menu-item.danger .action-menu-title[b-8aqjyn4zlu] {
    color: #b91c1c;
}

.action-menu-item.danger .action-menu-description[b-8aqjyn4zlu] {
    color: #991b1b;
}

/* ── Navigation Groups ────────────────────────────────────────────────────── */
.nav-groups[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.25rem 3rem;
    background: #f8fafc;
}

.nav-group[b-8aqjyn4zlu] {
    background: white;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.nav-group:hover[b-8aqjyn4zlu] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.nav-group-title[b-8aqjyn4zlu] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.nav-group-links[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-link[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
}

.nav-link:hover[b-8aqjyn4zlu] {
    background: #f1f5f9;
    color: #1e293b;
}

.nav-link:active[b-8aqjyn4zlu] {
    background: #e2e8f0;
}

.nav-link.has-badge[b-8aqjyn4zlu] {
    position: relative;
}

.nav-badge[b-8aqjyn4zlu] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
    animation: pulse-b-8aqjyn4zlu 2s ease-in-out infinite;
}

/* ── Stats Grid (Queue Status Cards) ──────────────────────────────────────── */
.stats-grid[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem 3rem;
    background: #f8fafc;
}

.stats-grid .stat-card[b-8aqjyn4zlu] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    border-left: 4px solid #e2e8f0;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    position: relative;
}

.stats-grid .stat-card:hover[b-8aqjyn4zlu] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.stats-grid .stat-card.clickable[b-8aqjyn4zlu] {
    cursor: pointer;
}

.stats-grid .stat-card.expanded[b-8aqjyn4zlu] {
    grid-column: 1 / -1;
}

.stats-grid .stat-card.charry[b-8aqjyn4zlu] { border-left-color: #8b5cf6; }
.stats-grid .stat-card.booky[b-8aqjyn4zlu] { border-left-color: #3b82f6; }
.stats-grid .stat-card.maily[b-8aqjyn4zlu] { border-left-color: #10b981; }
.stats-grid .stat-card.peechy[b-8aqjyn4zlu] { border-left-color: #f59e0b; }
.stats-grid .stat-card.cleany[b-8aqjyn4zlu] { border-left-color: #14b8a6; }

.stats-grid .stat-card.status-error[b-8aqjyn4zlu] {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 60%);
}

.stats-grid .stat-card.status-busy[b-8aqjyn4zlu] {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
}

/* ── Inner Layout (2-col when expanded) ──── */
.stat-card-inner[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
}

.stat-card.expanded .stat-card-inner[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0 1.5rem;
    align-items: start;
}

/* ── Card Summary (left column when expanded) */
.stat-card-summary[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
}

/* ── Card Top Row ──────────────────────────── */
.stat-card-top[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-indicator[b-8aqjyn4zlu] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.stat-indicator.status-ok[b-8aqjyn4zlu] { background: #f0fdf4; }
.stat-indicator.status-error[b-8aqjyn4zlu] { background: #fef2f2; }
.stat-indicator.status-busy[b-8aqjyn4zlu] { background: #fffbeb; }

.stats-grid .stat-icon[b-8aqjyn4zlu] {
    font-size: 1.2rem;
    line-height: 1;
}

.stat-info[b-8aqjyn4zlu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.stat-title[b-8aqjyn4zlu] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.2;
}

.stat-subtitle[b-8aqjyn4zlu] {
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

/* ── Status Row (badge + expand hint) ──────── */
.stat-status-row[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0;
}

.stat-badge[b-8aqjyn4zlu] {
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stat-badge.badge-ok[b-8aqjyn4zlu] {
    background: #dcfce7;
    color: #166534;
}

.stat-badge.badge-error[b-8aqjyn4zlu] {
    background: #fee2e2;
    color: #991b1b;
    animation: badgePulse-b-8aqjyn4zlu 2s ease-in-out infinite;
}

@keyframes badgePulse-b-8aqjyn4zlu {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.stat-expand-hint[b-8aqjyn4zlu] {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 500;
    transition: color 0.2s ease;
    margin-left: auto;
}

.stat-card.clickable:hover .stat-expand-hint[b-8aqjyn4zlu] {
    color: #64748b;
}

/* ── Metrics Row ──────────────────────────── */
.stat-metrics[b-8aqjyn4zlu] {
    display: flex;
    gap: 0.25rem;
}

.stat-metric[b-8aqjyn4zlu] {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.25rem;
    border-radius: 8px;
    background: #f8fafc;
}

.stat-metric-value[b-8aqjyn4zlu] {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-metric-label[b-8aqjyn4zlu] {
    display: block;
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 0.1rem;
}

/* ── Progress Bar ──────────────────────────── */
.stat-progress[b-8aqjyn4zlu] {
    height: 3px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.stat-progress-bar[b-8aqjyn4zlu] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    min-width: 2px;
}

.stat-progress-bar.charry[b-8aqjyn4zlu] { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-progress-bar.booky[b-8aqjyn4zlu] { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stat-progress-bar.maily[b-8aqjyn4zlu] { background: linear-gradient(90deg, #10b981, #34d399); }

/* ── Error Detail Panel ──────────────────── */
.stat-error-panel[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
    animation: panelSlideIn-b-8aqjyn4zlu 0.25s ease-out;
    border-top: 1px solid #fecaca;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.stat-card.expanded .stat-error-panel[b-8aqjyn4zlu] {
    border-top: none;
    border-left: 1px solid #fecaca;
    padding-top: 0;
    margin-top: 0;
    padding-left: 1.5rem;
}

@keyframes panelSlideIn-b-8aqjyn4zlu {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-error-header[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stat-error-title[b-8aqjyn4zlu] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #991b1b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-error-badge[b-8aqjyn4zlu] {
    font-size: 0.6rem;
    font-weight: 700;
    background: #fee2e2;
    color: #991b1b;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    line-height: 1.4;
}

.stat-error-list[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 200px;
    overflow-y: auto;
}

.stat-error-item[b-8aqjyn4zlu] {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.08);
}

.stat-error-item-top[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-error-link[b-8aqjyn4zlu] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1e293b;
    text-decoration: underline;
    text-decoration-color: rgba(30, 41, 59, 0.3);
    text-underline-offset: 2px;
    cursor: pointer;
}

.stat-error-link:hover[b-8aqjyn4zlu] {
    color: #3b82f6;
    text-decoration-color: #3b82f6;
}

.stat-error-count[b-8aqjyn4zlu] {
    font-size: 0.7rem;
    color: #ef4444;
    font-weight: 700;
}

.stat-error-msg[b-8aqjyn4zlu] {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.4;
    margin-top: 0.2rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    border-left: 2px solid #fecaca;
    word-break: break-word;
}

/* ????????????????????????????????????????????????????????????????????????????
   ALERTS SECTION
   ???????????????????????????????????????????????????????????????????????????? */
.alerts-section[b-8aqjyn4zlu] {
    margin: 0 3rem 1rem;
    background: white;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #fecaca;
}

.alerts-header[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.alerts-header h2[b-8aqjyn4zlu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #991b1b;
    flex: 1;
}

.alerts-icon[b-8aqjyn4zlu] {
    font-size: 1.25rem;
}

.refresh-btn[b-8aqjyn4zlu] {
    padding: 0.35rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.refresh-btn:hover:not(:disabled)[b-8aqjyn4zlu] {
    background: #f8fafc;
}

.refresh-btn:disabled[b-8aqjyn4zlu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.alerts-grid[b-8aqjyn4zlu] {
    display: grid;
    gap: 0.75rem;
}

.alert-item[b-8aqjyn4zlu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #fef2f2;
}

.alert-item.warning[b-8aqjyn4zlu] {
    background: #fffbeb;
}

.alert-item.info[b-8aqjyn4zlu] {
    background: #eff6ff;
}

.alert-icon[b-8aqjyn4zlu] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-content strong[b-8aqjyn4zlu] {
    display: block;
    font-size: 0.875rem;
    color: #1e293b;
}

.alert-dismiss[b-8aqjyn4zlu] {
    flex-shrink: 0;
    margin-left: auto;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}

.alert-dismiss:hover[b-8aqjyn4zlu] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.alert-content p[b-8aqjyn4zlu] {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* ????????????????????????????????????????????????????????????????????????????
   FINANCIAL SECTION
   ???????????????????????????????????????????????????????????????????????????? */
.finance-section[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0 3rem 1.5rem;
    background: #f8fafc;
}

.finance-card[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.finance-card.highlight[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.finance-icon[b-8aqjyn4zlu] {
    font-size: 1.5rem;
}

.finance-value[b-8aqjyn4zlu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.finance-label[b-8aqjyn4zlu] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ?? Main Dashboard Grid ??????????????????????????????????????????????????????? */
.dashboard-grid[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 0 3rem 1.5rem;
    padding-bottom: 4rem;
}

/* ????????????????????????????????????????????????????????????????????????????
   SEARCH & FILTERS
   ???????????????????????????????????????????????????????????????????????????? */
.input.search[b-8aqjyn4zlu] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

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

.filter-row[b-8aqjyn4zlu] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.filter-row .input.search[b-8aqjyn4zlu] {
    flex: 1;
    margin-bottom: 0;
}

.checkbox-filter[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
}

.checkbox-filter input[type="checkbox"][b-8aqjyn4zlu] {
    accent-color: #3b82f6;
}

/* ????????????????????????????????????????????????????????????????????????????
   DATA TABLE
   ???????????????????????????????????????????????????????????????????????????? */
.data-table[b-8aqjyn4zlu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th[b-8aqjyn4zlu] {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table th.sortable[b-8aqjyn4zlu] {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.data-table th.sortable:hover[b-8aqjyn4zlu] {
    color: #3b82f6;
}

.sort-indicator[b-8aqjyn4zlu] {
    margin-left: 0.25rem;
    font-size: 0.65rem;
}

.data-table td[b-8aqjyn4zlu] {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.data-table .center[b-8aqjyn4zlu] {
    text-align: center;
}

.clickable-row[b-8aqjyn4zlu] {
    cursor: pointer;
    transition: background 0.15s;
}

.clickable-row:hover[b-8aqjyn4zlu] {
    background: #f8fafc;
}

.clickable-row.has-important[b-8aqjyn4zlu] {
    background: #fffbeb;
}

.clickable-row.has-important:hover[b-8aqjyn4zlu] {
    background: #fef3c7;
}

/* Order ID with note indicator */
.order-id[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.note-indicator[b-8aqjyn4zlu] {
    font-size: 0.75rem;
}

.note-indicator.important[b-8aqjyn4zlu] {
    animation: pulse-b-8aqjyn4zlu 2s infinite;
}

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

/* Status badges */
.payment-badge[b-8aqjyn4zlu], .delivery-badge[b-8aqjyn4zlu], .ack-badge[b-8aqjyn4zlu] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.payment-badge.paid[b-8aqjyn4zlu] { background: #dcfce7; color: #166534; }
.payment-badge.pending[b-8aqjyn4zlu] { background: #fef3c7; color: #92400e; }
.payment-badge.failed[b-8aqjyn4zlu] { background: #fee2e2; color: #991b1b; }
.payment-badge.cancelled[b-8aqjyn4zlu] { background: #f1f5f9; color: #64748b; }

.delivery-badge.delivered[b-8aqjyn4zlu] { background: #dcfce7; color: #166534; }
.delivery-badge.shipped[b-8aqjyn4zlu] { background: #dbeafe; color: #1e40af; }
.delivery-badge.processing[b-8aqjyn4zlu] { background: #fef3c7; color: #92400e; }
.delivery-badge.pending[b-8aqjyn4zlu] { background: #f1f5f9; color: #64748b; }
.delivery-badge.cancelled[b-8aqjyn4zlu] { background: #fee2e2; color: #991b1b; }

.ack-badge.acked[b-8aqjyn4zlu] { background: #dcfce7; color: #166534; }
.ack-badge.pending[b-8aqjyn4zlu] { background: #f1f5f9; color: #94a3b8; }

/* Width utilities */
.nowrap[b-8aqjyn4zlu] { white-space: nowrap; }
.w-80[b-8aqjyn4zlu] { width: 80px; }
.w-120[b-8aqjyn4zlu] { width: 120px; }

/* ????????????????????????????????????????????????????????????????????????????
   PAGINATION
   ???????????????????????????????????????????????????????????????????????????? */
.pagination[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.pagination-btn[b-8aqjyn4zlu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled)[b-8aqjyn4zlu] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.pagination-btn:disabled[b-8aqjyn4zlu] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-8aqjyn4zlu] {
    font-size: 0.8rem;
    color: #64748b;
    padding: 0 0.5rem;
}

/* ????????????????????????????????????????????????????????????????????????????
   DASHBOARD FOOTER (fixed at bottom)
   ???????????????????????????????????????????????????????????????????????????? */
.dashboard-footer[b-8aqjyn4zlu] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.75rem 3rem;
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.dashboard-footer .last-refresh[b-8aqjyn4zlu] {
    font-size: 0.8rem;
    color: #64748b;
}

.dashboard-footer .refresh-btn[b-8aqjyn4zlu] {
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 0.8rem;
    cursor: pointer;
    color: #475569;
    transition: all 0.2s;
}

.dashboard-footer .refresh-btn:hover[b-8aqjyn4zlu] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

html.admin-footer-collapsed .dashboard-footer[b-8aqjyn4zlu] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
}

/* ════════════════════════════════════════════════════════════════════════════
   KPI SECTION
   ════════════════════════════════════════════════════════════════════════════ */
.kpi-section[b-8aqjyn4zlu] {
    padding: 0 3rem 1.5rem;
}

.kpi-header[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header h2[b-8aqjyn4zlu] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.kpi-grid[b-8aqjyn4zlu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.kpi-card[b-8aqjyn4zlu] {
    display: flex;
    gap: 1rem;
    background: white;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
    border: 1px solid #f1f5f9;
}

.kpi-card:hover[b-8aqjyn4zlu] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.kpi-card-names[b-8aqjyn4zlu] {
    grid-column: span 1;
}

.kpi-card-trend[b-8aqjyn4zlu] {
    grid-column: span 2;
}

.kpi-icon-wrap[b-8aqjyn4zlu] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon-wrap.conversion[b-8aqjyn4zlu] { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.kpi-icon-wrap.aov[b-8aqjyn4zlu]        { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.kpi-icon-wrap.returning[b-8aqjyn4zlu]  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.kpi-icon-wrap.names[b-8aqjyn4zlu]      { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.kpi-icon-wrap.trend[b-8aqjyn4zlu]      { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }

.kpi-icon[b-8aqjyn4zlu] {
    font-size: 1.35rem;
}

.kpi-content[b-8aqjyn4zlu] {
    flex: 1;
    min-width: 0;
}

.kpi-value[b-8aqjyn4zlu] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-unit[b-8aqjyn4zlu] {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 1px;
}

.kpi-label[b-8aqjyn4zlu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.3rem;
}

.kpi-detail[b-8aqjyn4zlu] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.2rem;
}

/* ── Popular Names List ──────────────────────────────────────────────── */
.kpi-names-list[b-8aqjyn4zlu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.kpi-name-row[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.6rem;
    background: #f8fafc;
    border-radius: 8px;
    transition: background 0.15s;
}

.kpi-name-row:hover[b-8aqjyn4zlu] {
    background: #f1f5f9;
}

.kpi-name[b-8aqjyn4zlu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.kpi-name-count[b-8aqjyn4zlu] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #8b5cf6;
    background: #ede9fe;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* ── Trend Chart ─────────────────────────────────────────────────────── */
.kpi-trend-chart[b-8aqjyn4zlu] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 100px;
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

.kpi-trend-bar-wrap[b-8aqjyn4zlu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.kpi-trend-bar[b-8aqjyn4zlu] {
    width: 100%;
    max-width: 48px;
    min-height: 4px;
    background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
    border-radius: 6px 6px 2px 2px;
    transition: height 0.4s ease;
}

.kpi-trend-bar-wrap:hover .kpi-trend-bar[b-8aqjyn4zlu] {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}

.kpi-trend-label[b-8aqjyn4zlu] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 0.35rem;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .nav-groups[b-8aqjyn4zlu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-grid[b-8aqjyn4zlu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-card-trend[b-8aqjyn4zlu] {
        grid-column: span 2;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid[b-8aqjyn4zlu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
.dashboard-header[b-8aqjyn4zlu] {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1rem 1.5rem;
}
    
.header-actions[b-8aqjyn4zlu] {
    justify-content: center;
}

.nav-groups[b-8aqjyn4zlu] {
    grid-template-columns: 1fr;
    padding: 1rem 1.5rem;
}
    
.stats-grid[b-8aqjyn4zlu],
.finance-section[b-8aqjyn4zlu],
.dashboard-grid[b-8aqjyn4zlu] {
    padding: 1rem 1.5rem;
}
    
    .kpi-section[b-8aqjyn4zlu] {
        padding: 0 1.5rem 1.5rem;
    }

    .kpi-grid[b-8aqjyn4zlu] {
        grid-template-columns: 1fr;
    }

    .kpi-card-trend[b-8aqjyn4zlu] {
        grid-column: span 1;
    }
    
    .alerts-section[b-8aqjyn4zlu] {
        margin: 0 1.5rem 1rem;
    }
    
    .service-status-bar[b-8aqjyn4zlu] {
        padding: 0.75rem 1.5rem;
        flex-wrap: wrap;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

/* Alert Banner - Testimonial (amber/gold style) */
html.dark-mode .alert-banner.testimonial-alert[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-bottom-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .alert-banner.testimonial-alert:hover[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
}

html.dark-mode .alert-banner.testimonial-alert .alert-text[b-8aqjyn4zlu] {
    color: #fbbf24;
}

html.dark-mode .alert-banner.testimonial-alert .alert-action[b-8aqjyn4zlu] {
    color: #f59e0b;
}

/* Alert Banner - Warning/Critical (red style for missing templates) */
html.dark-mode .alert-banner.warning-alert[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(185, 28, 28, 0.08) 100%);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 8px;
    margin: 0.5rem 1rem;
}

html.dark-mode .alert-banner.warning-alert:hover[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(185, 28, 28, 0.12) 100%);
    border-color: rgba(248, 113, 113, 0.4);
}

html.dark-mode .alert-banner.warning-alert .alert-text[b-8aqjyn4zlu] {
    color: #fecaca;
}

html.dark-mode .alert-banner.warning-alert .alert-text strong[b-8aqjyn4zlu] {
    color: #fca5a5;
    font-weight: 600;
}

html.dark-mode .alert-banner.warning-alert .alert-text code[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.2);
    color: #fecaca;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

html.dark-mode .alert-banner.warning-alert .alert-action[b-8aqjyn4zlu] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(248, 113, 113, 0.3);
    transition: all 0.2s ease;
    white-space: nowrap;
}

html.dark-mode .alert-banner.warning-alert .alert-action:hover[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.25);
    border-color: rgba(248, 113, 113, 0.5);
}

/* Dashboard Header */
html.dark-mode .dashboard-header[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .action-split[b-8aqjyn4zlu] {
    box-shadow: 0 14px 34px rgba(96, 165, 250, 0.16), 0 0 0 1px rgba(148, 163, 184, 0.12);
}

html.dark-mode .action-split-primary[b-8aqjyn4zlu],
html.dark-mode .action-split-toggle[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

html.dark-mode .action-menu[b-8aqjyn4zlu] {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(71, 85, 105, 0.9);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark-mode .action-menu[b-8aqjyn4zlu]::before {
    border-color: rgba(71, 85, 105, 0.9);
}

html.dark-mode .action-menu-item[b-8aqjyn4zlu] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .action-menu-item:hover:not(:disabled)[b-8aqjyn4zlu],
html.dark-mode .action-menu-item:focus-visible:not(:disabled)[b-8aqjyn4zlu] {
    background: rgba(51, 65, 85, 0.88);
    border-color: rgba(96, 165, 250, 0.22);
}

html.dark-mode .action-menu-icon[b-8aqjyn4zlu] {
    background: rgba(96, 165, 250, 0.14);
}

html.dark-mode .action-menu-title[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .action-menu-description[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .action-menu-item.danger[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.42), rgba(69, 26, 3, 0.26));
    border-color: rgba(248, 113, 113, 0.34);
}

html.dark-mode .action-menu-item.danger:hover:not(:disabled)[b-8aqjyn4zlu],
html.dark-mode .action-menu-item.danger:focus-visible:not(:disabled)[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(153, 27, 27, 0.5), rgba(120, 53, 15, 0.3));
    border-color: rgba(248, 113, 113, 0.56);
}

html.dark-mode .action-menu-item.danger .action-menu-icon[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.18);
}

html.dark-mode .action-menu-item.danger .action-menu-title[b-8aqjyn4zlu] {
    color: #fca5a5;
}

html.dark-mode .action-menu-item.danger .action-menu-description[b-8aqjyn4zlu] {
    color: #fecaca;
}

/* Stats Grid */
html.dark-mode .stats-grid[b-8aqjyn4zlu] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .stats-grid .stat-card[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b) !important;
    box-shadow: none;
    border: 1px solid var(--border-primary, #334155);
}

html.dark-mode .stats-grid .stat-card:hover[b-8aqjyn4zlu] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .stats-grid .stat-card.charry[b-8aqjyn4zlu] { border-left-color: #a78bfa !important; }
html.dark-mode .stats-grid .stat-card.booky[b-8aqjyn4zlu] { border-left-color: #60a5fa !important; }
html.dark-mode .stats-grid .stat-card.maily[b-8aqjyn4zlu] { border-left-color: #34d399 !important; }
html.dark-mode .stats-grid .stat-card.peechy[b-8aqjyn4zlu] { border-left-color: #fbbf24 !important; }
html.dark-mode .stats-grid .stat-card.cleany[b-8aqjyn4zlu] { border-left-color: #2dd4bf !important; }

html.dark-mode .stats-grid .stat-card.status-error[b-8aqjyn4zlu] {
    border-left-color: #f87171 !important;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.12) 0%, var(--bg-secondary, #1e293b) 100%) !important;
}

html.dark-mode .stats-grid .stat-card.status-busy[b-8aqjyn4zlu] {
    border-left-color: #fbbf24 !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, var(--bg-secondary, #1e293b) 100%) !important;
}

html.dark-mode .stat-indicator[b-8aqjyn4zlu] {
    background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .stat-indicator.status-ok[b-8aqjyn4zlu] { background: rgba(74, 222, 128, 0.1) !important; }
html.dark-mode .stat-indicator.status-error[b-8aqjyn4zlu] { background: rgba(248, 113, 113, 0.15) !important; }
html.dark-mode .stat-indicator.status-busy[b-8aqjyn4zlu] { background: rgba(251, 191, 36, 0.15) !important; }

html.dark-mode .stat-title[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .stat-subtitle[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #64748b) !important;
}

html.dark-mode .stat-metric[b-8aqjyn4zlu] {
    background: rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .stat-metric-value[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .stat-metric-label[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .stat-progress[b-8aqjyn4zlu] {
    background: var(--border-primary, #334155) !important;
}

html.dark-mode .stat-expand-hint[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #64748b) !important;
}

html.dark-mode .stat-error-panel[b-8aqjyn4zlu] {
    border-top-color: rgba(248, 113, 113, 0.25) !important;
}

html.dark-mode .stat-card.expanded .stat-error-panel[b-8aqjyn4zlu] {
    border-left-color: rgba(248, 113, 113, 0.25) !important;
    border-top-color: transparent !important;
}

html.dark-mode .stat-error-title[b-8aqjyn4zlu] {
    color: #fca5a5 !important;
}

html.dark-mode .stat-error-badge[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fca5a5 !important;
}

html.dark-mode .stat-error-item[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.15) !important;
}

html.dark-mode .stat-error-link[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
    text-decoration-color: rgba(241, 245, 249, 0.3);
}

html.dark-mode .stat-error-link:hover[b-8aqjyn4zlu] {
    color: #60a5fa !important;
    text-decoration-color: #60a5fa;
}

html.dark-mode .stat-error-count[b-8aqjyn4zlu] {
    color: #f87171 !important;
}

html.dark-mode .stat-error-msg[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-left-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .stat-badge.badge-ok[b-8aqjyn4zlu] {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .stat-badge.badge-error[b-8aqjyn4zlu] {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fca5a5 !important;
}

/* Alerts Section */
html.dark-mode .alerts-section[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.3));
}

html.dark-mode .alerts-header h2[b-8aqjyn4zlu] {
    color: #f87171;
}

html.dark-mode .refresh-btn[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .refresh-btn:hover:not(:disabled)[b-8aqjyn4zlu] {
    background: var(--bg-hover, #475569);
}

/* Alert items - dark mode overrides */
html.dark-mode .alert-item[b-8aqjyn4zlu],
html.dark-mode .alerts-grid .alert-item[b-8aqjyn4zlu] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .alert-item.error[b-8aqjyn4zlu],
html.dark-mode .alerts-grid .alert-item.error[b-8aqjyn4zlu] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .alert-item.warning[b-8aqjyn4zlu],
html.dark-mode .alerts-grid .alert-item.warning[b-8aqjyn4zlu] {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .alert-item.warning .alert-content strong[b-8aqjyn4zlu] {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.warning .alert-content p[b-8aqjyn4zlu] {
    color: #94a3b8 !important;
}

html.dark-mode .alert-item.warning .alert-content p a[b-8aqjyn4zlu] {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.info[b-8aqjyn4zlu],
html.dark-mode .alerts-grid .alert-item.info[b-8aqjyn4zlu] {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .alert-item.info .alert-content strong[b-8aqjyn4zlu] {
    color: #93c5fd !important;
}

html.dark-mode .alert-item.info .alert-content p[b-8aqjyn4zlu] {
    color: #94a3b8 !important;
}

/* Alert content text - CRITICAL: use explicit colors with !important for dark mode readability */
html.dark-mode .alert-content strong[b-8aqjyn4zlu] {
    color: #f1f5f9 !important;
}

html.dark-mode .alert-item.error .alert-content strong[b-8aqjyn4zlu] {
    color: #fca5a5 !important;
}

html.dark-mode .alert-item.error .alert-content p[b-8aqjyn4zlu] {
    color: #94a3b8 !important;
}

html.dark-mode .alert-item.error .alert-content p a[b-8aqjyn4zlu] {
    color: #f87171 !important;
}

html.dark-mode .alert-content p[b-8aqjyn4zlu] {
    color: #94a3b8 !important;
}

/* Finance Section */
html.dark-mode .finance-section[b-8aqjyn4zlu] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .finance-card[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b) !important;
    box-shadow: none;
    border: 1px solid var(--border-primary, #334155);
}

html.dark-mode .finance-card.highlight[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3);
}

html.dark-mode .finance-value[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .finance-label[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* Finance Content wrapper */
html.dark-mode .finance-content[b-8aqjyn4zlu] {
    background: transparent !important;
}

/* Search & Filters */
html.dark-mode .input.search[b-8aqjyn4zlu] {
    background: var(--bg-input, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .input.search:focus[b-8aqjyn4zlu] {
    border-color: var(--accent-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .checkbox-filter[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8);
}

/* Data Table */
html.dark-mode .data-table th[b-8aqjyn4zlu] {
    border-bottom-color: var(--border-primary, #334155) !important;
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .data-table th.sortable:hover[b-8aqjyn4zlu] {
    color: var(--accent-primary, #60a5fa) !important;
}

html.dark-mode .data-table td[b-8aqjyn4zlu] {
    border-bottom-color: var(--border-primary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .clickable-row:hover[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .clickable-row.has-important[b-8aqjyn4zlu] {
    background: rgba(251, 191, 36, 0.1);
}

html.dark-mode .clickable-row.has-important:hover[b-8aqjyn4zlu] {
    background: rgba(251, 191, 36, 0.15);
}

/* Status Badges - Dark Mode */
html.dark-mode .payment-badge.paid[b-8aqjyn4zlu] { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
html.dark-mode .payment-badge.pending[b-8aqjyn4zlu] { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
html.dark-mode .payment-badge.failed[b-8aqjyn4zlu] { background: rgba(248, 113, 113, 0.2); color: #f87171; }
html.dark-mode .payment-badge.cancelled[b-8aqjyn4zlu] { background: var(--bg-tertiary, #334155); color: var(--text-muted, #64748b); }

html.dark-mode .delivery-badge.delivered[b-8aqjyn4zlu] { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
html.dark-mode .delivery-badge.shipped[b-8aqjyn4zlu] { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
html.dark-mode .delivery-badge.processing[b-8aqjyn4zlu] { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
html.dark-mode .delivery-badge.pending[b-8aqjyn4zlu] { background: var(--bg-tertiary, #334155); color: var(--text-muted, #64748b); }
html.dark-mode .delivery-badge.cancelled[b-8aqjyn4zlu] { background: rgba(248, 113, 113, 0.2); color: #f87171; }

html.dark-mode .ack-badge.acked[b-8aqjyn4zlu] { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
html.dark-mode .ack-badge.pending[b-8aqjyn4zlu] { background: var(--bg-tertiary, #334155); color: var(--text-muted, #64748b); }

/* Pagination */
html.dark-mode .pagination[b-8aqjyn4zlu] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .pagination-btn[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .pagination-btn:hover:not(:disabled)[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .pagination-info[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8);
}

/* Dashboard Footer */
html.dark-mode .dashboard-footer[b-8aqjyn4zlu] {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: var(--border-primary, #334155);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .dashboard-footer .last-refresh[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .dashboard-footer .refresh-btn[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .dashboard-footer .refresh-btn:hover[b-8aqjyn4zlu] {
    background: var(--bg-hover, #475569);
}

/* Dashboard Grid - for user/order cards */
html.dark-mode .dashboard-grid[b-8aqjyn4zlu] {
    background: var(--bg-primary, #0f172a) !important;
}

/* Admin Cards (Gebruikers & Orders sections) */
html.dark-mode .dashboard-grid .admin-card[b-8aqjyn4zlu],
html.dark-mode .dashboard-grid .card[b-8aqjyn4zlu],
html.dark-mode .card[b-8aqjyn4zlu],
html.dark-mode section.card[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.3));
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .dashboard-grid .admin-card h2[b-8aqjyn4zlu],
html.dark-mode .dashboard-grid .card-header h2[b-8aqjyn4zlu],
html.dark-mode .card-header h2[b-8aqjyn4zlu],
html.dark-mode .card h2[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .dashboard-grid .count-badge[b-8aqjyn4zlu],
html.dark-mode .count-badge[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Card header styling */
html.dark-mode .card-header[b-8aqjyn4zlu] {
    border-bottom-color: var(--border-primary, #334155) !important;
}

/* Data Table inside cards */
html.dark-mode .card .data-table[b-8aqjyn4zlu],
html.dark-mode section.card .data-table[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b) !important;
}

/* Filter Row */
html.dark-mode .filter-row[b-8aqjyn4zlu] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .filter-row .input.search[b-8aqjyn4zlu] {
    background: var(--bg-tertiary, #334155);
}

/* Order ID */
html.dark-mode .order-id[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9);
}

/* ════════════════════════════════════════════════════════════════════════════
   KPI SECTION - DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */
html.dark-mode .kpi-section[b-8aqjyn4zlu] {
    background: transparent;
}

html.dark-mode .kpi-header h2[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .kpi-card[b-8aqjyn4zlu] {
    background: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
    box-shadow: none;
}

html.dark-mode .kpi-card:hover[b-8aqjyn4zlu] {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

html.dark-mode .kpi-icon-wrap.conversion[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));
}

html.dark-mode .kpi-icon-wrap.aov[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
}

html.dark-mode .kpi-icon-wrap.returning[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
}

html.dark-mode .kpi-icon-wrap.names[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
}

html.dark-mode .kpi-icon-wrap.trend[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(219, 39, 119, 0.1));
}

html.dark-mode .kpi-value[b-8aqjyn4zlu] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .kpi-unit[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .kpi-label[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .kpi-detail[b-8aqjyn4zlu] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .kpi-content[b-8aqjyn4zlu] {
    background: transparent !important;
}

/* Names - dark mode */
html.dark-mode .kpi-name-row[b-8aqjyn4zlu] {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode .kpi-name-row:hover[b-8aqjyn4zlu] {
    background: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .kpi-name[b-8aqjyn4zlu] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .kpi-name-count[b-8aqjyn4zlu] {
    color: var(--text-muted, #64748b) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Trend chart - dark mode */
html.dark-mode .kpi-trend-bar[b-8aqjyn4zlu] {
    background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
}

html.dark-mode .kpi-trend-bar-wrap:hover .kpi-trend-bar[b-8aqjyn4zlu] {
    background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 100%);
}

html.dark-mode .kpi-trend-label[b-8aqjyn4zlu] {
    color: var(--text-muted, #64748b);
}

/* ── SITE VISITORS TODAY BAR ───────────────────────────────────────────── */

.visitors-today-bar[b-8aqjyn4zlu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    color: #475569;
}

.visitors-today-bar:hover[b-8aqjyn4zlu] {
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.12);
    border-color: #86efac;
    transform: translateY(-1px);
}

.visitors-live-dot[b-8aqjyn4zlu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: visitors-pulse 2s infinite;
    flex-shrink: 0;
}

@@keyframes visitors-pulse {
    0%[b-8aqjyn4zlu] { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70%[b-8aqjyn4zlu] { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100%[b-8aqjyn4zlu] { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.visitors-label[b-8aqjyn4zlu] {
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.visitors-stat strong[b-8aqjyn4zlu] {
    font-weight: 800;
    color: #1e293b;
}

.visitors-sep[b-8aqjyn4zlu] {
    color: #d1d5db;
    font-size: 0.7rem;
}

.visitors-goto[b-8aqjyn4zlu] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #667eea;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.visitors-today-bar:hover .visitors-goto[b-8aqjyn4zlu] { opacity: 1; }

html.dark-mode .visitors-today-bar[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #052e16 0%, #0f172a 100%);
    border-color: #14532d;
    color: #94a3b8;
}

html.dark-mode .visitors-today-bar:hover[b-8aqjyn4zlu] {
    border-color: #16a34a;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08);
}

html.dark-mode .visitors-stat strong[b-8aqjyn4zlu] { color: #f1f5f9; }
html.dark-mode .visitors-sep[b-8aqjyn4zlu] { color: #334155; }
html.dark-mode .visitors-goto[b-8aqjyn4zlu] { color: #818cf8; }

.action-btn.danger[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.action-btn.danger:hover:not(:disabled)[b-8aqjyn4zlu] {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
}

.action-btn.danger:disabled[b-8aqjyn4zlu] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* /Components/Pages/Admin/DeadLetterQueue.razor.rz.scp.css */
/* Dead-Letter Queue admin-UI — dark mode + responsive */
.dlq-page[b-xlryx5phae] { padding: 1.5rem; color: var(--text, #e5e7eb); background: var(--bg, #0f172a); min-height: 100vh; }
.dlq-header[b-xlryx5phae] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dlq-header .breadcrumb[b-xlryx5phae] { font-size: .85rem; color: #94a3b8; }
.dlq-header .breadcrumb-link[b-xlryx5phae] { color: #60a5fa; text-decoration: none; }
.dlq-header .breadcrumb-sep[b-xlryx5phae] { margin: 0 .4rem; }
.dlq-header .page-title[b-xlryx5phae] { margin: .25rem 0; font-size: 1.75rem; }
.dlq-header .subtitle[b-xlryx5phae] { color: #94a3b8; font-size: .9rem; }
.header-actions[b-xlryx5phae] { display: flex; align-items: center; gap: .75rem; }
.auto-toggle[b-xlryx5phae] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #cbd5e1; }

.stats-strip[b-xlryx5phae] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-card[b-xlryx5phae] { background: #1e293b; border-radius: 10px; padding: 1rem; border-left: 4px solid #475569; }
.stat-card.maily[b-xlryx5phae] { border-left-color: #60a5fa; }
.stat-card.bookypagerender[b-xlryx5phae] { border-left-color: #f59e0b; }
.stat-card.charrycharacterrun[b-xlryx5phae] { border-left-color: #a78bfa; }
.stat-card.peechyprint[b-xlryx5phae] { border-left-color: #34d399; }
.stat-label[b-xlryx5phae] { font-size: .85rem; color: #94a3b8; }
.stat-count[b-xlryx5phae] { font-size: 2rem; font-weight: 700; line-height: 1; margin: .25rem 0; }
.stat-meta[b-xlryx5phae] { font-size: .75rem; color: #64748b; }

.toolbar[b-xlryx5phae] { background: #1e293b; padding: 1rem; border-radius: 10px; margin-bottom: 1rem; }
.toolbar-row[b-xlryx5phae] { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.toolbar label[b-xlryx5phae] { display: flex; flex-direction: column; font-size: .75rem; color: #94a3b8; gap: .25rem; }
.toolbar label.grow[b-xlryx5phae] { flex: 1; min-width: 200px; }
.toolbar input[b-xlryx5phae], .toolbar select[b-xlryx5phae] {
    background: #0f172a; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: .4rem .6rem; font-size: .9rem;
}

.bulk-bar[b-xlryx5phae] { display: flex; gap: .5rem; align-items: center; background: #312e81; color: #e0e7ff;
    padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.bulk-count[b-xlryx5phae] { font-weight: 600; margin-right: auto; }

.dlq-table-wrap[b-xlryx5phae] { background: #1e293b; border-radius: 10px; overflow: hidden; }
.dlq-table[b-xlryx5phae] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dlq-table th[b-xlryx5phae], .dlq-table td[b-xlryx5phae] { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #334155; }
.dlq-table th[b-xlryx5phae] { background: #0f172a; color: #94a3b8; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.dlq-table tr.selected[b-xlryx5phae] { background: #1e3a8a33; }
.dlq-table td.mono[b-xlryx5phae] { font-family: monospace; }
.dlq-table td.err[b-xlryx5phae] { color: #fca5a5; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlq-table td.job[b-xlryx5phae] { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-badge[b-xlryx5phae] { display: inline-block; padding: .15rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 600; background: #475569; color: #fff; }
.src-badge.maily[b-xlryx5phae] { background: #1d4ed8; }
.src-badge.bookypagerender[b-xlryx5phae] { background: #b45309; }
.src-badge.charrycharacterrun[b-xlryx5phae] { background: #7c3aed; }
.src-badge.peechyprint[b-xlryx5phae] { background: #047857; }
.empty[b-xlryx5phae] { padding: 2rem; text-align: center; color: #94a3b8; }
.pager[b-xlryx5phae] { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: #0f172a; color: #94a3b8; }

.btn-primary[b-xlryx5phae], .btn-action[b-xlryx5phae], .btn-tiny[b-xlryx5phae], .btn-close[b-xlryx5phae], .btn-link[b-xlryx5phae] {
    cursor: pointer; border: 1px solid transparent; border-radius: 6px; font-weight: 600;
}
.btn-primary[b-xlryx5phae] { background: #2563eb; color: #fff; padding: .5rem .9rem; }
.btn-primary:disabled[b-xlryx5phae] { opacity: .5; cursor: not-allowed; }
.btn-action[b-xlryx5phae] { padding: .4rem .75rem; font-size: .85rem; color: #fff; }
.btn-action.replay[b-xlryx5phae] { background: #2563eb; }
.btn-action.seen[b-xlryx5phae] { background: #059669; }
.btn-action.abandon[b-xlryx5phae] { background: #dc2626; }
.btn-action:disabled[b-xlryx5phae] { opacity: .5; cursor: not-allowed; }
.btn-tiny[b-xlryx5phae] { background: #334155; color: #e5e7eb; padding: .25rem .6rem; font-size: .75rem; }
.btn-link[b-xlryx5phae] { background: transparent; color: #93c5fd; border: none; }
.btn-close[b-xlryx5phae] { background: transparent; color: #94a3b8; font-size: 1.1rem; border: none; padding: .2rem .5rem; }

/* ── Modal ─────────────────────────────────────────────── */
.dlq-modal-backdrop[b-xlryx5phae] { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.dlq-modal[b-xlryx5phae] { background: #1e293b; color: #e5e7eb; border-radius: 12px; width: min(720px, 95vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.dlq-modal-header[b-xlryx5phae] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #334155; }
.dlq-modal-body[b-xlryx5phae] { padding: 1rem 1.25rem; overflow-y: auto; }
.dlq-modal-body h3[b-xlryx5phae] { margin: 0 0 .75rem 0; }
.dlq-modal-body .timeline > div[b-xlryx5phae] { margin: .2rem 0; font-size: .9rem; }
.dlq-modal-body .timeline .label[b-xlryx5phae] { color: #94a3b8; margin-right: .4rem; }
.dlq-modal-body h4[b-xlryx5phae] { margin: 1.25rem 0 .5rem 0; font-size: .9rem; color: #cbd5e1; text-transform: uppercase; letter-spacing: .03em; }
.error-block[b-xlryx5phae] { background: #0f172a; color: #fecaca; padding: .75rem; border-radius: 8px; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; }
.audit-list[b-xlryx5phae] { list-style: none; padding: 0; margin: 0; }
.audit-list li[b-xlryx5phae] { padding: .4rem 0; border-bottom: 1px solid #334155; display: flex; gap: .75rem; font-size: .85rem; }
.audit-when[b-xlryx5phae] { color: #94a3b8; font-family: monospace; }
.audit-action[b-xlryx5phae] { font-weight: 600; }
.audit-user[b-xlryx5phae] { color: #cbd5e1; margin-left: auto; }
.muted[b-xlryx5phae] { color: #64748b; font-style: italic; }

.abandon-box[b-xlryx5phae] { margin-top: 1rem; background: #0f172a; padding: .75rem; border-radius: 8px; border: 1px solid #7f1d1d; }
.abandon-box textarea[b-xlryx5phae] { width: 100%; background: #1e293b; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: .4rem; font-family: inherit; }
.abandon-actions[b-xlryx5phae] { display: flex; gap: .5rem; margin-top: .5rem; }

.dlq-modal-footer[b-xlryx5phae] { display: flex; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid #334155; background: #0f172a; }

/* Responsive */
@media (max-width: 900px) {
    .stats-strip[b-xlryx5phae] { grid-template-columns: repeat(2, 1fr); }
    .dlq-table th[b-xlryx5phae], .dlq-table td[b-xlryx5phae] { padding: .4rem .5rem; font-size: .8rem; }
    .dlq-table td.err[b-xlryx5phae], .dlq-table td.job[b-xlryx5phae] { max-width: 10rem; }
}
@media (max-width: 600px) {
    .stats-strip[b-xlryx5phae] { grid-template-columns: 1fr; }
    .toolbar-row[b-xlryx5phae] { flex-direction: column; align-items: stretch; }
    .toolbar label[b-xlryx5phae] { width: 100%; }
}
/* /Components/Pages/Admin/DiscountCodeManagement.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   DISCOUNT CODE MANAGEMENT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.dc-page-header[b-bjnpq6lpa0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.loading-state[b-bjnpq6lpa0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-state .spinner[b-bjnpq6lpa0] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-bjnpq6lpa0 1s linear infinite;
}

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

.empty-state[b-bjnpq6lpa0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: #64748b;
}

.empty-icon[b-bjnpq6lpa0] { font-size: 3rem; }

/* ── Layout ── */
.dc-layout[b-bjnpq6lpa0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--bg-secondary, #f8fafc);
    min-height: calc(100vh - 140px);
}

/* ── Table ── */
.dc-table-container[b-bjnpq6lpa0] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.dc-table[b-bjnpq6lpa0] {
    width: 100%;
    border-collapse: collapse;
}

.dc-table th[b-bjnpq6lpa0] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.dc-table td[b-bjnpq6lpa0] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.dc-table tbody tr:hover[b-bjnpq6lpa0] {
    background: #f8fafc;
}

.dc-table .active-row[b-bjnpq6lpa0] {
    background: #eff6ff;
}

.code-cell code[b-bjnpq6lpa0] {
    background: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Cascadia Code', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.actions-cell[b-bjnpq6lpa0] {
    text-align: right;
    white-space: nowrap;
}

.status-badge[b-bjnpq6lpa0] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-active[b-bjnpq6lpa0] { background: #dcfce7; color: #166534; }
.badge-expired[b-bjnpq6lpa0] { background: #fee2e2; color: #991b1b; }
.badge-scheduled[b-bjnpq6lpa0] { background: #fef3c7; color: #92400e; }

/* ── Editor ── */
.dc-editor[b-bjnpq6lpa0] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    max-width: 600px;
}

.dc-editor h3[b-bjnpq6lpa0] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.dc-field[b-bjnpq6lpa0] {
    margin-bottom: 1rem;
}

.dc-field label[b-bjnpq6lpa0] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.3rem;
}

.dc-field input[b-bjnpq6lpa0],
.dc-field select[b-bjnpq6lpa0] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
}

.dc-field-row[b-bjnpq6lpa0] {
    display: flex;
    gap: 1rem;
}

.dc-field-row .dc-field[b-bjnpq6lpa0] {
    flex: 1;
}

.dc-editor-actions[b-bjnpq6lpa0] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* ── Shared (breadcrumb, buttons, toast, import overlay) ── */
.breadcrumb[b-bjnpq6lpa0] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.breadcrumb-link[b-bjnpq6lpa0] { color: #3b82f6; cursor: pointer; text-decoration: none; }
.breadcrumb-link:hover[b-bjnpq6lpa0] { text-decoration: underline; }
.breadcrumb-sep[b-bjnpq6lpa0] { color: #94a3b8; }
.breadcrumb-current[b-bjnpq6lpa0] { color: #64748b; }
.page-title[b-bjnpq6lpa0] { margin: 0.25rem 0 0; font-size: 1.5rem; }
.header-subtitle[b-bjnpq6lpa0] { font-size: 0.85rem; color: #64748b; }
.header-left[b-bjnpq6lpa0] { display: flex; flex-direction: column; gap: 0.25rem; }
.header-actions[b-bjnpq6lpa0] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.action-btn[b-bjnpq6lpa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}
.action-btn:hover[b-bjnpq6lpa0] { background: #f8fafc; border-color: #94a3b8; }
.action-btn.primary[b-bjnpq6lpa0] { background: #3b82f6; color: white; border-color: #3b82f6; }
.action-btn.primary:hover[b-bjnpq6lpa0] { background: #2563eb; }
.action-btn.danger[b-bjnpq6lpa0] { background: #ef4444; color: white; border-color: #ef4444; }
.action-btn.danger:hover[b-bjnpq6lpa0] { background: #dc2626; }
.action-btn.small[b-bjnpq6lpa0] { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.action-btn:disabled[b-bjnpq6lpa0] { opacity: 0.5; cursor: not-allowed; }

.import-label[b-bjnpq6lpa0] { cursor: pointer; }

.import-overlay[b-bjnpq6lpa0] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}

.import-dialog[b-bjnpq6lpa0] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.import-dialog h3[b-bjnpq6lpa0] { margin: 0 0 0.5rem; }

.import-summary[b-bjnpq6lpa0] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.import-summary li[b-bjnpq6lpa0] {
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.import-actions[b-bjnpq6lpa0] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.toast[b-bjnpq6lpa0] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    z-index: 2000;
    animation: slideUp-b-bjnpq6lpa0 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast.success[b-bjnpq6lpa0] { background: #059669; }
.toast.error[b-bjnpq6lpa0] { background: #dc2626; }

@keyframes slideUp-b-bjnpq6lpa0 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* /Components/Pages/Admin/EmailTemplates.razor.rz.scp.css */
/* ??????????????????????????????????????????????????????????????????????????????
   EmailTemplates.razor.css – PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ?????????????????????????????????????????????????????????????????????????????? */

/* ?? Page Header ?????????????????????????????????????????????????????????????? */
.et-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.et-header .header-actions[b-w84x07d3sq] {
    align-items: center;
}

/* ?? Main Layout ?????????????????????????????????????????????????????????????? */
.et-layout[b-w84x07d3sq] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

/* ?? Sidebar ?????????????????????????????????????????????????????????????????? */
.et-sidebar[b-w84x07d3sq] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.sidebar-header h3[b-w84x07d3sq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-count[b-w84x07d3sq] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 400;
}

.add-btn[b-w84x07d3sq] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #667eea;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.add-btn:hover[b-w84x07d3sq] {
    background: #5a67d8;
    transform: scale(1.05);
}

.template-list[b-w84x07d3sq] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

.template-item[b-w84x07d3sq] {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
}

.template-item:hover[b-w84x07d3sq] {
    background: #f1f5f9;
}

.template-item.active[b-w84x07d3sq] {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    border-color: #667eea40;
}

.template-item.inactive-template[b-w84x07d3sq] {
    opacity: 0.6;
}

.template-name[b-w84x07d3sq] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.template-key[b-w84x07d3sq] {
    font-size: 0.75rem;
    color: #64748b;
    font-family: 'Consolas', 'Monaco', monospace;
}

.template-badge[b-w84x07d3sq] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.5rem;
}

.template-badge.inactive[b-w84x07d3sq] {
    background: #fef2f2;
    color: #dc2626;
}

/* ?? Editor Panel ????????????????????????????????????????????????????????????? */
.et-editor[b-w84x07d3sq] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.editor-title[b-w84x07d3sq] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.editor-actions[b-w84x07d3sq] {
    display: flex;
    gap: 0.5rem;
}

.editor-content[b-w84x07d3sq] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ?? Empty State (override) ??????????????????????????????????????????????????? */
.et-editor .empty-state[b-w84x07d3sq] {
    height: 100%;
}

.et-editor .empty-icon[b-w84x07d3sq] {
    opacity: 0.5;
}

.et-editor .empty-state h2[b-w84x07d3sq] {
    color: #475569;
}

.et-editor .empty-state p[b-w84x07d3sq] {
    font-size: 0.9rem;
}

/* ?? Form Fields ?????????????????????????????????????????????????????????????? */
.form-grid[b-w84x07d3sq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-grid.three-cols[b-w84x07d3sq] {
    grid-template-columns: 1fr 1fr auto;
}

.form-group[b-w84x07d3sq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group.full-width[b-w84x07d3sq] {
    grid-column: 1 / -1;
}

.form-group label[b-w84x07d3sq] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
}

.form-group input[b-w84x07d3sq],
.form-group textarea[b-w84x07d3sq],
.form-group select[b-w84x07d3sq] {
    padding: 0.65rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: white;
}

.form-group input:focus[b-w84x07d3sq],
.form-group textarea:focus[b-w84x07d3sq],
.form-group select:focus[b-w84x07d3sq] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ?? Toggle Switch ???????????????????????????????????????????????????????????? */
.toggle-group[b-w84x07d3sq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
}

.toggle[b-w84x07d3sq] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle input[b-w84x07d3sq] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-w84x07d3sq] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider[b-w84x07d3sq]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider[b-w84x07d3sq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle input:checked + .toggle-slider[b-w84x07d3sq]:before {
    transform: translateX(22px);
}

.toggle-label[b-w84x07d3sq] {
    font-size: 0.9rem;
    color: #475569;
}

/* ?? Split Editor ????????????????????????????????????????????????????????????? */
.editor-split[b-w84x07d3sq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 300px;
}

.split-panel[b-w84x07d3sq] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.panel-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.panel-title[b-w84x07d3sq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.panel-hint[b-w84x07d3sq] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: 'Consolas', 'Monaco', monospace;
}

.code-editor[b-w84x07d3sq] {
    flex: 1;
    width: 100%;
    border: none;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: none;
    background: #1e293b;
    color: #e2e8f0;
}

.code-editor:focus[b-w84x07d3sq] {
    outline: none;
}

.preview-frame[b-w84x07d3sq] {
    flex: 1;
    background: white;
}

.preview-frame iframe[b-w84x07d3sq] {
    width: 100%;
    height: 100%;
    border: none;
}

.refresh-btn[b-w84x07d3sq] {
    padding: 0.35rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #475569;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.refresh-btn:hover[b-w84x07d3sq] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* 📋 Variables Panel ════════════════════════════════════════════════════════ */
.variables-panel[b-w84x07d3sq] {
    margin-top: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.variables-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.variables-header:hover[b-w84x07d3sq] {
    background: #f1f5f9;
}

.variables-title[b-w84x07d3sq] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.variables-toggle[b-w84x07d3sq] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.variables-grid[b-w84x07d3sq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid #e2e8f0;
    max-height: 200px;
    overflow-y: auto;
}

.variable-item[b-w84x07d3sq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
}

.variable-name[b-w84x07d3sq] {
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', monospace;
    font-size: 0.72rem;
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.variable-desc[b-w84x07d3sq] {
    color: #64748b;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🎯 Footer Actions ════════════════════════════════════════════════════════ */
.editor-footer[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.footer-left[b-w84x07d3sq],
.footer-right[b-w84x07d3sq] {
    display: flex;
    gap: 0.75rem;
}

.delete-btn[b-w84x07d3sq] {
    padding: 0.6rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-btn:hover[b-w84x07d3sq] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.save-btn[b-w84x07d3sq] {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover:not(:disabled)[b-w84x07d3sq] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.save-btn:disabled[b-w84x07d3sq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cancel-btn[b-w84x07d3sq] {
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn:hover[b-w84x07d3sq] {
    background: #f1f5f9;
}

/* ?? Toast Notifications ?????????????????????????????????????????????????????? */
.toast[b-w84x07d3sq] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    animation: slideInToast-b-w84x07d3sq 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.success[b-w84x07d3sq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast.error[b-w84x07d3sq] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

@keyframes slideInToast-b-w84x07d3sq {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ?? Loading State ???????????????????????????????????????????????????????????? */
.loading-state[b-w84x07d3sq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 1rem;
    color: #64748b;
}

.spinner[b-w84x07d3sq] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-w84x07d3sq 0.8s linear infinite;
}

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

/* ?? Responsive ??????????????????????????????????????????????????????????????? */
@media (max-width: 1200px) {
    .et-layout[b-w84x07d3sq] {
        grid-template-columns: 260px 1fr;
    }

    .editor-split[b-w84x07d3sq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .et-layout[b-w84x07d3sq] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .et-sidebar[b-w84x07d3sq] {
        max-height: 300px;
    }

    .form-grid[b-w84x07d3sq] {
        grid-template-columns: 1fr;
    }

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

/* 🖼️ Images Panel ═══════════════════════════════════════════════════════ */
.images-panel[b-w84x07d3sq] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.images-header[b-w84x07d3sq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.images-header:hover[b-w84x07d3sq] {
    background: #f1f5f9;
}

.images-title[b-w84x07d3sq] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.images-toggle[b-w84x07d3sq] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.images-content[b-w84x07d3sq] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.images-hint[b-w84x07d3sq] {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.images-hint code[b-w84x07d3sq] {
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', monospace;
    font-size: 0.72rem;
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Upload form */
.image-upload-form[b-w84x07d3sq] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.image-upload-form .form-group[b-w84x07d3sq] {
    flex: 1;
    min-width: 0;
}

.file-upload-label[b-w84x07d3sq] {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.875rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-upload-label:hover[b-w84x07d3sq] {
    border-color: #667eea;
    color: #667eea;
    background: #f0f0ff;
}

.upload-img-btn[b-w84x07d3sq] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Image list */
.image-list[b-w84x07d3sq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-item[b-w84x07d3sq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.15s;
}

.image-item:hover[b-w84x07d3sq] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.image-preview[b-w84x07d3sq] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.image-info[b-w84x07d3sq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.image-key-badge[b-w84x07d3sq] {
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', monospace;
    font-size: 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.image-usage[b-w84x07d3sq] {
    font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', monospace;
    font-size: 0.68rem;
    color: #94a3b8;
}

.image-filename[b-w84x07d3sq] {
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-delete-btn[b-w84x07d3sq] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.image-delete-btn:hover[b-w84x07d3sq] {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .et-header[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .et-layout[b-w84x07d3sq] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .et-sidebar[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html.dark-mode .sidebar-header[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .sidebar-header h3[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .template-count[b-w84x07d3sq] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .template-item:hover[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .template-item.active[b-w84x07d3sq] {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

html.dark-mode .template-name[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .template-key[b-w84x07d3sq] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .template-type[b-w84x07d3sq] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .et-editor[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html.dark-mode .editor-header[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .editor-header h2[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .editor-title[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .template-badge.inactive[b-w84x07d3sq] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

html.dark-mode .form-group label[b-w84x07d3sq] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .form-group input[b-w84x07d3sq],
html.dark-mode .form-group select[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .split-panel[b-w84x07d3sq] {
    border-color: var(--border-primary, #334155);
}

html.dark-mode .panel-header[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .panel-title[b-w84x07d3sq] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .panel-hint[b-w84x07d3sq] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .preview-frame[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .refresh-btn[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .refresh-btn:hover[b-w84x07d3sq] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .editor-footer[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b) !important;
    border-top-color: var(--border-primary, #334155) !important;
}

html.dark-mode .delete-btn[b-w84x07d3sq] {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

html.dark-mode .delete-btn:hover[b-w84x07d3sq] {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.6) !important;
}

html.dark-mode .cancel-btn[b-w84x07d3sq] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .cancel-btn:hover[b-w84x07d3sq] {
    background: var(--bg-hover, #475569) !important;
}

/* Empty state within editor - CRITICAL */
html.dark-mode .et-editor .empty-state[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .et-editor .empty-state h2[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .empty-state h3[b-w84x07d3sq] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .empty-state p[b-w84x07d3sq] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .loading-state[b-w84x07d3sq] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .spinner[b-w84x07d3sq] {
    border-color: var(--border-primary, #334155);
    border-top-color: #667eea;
}

/* Toggle switch dark mode */
html.dark-mode .toggle-label[b-w84x07d3sq] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .toggle-slider[b-w84x07d3sq] {
    background-color: var(--bg-tertiary, #475569);
}

/* Editor content area dark mode */
html.dark-mode .editor-content[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
}

/* Template list scrollbar dark mode */
html.dark-mode .template-list[b-w84x07d3sq] {
    background: var(--bg-secondary, #1e293b);
}

/* Footer area background fix */
html.dark-mode .footer-left[b-w84x07d3sq],
html.dark-mode .footer-right[b-w84x07d3sq] {
    background: transparent !important;
}

/* ─── IMPORT LABEL (styled as action-btn) ─────────────────────────────────── */
.import-label[b-w84x07d3sq] {
    cursor: pointer;
}

/* ─── IMPORT CONFIRMATION MODAL ───────────────────────────────────────────── */
.modal-overlay[b-w84x07d3sq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-w84x07d3sq 0.15s ease;
}

.modal-dialog[b-w84x07d3sq] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-dialog h3[b-w84x07d3sq] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.modal-dialog p[b-w84x07d3sq] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.import-summary[b-w84x07d3sq] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-w84x07d3sq] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.modal-actions[b-w84x07d3sq] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@keyframes fadeIn-b-w84x07d3sq {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dark mode styles are in admin-shared.css for proper global application */
/* /Components/Pages/Admin/FaqManagement.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   FAQ MANAGEMENT STYLES
   Admin styling for FAQ management page in BBuilder
   ???????????????????????????????????????????????????????????????????????????? */

/* ??? Header ???????????????????????????????????????????????????????????????? */
.faq-header[b-2q9qtuk21f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ??? Loading State ????????????????????????????????????????????????????????? */
.loading-state[b-2q9qtuk21f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-state .spinner[b-2q9qtuk21f] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-2q9qtuk21f 1s linear infinite;
}

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

/* ??? Main Layout ??????????????????????????????????????????????????????????? */
.faq-layout[b-2q9qtuk21f] {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: calc(100vh - 140px);
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .faq-layout[b-2q9qtuk21f] {
        grid-template-columns: 1fr;
    }
}

/* ??? Sidebar ??????????????????????????????????????????????????????????????? */
.faq-sidebar[b-2q9qtuk21f] {
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.sidebar-header[b-2q9qtuk21f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-header h3[b-2q9qtuk21f] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-count[b-2q9qtuk21f] {
    color: #64748b;
    font-weight: 400;
}

.add-btn[b-2q9qtuk21f] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #3b82f6;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-btn:hover[b-2q9qtuk21f] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* ??? Category Filter ??????????????????????????????????????????????????????? */
.category-filter[b-2q9qtuk21f] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.category-filter select[b-2q9qtuk21f] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #475569;
    background: white;
    cursor: pointer;
}

.category-filter select:focus[b-2q9qtuk21f] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ??? FAQ List ?????????????????????????????????????????????????????????????? */
.faq-list[b-2q9qtuk21f] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.faq-list-item[b-2q9qtuk21f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.35rem;
    border: 1px solid transparent;
}

.faq-list-item:hover[b-2q9qtuk21f] {
    background: #f1f5f9;
}

.faq-list-item.active[b-2q9qtuk21f] {
    background: #eff6ff;
    border-color: #3b82f6;
}

.faq-list-item.inactive[b-2q9qtuk21f] {
    opacity: 0.6;
}

.faq-list-item.inactive .item-question[b-2q9qtuk21f] {
    text-decoration: line-through;
}

.item-main[b-2q9qtuk21f] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.item-icon[b-2q9qtuk21f] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.item-text[b-2q9qtuk21f] {
    flex: 1;
    min-width: 0;
}

.item-question[b-2q9qtuk21f] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
    word-break: break-word;
}

.item-category[b-2q9qtuk21f] {
    display: inline-block;
    font-size: 0.7rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.35rem;
}

.item-badges[b-2q9qtuk21f] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.sort-order[b-2q9qtuk21f] {
    font-size: 0.7rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge[b-2q9qtuk21f] {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.badge.inactive[b-2q9qtuk21f] {
    background: #fef3c7;
    color: #92400e;
}

/* ??? Editor Panel ?????????????????????????????????????????????????????????? */
.faq-editor[b-2q9qtuk21f] {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

.editor-header[b-2q9qtuk21f] {
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.editor-title[b-2q9qtuk21f] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.editor-content[b-2q9qtuk21f] {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

/* ??? Form Grid ????????????????????????????????????????????????????????????? */
.form-grid[b-2q9qtuk21f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-grid.three-cols[b-2q9qtuk21f] {
    grid-template-columns: 1fr 120px 120px;
}

@media (max-width: 800px) {
    .form-grid[b-2q9qtuk21f],
    .form-grid.three-cols[b-2q9qtuk21f] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-2q9qtuk21f] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-2q9qtuk21f] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
}

.form-group input[type="text"][b-2q9qtuk21f],
.form-group input[type="number"][b-2q9qtuk21f],
.form-group select[b-2q9qtuk21f] {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus[b-2q9qtuk21f],
.form-group select:focus[b-2q9qtuk21f] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input[b-2q9qtuk21f]::placeholder {
    color: #94a3b8;
}

/* ??? Answer Editor ????????????????????????????????????????????????????????? */
.answer-editor[b-2q9qtuk21f] {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1e293b;
    line-height: 1.6;
    resize: vertical;
    min-height: 140px;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.answer-editor:focus[b-2q9qtuk21f] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.answer-editor[b-2q9qtuk21f]::placeholder {
    color: #94a3b8;
}

/* ??? Toggle ???????????????????????????????????????????????????????????????? */
.toggle-group[b-2q9qtuk21f] {
    flex-direction: row !important;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.toggle[b-2q9qtuk21f] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input[b-2q9qtuk21f] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-2q9qtuk21f] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.2s;
    border-radius: 24px;
}

.toggle-slider[b-2q9qtuk21f]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider[b-2q9qtuk21f] {
    background-color: #22c55e;
}

.toggle input:checked + .toggle-slider[b-2q9qtuk21f]:before {
    transform: translateX(20px);
}

.toggle-label[b-2q9qtuk21f] {
    font-size: 0.875rem;
    color: #475569;
}

/* ??? Preview Section ??????????????????????????????????????????????????????? */
.preview-section[b-2q9qtuk21f] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.preview-section h4[b-2q9qtuk21f] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.faq-preview[b-2q9qtuk21f] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.preview-item[b-2q9qtuk21f] {
    padding: 0;
}

.preview-question[b-2q9qtuk21f] {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-answer[b-2q9qtuk21f] {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.65;
    white-space: pre-wrap;
}

/* ??? Editor Footer ????????????????????????????????????????????????????????? */
.editor-footer[b-2q9qtuk21f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

.footer-left[b-2q9qtuk21f],
.footer-right[b-2q9qtuk21f] {
    display: flex;
    gap: 0.75rem;
}

.delete-btn[b-2q9qtuk21f] {
    padding: 0.5rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: white;
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.delete-btn:hover[b-2q9qtuk21f] {
    background: #fef2f2;
    border-color: #f87171;
}

.cancel-btn[b-2q9qtuk21f] {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cancel-btn:hover[b-2q9qtuk21f] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.save-btn[b-2q9qtuk21f] {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: #3b82f6;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.save-btn:hover:not(:disabled)[b-2q9qtuk21f] {
    background: #2563eb;
}

.save-btn:disabled[b-2q9qtuk21f] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ??? Empty State ??????????????????????????????????????????????????????????? */
.empty-state[b-2q9qtuk21f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: 16px;
    margin: 2rem;
}

.empty-icon[b-2q9qtuk21f] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-2q9qtuk21f] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.empty-state p[b-2q9qtuk21f] {
    margin: 0;
    color: #64748b;
}

/* ??? Toast Notification ???????????????????????????????????????????????????? */
.toast[b-2q9qtuk21f] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideIn-b-2q9qtuk21f 0.3s ease;
}

.toast.success[b-2q9qtuk21f] {
    background: #22c55e;
    color: white;
}

.toast.error[b-2q9qtuk21f] {
    background: #ef4444;
    color: white;
}

@keyframes slideIn-b-2q9qtuk21f {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ??? Drag & Drop Visual Feedback ??????????????????????????????????????????? */
.faq-list-item[draggable="true"][b-2q9qtuk21f] {
    cursor: grab;
}

.faq-list-item[draggable="true"]:active[b-2q9qtuk21f] {
    cursor: grabbing;
}

.faq-list-item.drag-over[b-2q9qtuk21f] {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .faq-header[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .faq-layout[b-2q9qtuk21f] {
    background: var(--bg-primary, #0f172a) !important;
}

/* ??? Sidebar Dark Mode ????????????????????????????????????????????????????? */
html.dark-mode .faq-sidebar[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
    border-right-color: var(--border-primary, #334155) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .faq-list[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .sidebar-header[b-2q9qtuk21f] {
    border-bottom-color: var(--border-primary, #334155) !important;
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .sidebar-header h3[b-2q9qtuk21f] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .item-count[b-2q9qtuk21f] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .add-btn[b-2q9qtuk21f] {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html.dark-mode .add-btn:hover[b-2q9qtuk21f] {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark-mode .category-filter[b-2q9qtuk21f] {
    border-bottom-color: var(--border-primary, #334155) !important;
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .category-filter select[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

/* ??? FAQ List Items - CRITICAL ????????????????????????????????????????????? */
html.dark-mode .faq-list-item[b-2q9qtuk21f] {
    background: transparent !important;
}

html.dark-mode .faq-list-item:hover[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .faq-list-item.active[b-2q9qtuk21f] {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

/* Force white text on all list item elements */
html.dark-mode .faq-list-item[b-2q9qtuk21f],
html.dark-mode .faq-list-item *[b-2q9qtuk21f],
html.dark-mode .item-main[b-2q9qtuk21f],
html.dark-mode .item-text[b-2q9qtuk21f],
html.dark-mode .item-icon[b-2q9qtuk21f],
html.dark-mode .item-question[b-2q9qtuk21f] {
    color: #f1f5f9 !important;
}

html.dark-mode .item-category[b-2q9qtuk21f] {
    background: var(--bg-hover, #475569) !important;
    color: #cbd5e1 !important;
}

html.dark-mode .item-badges[b-2q9qtuk21f] {
    color: #94a3b8 !important;
}

html.dark-mode .sort-order[b-2q9qtuk21f] {
    background: var(--bg-hover, #475569) !important;
    color: #cbd5e1 !important;
}

html.dark-mode .badge.inactive[b-2q9qtuk21f] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

/* ??? Editor Panel Dark Mode ???????????????????????????????????????????????? */
html.dark-mode .faq-editor[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .editor-header[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .editor-title[b-2q9qtuk21f] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .editor-content[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .form-group label[b-2q9qtuk21f] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .form-group input[type="text"][b-2q9qtuk21f],
html.dark-mode .form-group input[type="number"][b-2q9qtuk21f],
html.dark-mode .form-group select[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .form-group input[b-2q9qtuk21f]::placeholder {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .answer-editor[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .answer-editor[b-2q9qtuk21f]::placeholder {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .toggle-slider[b-2q9qtuk21f] {
    background-color: var(--bg-hover, #475569) !important;
}

html.dark-mode .toggle-label[b-2q9qtuk21f] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* ??? Preview Section Dark Mode ????????????????????????????????????????????? */
html.dark-mode .preview-section[b-2q9qtuk21f] {
    border-top-color: var(--border-primary, #334155) !important;
}

html.dark-mode .preview-section h4[b-2q9qtuk21f] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .faq-preview[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-secondary, #475569) !important;
}

html.dark-mode .preview-question[b-2q9qtuk21f] {
    background: var(--bg-hover, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .preview-answer[b-2q9qtuk21f] {
    color: var(--text-secondary, #cbd5e1) !important;
    background: var(--bg-tertiary, #334155) !important;
}

/* ??? Editor Footer Dark Mode ??????????????????????????????????????????????? */
html.dark-mode .editor-footer[b-2q9qtuk21f] {
    background: var(--bg-tertiary, #334155) !important;
    border-top-color: var(--border-primary, #334155) !important;
}

html.dark-mode .delete-btn[b-2q9qtuk21f] {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

html.dark-mode .delete-btn:hover[b-2q9qtuk21f] {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.6) !important;
}

html.dark-mode .cancel-btn[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-secondary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .cancel-btn:hover[b-2q9qtuk21f] {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .save-btn[b-2q9qtuk21f] {
    background: #3b82f6 !important;
}

html.dark-mode .save-btn:hover:not(:disabled)[b-2q9qtuk21f] {
    background: #2563eb !important;
}

/* ??? Empty State Dark Mode ????????????????????????????????????????????????? */
html.dark-mode .empty-state[b-2q9qtuk21f] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .empty-state h2[b-2q9qtuk21f] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .empty-state p[b-2q9qtuk21f] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ??? Drag & Drop Dark Mode ????????????????????????????????????????????????? */
html.dark-mode .faq-list-item.drag-over[b-2q9qtuk21f] {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

/* ??? Loading State Dark Mode ??????????????????????????????????????????????? */
html.dark-mode .loading-state .spinner[b-2q9qtuk21f] {
    border-color: var(--border-primary, #334155) !important;
    border-top-color: #3b82f6 !important;
}

html.dark-mode .loading-state[b-2q9qtuk21f] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ??? Focus States Dark Mode ???????????????????????????????????????????????? */
html.dark-mode .form-group input:focus[b-2q9qtuk21f],
html.dark-mode .form-group select:focus[b-2q9qtuk21f] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .answer-editor:focus[b-2q9qtuk21f] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .category-filter select:focus[b-2q9qtuk21f] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* ─── IMPORT LABEL (styled as action-btn) ─────────────────────────────────── */
.import-label[b-2q9qtuk21f] {
    cursor: pointer;
}

/* ─── IMPORT CONFIRMATION MODAL ───────────────────────────────────────────── */
.modal-overlay[b-2q9qtuk21f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-2q9qtuk21f 0.15s ease;
}

.modal-dialog[b-2q9qtuk21f] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-dialog h3[b-2q9qtuk21f] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.modal-dialog p[b-2q9qtuk21f] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.import-summary[b-2q9qtuk21f] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-2q9qtuk21f] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.modal-actions[b-2q9qtuk21f] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@keyframes fadeIn-b-2q9qtuk21f {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── IMPORT MODAL DARK MODE ──────────────────────────────────────────────── */
html.dark-mode .modal-dialog[b-2q9qtuk21f] {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-dialog h3[b-2q9qtuk21f] {
    color: #f1f5f9;
}

html.dark-mode .modal-dialog p[b-2q9qtuk21f] {
    color: #cbd5e1;
}

html.dark-mode .import-summary li[b-2q9qtuk21f] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
/* /Components/Pages/Admin/GiftCardManagement.razor.rz.scp.css */
/* ??? Gift Card Management Admin Styles ??? */

/* ??? Header & Breadcrumb ???????????????????????????????????? */
.gc-header[b-jm5dsw4fke] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: var(--card-bg, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-jm5dsw4fke] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breadcrumb[b-jm5dsw4fke] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.breadcrumb-link[b-jm5dsw4fke] {
    color: var(--primary, #6366f1);
    text-decoration: none;
    cursor: pointer;
}

    .breadcrumb-link:hover[b-jm5dsw4fke] {
        text-decoration: underline;
    }

.breadcrumb-sep[b-jm5dsw4fke] {
    color: var(--text-secondary, #9ca3af);
}

.breadcrumb-current[b-jm5dsw4fke] {
    color: var(--text-secondary, #6b7280);
}

.page-title[b-jm5dsw4fke] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

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

/* ??? Content Area ??????????????????????????????????????????? */
.stats-row[b-jm5dsw4fke] {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 2rem;
    flex-wrap: wrap;
}

.stat-card[b-jm5dsw4fke] {
    flex: 1;
    min-width: 140px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
}

.stat-value[b-jm5dsw4fke] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.stat-label[b-jm5dsw4fke] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.25rem;
}

.alert[b-jm5dsw4fke] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0 2rem 1rem;
    font-size: 0.875rem;
}

.card[b-jm5dsw4fke] {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 0 2rem 1.5rem;
}

    .card h2[b-jm5dsw4fke] {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

.form-row[b-jm5dsw4fke] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.form-group label[b-jm5dsw4fke] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.25rem;
}

.form-input[b-jm5dsw4fke] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #1f2937);
}

.form-actions[b-jm5dsw4fke] {
    display: flex;
    align-items: end;
}

.gift-code[b-jm5dsw4fke] {
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.code-cell[b-jm5dsw4fke] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.copy-btn[b-jm5dsw4fke] {
    background: none;
    border: none;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.1s;
    border-radius: 4px;
}

.copy-btn:hover[b-jm5dsw4fke] {
    opacity: 1;
    background: var(--bg-secondary, #f3f4f6);
}

.copy-btn:active[b-jm5dsw4fke] {
    transform: scale(0.9);
}

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

.data-table[b-jm5dsw4fke] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .data-table th[b-jm5dsw4fke] {
        text-align: left;
        padding: 0.75rem 0.5rem;
        border-bottom: 2px solid var(--border-color, #e5e7eb);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary, #6b7280);
    }

    .data-table td[b-jm5dsw4fke] {
        padding: 0.625rem 0.5rem;
        border-bottom: 1px solid var(--border-color, #f3f4f6);
        vertical-align: top;
    }

.row-inactive[b-jm5dsw4fke] {
    opacity: 0.6;
}

.badge[b-jm5dsw4fke] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-success[b-jm5dsw4fke] { background: #dcfce7; color: #166534; }
.badge-muted[b-jm5dsw4fke]   { background: #f3f4f6; color: #6b7280; }
.badge-warning[b-jm5dsw4fke] { background: #fef3c7; color: #92400e; }
.badge-danger[b-jm5dsw4fke]  { background: #fee2e2; color: #991b1b; }

.text-success[b-jm5dsw4fke] { color: #16a34a; }
.text-danger[b-jm5dsw4fke]  { color: #dc2626; }
.text-muted[b-jm5dsw4fke]   { color: #9ca3af; }

.btn[b-jm5dsw4fke] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}

    .btn:hover[b-jm5dsw4fke] { opacity: 0.85; }
    .btn:disabled[b-jm5dsw4fke] { opacity: 0.5; cursor: not-allowed; }

.btn-primary[b-jm5dsw4fke]   { background: #6366f1; color: white; }
.btn-success[b-jm5dsw4fke]   { background: #22c55e; color: white; }
.btn-danger[b-jm5dsw4fke]    { background: #ef4444; color: white; }
.btn-secondary[b-jm5dsw4fke] { background: var(--bg-secondary, #e5e7eb); color: var(--text-primary, #374151); }

.btn-sm[b-jm5dsw4fke] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.alert-warning[b-jm5dsw4fke] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-success[b-jm5dsw4fke] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error[b-jm5dsw4fke] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.empty-state[b-jm5dsw4fke] {
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
    padding: 2rem 0;
    text-align: center;
}

.loading-state[b-jm5dsw4fke] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary, #9ca3af);
}

/* ??? Modal ??? */

.modal-overlay[b-jm5dsw4fke] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-jm5dsw4fke] {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    max-width: 700px;
    width: 95%;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header[b-jm5dsw4fke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

    .modal-header h3[b-jm5dsw4fke] {
        margin: 0;
        font-size: 1rem;
    }

.modal-close[b-jm5dsw4fke] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem;
}

.modal-body[b-jm5dsw4fke] {
    padding: 1.5rem;
}

.card-summary[b-jm5dsw4fke] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    font-size: 0.875rem;
}

/* ???????????????????????????????????????????????????????????????
   DARK MODE
   ??????????????????????????????????????????????????????????????? */

html.dark-mode .gc-header[b-jm5dsw4fke] {
    background: var(--card-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.06);
}

html.dark-mode .breadcrumb-link[b-jm5dsw4fke] {
    color: #818cf8;
}

html.dark-mode .stat-card[b-jm5dsw4fke] {
    background: var(--card-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .stat-value[b-jm5dsw4fke] {
    color: var(--text-primary, #e2e8f0);
}

html.dark-mode .card[b-jm5dsw4fke] {
    background: var(--card-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .form-input[b-jm5dsw4fke] {
    background: var(--input-bg, #0f172a);
    color: var(--text-primary, #e2e8f0);
    border-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .gift-code[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.08);
    color: #c7d2fe;
}

html.dark-mode .copy-btn:hover[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .data-table th[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #94a3b8);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .data-table td[b-jm5dsw4fke] {
    border-color: rgba(255, 255, 255, 0.06);
}

html.dark-mode .badge-success[b-jm5dsw4fke] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

html.dark-mode .badge-muted[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

html.dark-mode .badge-warning[b-jm5dsw4fke] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

html.dark-mode .badge-danger[b-jm5dsw4fke] {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.badge-pending[b-jm5dsw4fke] {
    background: #e0e7ff;
    color: #4338ca;
}

html.dark-mode .badge-pending[b-jm5dsw4fke] {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

html.dark-mode .text-success[b-jm5dsw4fke] { color: #4ade80; }
html.dark-mode .text-danger[b-jm5dsw4fke]  { color: #f87171; }
html.dark-mode .text-muted[b-jm5dsw4fke]   { color: #64748b; }

html.dark-mode .btn-secondary[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e2e8f0);
}

html.dark-mode .alert-warning[b-jm5dsw4fke] {
    background: rgba(251, 191, 36, 0.08);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.2);
}

html.dark-mode .alert-warning a[b-jm5dsw4fke] {
    color: #818cf8;
}

html.dark-mode .alert-success[b-jm5dsw4fke] {
    background: rgba(74, 222, 128, 0.08);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.2);
}

html.dark-mode .alert-error[b-jm5dsw4fke] {
    background: rgba(248, 113, 113, 0.08);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.2);
}

html.dark-mode .modal-content[b-jm5dsw4fke] {
    background: var(--card-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .modal-header[b-jm5dsw4fke] {
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .modal-close[b-jm5dsw4fke] {
    color: var(--text-secondary, #94a3b8);
}

html.dark-mode .card-summary[b-jm5dsw4fke] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/Pages/Admin/Languages.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   Languages Admin Page Styles
   Follows admin-shared.css patterns; dark mode handled by admin-shared.css wildcards
   ════════════════════════════════════════════════════════════════════════ */

.lang-header[b-47yppx08jp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 3rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.lang-header .page-title[b-47yppx08jp] {
    margin: 0;
    font-size: 1.8rem;
}

.header-subtitle[b-47yppx08jp] {
    color: #64748b;
    font-size: 0.9rem;
}

.header-actions[b-47yppx08jp] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.breadcrumb[b-47yppx08jp] {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.breadcrumb-link[b-47yppx08jp] {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-sep[b-47yppx08jp] {
    margin: 0 0.35rem;
    color: #94a3b8;
}

.breadcrumb-current[b-47yppx08jp] {
    color: #64748b;
}

/* ─── Language Grid ─────────────────────────────────────────────────── */
.lang-content[b-47yppx08jp] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

.lang-grid[b-47yppx08jp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.lang-card[b-47yppx08jp] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.lang-card:hover[b-47yppx08jp] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.lang-card.default[b-47yppx08jp] {
    border-color: #3b82f6;
    border-width: 2px;
}

.lang-card.disabled[b-47yppx08jp] {
    opacity: 0.6;
}

.lang-card-header[b-47yppx08jp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.lang-flag[b-47yppx08jp] {
    font-size: 2rem;
}

.lang-info h3[b-47yppx08jp] {
    margin: 0;
    font-size: 1.1rem;
}

.lang-code[b-47yppx08jp] {
    font-size: 0.8rem;
    color: #64748b;
    font-family: monospace;
}

.lang-badges[b-47yppx08jp] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.badge[b-47yppx08jp] {
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.default[b-47yppx08jp] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.enabled[b-47yppx08jp] {
    background: #dcfce7;
    color: #166534;
}

.badge.disabled-badge[b-47yppx08jp] {
    background: #f1f5f9;
    color: #64748b;
}

/* ─── Progress ──────────────────────────────────────────────────────── */
.progress-section[b-47yppx08jp] {
    margin-bottom: 0.75rem;
}

.progress-label[b-47yppx08jp] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.progress-count[b-47yppx08jp] {
    font-weight: 600;
    color: #475569;
}

.progress-bar[b-47yppx08jp] {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-47yppx08jp] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-fill.complete[b-47yppx08jp] {
    background: #22c55e;
}

.progress-fill.good[b-47yppx08jp] {
    background: #3b82f6;
}

.progress-fill.low[b-47yppx08jp] {
    background: #f59e0b;
}

.progress-hint[b-47yppx08jp] {
    font-size: 0.75rem;
    color: #f59e0b;
    margin-top: 0.25rem;
    display: block;
}

/* ─── Actions ───────────────────────────────────────────────────────── */
.lang-card-actions[b-47yppx08jp] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.action-btn[b-47yppx08jp] {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.action-btn:hover[b-47yppx08jp] {
    background: #f1f5f9;
}

.action-btn.primary[b-47yppx08jp] {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.action-btn.primary:hover[b-47yppx08jp] {
    background: #2563eb;
}

.action-btn.small[b-47yppx08jp] {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.action-btn.danger:hover[b-47yppx08jp] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #dc2626;
}

/* ─── Form Modal ────────────────────────────────────────────────────── */
.modal-overlay[b-47yppx08jp] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-47yppx08jp] {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.small[b-47yppx08jp] {
    max-width: 450px;
}

.modal-header[b-47yppx08jp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-47yppx08jp] {
    margin: 0;
}

.close-btn[b-47yppx08jp] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
}

.form-grid[b-47yppx08jp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group[b-47yppx08jp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-group label[b-47yppx08jp] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.form-input[b-47yppx08jp] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
}

.form-input:focus[b-47yppx08jp] {
    outline: 2px solid #3b82f6;
    border-color: transparent;
}

.form-input:disabled[b-47yppx08jp] {
    background: #f1f5f9;
    color: #94a3b8;
}

.form-hint[b-47yppx08jp] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ─── Common ────────────────────────────────────────────────────────── */
.modal-footer[b-47yppx08jp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.btn[b-47yppx08jp] {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    font-weight: 500;
}

.btn.secondary[b-47yppx08jp] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.btn.primary[b-47yppx08jp] {
    background: #3b82f6;
    color: #fff;
}

.btn.primary:hover[b-47yppx08jp] {
    background: #2563eb;
}

.btn.danger[b-47yppx08jp] {
    background: #ef4444;
}

.btn.danger:hover[b-47yppx08jp] {
    background: #dc2626;
}

.loading-state[b-47yppx08jp], .empty-state[b-47yppx08jp] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.spinner[b-47yppx08jp] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@@keyframes spin {
    to[b-47yppx08jp] { transform: rotate(360deg); }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode .lang-header[b-47yppx08jp] {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .lang-header .header-subtitle[b-47yppx08jp],
html.dark-mode .breadcrumb-current[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .breadcrumb-link[b-47yppx08jp] {
    color: #60a5fa !important;
}

html.dark-mode .breadcrumb-sep[b-47yppx08jp] {
    color: var(--text-tertiary) !important;
}

html.dark-mode .lang-content[b-47yppx08jp] {
    background: var(--bg-primary) !important;
}

html.dark-mode .lang-card[b-47yppx08jp] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .lang-card:hover[b-47yppx08jp] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

html.dark-mode .lang-card.default[b-47yppx08jp] {
    border-color: #3b82f6 !important;
}

html.dark-mode .lang-card-header[b-47yppx08jp] {
    background: transparent !important;
    border-color: transparent !important;
}

html.dark-mode .lang-info h3[b-47yppx08jp] {
    color: var(--text-primary) !important;
}

html.dark-mode .lang-code[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .badge.default[b-47yppx08jp] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

html.dark-mode .badge.enabled[b-47yppx08jp] {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .badge.disabled-badge[b-47yppx08jp] {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .lang-card-body[b-47yppx08jp] {
    background: transparent !important;
}

html.dark-mode .progress-section[b-47yppx08jp] {
    background: transparent !important;
    border-color: transparent !important;
}

html.dark-mode .progress-label[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .progress-count[b-47yppx08jp] {
    color: var(--text-primary) !important;
}

html.dark-mode .progress-bar[b-47yppx08jp] {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .progress-hint[b-47yppx08jp] {
    color: #fbbf24 !important;
}

html.dark-mode .lang-card-actions[b-47yppx08jp] {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode .action-btn[b-47yppx08jp] {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .action-btn:hover[b-47yppx08jp] {
    background: var(--bg-secondary) !important;
}

html.dark-mode .action-btn.primary[b-47yppx08jp] {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

html.dark-mode .action-btn.primary:hover[b-47yppx08jp] {
    background: #2563eb !important;
}

html.dark-mode .action-btn.danger:hover[b-47yppx08jp] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
}

html.dark-mode .modal-overlay[b-47yppx08jp] {
    background: rgba(0,0,0,0.7) !important;
}

html.dark-mode .modal-content[b-47yppx08jp] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .modal-header[b-47yppx08jp] {
    background: transparent !important;
    border-color: transparent !important;
}

html.dark-mode .modal-header h2[b-47yppx08jp],
html.dark-mode .modal-content h3[b-47yppx08jp] {
    color: var(--text-primary) !important;
}

html.dark-mode .modal-content p[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .close-btn[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .form-group label[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .form-input[b-47yppx08jp] {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .form-input:disabled[b-47yppx08jp] {
    background: var(--bg-primary) !important;
    color: var(--text-tertiary) !important;
}

html.dark-mode .form-hint[b-47yppx08jp] {
    color: var(--text-tertiary) !important;
}

html.dark-mode .btn.secondary[b-47yppx08jp] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .empty-state[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .loading-state[b-47yppx08jp] {
    color: var(--text-secondary) !important;
}

html.dark-mode .spinner[b-47yppx08jp] {
    border-color: var(--border-primary) !important;
    border-top-color: #3b82f6 !important;
}

/* ── Import Label ──────────────────────────────────────────────────────────── */
.import-label[b-47yppx08jp] {
    cursor: pointer;
}
/* /Components/Pages/Admin/LegalDocuments.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   LEGAL DOCUMENTS MANAGEMENT STYLES
   Admin styling for legal documents management page in BBuilder
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Header ──────────────────────────────────────────────────────────────── */
.legal-header[b-6yihhl56cd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breadcrumb[b-6yihhl56cd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
}

.breadcrumb-link[b-6yihhl56cd] {
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover[b-6yihhl56cd] {
    color: #3b82f6;
}

.breadcrumb-sep[b-6yihhl56cd] {
    color: #cbd5e1;
}

.breadcrumb-current[b-6yihhl56cd] {
    color: #475569;
    font-weight: 500;
}

.page-title[b-6yihhl56cd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.header-subtitle[b-6yihhl56cd] {
    color: #64748b;
    font-size: 0.9rem;
}

.header-actions[b-6yihhl56cd] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.action-btn[b-6yihhl56cd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.action-btn:hover[b-6yihhl56cd] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.action-btn.primary[b-6yihhl56cd] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.action-btn.primary:hover[b-6yihhl56cd] {
    background: #2563eb;
}

.action-btn.primary:disabled[b-6yihhl56cd] {
    background: #93c5fd;
    cursor: not-allowed;
}

.action-btn.danger[b-6yihhl56cd] {
    background: white;
    color: #dc2626;
    border-color: #fca5a5;
}

.action-btn.danger:hover[b-6yihhl56cd] {
    background: #fef2f2;
    border-color: #dc2626;
}

.btn-icon[b-6yihhl56cd] {
    font-size: 1rem;
}

/* ─── Loading & Empty States ──────────────────────────────────────────────── */
.loading-state[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: #64748b;
}

.loading-state .spinner[b-6yihhl56cd] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-6yihhl56cd 1s linear infinite;
}

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

.empty-state[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 2rem;
}

.empty-icon[b-6yihhl56cd] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-6yihhl56cd] {
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.empty-state p[b-6yihhl56cd] {
    color: #64748b;
    margin: 0 0 1.5rem;
    max-width: 400px;
}

/* ─── Coverage Grid ───────────────────────────────────────────────────────── */
.coverage-grid[b-6yihhl56cd] {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.coverage-card[b-6yihhl56cd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    min-width: 170px;
    transition: all 0.2s ease;
}

.coverage-card.complete[b-6yihhl56cd] {
    border-color: #86efac;
    background: #f0fdf4;
}

.coverage-card.incomplete[b-6yihhl56cd] {
    border-color: #fde68a;
    background: #fffbeb;
}

.coverage-flag[b-6yihhl56cd] {
    font-size: 1.75rem;
    line-height: 1;
}

.coverage-info[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.coverage-lang[b-6yihhl56cd] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.coverage-status[b-6yihhl56cd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.doc-indicator[b-6yihhl56cd] {
    font-size: 0.9rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.doc-indicator.filled[b-6yihhl56cd] {
    opacity: 1;
}

.coverage-label[b-6yihhl56cd] {
    color: #64748b;
    font-size: 0.78rem;
}

/* ─── Document Type Tabs ──────────────────────────────────────────────────── */
.doctype-tabs[b-6yihhl56cd] {
    display: flex;
    gap: 0;
    padding: 0 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.doctype-tab[b-6yihhl56cd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doctype-tab:hover[b-6yihhl56cd] {
    color: #1e293b;
    background: #f8fafc;
}

.doctype-tab.active[b-6yihhl56cd] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.tab-icon[b-6yihhl56cd] {
    font-size: 1.1rem;
}

/* ─── Language Tabs ───────────────────────────────────────────────────────── */
.lang-tabs[b-6yihhl56cd] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.lang-tab[b-6yihhl56cd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lang-tab:hover[b-6yihhl56cd] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.lang-tab.active[b-6yihhl56cd] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.lang-tab.has-content:not(.active)[b-6yihhl56cd] {
    border-color: #86efac;
}

.lang-flag[b-6yihhl56cd] {
    font-size: 1.1rem;
}

.lang-check[b-6yihhl56cd] {
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 700;
}

.lang-tab.active .lang-check[b-6yihhl56cd] {
    color: white;
}

/* ─── Editor Layout ───────────────────────────────────────────────────────── */
.editor-layout[b-6yihhl56cd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 500px;
    background: #f8fafc;
}

@media (max-width: 1200px) {
    .editor-layout[b-6yihhl56cd] {
        grid-template-columns: 1fr;
    }
}

.editor-panel[b-6yihhl56cd],
.preview-panel[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e2e8f0;
    margin: 1rem;
    border-radius: 12px;
    overflow: hidden;
}

.editor-panel[b-6yihhl56cd] {
    margin-right: 0.5rem;
}

.preview-panel[b-6yihhl56cd] {
    margin-left: 0.5rem;
}

@media (max-width: 1200px) {
    .editor-panel[b-6yihhl56cd],
    .preview-panel[b-6yihhl56cd] {
        margin: 1rem 1rem 0 1rem;
    }

    .preview-panel[b-6yihhl56cd] {
        margin-bottom: 1rem;
    }
}

.panel-header[b-6yihhl56cd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    gap: 0.5rem;
}

.panel-header h3[b-6yihhl56cd] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
}

.last-modified[b-6yihhl56cd] {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* ─── Editor Help ─────────────────────────────────────────────────────────── */
.editor-help[b-6yihhl56cd] {
    padding: 0 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.editor-help details[b-6yihhl56cd] {
    padding: 0.5rem 0;
}

.editor-help summary[b-6yihhl56cd] {
    cursor: pointer;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    user-select: none;
}

.editor-help summary:hover[b-6yihhl56cd] {
    color: #3b82f6;
}

.help-content[b-6yihhl56cd] {
    padding: 0.75rem 0;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.6;
}

.help-content p[b-6yihhl56cd] {
    margin: 0 0 0.5rem;
}

.help-content code[b-6yihhl56cd] {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    color: #0f172a;
}

/* ─── HTML Editor ─────────────────────────────────────────────────────────── */
.html-editor[b-6yihhl56cd] {
    flex: 1;
    width: 100%;
    min-height: 400px;
    padding: 1.25rem;
    border: none;
    outline: none;
    resize: vertical;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
    background: white;
    tab-size: 2;
}

.html-editor[b-6yihhl56cd]::placeholder {
    color: #94a3b8;
}

.editor-footer[b-6yihhl56cd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.78rem;
}

.char-count[b-6yihhl56cd] {
    color: #94a3b8;
}

.unsaved-badge[b-6yihhl56cd] {
    color: #f59e0b;
    font-weight: 600;
    animation: pulse-b-6yihhl56cd 2s ease-in-out infinite;
}

@keyframes pulse-b-6yihhl56cd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Preview ─────────────────────────────────────────────────────────────── */
.preview-toggle[b-6yihhl56cd] {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.preview-toggle:hover[b-6yihhl56cd] {
    background: #f1f5f9;
}

.preview-toggle.active[b-6yihhl56cd] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #3b82f6;
}

.preview-content[b-6yihhl56cd] {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    max-height: 600px;
    background: white;
}

/* Mirror the frontend legal-content styling for preview */
.preview-content h2[b-6yihhl56cd] {
    font-size: 1.25rem;
    color: #3b82f6;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}

.preview-content h3[b-6yihhl56cd] {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 1rem 0 0.5rem;
}

.preview-content p[b-6yihhl56cd] {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.preview-content ul[b-6yihhl56cd] {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.preview-content li[b-6yihhl56cd] {
    margin-bottom: 0.5rem;
    color: #475569;
    line-height: 1.6;
}

.preview-content table[b-6yihhl56cd] {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.preview-content th[b-6yihhl56cd],
.preview-content td[b-6yihhl56cd] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.preview-content th[b-6yihhl56cd] {
    background: #f8fafc;
    font-weight: 600;
    color: #1e293b;
}

.preview-content strong[b-6yihhl56cd] {
    color: #1e293b;
}

.preview-content a[b-6yihhl56cd] {
    color: #3b82f6;
    text-decoration: none;
}

.preview-content a:hover[b-6yihhl56cd] {
    text-decoration: underline;
}

.preview-empty[b-6yihhl56cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #94a3b8;
    gap: 0.5rem;
}

.preview-empty span[b-6yihhl56cd] {
    font-size: 2rem;
}

.preview-empty p[b-6yihhl56cd] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ─── Danger Zone ─────────────────────────────────────────────────────────── */
.danger-zone[b-6yihhl56cd] {
    margin: 0 1rem 1.5rem;
    padding: 1.25rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.danger-zone h4[b-6yihhl56cd] {
    color: #991b1b;
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.danger-zone p[b-6yihhl56cd] {
    color: #7f1d1d;
    font-size: 0.88rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* ─── Import Label ────────────────────────────────────────────────────────── */
.import-label[b-6yihhl56cd] {
    cursor: pointer;
}

/* ─── Import Confirmation Modal ───────────────────────────────────────────── */
.modal-overlay[b-6yihhl56cd] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-6yihhl56cd 0.15s ease;
}

.modal-dialog[b-6yihhl56cd] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-dialog h3[b-6yihhl56cd] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.modal-dialog p[b-6yihhl56cd] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.import-summary[b-6yihhl56cd] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-6yihhl56cd] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.modal-actions[b-6yihhl56cd] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@keyframes fadeIn-b-6yihhl56cd {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── Import Modal Dark Mode ─────────────────────────────────────────────── */
html.dark-mode .modal-dialog[b-6yihhl56cd] {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-dialog h3[b-6yihhl56cd] {
    color: #f1f5f9;
}

html.dark-mode .modal-dialog p[b-6yihhl56cd] {
    color: #cbd5e1;
}

html.dark-mode .import-summary li[b-6yihhl56cd] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.toast[b-6yihhl56cd] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1000;
    animation: slideIn-b-6yihhl56cd 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.toast.success[b-6yihhl56cd] {
    background: #065f46;
    color: white;
}

.toast.error[b-6yihhl56cd] {
    background: #991b1b;
    color: white;
}

@keyframes slideIn-b-6yihhl56cd {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ─── Dark Mode ───────────────────────────────────────────────────────────
Dark mode overrides live in admin-shared.css (LEGAL DOCUMENTS section)
to bypass Blazor CSS isolation specificity issues.
─────────────────────────────────────────────────────────────────────── */
/* /Components/Pages/Admin/Logs.razor.rz.scp.css */
/* Server Logs admin-UI — light mode default, dark mode override, responsive */
.logs-page[b-dptkvjuxt5] { padding: 1.5rem; color: #1e293b; min-height: 100vh; }
.logs-header[b-dptkvjuxt5] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.logs-header .breadcrumb[b-dptkvjuxt5] { font-size: .85rem; color: #64748b; }
.logs-header .breadcrumb-link[b-dptkvjuxt5] { color: #2563eb; text-decoration: none; }
.logs-header .breadcrumb-sep[b-dptkvjuxt5] { margin: 0 .4rem; }
.logs-header .page-title[b-dptkvjuxt5] { margin: .25rem 0; font-size: 1.75rem; }
.logs-header .subtitle[b-dptkvjuxt5] { color: #64748b; font-size: .9rem; }
.header-actions[b-dptkvjuxt5] { display: flex; align-items: center; gap: .75rem; }
.auto-toggle[b-dptkvjuxt5] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #475569; white-space: nowrap; }
.auto-toggle span[b-dptkvjuxt5] { white-space: nowrap; }

.logs-error[b-dptkvjuxt5] { background: #fee2e2; color: #991b1b; padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }

/* ── Application selector ─────────────────────────────────── */
.app-strip[b-dptkvjuxt5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.app-card[b-dptkvjuxt5] {
    display: flex; flex-direction: column; gap: .25rem; text-align: left;
    background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1;
    border-radius: 10px; padding: .75rem .9rem; cursor: pointer; color: #1e293b; transition: border-color .15s, background .15s;
}
.app-card:hover:not(:disabled)[b-dptkvjuxt5] { border-color: #2563eb; }
.app-card.active[b-dptkvjuxt5] { border-left-color: #2563eb; background: #eff6ff; }
.app-card.empty[b-dptkvjuxt5] { opacity: .55; cursor: not-allowed; }
.app-card .app-name[b-dptkvjuxt5] { font-weight: 700; font-size: 1rem; }
.app-card .app-meta[b-dptkvjuxt5] { font-size: .75rem; color: #64748b; }
.app-card .app-meta.dim[b-dptkvjuxt5] { color: #94a3b8; }

/* ── Toolbar / filters ────────────────────────────────────── */
.toolbar[b-dptkvjuxt5] { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; background: #f8fafc; border: 1px solid #e2e8f0; padding: 1rem; border-radius: 10px; margin-bottom: 1rem; }
.toolbar-field[b-dptkvjuxt5] { display: flex; flex-direction: column; gap: .25rem; }
.toolbar-field.grow[b-dptkvjuxt5] { flex: 1; min-width: 200px; }
.toolbar-field label[b-dptkvjuxt5] { font-size: .75rem; color: #64748b; }
.toolbar-field input[b-dptkvjuxt5], .toolbar-field select[b-dptkvjuxt5] {
    background: #ffffff; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 6px; padding: .4rem .6rem; font-size: .9rem;
}

/* ── Status strip ─────────────────────────────────────────── */
.logs-status[b-dptkvjuxt5] { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.status-chip[b-dptkvjuxt5] { font-size: .75rem; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; padding: .25rem .6rem; border-radius: 999px; }
.status-chip.dim[b-dptkvjuxt5] { color: #94a3b8; }
.status-chip.warn[b-dptkvjuxt5] { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.status-chip.loading[b-dptkvjuxt5] { color: #2563eb; }

/* ── Log viewer ───────────────────────────────────────────── */
.log-viewer[b-dptkvjuxt5] { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: auto; max-height: 65vh; }
.log-pre[b-dptkvjuxt5] { margin: 0; padding: 1rem; background: transparent; font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: .8rem; line-height: 1.45; white-space: pre; color: #334155; }
.log-line[b-dptkvjuxt5] { display: block; }
.log-line.lvl-error[b-dptkvjuxt5] { color: #dc2626; }
.log-line.lvl-warn[b-dptkvjuxt5] { color: #b45309; }
.log-line.lvl-debug[b-dptkvjuxt5] { color: #64748b; }

.log-empty[b-dptkvjuxt5] { padding: 2rem; text-align: center; color: #64748b; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary[b-dptkvjuxt5], .btn-secondary[b-dptkvjuxt5] { cursor: pointer; border: 1px solid transparent; border-radius: 6px; font-weight: 600; }
.btn-primary[b-dptkvjuxt5] { background: #2563eb; color: #fff; padding: .5rem .9rem; }
.btn-primary:disabled[b-dptkvjuxt5] { opacity: .5; cursor: not-allowed; }
.btn-secondary[b-dptkvjuxt5] { background: #e2e8f0; color: #1e293b; padding: .45rem .8rem; font-size: .85rem; }
.btn-secondary:disabled[b-dptkvjuxt5] { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   Dark mode overrides (html.dark-mode)
   The log viewer (terminal) blijft bewust donker in beide modi.
   ═══════════════════════════════════════════════════════════ */
html.dark-mode .logs-page[b-dptkvjuxt5] { color: #e5e7eb; }
html.dark-mode .logs-header .breadcrumb[b-dptkvjuxt5] { color: #94a3b8; }
html.dark-mode .logs-header .breadcrumb-link[b-dptkvjuxt5] { color: #60a5fa; }
html.dark-mode .logs-header .subtitle[b-dptkvjuxt5] { color: #94a3b8; }
html.dark-mode .auto-toggle[b-dptkvjuxt5] { color: #cbd5e1; }

html.dark-mode .logs-error[b-dptkvjuxt5] { background: #7f1d1d; color: #fee2e2; }

html.dark-mode .app-card[b-dptkvjuxt5] {
    background: #1e293b; border-color: #334155; border-left-color: #475569; color: #e5e7eb;
}
html.dark-mode .app-card:hover:not(:disabled)[b-dptkvjuxt5] { border-color: #60a5fa; }
html.dark-mode .app-card.active[b-dptkvjuxt5] { border-left-color: #60a5fa; background: #1e3a8a33; }
html.dark-mode .app-card .app-meta[b-dptkvjuxt5] { color: #94a3b8; }
html.dark-mode .app-card .app-meta.dim[b-dptkvjuxt5] { color: #64748b; }

html.dark-mode .toolbar[b-dptkvjuxt5] { background: #1e293b; border-color: #334155; }
html.dark-mode .toolbar-field label[b-dptkvjuxt5] { color: #94a3b8; }
html.dark-mode .toolbar-field input[b-dptkvjuxt5],
html.dark-mode .toolbar-field select[b-dptkvjuxt5] {
    background: #0f172a; color: #e5e7eb; border-color: #334155;
}

html.dark-mode .status-chip[b-dptkvjuxt5] { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark-mode .status-chip.dim[b-dptkvjuxt5] { color: #64748b; }
html.dark-mode .status-chip.warn[b-dptkvjuxt5] { background: #78350f; border-color: #b45309; color: #fde68a; }
html.dark-mode .status-chip.loading[b-dptkvjuxt5] { color: #93c5fd; }

html.dark-mode .btn-secondary[b-dptkvjuxt5] { background: #334155; color: #e5e7eb; }

/* Log viewer is een terminal-achtig venster en wordt donker in dark mode. */
html.dark-mode .log-viewer[b-dptkvjuxt5] { background: #0b1120; border-color: #334155; }
html.dark-mode .log-pre[b-dptkvjuxt5] { color: #cbd5e1; }
html.dark-mode .log-line.lvl-error[b-dptkvjuxt5] { color: #fca5a5; }
html.dark-mode .log-line.lvl-warn[b-dptkvjuxt5] { color: #fcd34d; }
html.dark-mode .log-line.lvl-debug[b-dptkvjuxt5] { color: #94a3b8; }
html.dark-mode .log-empty[b-dptkvjuxt5] { color: #94a3b8; }

@media (max-width: 640px) {
    .toolbar-field.grow[b-dptkvjuxt5] { min-width: 100%; }
    .log-pre[b-dptkvjuxt5] { font-size: .72rem; }
}
/* /Components/Pages/Admin/MailyIndex.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   MAILY INDEX - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
.maily-header[b-3dolnr7wlz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* ── Stats Summary ──────────────────────────────────────────────────────────── */
.maily-stats[b-3dolnr7wlz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 3rem;
    background: #f8fafc;
}

.stat-card[b-3dolnr7wlz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.stat-card.highlight[b-3dolnr7wlz] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.stat-card.error[b-3dolnr7wlz] {
    border-color: #dc2626;
    background: #fef2f2;
}

.stat-card.success[b-3dolnr7wlz] {
    border-color: #16a34a;
    background: #f0fdf4;
}

.stat-icon[b-3dolnr7wlz] {
    font-size: 1.5rem;
}

.stat-content[b-3dolnr7wlz] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-3dolnr7wlz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-3dolnr7wlz] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* ── Content Area ───────────────────────────────────────────────────────────── */
.maily-content[b-3dolnr7wlz] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 350px);
}

/* ── Filter Bar ─────────────────────────────────────────────────────────────── */
.filter-bar[b-3dolnr7wlz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: nowrap;
}

.filter-input[b-3dolnr7wlz] {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
}

.filter-input:focus[b-3dolnr7wlz] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select[b-3dolnr7wlz] {
    padding: 0.6rem 2rem 0.6rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    min-width: 120px;
    max-width: 150px;
    flex: 0 0 auto;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}

.filter-select:focus[b-3dolnr7wlz] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-count[b-3dolnr7wlz] {
    margin-left: auto;
    color: #64748b;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Bulk Actions ───────────────────────────────────────────────────────────── */
.bulk-actions[b-3dolnr7wlz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    padding: 0.75rem 0;
}

.select-all-label[b-3dolnr7wlz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
}

.bulk-separator[b-3dolnr7wlz] {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
}

.bulk-count[b-3dolnr7wlz] {
    color: #64748b;
    font-size: 0.85rem;
    font-style: italic;
}

.bulk-spacer[b-3dolnr7wlz] {
    flex: 1;
}

.bulk-message[b-3dolnr7wlz] {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.bulk-message.success[b-3dolnr7wlz] {
    color: #166534;
    background: #dcfce7;
}

/* ── Data Table ─────────────────────────────────────────────────────────────── */
.table-container[b-3dolnr7wlz] {
    overflow-x: auto;
    margin: 1rem 0;
}

.data-table[b-3dolnr7wlz] {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
}

.data-table thead tr[b-3dolnr7wlz] {
    background: #f8fafc;
}

.data-table th[b-3dolnr7wlz] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.data-table th.sortable[b-3dolnr7wlz] {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover[b-3dolnr7wlz] {
    background: #f1f5f9;
}

.sort-indicator[b-3dolnr7wlz] {
    margin-left: 0.25rem;
    font-size: 0.7rem;
}

.data-table td[b-3dolnr7wlz] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
}

.data-table tbody tr:last-child td[b-3dolnr7wlz] {
    border-bottom: none;
}

.clickable-row[b-3dolnr7wlz] {
    cursor: pointer;
    transition: background 0.2s;
}

.clickable-row:hover[b-3dolnr7wlz] {
    background: #f8fafc;
}

.row-selected[b-3dolnr7wlz] {
    background: #eff6ff !important;
}

/* Table Column Widths */
.col-check[b-3dolnr7wlz] { width: 40px; text-align: center; }
.col-date[b-3dolnr7wlz] { width: 110px; white-space: nowrap; }
.col-app[b-3dolnr7wlz] { width: 80px; }
.col-to[b-3dolnr7wlz] { max-width: 200px; }
.col-subject[b-3dolnr7wlz] { max-width: 250px; }
.col-status[b-3dolnr7wlz] { width: 110px; white-space: nowrap; }
.col-attempts[b-3dolnr7wlz] { width: 50px; }
.col-error[b-3dolnr7wlz] { max-width: 200px; }
.col-sent[b-3dolnr7wlz] { width: 80px; white-space: nowrap; }
.col-attach[b-3dolnr7wlz] { width: 40px; text-align: center; }
.col-actions[b-3dolnr7wlz] { width: 50px; text-align: center; }

/* Attachment link in table */
.attachment-link[b-3dolnr7wlz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.attachment-link:hover[b-3dolnr7wlz] {
    opacity: 1;
    transform: scale(1.15);
}

.truncate[b-3dolnr7wlz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center[b-3dolnr7wlz] {
    text-align: center;
}

.error-text[b-3dolnr7wlz] {
    color: #dc2626;
    font-size: 0.8rem;
}

.empty-cell[b-3dolnr7wlz] {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 2rem !important;
}

.loading-inline[b-3dolnr7wlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.loading-spinner-small[b-3dolnr7wlz] {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-3dolnr7wlz 1s linear infinite;
}

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

/* ── Status & App Badges ────────────────────────────────────────────────────── */
.status-badge[b-3dolnr7wlz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.status-badge.sent[b-3dolnr7wlz] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.failed[b-3dolnr7wlz] {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.processing[b-3dolnr7wlz] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.pending[b-3dolnr7wlz] {
    background: #f1f5f9;
    color: #475569;
}

.app-badge[b-3dolnr7wlz] {
    background: #e2e8f0;
    color: #475569;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Detail Button ──────────────────────────────────────────────────────────── */
.detail-btn[b-3dolnr7wlz] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.detail-btn:hover[b-3dolnr7wlz] {
    background: #f1f5f9;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.pagination[b-3dolnr7wlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.pagination-btn[b-3dolnr7wlz] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled)[b-3dolnr7wlz] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.pagination-btn:disabled[b-3dolnr7wlz] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-3dolnr7wlz] {
    padding: 0 1rem;
    color: #64748b;
    font-size: 0.85rem;
}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.modal-backdrop[b-3dolnr7wlz] {
    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;
}

.detail-modal[b-3dolnr7wlz] {
    background: white;
    border-radius: 16px;
    width: 600px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-header[b-3dolnr7wlz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3[b-3dolnr7wlz] {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.modal-id[b-3dolnr7wlz] {
    color: #64748b;
    font-weight: 400;
}

.modal-close[b-3dolnr7wlz] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 4px;
}

.modal-close:hover[b-3dolnr7wlz] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-3dolnr7wlz] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section[b-3dolnr7wlz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-section h4[b-3dolnr7wlz] {
    margin: 0;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 600;
}

.detail-grid[b-3dolnr7wlz] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.9rem;
}

.detail-label[b-3dolnr7wlz] {
    color: #64748b;
    font-weight: 500;
}

.detail-value[b-3dolnr7wlz] {
    color: #1e293b;
    word-break: break-word;
}

.error-section[b-3dolnr7wlz] {
    background: #fef2f2;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.error-section h4[b-3dolnr7wlz] {
    color: #dc2626;
}

.error-message[b-3dolnr7wlz] {
    margin: 0;
    color: #dc2626;
    font-size: 0.9rem;
    word-break: break-word;
}

/* Attachment section in modal */
.attachment-section[b-3dolnr7wlz] {
    background: #f0f9ff;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #bae6fd;
}

.attachment-section h4[b-3dolnr7wlz] {
    color: #0369a1;
}

.download-btn[b-3dolnr7wlz] {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.modal-footer[b-3dolnr7wlz] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .maily-stats[b-3dolnr7wlz] {
        grid-template-columns: repeat(4, 1fr);
        padding: 1rem 2rem;
    }

    .maily-header[b-3dolnr7wlz] {
        padding: 1.25rem 2rem;
    }

    .maily-content[b-3dolnr7wlz] {
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 1024px) {
    .maily-stats[b-3dolnr7wlz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-bar[b-3dolnr7wlz] {
        flex-wrap: wrap;
    }

    .filter-input[b-3dolnr7wlz] {
        flex: 1 1 100%;
        min-width: unset;
    }

    .filter-select[b-3dolnr7wlz] {
        flex: 1;
    }

    .filter-count[b-3dolnr7wlz] {
        flex: 0 0 100%;
        text-align: right;
        margin-top: 0.5rem;
    }
}

@media (max-width: 900px) {
    .maily-header[b-3dolnr7wlz] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .maily-stats[b-3dolnr7wlz] {
        padding: 1rem 1.5rem;
    }

    .maily-content[b-3dolnr7wlz] {
        padding: 1rem 1.5rem;
    }

    .bulk-actions[b-3dolnr7wlz] {
        flex-wrap: wrap;
    }
}

@media (max-width: 540px) {
    .maily-stats[b-3dolnr7wlz] {
        grid-template-columns: 1fr;
    }

    .filter-select[b-3dolnr7wlz] {
        flex: 1 1 100%;
    }

    .bulk-actions[b-3dolnr7wlz] {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-spacer[b-3dolnr7wlz] {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .maily-header[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .maily-stats[b-3dolnr7wlz] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .stat-card[b-3dolnr7wlz] {
    background: linear-gradient(135deg, var(--bg-secondary, #1e293b) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-color: var(--border-primary, #334155) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .stat-card.highlight[b-3dolnr7wlz] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

html.dark-mode .stat-card.error[b-3dolnr7wlz] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

html.dark-mode .stat-card.success[b-3dolnr7wlz] {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
}

html.dark-mode .stat-value[b-3dolnr7wlz] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .stat-label[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .maily-content[b-3dolnr7wlz] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .filter-bar[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
    border-radius: 12px 12px 0 0;
}

html.dark-mode .filter-input[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .filter-input[b-3dolnr7wlz]::placeholder {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .filter-input:focus[b-3dolnr7wlz] {
    border-color: var(--accent-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .filter-select[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
}

html.dark-mode .filter-select:focus[b-3dolnr7wlz] {
    border-color: var(--accent-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .filter-select option[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .filter-count[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .select-all-label[b-3dolnr7wlz] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .bulk-separator[b-3dolnr7wlz] {
    background: var(--border-primary, #334155);
}

html.dark-mode .bulk-count[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .bulk-message.success[b-3dolnr7wlz] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .data-table thead tr[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .data-table th[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #475569) !important;
}

html.dark-mode .data-table th.sortable:hover[b-3dolnr7wlz] {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .data-table td[b-3dolnr7wlz] {
    border-bottom-color: var(--border-primary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .data-table tbody tr[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .clickable-row:hover[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .row-selected[b-3dolnr7wlz] {
    background: rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .status-badge.sent[b-3dolnr7wlz] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .status-badge.failed[b-3dolnr7wlz] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

html.dark-mode .status-badge.processing[b-3dolnr7wlz] {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

html.dark-mode .status-badge.pending[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .app-badge[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .detail-btn:hover[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .pagination[b-3dolnr7wlz] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .pagination-btn[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .pagination-btn:hover:not(:disabled)[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .pagination-info[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modal-backdrop[b-3dolnr7wlz] {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .detail-modal[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-header[b-3dolnr7wlz] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .modal-header h3[b-3dolnr7wlz] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .modal-id[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modal-close[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modal-close:hover[b-3dolnr7wlz] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .detail-section h4[b-3dolnr7wlz] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .detail-label[b-3dolnr7wlz] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .detail-value[b-3dolnr7wlz] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .error-section[b-3dolnr7wlz] {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
}

html.dark-mode .error-section h4[b-3dolnr7wlz] {
    color: #f87171;
}

html.dark-mode .error-message[b-3dolnr7wlz] {
    color: #f87171;
}

html.dark-mode .attachment-section[b-3dolnr7wlz] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
}

html.dark-mode .attachment-section h4[b-3dolnr7wlz] {
    color: #60a5fa;
}

html.dark-mode .modal-footer[b-3dolnr7wlz] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .empty-cell[b-3dolnr7wlz] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .error-text[b-3dolnr7wlz] {
    color: #f87171;
}

html.dark-mode .loading-spinner-small[b-3dolnr7wlz] {
    border-color: var(--border-primary, #334155);
    border-top-color: var(--accent-primary, #60a5fa);
}

/* ════════════════════════════════════════════════════════════════════════════
   MAILY-SPECIFIC DARK MODE - HIGH SPECIFICITY
   ════════════════════════════════════════════════════════════════════════════ */

/* Card wrapper dark mode - gebruik maily-card voor hoogste specificity */
html.dark-mode .maily-card[b-3dolnr7wlz] {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .card[b-3dolnr7wlz] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .table-container[b-3dolnr7wlz] {
    background: #1e293b !important;
}

html.dark-mode .data-table[b-3dolnr7wlz] {
    background: #1e293b !important;
}

/* Filter bar met maily-specifieke class */
html.dark-mode .maily-filter-bar[b-3dolnr7wlz],
html.dark-mode .filter-bar[b-3dolnr7wlz] {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

/* Bulk actions met maily-specifieke class */
html.dark-mode .maily-bulk-actions[b-3dolnr7wlz],
html.dark-mode .bulk-actions[b-3dolnr7wlz] {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

/* Selected row - zeer hoge specificity */
html.dark-mode .row-selected[b-3dolnr7wlz],
html.dark-mode tr.row-selected[b-3dolnr7wlz],
html.dark-mode .data-table tbody tr.row-selected[b-3dolnr7wlz] {
    background: rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .data-table tbody tr.row-selected td[b-3dolnr7wlz] {
    background: transparent !important;
}

/* Checkbox styling for dark mode */
html.dark-mode input[type="checkbox"][b-3dolnr7wlz] {
    accent-color: var(--accent-primary, #60a5fa);
}

/* App badge dark mode enhancement */
html.dark-mode .app-badge[b-3dolnr7wlz] {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border: 1px solid #475569 !important;
}

/* Search input icon visibility */
html.dark-mode .filter-input.search[b-3dolnr7wlz],
html.dark-mode .filter-input[b-3dolnr7wlz] {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

html.dark-mode .filter-select[b-3dolnr7wlz] {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
/* /Components/Pages/Admin/ModelsEdit.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   MODEL EDIT - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ???????????????????????????????????????????????????????????????????????????? */

/* ?? Header ??????????????????????????????????????????????????????????????????? */
.me-header[b-vpna10ae6l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* ?? Content Area ????????????????????????????????????????????????????????????? */
.me-content[b-vpna10ae6l] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

/* ?? Settings Card override ??????????????????????????????????????????????????? */
.me-content .settings-form[b-vpna10ae6l] {
    max-width: 800px;
}

/* ?? Form Grid Layouts ???????????????????????????????????????????????????????? */
.row-2[b-vpna10ae6l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 2rem;
}

@media (max-width: 720px) {
    .row-2[b-vpna10ae6l] {
        grid-template-columns: 1fr;
    }
    
    .me-header[b-vpna10ae6l] {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .me-content[b-vpna10ae6l] {
        padding: 1.5rem 1.5rem;
    }
}

/* ?? Form Groups (override) ??????????????????????????????????????????????????? */
.me-content .settings-form .form-group label[b-vpna10ae6l] {
    font-size: 0.85rem;
}

.settings-form .help[b-vpna10ae6l] {
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* ?? Input Styling ???????????????????????????????????????????????????????????? */
.settings-form .input[b-vpna10ae6l] {
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form .input:focus[b-vpna10ae6l] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ?? Textarea Styling ????????????????????????????????????????????????????????? */
.settings-form .textarea[b-vpna10ae6l] {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form .textarea:focus[b-vpna10ae6l] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ?? Checkbox Group ??????????????????????????????????????????????????????????? */
.checkbox-group[b-vpna10ae6l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox-label[b-vpna10ae6l] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-weight: 500;
    color: #1e293b;
}

.checkbox-label input[type="checkbox"][b-vpna10ae6l] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    cursor: pointer;
}

.checkbox-help[b-vpna10ae6l] {
    display: block;
    margin-top: 0.25rem;
    margin-left: 1.625rem;
    color: #64748b;
    font-size: 0.8rem;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .me-header[b-vpna10ae6l] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .me-content[b-vpna10ae6l] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .checkbox-label[b-vpna10ae6l] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .checkbox-help[b-vpna10ae6l] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .settings-form .help[b-vpna10ae6l] {
    color: var(--text-tertiary, #94a3b8);
}

/* Provider capability note (non-OpenAI providers) */
.provider-capabilities-note[b-vpna10ae6l] {
    margin: 0.5rem 0 0;
    padding: 0.85rem 1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 6px;
    color: #1e3a5f;
    font-size: 0.9rem;
    line-height: 1.5;
}

html.dark-mode .provider-capabilities-note[b-vpna10ae6l] {
    background: rgba(59, 130, 246, 0.12);
    border-left-color: #3b82f6;
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/OfferingModal.razor.rz.scp.css */
/* ??????????????????????????????????????????????????????????????????????????????
   OFFERING MODAL - Provider product selectie
   ?????????????????????????????????????????????????????????????????????????????? */

/* ?? Modal Layout ????????????????????????????????????????????????????????????? */
.modal-backdrop[b-j1mvas5xbb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.offering-modal[b-j1mvas5xbb] {
    position: fixed;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-j1mvas5xbb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.modal-header h3[b-j1mvas5xbb] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-close[b-j1mvas5xbb] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0.25rem;
    border-radius: 4px;
    line-height: 1;
}

.modal-close:hover[b-j1mvas5xbb] {
    background: #e2e8f0;
    color: #1e293b;
}

.modal-body[b-j1mvas5xbb] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* ?? Info Message ????????????????????????????????????????????????????????????? */
.info-message[b-j1mvas5xbb] {
    padding: 1rem 1.25rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 0.9rem;
}

/* ?? Filter Row ??????????????????????????????????????????????????????????????? */
.filter-row[b-j1mvas5xbb] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: nowrap;
}

.filter-input[b-j1mvas5xbb] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
}

.filter-input:focus[b-j1mvas5xbb] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-input.size-filter[b-j1mvas5xbb] {
    flex: 0 0 100px;
    min-width: 100px;
}

.filter-select[b-j1mvas5xbb] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    background: white;
    flex: 1;
    min-width: 0;
}

.loading-indicator[b-j1mvas5xbb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ?? Country Selector ????????????????????????????????????????????????????????? */
.country-selector[b-j1mvas5xbb] {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

.country-label[b-j1mvas5xbb] {
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #334155;
    font-size: 0.9rem;
}

.country-options[b-j1mvas5xbb] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.country-option[b-j1mvas5xbb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #475569;
}

.country-option.disabled[b-j1mvas5xbb] {
    opacity: 0.5;
    pointer-events: none;
}

/* ?? Filter Notices ??????????????????????????????????????????????????????????? */
.filter-notice[b-j1mvas5xbb] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.filter-notice.success[b-j1mvas5xbb] {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.filter-notice.warning[b-j1mvas5xbb] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* ?? Loading & Messages ??????????????????????????????????????????????????????? */
.loading-container[b-j1mvas5xbb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: #64748b;
}

.spinner[b-j1mvas5xbb] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-j1mvas5xbb 0.8s linear infinite;
}

.spinner-small[b-j1mvas5xbb] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-j1mvas5xbb 0.75s linear infinite;
}

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

.error-message[b-j1mvas5xbb] {
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    text-align: center;
}

.empty-message[b-j1mvas5xbb] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* ?? Offerings List ??????????????????????????????????????????????????????????? */
.offerings-list[b-j1mvas5xbb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.region-group[b-j1mvas5xbb] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
}

.region-title[b-j1mvas5xbb] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.category-title[b-j1mvas5xbb] {
    margin: 0.75rem 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
}

/* ?? Offerings Table ?????????????????????????????????????????????????????????? */
.offerings-table[b-j1mvas5xbb] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
}

.offerings-table thead[b-j1mvas5xbb] {
    background: #f1f5f9;
}

.offerings-table th[b-j1mvas5xbb] {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.offerings-table td[b-j1mvas5xbb] {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    color: #475569;
}

.offerings-table tbody tr:last-child td[b-j1mvas5xbb] {
    border-bottom: none;
}

.offerings-table tbody tr:hover[b-j1mvas5xbb] {
    background: #f8fafc;
}

.offerings-table tr.current-offering[b-j1mvas5xbb] {
    background: #fef3c7;
}

.offerings-table tr.current-offering:hover[b-j1mvas5xbb] {
    background: #fde68a;
}

.current-badge[b-j1mvas5xbb] {
    display: inline-block;
    background: #f59e0b;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ?? Action Buttons ??????????????????????????????????????????????????????????? */
.action-btn[b-j1mvas5xbb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-btn.primary[b-j1mvas5xbb] {
    background: #3b82f6;
    color: white;
}

.action-btn.primary:hover:not(:disabled)[b-j1mvas5xbb] {
    background: #2563eb;
}

.action-btn.small[b-j1mvas5xbb] {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.action-btn:disabled[b-j1mvas5xbb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon[b-j1mvas5xbb] {
    font-size: 0.9em;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .modal-backdrop[b-j1mvas5xbb] {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .offering-modal[b-j1mvas5xbb] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-header[b-j1mvas5xbb] {
    background: var(--bg-tertiary, #334155);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .modal-header h3[b-j1mvas5xbb] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .modal-close[b-j1mvas5xbb] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .modal-close:hover[b-j1mvas5xbb] {
    background: var(--bg-hover, #475569);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .info-message[b-j1mvas5xbb] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

html.dark-mode .filter-input[b-j1mvas5xbb],
html.dark-mode .filter-select[b-j1mvas5xbb] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .filter-input[b-j1mvas5xbb]::placeholder {
    color: var(--text-muted, #64748b);
}

html.dark-mode .filter-select option[b-j1mvas5xbb] {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .loading-indicator[b-j1mvas5xbb] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .country-selector[b-j1mvas5xbb] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .country-label[b-j1mvas5xbb] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .country-option[b-j1mvas5xbb] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .filter-notice.success[b-j1mvas5xbb] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

html.dark-mode .filter-notice.warning[b-j1mvas5xbb] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

html.dark-mode .loading-container[b-j1mvas5xbb] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .spinner[b-j1mvas5xbb] {
    border-color: var(--border-primary, #334155);
    border-top-color: var(--accent-primary, #60a5fa);
}

html.dark-mode .error-message[b-j1mvas5xbb] {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

html.dark-mode .empty-message[b-j1mvas5xbb] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .region-group[b-j1mvas5xbb] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .region-title[b-j1mvas5xbb] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .category-title[b-j1mvas5xbb] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .offerings-table[b-j1mvas5xbb] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .offerings-table thead[b-j1mvas5xbb] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .offerings-table th[b-j1mvas5xbb] {
    color: var(--text-tertiary, #94a3b8);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .offerings-table td[b-j1mvas5xbb] {
    color: var(--text-secondary, #cbd5e1);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .offerings-table tbody tr[b-j1mvas5xbb] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .offerings-table tbody tr:hover[b-j1mvas5xbb] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .offerings-table tr.current-offering[b-j1mvas5xbb] {
    background: rgba(251, 191, 36, 0.15);
}

html.dark-mode .offerings-table tr.current-offering:hover[b-j1mvas5xbb] {
    background: rgba(251, 191, 36, 0.2);
}
/* /Components/Pages/Admin/OperationsDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   OPERATIONS DASHBOARD - Professional Monitoring UI
   Supports both light and dark mode via CSS variables
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES (inherits from app.css) ───────────────────────────────── */
.ops-dashboard[b-jsmhyzmfs6] {
    --card-bg: var(--surface-color, #ffffff);
    --card-border: var(--border-color, #e2e8f0);
    --text-primary: var(--text-color, #1e293b);
    --text-secondary: var(--text-muted, #64748b);
    --text-muted: var(--text-muted, #94a3b8);
    --bg-subtle: var(--surface-secondary, #f8fafc);
    --primary: var(--accent-color, #3b82f6);
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
}

.ops-dashboard[b-jsmhyzmfs6] {
    min-height: 100vh;
    background: var(--bg-color, #f8fafc);
    padding: 0 1rem 2rem;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────── */
.ops-header[b-jsmhyzmfs6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1.5rem;
}

.header-left[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breadcrumb[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.breadcrumb-link[b-jsmhyzmfs6] {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb-link:hover[b-jsmhyzmfs6] {
    color: var(--primary);
}

.breadcrumb-sep[b-jsmhyzmfs6] {
    color: var(--text-muted);
}

.breadcrumb-current[b-jsmhyzmfs6] {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-book[b-jsmhyzmfs6] {
    color: var(--primary);
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.page-title[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.title-icon[b-jsmhyzmfs6] {
    font-size: 1.5rem;
}

.last-updated[b-jsmhyzmfs6] {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-indicator[b-jsmhyzmfs6] {
    color: var(--success);
    font-weight: 600;
    font-size: 0.75rem;
    animation: pulse-b-jsmhyzmfs6 2s infinite;
}

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

.header-actions[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auto-refresh-toggle[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.auto-refresh-toggle input[b-jsmhyzmfs6] {
    display: none;
}

.toggle-slider[b-jsmhyzmfs6] {
    width: 40px;
    height: 22px;
    background: var(--text-muted);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}

.toggle-slider[b-jsmhyzmfs6]::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.auto-refresh-toggle input:checked + .toggle-slider[b-jsmhyzmfs6] {
    background: var(--success);
}

.auto-refresh-toggle input:checked + .toggle-slider[b-jsmhyzmfs6]::after {
    transform: translateX(18px);
}

.toggle-label[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.btn-refresh[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-refresh:hover:not(:disabled)[b-jsmhyzmfs6] {
    background: #2563eb;
    filter: brightness(1.1);
}

.btn-refresh:active:not(:disabled)[b-jsmhyzmfs6] {
    transform: scale(0.98);
}

.btn-refresh:disabled[b-jsmhyzmfs6] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-refresh svg[b-jsmhyzmfs6] {
    width: 18px;
    height: 18px;
}

.spinner-sm[b-jsmhyzmfs6] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-jsmhyzmfs6 1s linear infinite;
}

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

/* ─── ALERTS BANNER ───────────────────────────────────────────────────────── */
.alerts-banner[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.alert[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    animation: slideIn-b-jsmhyzmfs6 0.3s ease-out;
}

@keyframes slideIn-b-jsmhyzmfs6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-critical[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-error[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-warning[b-jsmhyzmfs6] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.alert-info[b-jsmhyzmfs6] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.alert-icon[b-jsmhyzmfs6] {
    font-size: 1.25rem;
}

.alert-content[b-jsmhyzmfs6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.alert-content strong[b-jsmhyzmfs6] {
    font-size: 0.9rem;
}

.alert-content span[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.alert-action[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

.alert-action:hover[b-jsmhyzmfs6] {
    opacity: 1;
}

/* ─── MAIN GRID ───────────────────────────────────────────────────────────── */
.ops-grid[b-jsmhyzmfs6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

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

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

/* ─── CARDS ───────────────────────────────────────────────────────────────── */
.card[b-jsmhyzmfs6] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--card-border);
}

.card-title[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
}

/* ─── METRIC CARDS ────────────────────────────────────────────────────────── */
.metric-card[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-header[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric-icon[b-jsmhyzmfs6] {
    font-size: 1.25rem;
}

.metric-label[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.metric-value[b-jsmhyzmfs6] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.metric-value.text-danger[b-jsmhyzmfs6] {
    color: var(--danger);
}

.metric-change[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    font-weight: 500;
}

.metric-change.positive[b-jsmhyzmfs6] {
    color: var(--success);
}

.metric-change.negative[b-jsmhyzmfs6] {
    color: var(--danger);
}

.metric-sub[b-jsmhyzmfs6] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
}

.metric-mini[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.metric-breakdown[b-jsmhyzmfs6] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.error-rate-badge[b-jsmhyzmfs6] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.error-rate-badge.good[b-jsmhyzmfs6] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.error-rate-badge.warning[b-jsmhyzmfs6] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.error-rate-badge.danger[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

/* ─── WORKERS CARD ────────────────────────────────────────────────────────── */
.workers-card[b-jsmhyzmfs6] {
    grid-column: span 2;
}

.workers-grid[b-jsmhyzmfs6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

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

.worker-item[b-jsmhyzmfs6] {
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--card-border);
}

.worker-item.unhealthy[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.worker-header[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.worker-icon[b-jsmhyzmfs6] {
    font-size: 1.25rem;
}

.worker-name[b-jsmhyzmfs6] {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.worker-status[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-dot[b-jsmhyzmfs6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.green[b-jsmhyzmfs6] {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.status-dot.red[b-jsmhyzmfs6] {
    background: var(--danger);
    box-shadow: 0 0 6px var(--danger);
    animation: blink-b-jsmhyzmfs6 1s infinite;
}

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

.worker-stats[b-jsmhyzmfs6] {
    display: flex;
    gap: 1rem;
}

.worker-stats .stat[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.worker-stats .stat-value[b-jsmhyzmfs6] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.worker-stats .stat-value.text-danger[b-jsmhyzmfs6] {
    color: var(--danger);
}

.worker-stats .stat-label[b-jsmhyzmfs6] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ─── QUEUES CARD ─────────────────────────────────────────────────────────── */
.queues-card[b-jsmhyzmfs6] {
    grid-column: span 2;
}

.queues-grid[b-jsmhyzmfs6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

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

.queue-item[b-jsmhyzmfs6] {
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 1rem;
}

.queue-header[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.queue-icon[b-jsmhyzmfs6] {
    font-size: 1.1rem;
}

.queue-name[b-jsmhyzmfs6] {
    font-weight: 600;
    color: var(--text-primary);
}

.queue-bars[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.queue-bar[b-jsmhyzmfs6] {
    position: relative;
    height: 24px;
    background: var(--border-primary, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill[b-jsmhyzmfs6] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-fill.pending[b-jsmhyzmfs6] {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.bar-fill.processing[b-jsmhyzmfs6] {
    background: linear-gradient(90deg, var(--primary), #60a5fa);
}

.bar-label[b-jsmhyzmfs6] {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
}

.queue-stats[b-jsmhyzmfs6] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.stat-success[b-jsmhyzmfs6] {
    color: var(--success);
}

.stat-failed[b-jsmhyzmfs6] {
    color: var(--danger);
}

.stat-time[b-jsmhyzmfs6] {
    color: var(--text-muted);
}

/* ─── FUNNEL CARD ─────────────────────────────────────────────────────────── */
.funnel-card[b-jsmhyzmfs6] {
    grid-column: span 2;
}

.funnel-visual[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.funnel-step[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.funnel-bar[b-jsmhyzmfs6] {
    height: 32px;
    min-width: 60px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    transition: width 0.5s ease;
}

.funnel-count[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.funnel-info[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 100px;
}

.funnel-label[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.funnel-rate[b-jsmhyzmfs6] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.funnel-summary[b-jsmhyzmfs6] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
}

.summary-item[b-jsmhyzmfs6] {
    text-align: center;
}

.summary-value[b-jsmhyzmfs6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

.summary-label[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ─── ERRORS CARD ─────────────────────────────────────────────────────────── */
.errors-card[b-jsmhyzmfs6] {
    grid-column: span 2;
}

.errors-list[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.error-item[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    font-size: 0.85rem;
}

.error-source[b-jsmhyzmfs6] {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.error-source.character[b-jsmhyzmfs6] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.error-source.page[b-jsmhyzmfs6] {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.error-source.email[b-jsmhyzmfs6] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.error-message[b-jsmhyzmfs6] {
    flex: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.error-time[b-jsmhyzmfs6] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.no-errors[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-muted);
}

.no-errors-icon[b-jsmhyzmfs6] {
    font-size: 2rem;
}

/* ─── CHART CARD ──────────────────────────────────────────────────────────── */
.chart-card[b-jsmhyzmfs6] {
    grid-column: span 4;
}

@media (max-width: 1400px) {
    .chart-card[b-jsmhyzmfs6] {
        grid-column: span 2;
    }
}

.chart-container[b-jsmhyzmfs6] {
    height: 200px;
}

.mini-chart[b-jsmhyzmfs6] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.chart-bar[b-jsmhyzmfs6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 8px;
}

.bar-orders[b-jsmhyzmfs6] {
    background: linear-gradient(180deg, var(--primary), #60a5fa);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.chart-legend[b-jsmhyzmfs6] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.legend-item[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legend-item .dot[b-jsmhyzmfs6] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-item .dot.orders[b-jsmhyzmfs6] {
    background: var(--primary);
}

/* ─── WEBHOOKS CARD ───────────────────────────────────────────────────────── */
.webhooks-card[b-jsmhyzmfs6] {
    grid-column: span 4;
}

@media (max-width: 1400px) {
    .webhooks-card[b-jsmhyzmfs6] {
        grid-column: span 2;
    }
}

.webhooks-grid[b-jsmhyzmfs6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.webhook-provider[b-jsmhyzmfs6] {
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--card-border);
}

.webhook-provider-header[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.webhook-provider-icon[b-jsmhyzmfs6] {
    font-size: 1.1rem;
}

.webhook-provider-name[b-jsmhyzmfs6] {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.webhook-provider-rate[b-jsmhyzmfs6] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.webhook-provider-rate.good[b-jsmhyzmfs6] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.webhook-provider-rate.warning[b-jsmhyzmfs6] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.webhook-provider-rate.danger[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.webhook-provider-stats[b-jsmhyzmfs6] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.stat-total[b-jsmhyzmfs6] {
    color: var(--text-muted);
}

.webhook-provider-last[b-jsmhyzmfs6] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.webhook-recent-details[b-jsmhyzmfs6] {
    margin-top: 1rem;
    border-top: 1px solid var(--card-border);
    padding-top: 0.75rem;
}

.webhook-recent-details summary[b-jsmhyzmfs6] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.webhook-recent-list[b-jsmhyzmfs6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.webhook-event-item[b-jsmhyzmfs6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    font-size: 0.8rem;
}

.webhook-event-item.invalid[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.08);
}

.webhook-event-type[b-jsmhyzmfs6] {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 60px;
}

.webhook-event-ip[b-jsmhyzmfs6] {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 0.75rem;
}

.webhook-event-time[b-jsmhyzmfs6] {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   Uses explicit color values to avoid CSS variable scoping conflicts
   with admin-shared.css wildcard rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variable overrides on container ────────────────────────────────────── */
html.dark-mode .ops-dashboard[b-jsmhyzmfs6] {
    --card-bg: #1e293b;
    --card-border: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --bg-subtle: #334155;
    --primary: #60a5fa;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;

    background: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ─── Grid background ────────────────────────────────────────────────────── */
html.dark-mode .ops-grid[b-jsmhyzmfs6] {
    background: transparent !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
html.dark-mode .ops-header[b-jsmhyzmfs6] {
    border-bottom-color: #334155 !important;
    background: transparent !important;
}

html.dark-mode .page-title[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .breadcrumb-link[b-jsmhyzmfs6] {
    color: #60a5fa !important;
}

html.dark-mode .breadcrumb-sep[b-jsmhyzmfs6],
html.dark-mode .breadcrumb-current[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .breadcrumb-book[b-jsmhyzmfs6] {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .last-updated[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
html.dark-mode .card[b-jsmhyzmfs6] {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Card titles (h3) - CRITICAL: explicit color to override global h1,h2,h3 { color: var(--text-dark) } */
html.dark-mode .card-title[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode h3.card-title[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

/* ─── Metric cards ───────────────────────────────────────────────────────── */
html.dark-mode .metric-header[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .metric-label[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .metric-value[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .metric-change[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .metric-sub[b-jsmhyzmfs6] {
    border-top-color: #334155 !important;
    color: #94a3b8 !important;
    background: transparent !important;
}

html.dark-mode .metric-mini[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
    background: transparent !important;
}

html.dark-mode .metric-breakdown[b-jsmhyzmfs6] {
    color: #cbd5e1 !important;
    background: transparent !important;
}

/* ─── Worker items ───────────────────────────────────────────────────────── */
html.dark-mode .workers-grid[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .worker-item[b-jsmhyzmfs6] {
    background: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode .worker-item.unhealthy[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .worker-header[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .worker-name[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .worker-status[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .worker-stats[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .worker-stats .stat[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .worker-stats .stat-value[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
    background: transparent !important;
}

html.dark-mode .worker-stats .stat-label[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* ─── Queue items ────────────────────────────────────────────────────────── */
html.dark-mode .queues-grid[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .queue-item[b-jsmhyzmfs6] {
    background: #334155 !important;
    border: 1px solid #475569 !important;
    border-radius: 8px;
}

html.dark-mode .queue-header[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .queue-name[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .queue-bars[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .queue-stats[b-jsmhyzmfs6] {
    background: transparent !important;
}

/* ─── Error items ────────────────────────────────────────────────────────── */
html.dark-mode .errors-list[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .error-item[b-jsmhyzmfs6] {
    background: #334155 !important;
}

html.dark-mode .error-message[b-jsmhyzmfs6] {
    color: #cbd5e1 !important;
}

html.dark-mode .error-time[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .no-errors[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
html.dark-mode .alerts-banner[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .alert-content[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .alert-content strong[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .alert-content span[b-jsmhyzmfs6] {
    color: #cbd5e1 !important;
}

html.dark-mode .alert-action[b-jsmhyzmfs6] {
    color: inherit !important;
}

/* ─── Funnel ─────────────────────────────────────────────────────────────── */
html.dark-mode .funnel-visual[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .funnel-step[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .funnel-info[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .funnel-label[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .funnel-rate[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .funnel-summary[b-jsmhyzmfs6] {
    border-top-color: #334155 !important;
    background: transparent !important;
}

html.dark-mode .summary-value[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .summary-label[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* ─── Chart ──────────────────────────────────────────────────────────────── */
html.dark-mode .chart-container[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .mini-chart[b-jsmhyzmfs6] {
    border-bottom-color: #334155 !important;
    background: transparent !important;
}

html.dark-mode .chart-legend[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .legend-item[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
html.dark-mode .ops-footer[b-jsmhyzmfs6] {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top-color: #334155 !important;
}

/* ─── Webhooks ───────────────────────────────────────────────────────────── */
html.dark-mode .webhooks-grid[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .webhook-provider[b-jsmhyzmfs6] {
    background: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode .webhook-provider-header[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .webhook-provider-name[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .webhook-provider-stats[b-jsmhyzmfs6] {
    background: transparent !important;
}

html.dark-mode .webhook-provider-last[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .webhook-recent-details[b-jsmhyzmfs6] {
    border-top-color: #475569 !important;
}

html.dark-mode .webhook-recent-details summary[b-jsmhyzmfs6] {
    color: #cbd5e1 !important;
}

html.dark-mode .webhook-event-item[b-jsmhyzmfs6] {
    background: #1e293b !important;
}

html.dark-mode .webhook-event-item.invalid[b-jsmhyzmfs6] {
    background: rgba(239, 68, 68, 0.15) !important;
}

html.dark-mode .webhook-event-type[b-jsmhyzmfs6] {
    color: #f1f5f9 !important;
}

html.dark-mode .webhook-event-ip[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}

html.dark-mode .webhook-event-time[b-jsmhyzmfs6] {
    color: #94a3b8 !important;
}
/* /Components/Pages/Admin/OrderDetails.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   ORDER DETAILS - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
.order-header[b-ayobffu2ey] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.header-title-row[b-ayobffu2ey] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Status Badges ──────────────────────────────────────────────────────────── */
.payment-badge[b-ayobffu2ey],
.delivery-badge[b-ayobffu2ey] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.payment-badge.paid[b-ayobffu2ey] { background: #dcfce7; color: #166534; }
.payment-badge.pending[b-ayobffu2ey] { background: #fef3c7; color: #92400e; }
.payment-badge.failed[b-ayobffu2ey] { background: #fee2e2; color: #dc2626; }
.payment-badge.cancelled[b-ayobffu2ey] { background: #f3f4f6; color: #6b7280; }

.delivery-badge.delivered[b-ayobffu2ey] { background: #dcfce7; color: #166534; }
.delivery-badge.shipped[b-ayobffu2ey] { background: #dbeafe; color: #1d4ed8; }
.delivery-badge.processing[b-ayobffu2ey] { background: #fef3c7; color: #92400e; }
.delivery-badge.pending[b-ayobffu2ey] { background: #f3f4f6; color: #6b7280; }
.delivery-badge.cancelled[b-ayobffu2ey] { background: #fee2e2; color: #dc2626; }

/* ── Status Progress Section ────────────────────────────────────────────────── */
.status-progress-section[b-ayobffu2ey] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 3rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.progress-step[b-ayobffu2ey] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.step-icon[b-ayobffu2ey] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.progress-step.completed .step-icon[b-ayobffu2ey] {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

.progress-step.processing .step-icon[b-ayobffu2ey] {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
    animation: pulse-b-ayobffu2ey 1.5s infinite;
}

@keyframes pulse-b-ayobffu2ey {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.step-label[b-ayobffu2ey] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.progress-step.completed .step-label[b-ayobffu2ey] {
    color: #166534;
}

.progress-connector[b-ayobffu2ey] {
    width: 40px;
    height: 3px;
    background: #e2e8f0;
    margin: 0 0.25rem;
    margin-bottom: 1.5rem;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.progress-connector.active[b-ayobffu2ey] {
    background: #22c55e;
}

/* ── Main Layout ────────────────────────────────────────────────────────────── */
.order-details-page .admin-page[b-ayobffu2ey] {
    min-height: calc(100vh - 200px);
}

.col-left[b-ayobffu2ey],
.col-right[b-ayobffu2ey] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* mobiel */
@media (max-width: 900px) {
    .order-header[b-ayobffu2ey] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }
    
    .status-progress-section[b-ayobffu2ey] {
        padding: 1rem;
        overflow-x: auto;
    }
    
    .progress-connector[b-ayobffu2ey] {
        width: 20px;
    }
}

/* ---------- adressen ---------- */
.addr-grid[b-ayobffu2ey] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 2rem;
}

.addr-block[b-ayobffu2ey] {
    margin: 0;
}

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

/* ---------- personages + boodschap ---------- */
.char-wrap[b-ayobffu2ey] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.char-grid[b-ayobffu2ey] {
    flex: 1 1 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
}

    .char-grid figure[b-ayobffu2ey] {
        margin: 0;
        text-align: center;
    }

    .char-grid img[b-ayobffu2ey] {
        width: 100%;
        aspect-ratio: 2 / 3;
        object-fit: contain;
        border-radius: var(--radius);
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
    }

    .char-grid figcaption[b-ayobffu2ey] {
        margin-top: .3rem;
        font-size: .8rem;
        line-height: 1.3;
    }

.char-type[b-ayobffu2ey] {
    color: #556;
}

.personal-block[b-ayobffu2ey] {
    flex: 1 1 260px;
    max-width: 400px;
}

.personal-msg[b-ayobffu2ey],
.order-remark[b-ayobffu2ey] {
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: .95rem;
    max-width: 60ch;
}

.placeholder[b-ayobffu2ey] {
    color: #777;
    font-style: italic;
}

/* ---------- price-table ---------- */
.tbl[b-ayobffu2ey] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .tbl thead[b-ayobffu2ey] {
        background: #f6f6f6;
    }

    .tbl th[b-ayobffu2ey],
    .tbl td[b-ayobffu2ey] {
        padding: .55rem .75rem;
        border-bottom: 1px solid #e6e6e6;
    }

        .tbl th:first-child[b-ayobffu2ey],
        .tbl td:first-child[b-ayobffu2ey] {
            text-align: left;
        }

    .tbl th[b-ayobffu2ey] {
        font-weight: 600;
    }

    .tbl tbody tr:last-child td[b-ayobffu2ey] {
        border-bottom: none;
    }

.discount-row td[b-ayobffu2ey] {
    color: #047a04;
    font-weight: 500;
}

.total-row td[b-ayobffu2ey] {
    font-weight: 700;
}

.price-table[b-ayobffu2ey] {
    table-layout: fixed; /* stabiele kolombreedte */
}

    /* Numerieke kolommen rechts uitlijnen */
    .price-table th:nth-child(n + 2)[b-ayobffu2ey],
    .price-table td:nth-child(n + 2)[b-ayobffu2ey] {
        text-align: right;
        white-space: nowrap; /* geen afbreken bedragen */
    }

    /* Optioneel: vaste breedten voor rustiger layout */
    .price-table th:nth-child(2)[b-ayobffu2ey],
    .price-table td:nth-child(2)[b-ayobffu2ey] {
        width: 60px;
    }
    /* Aantal   */
    .price-table th:nth-child(3)[b-ayobffu2ey],
    .price-table td:nth-child(3)[b-ayobffu2ey],
    .price-table th:nth-child(4)[b-ayobffu2ey],
    .price-table td:nth-child(4)[b-ayobffu2ey],
    .price-table th:nth-child(5)[b-ayobffu2ey],
    .price-table td:nth-child(5)[b-ayobffu2ey] {
        width: 110px;
    }
/* Prijs‐kolommen */
.bookRun-card .tbl th:nth-child(6)[b-ayobffu2ey],
.bookRun-card .tbl td:nth-child(6)[b-ayobffu2ey] {
    text-align: center;
    width: 80px; /* kies wat mooi is */
}

.thumb[b-ayobffu2ey] {
    width: 48px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Specifieke uitlijning voor de Image-runs-tabel */
.charRun-card .tbl[b-ayobffu2ey] {
    table-layout: auto; /* geen geforceerde fixed-layout meer   */
}

    /* Standaard links uitlijnen – behalve ID en datum indien gewenst   */
    .charRun-card .tbl th[b-ayobffu2ey],
    .charRun-card .tbl td[b-ayobffu2ey] {
        text-align: left;
    }

        /* ID-kolom: iets smaller, links uitlijnen voor nette kolomstart    */
        .charRun-card .tbl th:nth-child(1)[b-ayobffu2ey],
        .charRun-card .tbl td:nth-child(1)[b-ayobffu2ey] {
            width: 70px; /* vaste smalle breedte                 */
            text-align: left; /* idem voor waarde                     */
        }

        /* Status & Bestand centreren voor rustiger beeld                   */
        .charRun-card .tbl th:nth-child(3)[b-ayobffu2ey],
        .charRun-card .tbl td:nth-child(3)[b-ayobffu2ey],
        .charRun-card .tbl th:nth-child(4)[b-ayobffu2ey],
        .charRun-card .tbl td:nth-child(4)[b-ayobffu2ey] {
            text-align: center;
        }

        /* Datum: nooit afbreken en rechts uitlijnen                        */
        .charRun-card .tbl th:nth-child(5)[b-ayobffu2ey],
        .charRun-card .tbl td:nth-child(5)[b-ayobffu2ey] {
            white-space: nowrap;
            text-align: right;
        }

/* =========== AANPASSING START (Page-runs tabel) =========== */
.bookRun-card .tbl[b-ayobffu2ey] {
    table-layout: auto;
}

    .bookRun-card .tbl th[b-ayobffu2ey],
    .bookRun-card .tbl td[b-ayobffu2ey] {
        text-align: left;
    }

        .bookRun-card .tbl th:nth-child(1)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(1)[b-ayobffu2ey] { /* ID */
            width: 70px;
        }

        .bookRun-card .tbl th:nth-child(2)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(2)[b-ayobffu2ey] { /* Pagina-nr */
            width: 90px;
            text-align: center;
        }

        .bookRun-card .tbl th:nth-child(3)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(3)[b-ayobffu2ey] { /* Status */
            width: 120px;
            text-align: center;
        }

        .bookRun-card .tbl th:nth-child(4)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(4)[b-ayobffu2ey],
        .bookRun-card .tbl th:nth-child(5)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(5)[b-ayobffu2ey] { /* Datums */
            white-space: nowrap;
            text-align: right;
        }

        /* OrderDetails.razor.css */
        /* kosten-kolom – smal & rechts uitlijnen */
        .charRun-card .tbl th:nth-child(4)[b-ayobffu2ey],
        .charRun-card .tbl td:nth-child(4)[b-ayobffu2ey],
        .bookRun-card .tbl th:nth-child(4)[b-ayobffu2ey],
        .bookRun-card .tbl td:nth-child(4)[b-ayobffu2ey] {
            text-align: right;
            width: 90px;
            white-space: nowrap;
        }

/* fout-icoon */
.err[b-ayobffu2ey] {
    color: #e00000;
    font-size: 1.25rem;
    cursor: help;
}

.odPersonage[b-ayobffu2ey] {
    max-width: 100px;
}
/* ---------- buttons ---------- */
.btn.secondary[b-ayobffu2ey] {
    background: var(--text-dark, #0d2545);
    color: #fff;
    border: none;
    padding: .65rem 1.6rem;
    border-radius: var(--radius);
    cursor: pointer;
}

    .btn.secondary:hover[b-ayobffu2ey] {
        filter: brightness(1.07);
    }
.error-row td[b-ayobffu2ey] {
    color: #e00000;
    background: #fff5f5;
    padding: .6rem .75rem;
    font-style: italic;
}

/* ---------- Modal styling ---------- */
.modal[b-ayobffu2ey] {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    z-index: 4000;
    overflow-y: auto;
}

    .modal.is-visible[b-ayobffu2ey] {
        display: flex;
    }

.modal-content[b-ayobffu2ey] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    width: 100%;
    max-width: 600px;
    padding: 2rem 2.2rem;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    animation: modal-pop-b-ayobffu2ey .25s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.modal-lg[b-ayobffu2ey] {
    max-width: 820px;
}

@keyframes modal-pop-b-ayobffu2ey {
    0% {
        transform: scale(.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.form-group[b-ayobffu2ey] {
    margin-bottom: 1rem;
}

    .form-group label[b-ayobffu2ey] {
        display: block;
        margin-bottom: .4rem;
        font-weight: 500;
    }

    .form-group .input[b-ayobffu2ey],
    .form-group input[type="text"][b-ayobffu2ey],
    .form-group input[type="checkbox"][b-ayobffu2ey],
    .form-group select[b-ayobffu2ey],
    .form-group textarea[b-ayobffu2ey] {
        width: 100%;
        padding: .6rem .8rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: inherit;
        font-size: 1rem;
    }

    .form-group input[type="checkbox"][b-ayobffu2ey] {
        width: auto;
        margin-right: .5rem;
    }

    .form-group textarea[b-ayobffu2ey] {
        resize: vertical;
        min-height: 120px;
    }

.notes-list[b-ayobffu2ey] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.note-item[b-ayobffu2ey] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    background: #f9fafb;
}

.badge[b-ayobffu2ey] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Status Table Badges ────────────────────────────────────────────────────── */
.status-completed[b-ayobffu2ey] {
    background: #dcfce7;
    color: #166534;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.status-failed[b-ayobffu2ey] {
    background: #fee2e2;
    color: #dc2626;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.status-cancelled[b-ayobffu2ey] {
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.status-inprogress[b-ayobffu2ey] {
    background: #fef3c7;
    color: #92400e;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.status-pending[b-ayobffu2ey] {
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ── Status Table ───────────────────────────────────────────────────────────── */
.status-card h3[b-ayobffu2ey] {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-table[b-ayobffu2ey] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.status-table thead tr[b-ayobffu2ey] {
    background: #f8fafc;
}

.status-table th[b-ayobffu2ey] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.status-table td[b-ayobffu2ey] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.status-table tbody tr:last-child td[b-ayobffu2ey] {
    border-bottom: none;
}

.status-table tbody tr:hover[b-ayobffu2ey] {
    background: #f8fafc;
}

/* ── Failure Reason Row ────────────────────────────────────────────────────── */
.failure-reason-row[b-ayobffu2ey] {
    background: transparent;
}

.failure-reason-row:hover[b-ayobffu2ey] {
    background: transparent !important;
}

.failure-reason-row td[b-ayobffu2ey] {
    padding-top: 0 !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.failure-reason[b-ayobffu2ey] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #b91c1c;
    line-height: 1.3;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    max-width: 100%;
    margin-left: 0.75rem;
}

.failure-reason-icon[b-ayobffu2ey] {
    flex-shrink: 0;
    font-size: 0.8rem;
}

.failure-reason-text[b-ayobffu2ey] {
    word-break: break-word;
}

/* Small CTA buttons */
.cta.small[b-ayobffu2ey] {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background: #3b82f6;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.cta.small:hover[b-ayobffu2ey] {
    background: #2563eb;
}

/* ── Fixed Footer ───────────────────────────────────────────────────────────── */
.order-footer[b-ayobffu2ey] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer-info[b-ayobffu2ey] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.order-id-display[b-ayobffu2ey] {
    font-weight: 600;
    color: #1e293b;
}

.footer-sep[b-ayobffu2ey] {
    color: #cbd5e1;
}

.footer-amount[b-ayobffu2ey] {
    font-weight: 600;
    color: #166534;
}

.footer-actions[b-ayobffu2ey] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-status[b-ayobffu2ey] {
    font-size: 0.85rem;
    color: #64748b;
    padding: 0.4rem 0.75rem;
    background: #f1f5f9;
    border-radius: 6px;
}

.footer-status.success[b-ayobffu2ey] {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 768px) {
    .order-footer[b-ayobffu2ey] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .order-header[b-ayobffu2ey] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .page-title[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .order-date[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .payment-badge.paid[b-ayobffu2ey] { background: rgba(74, 222, 128, 0.2) !important; color: #4ade80 !important; }
html.dark-mode .payment-badge.pending[b-ayobffu2ey] { background: rgba(251, 191, 36, 0.2) !important; color: #fbbf24 !important; }
html.dark-mode .payment-badge.failed[b-ayobffu2ey] { background: rgba(248, 113, 113, 0.2) !important; color: #f87171 !important; }
html.dark-mode .payment-badge.cancelled[b-ayobffu2ey] { background: var(--bg-tertiary, #334155) !important; color: var(--text-muted, #64748b) !important; }

html.dark-mode .delivery-badge.delivered[b-ayobffu2ey] { background: rgba(74, 222, 128, 0.2) !important; color: #4ade80 !important; }
html.dark-mode .delivery-badge.shipped[b-ayobffu2ey] { background: rgba(96, 165, 250, 0.2) !important; color: #60a5fa !important; }
html.dark-mode .delivery-badge.processing[b-ayobffu2ey] { background: rgba(251, 191, 36, 0.2) !important; color: #fbbf24 !important; }
html.dark-mode .delivery-badge.pending[b-ayobffu2ey] { background: var(--bg-tertiary, #334155) !important; color: var(--text-muted, #64748b) !important; }
html.dark-mode .delivery-badge.cancelled[b-ayobffu2ey] { background: rgba(248, 113, 113, 0.2) !important; color: #f87171 !important; }

html.dark-mode .status-progress-section[b-ayobffu2ey] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .step-icon[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .progress-step.completed .step-icon[b-ayobffu2ey] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    border-color: #4ade80;
}

html.dark-mode .progress-step.processing .step-icon[b-ayobffu2ey] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-color: #fbbf24;
}

html.dark-mode .step-label[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .progress-connector[b-ayobffu2ey] {
    background: var(--border-primary, #334155);
}

html.dark-mode .progress-connector.completed[b-ayobffu2ey] {
    background: #4ade80;
}

html.dark-mode .order-content[b-ayobffu2ey] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .order-grid .detail-card[b-ayobffu2ey],
html.dark-mode .order-items-card[b-ayobffu2ey] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .detail-card h3[b-ayobffu2ey],
html.dark-mode .order-items-card h3[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .detail-item label[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .detail-item span[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .items-table thead tr[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .items-table th[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .items-table td[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .items-table tbody tr:hover[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .total-row td[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .status-table thead tr[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .status-table th[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .status-table td[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .status-table tbody tr:hover[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .failure-reason-row[b-ayobffu2ey] {
    background: transparent !important;
}

html.dark-mode .failure-reason-row:hover[b-ayobffu2ey] {
    background: transparent !important;
}

html.dark-mode .failure-reason-row td[b-ayobffu2ey] {
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .failure-reason[b-ayobffu2ey] {
    color: #fca5a5;
    background: rgba(153, 27, 27, 0.15);
    border-color: rgba(248, 113, 113, 0.25);
}

html.dark-mode .action-btn[b-ayobffu2ey] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .action-btn:hover:not(:disabled)[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .order-footer[b-ayobffu2ey] {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: var(--border-primary, #334155);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .order-id-display[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .footer-sep[b-ayobffu2ey] {
    color: var(--border-primary, #334155);
}

html.dark-mode .footer-amount[b-ayobffu2ey] {
    color: #4ade80;
}

html.dark-mode .footer-status[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .footer-status.success[b-ayobffu2ey] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

/* ── Dark mode: breadcrumb & header subtitle ────────────────────────────────── */
html.dark-mode .breadcrumb-link[b-ayobffu2ey] {
    color: var(--accent-primary, #60a5fa) !important;
}

html.dark-mode .breadcrumb-sep[b-ayobffu2ey] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .breadcrumb-current[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .header-subtitle[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ── Dark mode: tables inside bookRun-card ──────────────────────────────────── */
html.dark-mode .bookRun-card[b-ayobffu2ey] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .bookRun-card h2[b-ayobffu2ey],
html.dark-mode .bookRun-card h3[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .tbl thead[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .tbl th[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .tbl th[b-ayobffu2ey],
html.dark-mode .tbl td[b-ayobffu2ey] {
    border-bottom-color: var(--border-primary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .error-row td[b-ayobffu2ey] {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.1) !important;
}

html.dark-mode .placeholder[b-ayobffu2ey] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .discount-row td[b-ayobffu2ey] {
    color: #4ade80 !important;
}

/* ── Dark mode: notes ───────────────────────────────────────────────────────── */
html.dark-mode .note-item[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #475569) !important;
}

html.dark-mode .note-item .note-content[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .note-item .note-author[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .note-type-badge[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .note-important-badge[b-ayobffu2ey] {
    color: #fbbf24 !important;
}

/* ── Dark mode: status badges ───────────────────────────────────────────────── */
html.dark-mode .status-completed[b-ayobffu2ey] {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .status-failed[b-ayobffu2ey] {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

html.dark-mode .status-cancelled[b-ayobffu2ey] {
    background: rgba(156, 163, 175, 0.2) !important;
    color: #9ca3af !important;
}

html.dark-mode .status-inprogress[b-ayobffu2ey] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .status-pending[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-muted, #64748b) !important;
}

/* ── Dark mode: status card ─────────────────────────────────────────────────── */
html.dark-mode .status-card h3[b-ayobffu2ey] {
    color: var(--text-primary, #f1f5f9) !important;
}

/* ── Dark mode: form elements in modals ─────────────────────────────────────── */
html.dark-mode .form-group label[b-ayobffu2ey] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .form-group .input[b-ayobffu2ey],
html.dark-mode .form-group input[type="text"][b-ayobffu2ey],
html.dark-mode .form-group select[b-ayobffu2ey],
html.dark-mode .form-group textarea[b-ayobffu2ey] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #475569) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

/* ── Dark mode: char-type label ─────────────────────────────────────────────── */
html.dark-mode .char-type[b-ayobffu2ey] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* ================================================================
   PREVIEW RENDERS
   Uses CSS variables from admin-shared.css that auto-switch
   between light and dark mode.
   ================================================================ */

.preview-subtitle[b-ayobffu2ey] {
    font-size: 0.85rem;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 0.75rem;
}

.preview-group[b-ayobffu2ey] {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 8px;
    border: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-secondary, #475569);
}

.preview-group-compact[b-ayobffu2ey] {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-cachekey[b-ayobffu2ey] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
}

.preview-date[b-ayobffu2ey] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
}
/* /Components/Pages/Admin/OrderDetailsComponents/CharacterRunsSection.razor.rz.scp.css */
/* Scoped styles for CharacterRunsSection */
.admin-card[b-3dan43w1n3] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card > h2[b-3dan43w1n3] {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-primary, #e2e8f0);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    letter-spacing: -0.01em;
}

.admin-card h3[b-3dan43w1n3] {
    font-size: 1.05rem;
    margin-top: .6rem;
    margin-bottom: .2rem;
}

.tbl[b-3dan43w1n3] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tbl thead[b-3dan43w1n3] {
    background: #f6f6f6;
}

.tbl th[b-3dan43w1n3],
.tbl td[b-3dan43w1n3] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
}

.tbl th:first-child[b-3dan43w1n3],
.tbl td:first-child[b-3dan43w1n3] {
    text-align: left;
}

.tbl th[b-3dan43w1n3] {
    font-weight: 600;
}

.tbl tbody tr:last-child td[b-3dan43w1n3] {
    border-bottom: none;
}

.num[b-3dan43w1n3] {
    text-align: right;
}

.nowrap[b-3dan43w1n3] {
    white-space: nowrap;
}

.placeholder[b-3dan43w1n3] {
    color: #777;
    font-style: italic;
}

.thumb[b-3dan43w1n3] {
    width: 48px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.error-row td[b-3dan43w1n3] {
    color: #e00000;
    background: #fff5f5;
    padding: .6rem .75rem;
    font-style: italic;
}

.charRun-card .tbl[b-3dan43w1n3] {
    table-layout: auto;
}

.charRun-card .tbl th[b-3dan43w1n3],
.charRun-card .tbl td[b-3dan43w1n3] {
    text-align: left;
}

.charRun-card .tbl th:nth-child(1)[b-3dan43w1n3],
.charRun-card .tbl td:nth-child(1)[b-3dan43w1n3] {
    width: 70px;
    text-align: left;
}

.charRun-card .tbl th:nth-child(3)[b-3dan43w1n3],
.charRun-card .tbl td:nth-child(3)[b-3dan43w1n3],
.charRun-card .tbl th:nth-child(4)[b-3dan43w1n3],
.charRun-card .tbl td:nth-child(4)[b-3dan43w1n3] {
    text-align: center;
}

.charRun-card .tbl th:nth-child(5)[b-3dan43w1n3],
.charRun-card .tbl td:nth-child(5)[b-3dan43w1n3] {
    white-space: nowrap;
    text-align: right;
}

.charRun-card .tbl th:nth-child(4)[b-3dan43w1n3],
.charRun-card .tbl td:nth-child(4)[b-3dan43w1n3] {
    text-align: right;
    width: 90px;
    white-space: nowrap;
}

/* Storage indicator styling */
.thumb-container[b-3dan43w1n3] {
    position: relative;
    display: inline-block;
}

.storage-indicator[b-3dan43w1n3] {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.8rem;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    cursor: help;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storage-indicator.cloud[b-3dan43w1n3] {
    /* Lichtblauwe achtergrond voor cloud */
    background: rgba(135, 206, 250, 0.95);
}

.storage-indicator.local[b-3dan43w1n3] {
    /* Lichtgrijze achtergrond voor lokaal */
    background: rgba(200, 200, 200, 0.95);
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-3dan43w1n3] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .admin-card h2[b-3dan43w1n3],
html.dark-mode .admin-card h3[b-3dan43w1n3] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .tbl[b-3dan43w1n3] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .tbl thead[b-3dan43w1n3] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .tbl th[b-3dan43w1n3] {
    color: var(--text-tertiary, #94a3b8) !important;
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .tbl th[b-3dan43w1n3],
html.dark-mode .tbl td[b-3dan43w1n3] {
    border-bottom-color: var(--border-primary, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .placeholder[b-3dan43w1n3] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .error-row td[b-3dan43w1n3] {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.1) !important;
}

html.dark-mode .storage-indicator[b-3dan43w1n3] {
    background: rgba(30, 41, 59, 0.9) !important;
}

html.dark-mode .storage-indicator.cloud[b-3dan43w1n3] {
    background: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .storage-indicator.local[b-3dan43w1n3] {
    background: rgba(100, 116, 139, 0.5) !important;
}

/* ── New classes replacing inline styles ────────────────────────────────────── */
.char-run-header[b-3dan43w1n3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    margin: 0.75rem 0 0.25rem;
    border-radius: 8px;
    background: #ede9fe;
    border-left: 3px solid #6366f1;
}

.char-run-header h3[b-3dan43w1n3] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #3730a3;
}

.waiting-row[b-3dan43w1n3] {
    font-style: italic;
    opacity: 0.8;
}

.selected-row[b-3dan43w1n3] {
    background-color: #e8f5e9;
}

.selected-label[b-3dan43w1n3] {
    color: #2e7d32;
    font-weight: bold;
}

.error-text[b-3dan43w1n3] {
    text-align: left;
}

/* ── Dark mode for new classes ──────────────────────────────────────────────── */
html.dark-mode .selected-row[b-3dan43w1n3] {
    background-color: rgba(74, 222, 128, 0.12) !important;
}

html.dark-mode .selected-label[b-3dan43w1n3] {
    color: #4ade80 !important;
}

html.dark-mode .admin-card > h2[b-3dan43w1n3] {
    color: var(--text-primary, #f1f5f9) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .char-run-header[b-3dan43w1n3] {
    background: rgba(99, 102, 241, 0.18) !important;
    border-left-color: #818cf8 !important;
}

html.dark-mode .char-run-header h3[b-3dan43w1n3] {
    color: #c7d2fe !important;
}
/* /Components/Pages/Admin/OrderDetailsComponents/CharactersAndMessageSection.razor.rz.scp.css */
/* Scoped styles for CharactersAndMessageSection */
.admin-card[b-mptlr9sccs] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-mptlr9sccs] {
    margin-bottom: .4rem;
}

.admin-card h3[b-mptlr9sccs] {
    font-size: 1.05rem;
    margin-top: .6rem;
    margin-bottom: .2rem;
}

.char-wrap[b-mptlr9sccs] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.char-grid[b-mptlr9sccs] {
    flex: 1 1 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
}

.char-grid figure[b-mptlr9sccs] {
    margin: 0;
    text-align: center;
}

.img-container[b-mptlr9sccs] {
    position: relative;
    display: inline-block;
}

.storage-indicator[b-mptlr9sccs] {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.8rem;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    cursor: help;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storage-indicator.cloud[b-mptlr9sccs] {
    background: rgba(135, 206, 250, 0.95);
}

.storage-indicator.local[b-mptlr9sccs] {
    background: rgba(200, 200, 200, 0.95);
}

.char-grid img[b-mptlr9sccs] {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.char-grid figcaption[b-mptlr9sccs] {
    margin-top: .3rem;
    font-size: .8rem;
    line-height: 1.3;
}

.char-type[b-mptlr9sccs] {
    color: #556;
}

.personal-block[b-mptlr9sccs] {
    flex: 1 1 260px;
    max-width: 400px;
}

.personal-msg[b-mptlr9sccs] {
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: .95rem;
    max-width: 60ch;
}

.placeholder[b-mptlr9sccs] {
    color: #777;
    font-style: italic;
}

.odPersonage[b-mptlr9sccs] {
    max-width: 100px;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-mptlr9sccs] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-mptlr9sccs],
html.dark-mode .admin-card h3[b-mptlr9sccs] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .char-type[b-mptlr9sccs] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .char-grid figcaption[b-mptlr9sccs] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .personal-msg[b-mptlr9sccs] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .placeholder[b-mptlr9sccs] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .storage-indicator[b-mptlr9sccs] {
    background: rgba(30, 41, 59, 0.9);
}

html.dark-mode .storage-indicator.cloud[b-mptlr9sccs] {
    background: rgba(96, 165, 250, 0.3);
}

html.dark-mode .storage-indicator.local[b-mptlr9sccs] {
    background: rgba(100, 116, 139, 0.5);
}
/* /Components/Pages/Admin/OrderDetailsComponents/OrderCostSection.razor.rz.scp.css */
.order-cost-card[b-t41a9a3qfy] {
    display: grid;
    gap: 1.1rem;
}

.order-cost-card h3[b-t41a9a3qfy] {
    margin: 0;
}

.cost-total[b-t41a9a3qfy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--primary, #4f46e5) 12%, transparent);
}

.cost-total strong[b-t41a9a3qfy] {
    font-size: 1.5rem;
}

.cost-grid[b-t41a9a3qfy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.cost-tile[b-t41a9a3qfy] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    padding: .8rem .85rem;
    border: 1px solid var(--border-color, #d8dee9);
    border-radius: .65rem;
    background: var(--surface-secondary, #f8fafc);
}

.cost-tile-label[b-t41a9a3qfy] {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted, #667085);
}

.cost-tile strong[b-t41a9a3qfy] {
    font-size: 1.25rem;
    line-height: 1.2;
}

.cost-tile-value[b-t41a9a3qfy] {
    display: block;
    min-height: 1.5rem;
}

.cost-tile-accuracy[b-t41a9a3qfy],
.exchange-rate[b-t41a9a3qfy] {
    color: var(--text-muted, #667085);
}

.cost-tile-accuracy[b-t41a9a3qfy],
.cost-source[b-t41a9a3qfy] {
    display: block;
    font-size: .74rem;
    line-height: 1.3;
}

.cost-source[b-t41a9a3qfy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    opacity: .85;
}

.margin-lines li[b-t41a9a3qfy] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.25rem;
    align-items: baseline;
}

.shared-warning[b-t41a9a3qfy],
.cost-error[b-t41a9a3qfy] {
    padding: .75rem;
    border-radius: .5rem;
}

.shared-warning[b-t41a9a3qfy] {
    background: #fff7d6;
    color: #6b5200;
}

.cost-error[b-t41a9a3qfy] {
    background: #fee2e2;
    color: #991b1b;
}

.cost-history summary[b-t41a9a3qfy] {
    cursor: pointer;
    font-weight: 600;
}

.cost-history > summary span[b-t41a9a3qfy] {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--surface-secondary, #eef2f7);
}

.cost-table-wrap[b-t41a9a3qfy] {
    overflow-x: auto;
    margin-top: .75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .65rem;
}

.cost-table[b-t41a9a3qfy] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.cost-table thead th[b-t41a9a3qfy] {
    position: sticky;
    top: 0;
    text-align: left;
    padding: .55rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted, #667085);
    background: var(--surface-secondary, #eef2f7);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.cost-table tbody td[b-t41a9a3qfy] {
    padding: .5rem .65rem;
    vertical-align: middle;
    border-top: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 60%, transparent);
}

.cost-table td.num[b-t41a9a3qfy],
.cost-table th.num[b-t41a9a3qfy] {
    text-align: right;
}

.cost-table .nowrap[b-t41a9a3qfy] {
    white-space: nowrap;
}

.cost-lines-row td[b-t41a9a3qfy] {
    padding: 0 .65rem .35rem 1.75rem;
    background: var(--surface-secondary, #f8fafc);
    border-top: none;
}

.cost-lines-row summary[b-t41a9a3qfy] {
    cursor: pointer;
    padding: .35rem 0;
    font-size: .8rem;
    color: var(--text-muted, #667085);
}

.cost-lines[b-t41a9a3qfy] {
    display: grid;
    gap: .3rem;
    margin: .25rem 0 .5rem;
    padding: 0;
    list-style: none;
    font-size: .82rem;
}

.cost-lines li[b-t41a9a3qfy] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cost-badge[b-t41a9a3qfy] {
    display: inline-block;
    margin-left: .3rem;
    padding: .08rem .4rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.cost-badge.shared[b-t41a9a3qfy] {
    background: #fff7d6;
    color: #6b5200;
}

.cost-badge.legacy[b-t41a9a3qfy] {
    background: #e5e7eb;
    color: #374151;
}

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

    .cost-total[b-t41a9a3qfy],
    .cost-lines li[b-t41a9a3qfy],
    .margin-lines li[b-t41a9a3qfy] {
        align-items: flex-start;
        flex-direction: column;
    }
}

.margin-block[b-t41a9a3qfy] {
    padding: 1rem;
    border-radius: .75rem;
    border: 1px solid var(--border-color, #d8dee9);
}

.margin-block.profit[b-t41a9a3qfy] {
    background: color-mix(in srgb, #16a34a 10%, transparent);
    border-color: color-mix(in srgb, #16a34a 45%, transparent);
}

.margin-block.loss[b-t41a9a3qfy] {
    background: color-mix(in srgb, #dc2626 10%, transparent);
    border-color: color-mix(in srgb, #dc2626 45%, transparent);
}

.margin-headline[b-t41a9a3qfy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}

.margin-title[b-t41a9a3qfy] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted, #667085);
}

.margin-amount[b-t41a9a3qfy] {
    font-size: 1.5rem;
    line-height: 1.1;
}

.margin-block.profit .margin-amount[b-t41a9a3qfy] {
    color: #15803d;
}

.margin-block.loss .margin-amount[b-t41a9a3qfy] {
    color: #b91c1c;
}

.margin-lines[b-t41a9a3qfy] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
}

.margin-lines li.sub[b-t41a9a3qfy] {
    padding-left: .9rem;
    font-size: .8rem;
    color: var(--text-muted, #667085);
}

.margin-lines li.result[b-t41a9a3qfy] {
    margin-top: .35rem;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color, #d8dee9) 70%, transparent);
    font-weight: 700;
}
/* /Components/Pages/Admin/OrderDetailsComponents/OrderInfoSection.razor.rz.scp.css */
/* Scoped styles for OrderInfoSection */
.admin-card[b-tvbc2nuoev] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-tvbc2nuoev] {
    margin-bottom: .4rem;
}

.info-card[b-tvbc2nuoev] {
    /* Additional specific styling for info card if needed */
}

/* ---------- Card Header with Action ---------- */
.card-header[b-tvbc2nuoev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-header h2[b-tvbc2nuoev] {
    margin: 0;
}

.invoice-download-btn[b-tvbc2nuoev] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #2D5A27, #4A7C43);
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
}

.invoice-download-btn:hover[b-tvbc2nuoev] {
    background: linear-gradient(135deg, #4A7C43, #2D5A27);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(45, 90, 39, 0.3);
    color: white;
}

/* ---------- Info Details ---------- */
.info-details[b-tvbc2nuoev] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.info-row[b-tvbc2nuoev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.info-label[b-tvbc2nuoev] {
    font-weight: 600;
    color: var(--text-muted, #6B7280);
    min-width: 100px;
}

.info-link[b-tvbc2nuoev] {
    color: var(--primary, #2D5A27);
    text-decoration: none;
    font-weight: 500;
}

.info-link:hover[b-tvbc2nuoev] {
    text-decoration: underline;
}

.info-muted[b-tvbc2nuoev] {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.9rem;
}

.discount-badge[b-tvbc2nuoev] {
    background: #DCFCE7;
    color: #166534;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.giftcard-badge[b-tvbc2nuoev] {
    background: #EEF2FF;
    color: #4338CA;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* ---------- Payment Status ---------- */
.payment-status[b-tvbc2nuoev] {
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-paid[b-tvbc2nuoev] {
    background: #DCFCE7;
    color: #166534;
}

.status-pending[b-tvbc2nuoev] {
    background: #FEF3C7;
    color: #92400E;
}

.status-failed[b-tvbc2nuoev] {
    background: #FEE2E2;
    color: #991B1B;
}

.status-unknown[b-tvbc2nuoev] {
    background: #F3F4F6;
    color: #6B7280;
}

/* ---------- adressen ---------- */
.addr-grid[b-tvbc2nuoev] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #E5E7EB);
}

.addr-block[b-tvbc2nuoev] {
    margin: 0;
}

.addr-block strong[b-tvbc2nuoev] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary, #2D5A27);
}

.addr-block address[b-tvbc2nuoev] {
    font-style: normal;
    line-height: 1.6;
    color: var(--text, #374151);
}

/* ???????????????????????????????????????????????????????????????????????????
   GIFT SECTION
   ??????????????????????????????????????????????????????????????????????????? */

.gift-info-section[b-tvbc2nuoev] {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef7f0 0%, #fff5eb 100%);
    border: 2px solid #e8d5c4;
    border-radius: 12px;
}

.gift-header-badge[b-tvbc2nuoev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gift-emoji[b-tvbc2nuoev] {
    font-size: 1.5rem;
}

.gift-title[b-tvbc2nuoev] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #5c4033;
}

.gift-details[b-tvbc2nuoev] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gift-row[b-tvbc2nuoev] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.gift-label[b-tvbc2nuoev] {
    font-size: 0.9rem;
    color: #8b7355;
    white-space: nowrap;
}

.gift-value[b-tvbc2nuoev] {
    font-weight: 600;
    color: #5c4033;
}

.gift-message-row[b-tvbc2nuoev] {
    flex-direction: column;
    gap: 0.5rem;
}

.gift-message-card[b-tvbc2nuoev] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid #efe6de;
    box-shadow: 0 2px 4px rgba(92, 64, 51, 0.05);
}

.gift-message-text[b-tvbc2nuoev] {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b5344;
    white-space: pre-wrap;
}

.gift-options-row[b-tvbc2nuoev] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.gift-option-badge[b-tvbc2nuoev] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: white;
    border: 1px solid #d4a574;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b6914;
}

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

    .card-header[b-tvbc2nuoev] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .invoice-download-btn[b-tvbc2nuoev] {
        width: 100%;
        justify-content: center;
    }
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-tvbc2nuoev] {
    background: var(--bg-secondary, #1e293b) !important;
}

html.dark-mode .admin-card h2[b-tvbc2nuoev] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .info-label[b-tvbc2nuoev] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .info-muted[b-tvbc2nuoev] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .discount-badge[b-tvbc2nuoev] {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .status-paid[b-tvbc2nuoev] {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .status-pending[b-tvbc2nuoev] {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .status-failed[b-tvbc2nuoev] {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

html.dark-mode .status-unknown[b-tvbc2nuoev] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .addr-grid[b-tvbc2nuoev] {
    border-top-color: var(--border-primary, #334155) !important;
}

html.dark-mode .addr-block address[b-tvbc2nuoev] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .addr-block strong[b-tvbc2nuoev] {
    color: #4ade80 !important;
}

html.dark-mode .info-link[b-tvbc2nuoev] {
    color: #60a5fa !important;
}

html.dark-mode .gift-info-section[b-tvbc2nuoev] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .gift-title[b-tvbc2nuoev] {
    color: #fbbf24 !important;
}

html.dark-mode .gift-label[b-tvbc2nuoev] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .gift-value[b-tvbc2nuoev] {
    color: #fcd34d !important;
}

html.dark-mode .gift-message-card[b-tvbc2nuoev] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .gift-message-text[b-tvbc2nuoev] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .gift-option-badge[b-tvbc2nuoev] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}
/* /Components/Pages/Admin/OrderDetailsComponents/OrderRemarkSection.razor.rz.scp.css */
/* Scoped styles for OrderRemarkSection */
.admin-card[b-lu1uvjkx1x] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-lu1uvjkx1x] {
    margin-bottom: .4rem;
}

.order-remark[b-lu1uvjkx1x] {
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: .95rem;
    max-width: 60ch;
}

.placeholder[b-lu1uvjkx1x] {
    color: #777;
    font-style: italic;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-lu1uvjkx1x] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-lu1uvjkx1x] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .order-remark[b-lu1uvjkx1x] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .placeholder[b-lu1uvjkx1x] {
    color: var(--text-muted, #64748b);
}
/* /Components/Pages/Admin/OrderDetailsComponents/PageRunsTable.razor.rz.scp.css */
/* Scoped CSS for PageRunsTable */
.tbl[b-z9rbaxi80k] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-top: 1rem;
}

.tbl thead[b-z9rbaxi80k] {
    background: #f6f6f6;
}

.tbl th[b-z9rbaxi80k],
.tbl td[b-z9rbaxi80k] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
}

.tbl th:first-child[b-z9rbaxi80k],
.tbl td:first-child[b-z9rbaxi80k] {
    text-align: left;
}

.tbl th[b-z9rbaxi80k] {
    font-weight: 600;
}

.tbl tbody tr:last-child td[b-z9rbaxi80k] {
    border-bottom: none;
}

.num[b-z9rbaxi80k] {
    text-align: right;
}

.nowrap[b-z9rbaxi80k] {
    white-space: nowrap;
}

.placeholder[b-z9rbaxi80k] {
    color: #777;
    font-style: italic;
}

.thumb[b-z9rbaxi80k] {
    width: 48px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Storage indicator styling */
.thumb-container[b-z9rbaxi80k] {
    position: relative;
    display: inline-block;
}

.storage-indicator[b-z9rbaxi80k] {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.8rem;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    cursor: help;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storage-indicator.cloud[b-z9rbaxi80k] {
    background: rgba(135, 206, 250, 0.95);
}

.storage-indicator.local[b-z9rbaxi80k] {
    background: rgba(200, 200, 200, 0.95);
}

.error-row td[b-z9rbaxi80k] {
    color: #e00000;
    background: #fff5f5;
    padding: .6rem .75rem;
    font-style: italic;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .tbl thead[b-z9rbaxi80k] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-z9rbaxi80k] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tbl th[b-z9rbaxi80k],
html.dark-mode .tbl td[b-z9rbaxi80k] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .placeholder[b-z9rbaxi80k] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .error-row td[b-z9rbaxi80k] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

html.dark-mode .storage-indicator[b-z9rbaxi80k] {
    background: rgba(30, 41, 59, 0.9);
}

html.dark-mode .storage-indicator.cloud[b-z9rbaxi80k] {
    background: rgba(96, 165, 250, 0.3);
}

html.dark-mode .storage-indicator.local[b-z9rbaxi80k] {
    background: rgba(100, 116, 139, 0.5);
}

/* ?? New classes replacing inline styles ?????????????????????????????????????? */
.page-run-header[b-z9rbaxi80k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    margin: 0.75rem 0 0.25rem;
    border-radius: 8px;
    background: #e0f2fe;
    border-left: 3px solid #0ea5e9;
}

.page-run-header h3[b-z9rbaxi80k] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0c4a6e;
}

.waiting-row[b-z9rbaxi80k] {
    font-style: italic;
    opacity: 0.8;
}

.selected-row[b-z9rbaxi80k] {
    background-color: #e8f5e9;
}

.selected-label[b-z9rbaxi80k] {
    color: #2e7d32;
    font-weight: bold;
}

.error-text[b-z9rbaxi80k] {
    text-align: left;
}

/* ?? Dark mode for new classes ???????????????????????????????????????????????? */
html.dark-mode .selected-row[b-z9rbaxi80k] {
    background-color: rgba(74, 222, 128, 0.12) !important;
}

html.dark-mode .selected-label[b-z9rbaxi80k] {
    color: #4ade80 !important;
}

html.dark-mode .page-run-header[b-z9rbaxi80k] {
    background: rgba(14, 165, 233, 0.18) !important;
    border-left-color: #38bdf8 !important;
}

html.dark-mode .page-run-header h3[b-z9rbaxi80k] {
    color: #bae6fd !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   COMPLETENESS TOOLBAR (summary chips + show-all toggle)
   ────────────────────────────────────────────────────────────────────────────── */
.page-runs-toolbar[b-z9rbaxi80k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e6e6e6;
}

.page-runs-summary[b-z9rbaxi80k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summary-chip[b-z9rbaxi80k] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
}

.summary-chip--chars[b-z9rbaxi80k] {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.summary-chip--template[b-z9rbaxi80k] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* Toggle switch ----------------------------------------------------------------- */
.show-all-toggle[b-z9rbaxi80k] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.show-all-toggle input[b-z9rbaxi80k] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.show-all-toggle__track[b-z9rbaxi80k] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.show-all-toggle__thumb[b-z9rbaxi80k] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform 0.2s ease;
}

.show-all-toggle input:checked + .show-all-toggle__track[b-z9rbaxi80k] {
    background: #6366f1;
}

.show-all-toggle input:checked + .show-all-toggle__track .show-all-toggle__thumb[b-z9rbaxi80k] {
    transform: translateX(18px);
}

.show-all-toggle input:focus-visible + .show-all-toggle__track[b-z9rbaxi80k] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* Page badge -------------------------------------------------------------------- */
.page-badge[b-z9rbaxi80k] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.55rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.page-badge--template[b-z9rbaxi80k] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Template-only page card -------------------------------------------------------- */
.template-page-card[b-z9rbaxi80k] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0.5rem 0 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.template-thumb[b-z9rbaxi80k] {
    width: 90px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    background: #fff;
}

.template-page-card__meta[b-z9rbaxi80k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.template-page-card__title[b-z9rbaxi80k] {
    font-weight: 600;
    color: #334155;
    font-size: 0.92rem;
}

.template-page-card__hint[b-z9rbaxi80k] {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.35;
}

.template-page-card__empty[b-z9rbaxi80k] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.88rem;
}

.template-page-card__empty-icon[b-z9rbaxi80k] {
    font-size: 1.4rem;
    font-style: normal;
}

/* ── Dark mode for completeness UI ────────────────────────────────────────────── */
html.dark-mode .page-runs-toolbar[b-z9rbaxi80k] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .summary-chip--chars[b-z9rbaxi80k] {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.4);
}

html.dark-mode .summary-chip--template[b-z9rbaxi80k] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
    border-color: var(--border-primary, #475569);
}

html.dark-mode .show-all-toggle[b-z9rbaxi80k] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .show-all-toggle__track[b-z9rbaxi80k] {
    background: #475569;
}

html.dark-mode .show-all-toggle input:checked + .show-all-toggle__track[b-z9rbaxi80k] {
    background: #818cf8;
}

html.dark-mode .page-badge--template[b-z9rbaxi80k] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-tertiary, #94a3b8);
    border-color: var(--border-primary, #475569);
}

html.dark-mode .template-page-card[b-z9rbaxi80k] {
    border-color: var(--border-primary, #475569);
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .template-thumb[b-z9rbaxi80k] {
    background: #0f172a;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

html.dark-mode .template-page-card__title[b-z9rbaxi80k] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .template-page-card__hint[b-z9rbaxi80k] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .template-page-card__empty[b-z9rbaxi80k] {
    color: var(--text-muted, #64748b);
}

/* Responsive -------------------------------------------------------------------- */
@media (max-width: 640px) {
    .template-page-card[b-z9rbaxi80k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .template-thumb[b-z9rbaxi80k] {
        width: 70px;
    }
}
/* /Components/Pages/Admin/OrderDetailsComponents/PdfActionsHeader.razor.rz.scp.css */
/* Scoped styles so the PDF actions header matches existing visuals */
.section-header[b-twf0vd8av4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: 8px;
    background: #e0f2fe;
    border-left: 3px solid #0ea5e9;
}

.section-header h2[b-twf0vd8av4] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0c4a6e;
    letter-spacing: -0.01em;
}

.spinner[b-twf0vd8av4] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #0369a1;
    border-radius: 50%;
    animation: spin-b-twf0vd8av4 .8s linear infinite;
}

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

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .section-header[b-twf0vd8av4] {
    background: rgba(14, 165, 233, 0.18) !important;
    border-left-color: #38bdf8 !important;
    border-bottom: none !important;
}

html.dark-mode .section-header h2[b-twf0vd8av4] {
    color: #bae6fd !important;
}

html.dark-mode .spinner[b-twf0vd8av4] {
    border-color: var(--border-primary, #334155);
    border-top-color: var(--accent-primary, #60a5fa);
}

/* ── New classes replacing inline styles ────────────────────────────────────── */
.section-header-inner[b-twf0vd8av4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section-header-actions[b-twf0vd8av4] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.acknowledged-text[b-twf0vd8av4] {
    margin: 0;
}

.pdf-warning-column[b-twf0vd8av4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.pdf-warning-column .action-btn[b-twf0vd8av4] {
    align-self: flex-end;
}

.pdf-regen-warning[b-twf0vd8av4] {
    margin: 0;
    color: #ff6b6b;
    font-weight: 600;
}

.cloud-pdf-box[b-twf0vd8av4] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
}

.cloud-pdf-url[b-twf0vd8av4] {
    margin-top: 0.5rem;
    font-family: monospace;
    font-size: 0.9em;
    word-break: break-all;
}

.cloud-pdf-link[b-twf0vd8av4] {
    color: #0369a1;
}

.pdf-notice-box[b-twf0vd8av4] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
}

.pdf-notice-actions[b-twf0vd8av4] {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Dark mode ──────────────────────────────────────────────────────────────── */
html.dark-mode .acknowledged-text[b-twf0vd8av4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .pdf-regen-warning[b-twf0vd8av4] {
    color: #f87171;
}

html.dark-mode .cloud-pdf-box[b-twf0vd8av4] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
}

html.dark-mode .cloud-pdf-box strong[b-twf0vd8av4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .cloud-pdf-link[b-twf0vd8av4] {
    color: #60a5fa;
}

html.dark-mode .cloud-pdf-url[b-twf0vd8av4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .pdf-notice-box[b-twf0vd8av4] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .pdf-notice-box strong[b-twf0vd8av4] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .pdf-notice-box span[b-twf0vd8av4] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .pdf-notice-actions[b-twf0vd8av4] {
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/OrderDetailsComponents/PeechoSection.razor.rz.scp.css */
.peecho-card[b-n8ltu67ni3] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.peecho-header[b-n8ltu67ni3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.peecho-header h2[b-n8ltu67ni3] {
    margin: .15rem 0 0;
}

.section-eyebrow[b-n8ltu67ni3] {
    color: var(--text-muted, #667085);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.provider-pill[b-n8ltu67ni3] {
    padding: .25rem .65rem;
    border-radius: 999px;
    background: #fff1d6;
    color: #6b4a00;
    font-size: .78rem;
    font-weight: 700;
}

.empty-print-state[b-n8ltu67ni3] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    border: 1px dashed var(--border-color, #d8dee9);
    border-radius: .75rem;
    color: var(--text-muted, #667085);
}

.empty-print-state strong[b-n8ltu67ni3] {
    color: inherit;
}

.pdf-panel[b-n8ltu67ni3] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid #bae6fd;
    border-radius: .75rem;
    background: #f0f9ff;
}

.pdf-icon[b-n8ltu67ni3] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .55rem;
    background: #0369a1;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.pdf-content[b-n8ltu67ni3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pdf-content span[b-n8ltu67ni3] {
    color: var(--text-muted, #667085);
    font-size: .8rem;
}

.pdf-action[b-n8ltu67ni3] {
    white-space: nowrap;
    font-weight: 700;
}

.peecho-actions[b-n8ltu67ni3] {
    display: flex;
    justify-content: flex-end;
    padding-top: .15rem;
}

.resubmit-btn[b-n8ltu67ni3] {
    min-width: 14rem;
}

@media (max-width: 600px) {
    .peecho-header[b-n8ltu67ni3],
    .pdf-panel[b-n8ltu67ni3] {
        align-items: flex-start;
    }

    .pdf-panel[b-n8ltu67ni3] {
        grid-template-columns: auto 1fr;
    }

    .pdf-action[b-n8ltu67ni3] {
        grid-column: 1 / -1;
    }

    .peecho-actions[b-n8ltu67ni3],
    .resubmit-btn[b-n8ltu67ni3] {
        width: 100%;
    }
}

html.dark-mode .pdf-panel[b-n8ltu67ni3] {
    background: rgba(14, 116, 144, 0.15);
    border-color: #0e7490;
}
/* /Components/Pages/Admin/OrderDetailsComponents/PriceBreakdownSection.razor.rz.scp.css */
/* CSS isolation means parent `OrderDetails.razor.css` rules do not style child components.
   Replicate the needed styles for the price card here. */

.admin-card[b-ckwxv0ufrg] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-ckwxv0ufrg] {
    margin-bottom: .4rem;
}

/* price table styles */
.tbl[b-ckwxv0ufrg] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tbl thead[b-ckwxv0ufrg] {
    background: #f6f6f6;
}

.tbl th[b-ckwxv0ufrg],
.tbl td[b-ckwxv0ufrg] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
}

.tbl th:first-child[b-ckwxv0ufrg],
.tbl td:first-child[b-ckwxv0ufrg] {
    text-align: left;
}

.tbl th[b-ckwxv0ufrg] { font-weight: 600; }
.tbl tbody tr:last-child td[b-ckwxv0ufrg] { border-bottom: none; }

.discount-row td[b-ckwxv0ufrg] {
    color: #047a04;
    font-weight: 500;
}

.giftcard-row td[b-ckwxv0ufrg] {
    color: #7c3aed;
    font-weight: 500;
}

.code-tag[b-ckwxv0ufrg] {
    display: inline-block;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-weight: 600;
    margin-left: 0.4rem;
    letter-spacing: 0.02em;
}

.total-row td[b-ckwxv0ufrg] { font-weight: 700; }

.price-table[b-ckwxv0ufrg] { table-layout: fixed; }
.price-table th:nth-child(n + 2)[b-ckwxv0ufrg],
.price-table td:nth-child(n + 2)[b-ckwxv0ufrg] {
    text-align: right;
    white-space: nowrap;
}
.price-table th:nth-child(2)[b-ckwxv0ufrg],
.price-table td:nth-child(2)[b-ckwxv0ufrg] { width: 60px; }
.price-table th:nth-child(3)[b-ckwxv0ufrg],
.price-table td:nth-child(3)[b-ckwxv0ufrg],
.price-table th:nth-child(4)[b-ckwxv0ufrg],
.price-table td:nth-child(4)[b-ckwxv0ufrg],
.price-table th:nth-child(5)[b-ckwxv0ufrg],
.price-table td:nth-child(5)[b-ckwxv0ufrg] { width: 110px; }

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-ckwxv0ufrg] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-ckwxv0ufrg] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tbl thead[b-ckwxv0ufrg] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-ckwxv0ufrg] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tbl th[b-ckwxv0ufrg],
html.dark-mode .tbl td[b-ckwxv0ufrg] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .discount-row td[b-ckwxv0ufrg] {
    color: #4ade80;
}

html.dark-mode .giftcard-row td[b-ckwxv0ufrg] {
    color: #a78bfa;
}

html.dark-mode .code-tag[b-ckwxv0ufrg] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .total-row td[b-ckwxv0ufrg] {
    color: var(--text-primary, #f1f5f9);
}
/* /Components/Pages/Admin/OrderDetailsComponents/PrintStatusPanel.razor.rz.scp.css */
/* Scoped styles voor het PrintStatusPanel (Slice 6 — §2.1.3, §4.4).
   Geen global-selectors: layout via lokale class-selectors. */

.print-status-card[b-udlxn463ah] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.print-status-card.embedded[b-udlxn463ah] {
    padding: 1rem;
    border: 1px solid var(--border-color, #d8dee9);
    border-radius: .85rem;
    background: var(--surface-secondary, #f8fafc);
}

.card-header[b-udlxn463ah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.card-header h3[b-udlxn463ah] {
    margin: .15rem 0 0;
    font-size: 1rem;
}

.section-eyebrow[b-udlxn463ah],
.summary-label[b-udlxn463ah] {
    color: var(--text-muted, #667085);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.print-summary-grid[b-udlxn463ah] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.summary-item[b-udlxn463ah] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    padding: .7rem .75rem;
    border-radius: .65rem;
    background: var(--card-bg, #fff);
}

.order-id-row[b-udlxn463ah] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.tracking-panel[b-udlxn463ah] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem 1rem;
    padding: .8rem .9rem;
    border: 1px solid #bfdbfe;
    border-radius: .65rem;
    background: #eff6ff;
}

.tracking-panel .summary-label[b-udlxn463ah],
.tracking-code[b-udlxn463ah] {
    grid-column: 1;
}

.tracking-panel > a[b-udlxn463ah] {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-weight: 700;
    white-space: nowrap;
}

.technical-details[b-udlxn463ah] {
    border-top: 1px solid var(--border-color, #d8dee9);
    padding-top: .75rem;
}

.technical-details > summary[b-udlxn463ah] {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted, #667085);
}

.technical-grid[b-udlxn463ah] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1rem;
    margin: .8rem 0 0;
}

.technical-grid div[b-udlxn463ah] {
    min-width: 0;
}

.technical-grid dt[b-udlxn463ah] {
    color: var(--text-muted, #667085);
    font-size: .72rem;
}

.technical-grid dd[b-udlxn463ah] {
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
    font-size: .82rem;
}

.print-errors[b-udlxn463ah] {
    padding: .75rem;
    border-radius: .55rem;
    background: #fff5f5;
    color: #b00020;
}

.print-errors p[b-udlxn463ah] {
    margin: 0;
    white-space: pre-wrap;
}

.print-errors p + p[b-udlxn463ah] {
    margin-top: .35rem;
}

.card-header h2[b-udlxn463ah] {
    margin: 0;
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .card-header[b-udlxn463ah] {
        align-items: flex-start;
        flex-direction: column;
    }

    .print-summary-grid[b-udlxn463ah],
    .technical-grid[b-udlxn463ah] {
        grid-template-columns: 1fr;
    }

    .tracking-panel[b-udlxn463ah] {
        grid-template-columns: 1fr;
    }

    .tracking-panel > a[b-udlxn463ah] {
        grid-column: 1;
        grid-row: auto;
    }

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

.refresh-btn[b-udlxn463ah] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: var(--brand, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.refresh-btn:hover:not(:disabled)[b-udlxn463ah] {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.refresh-btn:disabled[b-udlxn463ah] {
    opacity: 0.6;
    cursor: not-allowed;
}

.print-status-tbl td:first-child[b-udlxn463ah] {
    width: 11rem;
    color: #555;
    font-weight: 500;
}

.provider-badge[b-udlxn463ah] {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #eef;
    color: #224;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
}

    .provider-badge.provider-peecho[b-udlxn463ah] {
        background: #ffe9c2;
        color: #6b4a00;
    }

    .provider-badge.provider-gelato[b-udlxn463ah] {
        background: #d8efff;
        color: #003e6b;
    }

    .provider-badge.provider-lulu[b-udlxn463ah] {
        background: #ffd9e6;
        color: #6b0033;
    }

.provider-order-id[b-udlxn463ah] {
    background: #f4f4f5;
    padding: .1rem .35rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.copy-btn[b-udlxn463ah] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-left: .25rem;
}

.status-chip[b-udlxn463ah] {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: #eee;
    color: #333;
}

    .status-chip.status-pending[b-udlxn463ah] {
        background: #f0f0f0;
        color: #555;
    }

    .status-chip.status-inproduction[b-udlxn463ah] {
        background: #fff4cc;
        color: #6b5500;
    }

    .status-chip.status-shipped[b-udlxn463ah] {
        background: #d6ecff;
        color: #0b3a6b;
    }

    .status-chip.status-delivered[b-udlxn463ah] {
        background: #d8f5dc;
        color: #16602a;
    }

    .status-chip.status-cancelled[b-udlxn463ah] {
        background: #ececec;
        color: #777;
    }

    .status-chip.status-requiresattention[b-udlxn463ah],
    .status-chip.status-failedtransient[b-udlxn463ah],
    .status-chip.status-failedpermanent[b-udlxn463ah] {
        background: #ffd9d9;
        color: #7a0000;
    }

.raw-status[b-udlxn463ah] {
    display: block;
    margin-top: .35rem;
    padding: .35rem .55rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-row td[b-udlxn463ah] {
    color: #b00020;
    background: #fff5f5;
}

.error-message[b-udlxn463ah] {
    color: #b00020;
    margin: 0;
}

.info-message[b-udlxn463ah] {
    color: #0b6b2a;
    margin: 0;
}

.placeholder[b-udlxn463ah] {
    color: #777;
    font-style: italic;
}

.unsafe-url[b-udlxn463ah] {
    margin-top: .25rem;
    color: #b00020;
    font-size: .85rem;
}

    .unsafe-url code[b-udlxn463ah] {
        background: #fff5f5;
        padding: .1rem .3rem;
        border-radius: 3px;
        word-break: break-all;
    }

/* Dark mode */
html.dark-mode .print-status-tbl td:first-child[b-udlxn463ah] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .provider-order-id[b-udlxn463ah],
html.dark-mode .raw-status[b-udlxn463ah] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .status-chip[b-udlxn463ah] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .error-row td[b-udlxn463ah],
html.dark-mode .error-message[b-udlxn463ah] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

html.dark-mode .refresh-btn[b-udlxn463ah] {
    background: var(--brand, #3b82f6);
    color: #fff;
}
/* /Components/Pages/Admin/ProfitLoss.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   PROFIT LOSS PAGE — Scoped styles
   Bouwt voort op het admin design systeem (admin-shared.css / dashboard CSS).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────────── */
.pl-header[b-xpxgrjtf9e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.pl-header-left .pl-title[b-xpxgrjtf9e] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0 0 0.1rem;
}

.pl-header-left .pl-subtitle[b-xpxgrjtf9e] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.pl-header-right[b-xpxgrjtf9e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Jaarselectie ────────────────────────────────────────────────────────── */
.year-selector[b-xpxgrjtf9e] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.year-btn[b-xpxgrjtf9e] {
    padding: 0.35rem 0.85rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.year-btn:hover[b-xpxgrjtf9e] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.year-btn.active[b-xpxgrjtf9e] {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

/* ── Verversknop ─────────────────────────────────────────────────────────── */
.pl-refresh-btn[b-xpxgrjtf9e] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: inherit;
}

.pl-refresh-btn:hover:not(:disabled)[b-xpxgrjtf9e] {
    background: #f1f5f9;
    color: #1e293b;
}

/* ── Export button ───────────────────────────────────────────────────────── */
.pl-export-btn[b-xpxgrjtf9e] {
    padding: 0.35rem 0.85rem;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pl-export-btn:hover[b-xpxgrjtf9e] {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.pl-refresh-btn.spinning[b-xpxgrjtf9e] {
    animation: pl-spin-b-xpxgrjtf9e 0.8s linear infinite;
    opacity: 0.5;
}

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

/* ── Loading / Empty ─────────────────────────────────────────────────────── */
.pl-loading[b-xpxgrjtf9e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
    font-size: 0.95rem;
}

.pl-spinner[b-xpxgrjtf9e] {
    width: 22px;
    height: 22px;
    border: 3px solid #e2e8f0;
    border-top-color: #64748b;
    border-radius: 50%;
    animation: pl-spin-b-xpxgrjtf9e 0.7s linear infinite;
}

.pl-empty[b-xpxgrjtf9e] {
    padding: 2rem 3rem;
    color: #94a3b8;
    font-size: 0.95rem;
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.pl-kpi-grid[b-xpxgrjtf9e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem 3rem 0.5rem;
}

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

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

.pl-kpi-card[b-xpxgrjtf9e] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease;
}

.pl-kpi-card:hover[b-xpxgrjtf9e] {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.pl-kpi-card .kpi-icon[b-xpxgrjtf9e] {
    font-size: 1.6rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.kpi-body[b-xpxgrjtf9e] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kpi-label[b-xpxgrjtf9e] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.kpi-value[b-xpxgrjtf9e] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.kpi-sub[b-xpxgrjtf9e] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.kpi-revenue[b-xpxgrjtf9e] { border-left: 3px solid #3b82f6; }
.kpi-net[b-xpxgrjtf9e]     { border-left: 3px solid #6366f1; }
.kpi-costs[b-xpxgrjtf9e]   { border-left: 3px solid #f59e0b; }
.kpi-profit[b-xpxgrjtf9e]  { border-left: 3px solid #22c55e; }
.kpi-loss[b-xpxgrjtf9e]    { border-left: 3px solid #ef4444; }

.kpi-profit .kpi-value[b-xpxgrjtf9e] { color: #16a34a; }
.kpi-loss   .kpi-value[b-xpxgrjtf9e] { color: #dc2626; }

/* ── Kostenrij ───────────────────────────────────────────────────────────── */
.pl-cost-row[b-xpxgrjtf9e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 3rem 1.25rem;
}

.cost-chip[b-xpxgrjtf9e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.82rem;
}

.cost-chip-label[b-xpxgrjtf9e] {
    color: #64748b;
    font-weight: 500;
}

.cost-chip-value[b-xpxgrjtf9e] {
    color: #1e293b;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cost-chip-note[b-xpxgrjtf9e] {
    background: #fffbeb;
    border-color: #fde68a;
}

.cost-chip-note .cost-chip-label[b-xpxgrjtf9e] { color: #92400e; }
.cost-chip-note .cost-chip-value[b-xpxgrjtf9e] { color: #78350f; }

.cost-chip-stale[b-xpxgrjtf9e] {
    background: #fff7ed;
    border-color: #fed7aa;
}

.cost-chip-stale .cost-chip-label[b-xpxgrjtf9e] { color: #c2410c; }
.cost-chip-stale .cost-chip-value[b-xpxgrjtf9e] { color: #9a3412; font-weight: 600; }

.cost-chip-giftcard[b-xpxgrjtf9e] {
    background: #fdf4ff;
    border-color: #e9d5ff;
}

.cost-chip-giftcard .cost-chip-label[b-xpxgrjtf9e] { color: #7e22ce; }
.cost-chip-giftcard .cost-chip-value[b-xpxgrjtf9e] { color: #6b21a8; }

/* ── Tabel ───────────────────────────────────────────────────────────────── */
.pl-table-wrapper[b-xpxgrjtf9e] {
    padding: 0 3rem 1.5rem;
    overflow-x: auto;
}

.pl-table[b-xpxgrjtf9e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.pl-table thead tr[b-xpxgrjtf9e] {
    background: #1e293b;
    color: #cbd5e1;
}

.pl-table thead th[b-xpxgrjtf9e] {
    padding: 0.75rem 0.9rem;
    text-align: right;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pl-table thead th.col-month[b-xpxgrjtf9e] {
    text-align: left;
    border-radius: 12px 0 0 0;
}

.pl-table thead th:last-child[b-xpxgrjtf9e] {
    border-radius: 0 12px 0 0;
}

.pl-table tbody tr[b-xpxgrjtf9e] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}

.pl-table tbody tr:hover[b-xpxgrjtf9e] {
    background: #f8fafc;
}

.pl-table tbody tr.row-empty[b-xpxgrjtf9e] {
    color: #cbd5e1;
}

.pl-table tbody tr.row-profit td.result-col[b-xpxgrjtf9e] { }
.pl-table tbody tr.row-loss td.result-col[b-xpxgrjtf9e]   { }

.pl-table td[b-xpxgrjtf9e] {
    padding: 0.65rem 0.9rem;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.pl-table td.col-month[b-xpxgrjtf9e] {
    text-align: left;
    font-weight: 600;
    color: #334155;
}

.pl-table td.muted[b-xpxgrjtf9e] { color: #94a3b8; }

.pl-table td.cost-col[b-xpxgrjtf9e] {
    color: #f59e0b;
}

.pl-table tr.row-empty td.cost-col[b-xpxgrjtf9e] { color: #e2e8f0; }

.pl-table td.profit-pos[b-xpxgrjtf9e] {
    color: #16a34a;
    font-weight: 700;
}

.pl-table td.profit-neg[b-xpxgrjtf9e] {
    color: #dc2626;
    font-weight: 700;
}

/* ── Tfoot (Totaalrij) ────────────────────────────────────────────────────── */
.pl-table tfoot tr.row-total[b-xpxgrjtf9e] {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
}

.pl-table tfoot td[b-xpxgrjtf9e] {
    padding: 0.75rem 0.9rem;
    text-align: right;
    font-size: 0.9rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pl-table tfoot td.col-month[b-xpxgrjtf9e] { text-align: left; }
.pl-table tfoot td.cost-col[b-xpxgrjtf9e]  { color: #f59e0b; }
.pl-table tfoot td.profit-pos[b-xpxgrjtf9e] { color: #16a34a; font-weight: 700; }
.pl-table tfoot td.profit-neg[b-xpxgrjtf9e] { color: #dc2626; font-weight: 700; }

/* ── Margebar ────────────────────────────────────────────────────────────── */
.col-bar[b-xpxgrjtf9e] { width: 120px; min-width: 100px; }

.margin-bar-wrap[b-xpxgrjtf9e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.margin-bar[b-xpxgrjtf9e] {
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    min-width: 2px;
    transition: width 0.3s ease;
}

.margin-bar.bar-pos[b-xpxgrjtf9e] { background: linear-gradient(90deg, #22c55e, #16a34a); }
.margin-bar.bar-neg[b-xpxgrjtf9e] { background: linear-gradient(90deg, #f87171, #dc2626); }

.margin-pct[b-xpxgrjtf9e] {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Disclaimer ──────────────────────────────────────────────────────────── */
.pl-disclaimer[b-xpxgrjtf9e] {
    padding: 0.75rem 3rem 2rem;
    font-size: 0.8rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    margin: 0 0 0;
}

.pl-disclaimer p[b-xpxgrjtf9e] { margin: 0; line-height: 1.6; }
.pl-disclaimer em[b-xpxgrjtf9e] { color: #64748b; }
.pl-disclaimer strong[b-xpxgrjtf9e] { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   Volgt het html.dark-mode patroon van admin-shared.css.
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark-mode .pl-header[b-xpxgrjtf9e] {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

html.dark-mode .pl-header-left .pl-title[b-xpxgrjtf9e] {
    color: var(--text-primary);
}

html.dark-mode .pl-header-left .pl-subtitle[b-xpxgrjtf9e] {
    color: var(--text-tertiary);
}

/* ── Jaarselectie dark ───────────────────────────────────────────────────── */
html.dark-mode .year-btn[b-xpxgrjtf9e] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

html.dark-mode .year-btn:hover[b-xpxgrjtf9e] {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

html.dark-mode .year-btn.active[b-xpxgrjtf9e] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.25);
}

/* ── Knoppen dark ────────────────────────────────────────────────────────── */
html.dark-mode .pl-refresh-btn[b-xpxgrjtf9e] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-tertiary);
}

html.dark-mode .pl-refresh-btn:hover:not(:disabled)[b-xpxgrjtf9e] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

html.dark-mode .pl-export-btn[b-xpxgrjtf9e] {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
    color: #93c5fd;
}

html.dark-mode .pl-export-btn:hover[b-xpxgrjtf9e] {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
}

/* ── KPI Cards dark ──────────────────────────────────────────────────────── */
html.dark-mode .pl-kpi-card[b-xpxgrjtf9e] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-sm);
}

html.dark-mode .pl-kpi-card:hover[b-xpxgrjtf9e] {
    box-shadow: var(--shadow-md);
}

html.dark-mode .kpi-label[b-xpxgrjtf9e] {
    color: var(--text-muted);
}

html.dark-mode .kpi-value[b-xpxgrjtf9e] {
    color: var(--text-primary);
}

html.dark-mode .kpi-sub[b-xpxgrjtf9e] {
    color: var(--text-muted);
}

html.dark-mode .kpi-profit .kpi-value[b-xpxgrjtf9e] { color: var(--accent-success); }
html.dark-mode .kpi-loss   .kpi-value[b-xpxgrjtf9e] { color: var(--accent-error); }

/* ── Kostenrij chips dark ────────────────────────────────────────────────── */
html.dark-mode .cost-chip[b-xpxgrjtf9e] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

html.dark-mode .cost-chip-label[b-xpxgrjtf9e] {
    color: var(--text-tertiary);
}

html.dark-mode .cost-chip-value[b-xpxgrjtf9e] {
    color: var(--text-primary);
}

html.dark-mode .cost-chip-note[b-xpxgrjtf9e] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .cost-chip-note .cost-chip-label[b-xpxgrjtf9e] { color: #fcd34d; }
html.dark-mode .cost-chip-note .cost-chip-value[b-xpxgrjtf9e] { color: #fde68a; }

html.dark-mode .cost-chip-stale[b-xpxgrjtf9e] {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.35);
}

html.dark-mode .cost-chip-stale .cost-chip-label[b-xpxgrjtf9e] { color: #fb923c; }
html.dark-mode .cost-chip-stale .cost-chip-value[b-xpxgrjtf9e] { color: #fed7aa; font-weight: 600; }

html.dark-mode .cost-chip-giftcard[b-xpxgrjtf9e] {
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.3);
}

html.dark-mode .cost-chip-giftcard .cost-chip-label[b-xpxgrjtf9e] { color: #c084fc; }
html.dark-mode .cost-chip-giftcard .cost-chip-value[b-xpxgrjtf9e] { color: #e9d5ff; }

/* ── Loading / Empty dark ────────────────────────────────────────────────── */
html.dark-mode .pl-loading[b-xpxgrjtf9e] {
    color: var(--text-tertiary);
}

html.dark-mode .pl-spinner[b-xpxgrjtf9e] {
    border-color: var(--border-primary);
    border-top-color: var(--text-tertiary);
}

html.dark-mode .pl-empty[b-xpxgrjtf9e] {
    color: var(--text-muted);
}

/* ── Tabel dark ──────────────────────────────────────────────────────────── */
html.dark-mode .pl-table[b-xpxgrjtf9e] {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

html.dark-mode .pl-table thead tr[b-xpxgrjtf9e] {
    background: #0f172a;
    color: var(--text-secondary);
}

html.dark-mode .pl-table tbody tr[b-xpxgrjtf9e] {
    border-bottom-color: var(--border-primary);
}

html.dark-mode .pl-table tbody tr:hover[b-xpxgrjtf9e] {
    background: var(--bg-tertiary);
}

html.dark-mode .pl-table tbody tr.row-empty[b-xpxgrjtf9e] {
    color: var(--border-secondary);
}

html.dark-mode .pl-table td.col-month[b-xpxgrjtf9e] {
    color: var(--text-secondary);
}

html.dark-mode .pl-table td.muted[b-xpxgrjtf9e] {
    color: var(--text-muted);
}

html.dark-mode .pl-table td.cost-col[b-xpxgrjtf9e] {
    color: var(--accent-warning);
}

html.dark-mode .pl-table tr.row-empty td.cost-col[b-xpxgrjtf9e] {
    color: var(--border-primary);
}

html.dark-mode .pl-table td.profit-pos[b-xpxgrjtf9e] {
    color: var(--accent-success);
}

html.dark-mode .pl-table td.profit-neg[b-xpxgrjtf9e] {
    color: var(--accent-error);
}

/* ── Tfoot dark ──────────────────────────────────────────────────────────── */
html.dark-mode .pl-table tfoot tr.row-total[b-xpxgrjtf9e] {
    background: var(--bg-primary);
    border-top-color: var(--border-secondary);
}

html.dark-mode .pl-table tfoot td.cost-col[b-xpxgrjtf9e]  { color: var(--accent-warning); }
html.dark-mode .pl-table tfoot td.profit-pos[b-xpxgrjtf9e] { color: var(--accent-success); }
html.dark-mode .pl-table tfoot td.profit-neg[b-xpxgrjtf9e] { color: var(--accent-error); }

/* ── Margebar dark ───────────────────────────────────────────────────────── */
html.dark-mode .margin-pct[b-xpxgrjtf9e] {
    color: var(--text-tertiary);
}

html.dark-mode .margin-bar.bar-pos[b-xpxgrjtf9e] {
    background: linear-gradient(90deg, #4ade80, #22c55e);
}

html.dark-mode .margin-bar.bar-neg[b-xpxgrjtf9e] {
    background: linear-gradient(90deg, #f87171, #ef4444);
}

/* ── Disclaimer dark ─────────────────────────────────────────────────────── */
html.dark-mode .pl-disclaimer[b-xpxgrjtf9e] {
    color: var(--text-muted);
    border-top-color: var(--border-primary);
}

html.dark-mode .pl-disclaimer em[b-xpxgrjtf9e]  { color: var(--text-tertiary); }
html.dark-mode .pl-disclaimer strong[b-xpxgrjtf9e] { color: var(--text-tertiary); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pl-header[b-xpxgrjtf9e], .pl-kpi-grid[b-xpxgrjtf9e], .pl-cost-row[b-xpxgrjtf9e], .pl-table-wrapper[b-xpxgrjtf9e], .pl-disclaimer[b-xpxgrjtf9e] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pl-loading[b-xpxgrjtf9e], .pl-empty[b-xpxgrjtf9e] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pl-table thead th.cost-col[b-xpxgrjtf9e],
    .pl-table tbody td.cost-col[b-xpxgrjtf9e] {
        display: none;
    }
}
/* /Components/Pages/Admin/Prompts.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   PROMPTS PAGE - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
.prompts-header[b-m44piyhl02] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    z-index: 250;
}

.prompts-action-split[b-m44piyhl02] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    isolation: isolate;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #1e293b;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    z-index: 260;
}

.prompts-action-primary[b-m44piyhl02],
.prompts-action-toggle[b-m44piyhl02],
.prompts-action-menu-item[b-m44piyhl02] {
    font-family: inherit;
}

.prompts-action-primary[b-m44piyhl02],
.prompts-action-toggle[b-m44piyhl02] {
    border: 0;
    color: white;
    background: #1e293b;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.prompts-action-primary[b-m44piyhl02] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.55rem 1.05rem 0.55rem 1rem;
    border-radius: 14px 0 0 14px;
}

.prompts-action-primary:hover[b-m44piyhl02],
.prompts-action-toggle:hover[b-m44piyhl02] {
    background: #334155;
}

.prompts-action-primary:active[b-m44piyhl02],
.prompts-action-toggle:active[b-m44piyhl02] {
    transform: translateY(1px);
}

.prompts-action-icon[b-m44piyhl02] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.14);
}

.prompts-action-copy[b-m44piyhl02] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.prompts-action-label[b-m44piyhl02] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prompts-action-hint[b-m44piyhl02] {
    margin-top: 0.16rem;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 500;
}

.prompts-action-toggle[b-m44piyhl02] {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 48px;
    border-left: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0 14px 14px 0;
}

.prompts-action-chevron[b-m44piyhl02] {
    display: block;
    color: #cbd5e1;
    transition: transform 0.2s ease, color 0.18s ease;
}

.prompts-action-toggle:hover .prompts-action-chevron[b-m44piyhl02] {
    color: #ffffff;
}

.prompts-action-toggle[aria-expanded="true"] .prompts-action-chevron[b-m44piyhl02] {
    transform: rotate(180deg);
    color: #ffffff;
}

.prompts-action-menu[b-m44piyhl02] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 1000;
    width: min(330px, calc(100vw - 2rem));
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.prompts-action-menu[b-m44piyhl02]::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid rgba(226, 232, 240, 0.9);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    transform: rotate(45deg);
}

.prompts-action-menu-item[b-m44piyhl02] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.72rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.prompts-action-menu-item:hover:not(:disabled)[b-m44piyhl02],
.prompts-action-menu-item:focus-visible:not(:disabled)[b-m44piyhl02] {
    background: #f8fafc;
    border-color: #e2e8f0;
    outline: none;
    transform: translateX(2px);
}

.prompts-action-menu-item:disabled[b-m44piyhl02] {
    cursor: not-allowed;
    opacity: 0.58;
}

.prompts-action-menu-icon[b-m44piyhl02] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #f1f5f9;
    color: #334155;
}

.prompts-action-menu-title[b-m44piyhl02],
.prompts-action-menu-description[b-m44piyhl02] {
    display: block;
}

.prompts-action-menu-title[b-m44piyhl02] {
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 700;
}

.prompts-action-menu-description[b-m44piyhl02] {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.3;
}

/* ── Macros Section ─────────────────────────────────────────────────────────── */
.macros-section[b-m44piyhl02] {
    padding: 1rem 3rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.macros-toggle[b-m44piyhl02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.macros-toggle:hover[b-m44piyhl02] {
    background: #f1f5f9;
}

.toggle-icon[b-m44piyhl02] {
    font-size: 0.75rem;
    color: #64748b;
}

.toggle-title[b-m44piyhl02] {
    font-weight: 600;
    color: #1e293b;
}

.toggle-hint[b-m44piyhl02] {
    margin-left: auto;
    font-size: 0.8rem;
    color: #94a3b8;
}

.macros-content[b-m44piyhl02] {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.macro-grid[b-m44piyhl02] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.macro-item[b-m44piyhl02] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.macro-item code[b-m44piyhl02] {
    background: #1e293b;
    color: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: nowrap;
}

.macro-item span[b-m44piyhl02] {
    font-size: 0.85rem;
    color: #64748b;
}

/* ── Content Area ───────────────────────────────────────────────────────────── */
.prompts-content[b-m44piyhl02] {
    padding: 1.5rem 3rem;
    background: #f8fafc;
    min-height: calc(100vh - 400px);
}

.prompts-content .card-header h2[b-m44piyhl02] {
    gap: 0;
}

.prompt-count[b-m44piyhl02] {
    color: #64748b;
    font-size: 0.85rem;
}

/* ── Filter Bar ─────────────────────────────────────────────────────────────── */
.filter-bar[b-m44piyhl02] {
    margin-bottom: 1rem;
}

.filter-input[b-m44piyhl02] {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
}

.filter-input:focus[b-m44piyhl02] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ── Data Table ─────────────────────────────────────────────────────────────── */
.table-container[b-m44piyhl02] {
    overflow-x: auto;
}

.data-table[b-m44piyhl02] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead tr[b-m44piyhl02] {
    background: #f8fafc;
}

.data-table th[b-m44piyhl02] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td[b-m44piyhl02] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.col-id[b-m44piyhl02] {
    width: 60px;
    color: #64748b;
    font-weight: 500;
}

.col-type[b-m44piyhl02] {
    width: 120px;
}

.col-prompt[b-m44piyhl02] {
    min-width: 300px;
}

.clickable-row[b-m44piyhl02] {
    cursor: pointer;
    transition: background 0.2s;
}

.clickable-row:hover[b-m44piyhl02] {
    background: #f8fafc;
}

.row-editing[b-m44piyhl02] {
    background: #eff6ff;
}

/* ── Type Badge ─────────────────────────────────────────────────────────────── */
.type-badge[b-m44piyhl02] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: #e2e8f0;
    color: #475569;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Prompt Preview/Edit ────────────────────────────────────────────────────── */
.prompt-preview[b-m44piyhl02] {
    margin: 0;
    white-space: pre-wrap;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #475569;
    max-height: 150px;
    overflow: hidden;
    line-height: 1.5;
}

.more-indicator[b-m44piyhl02] {
    display: block;
    margin-top: 0.5rem;
    color: #3b82f6;
    font-size: 0.8rem;
    font-style: italic;
}

.prompt-editor[b-m44piyhl02] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.prompt-editor:focus[b-m44piyhl02] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.edit-hint[b-m44piyhl02] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* ── Provider overrides ────────────────────────────────────────────────── */
.provider-section[b-m44piyhl02] {
    padding: 1.5rem 3rem 0;
    background: #f8fafc;
}

.provider-card[b-m44piyhl02] {
    padding: 0;
    overflow: hidden;
}

.provider-card-header[b-m44piyhl02] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.provider-card-header:hover[b-m44piyhl02] {
    background: #f8fafc;
}

.provider-card-heading[b-m44piyhl02] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.provider-card-title[b-m44piyhl02] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
}

.provider-card-subtitle[b-m44piyhl02] {
    font-size: 0.82rem;
    color: #64748b;
}

.provider-card-body[b-m44piyhl02] {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.provider-scope-note[b-m44piyhl02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.82rem;
    color: #475569;
}

.provider-scope-icon[b-m44piyhl02] {
    font-size: 0.95rem;
}

.provider-scope-note strong[b-m44piyhl02] {
    color: #1e293b;
}

.provider-type-switch[b-m44piyhl02] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.1rem 0;
}

.provider-type-btn[b-m44piyhl02] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: white;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}

.provider-type-btn:hover[b-m44piyhl02] {
    border-color: #94a3b8;
}

.provider-type-btn.active[b-m44piyhl02] {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.provider-count-pill[b-m44piyhl02] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #3b82f6;
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
}

.provider-tabs[b-m44piyhl02] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.provider-tab[b-m44piyhl02] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: white;
    color: #475569;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.provider-tab:hover[b-m44piyhl02] {
    border-color: #94a3b8;
}

.provider-tab.active[b-m44piyhl02] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.provider-dot[b-m44piyhl02] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}

.provider-tab.active .provider-dot[b-m44piyhl02] {
    background: #bbf7d0;
}

.provider-fields[b-m44piyhl02] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.provider-field-label[b-m44piyhl02] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #1e293b;
}

.provider-native-badge[b-m44piyhl02] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 500;
}

.provider-native-badge code[b-m44piyhl02] {
    font-size: 0.72rem;
}

.provider-editor[b-m44piyhl02] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
}

.provider-editor:focus[b-m44piyhl02] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.provider-card-actions[b-m44piyhl02] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.provider-badge[b-m44piyhl02] {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.modal-backdrop[b-m44piyhl02] {
    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;
}

.tester-modal[b-m44piyhl02] {
    background: white;
    border-radius: 16px;
    width: 700px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-header[b-m44piyhl02] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3[b-m44piyhl02] {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.modal-close[b-m44piyhl02] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0.25rem;
    border-radius: 4px;
}

.modal-close:hover[b-m44piyhl02] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-m44piyhl02] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tester-section[b-m44piyhl02] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-label[b-m44piyhl02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #1e293b;
}

.label-icon[b-m44piyhl02] {
    font-size: 1rem;
}

.tester-input[b-m44piyhl02],
.tester-output[b-m44piyhl02] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.tester-input:focus[b-m44piyhl02] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tester-output[b-m44piyhl02] {
    background: #f8fafc;
    color: #475569;
}

.tester-actions[b-m44piyhl02] {
    display: flex;
    justify-content: center;
}

.modal-footer[b-m44piyhl02] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .prompts-header[b-m44piyhl02] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .macros-section[b-m44piyhl02] {
        padding: 1rem 1.5rem;
    }

    .prompts-content[b-m44piyhl02] {
        padding: 1rem 1.5rem;
    }

    .provider-section[b-m44piyhl02] {
        padding: 1rem 1.5rem 0;
    }

    .macro-grid[b-m44piyhl02] {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .prompts-header[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .macros-section[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .macros-toggle[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .macros-toggle:hover[b-m44piyhl02] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .toggle-icon[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .toggle-title[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .toggle-hint[b-m44piyhl02] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .macros-content[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .macro-item[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .macro-item span[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .prompts-content[b-m44piyhl02] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .provider-section[b-m44piyhl02] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .prompt-count[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .filter-input[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .data-table thead tr[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .data-table th[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .data-table td[b-m44piyhl02] {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .col-id[b-m44piyhl02] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .clickable-row:hover[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .row-editing[b-m44piyhl02] {
    background: rgba(96, 165, 250, 0.15);
}

html.dark-mode .type-badge[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .prompt-preview[b-m44piyhl02] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .prompt-editor[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .modal-content[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .modal-header[b-m44piyhl02] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .modal-header h3[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .section-label[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tester-input[b-m44piyhl02],
html.dark-mode .tester-output[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tester-output[b-m44piyhl02] {
    background: var(--bg-primary, #0f172a);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .modal-footer[b-m44piyhl02] {
    border-top-color: var(--border-primary, #334155);
}

/* ─── IMPORT LABEL (styled as action-btn) ─────────────────────────────────── */
.import-label[b-m44piyhl02] {
    cursor: pointer;
}

html.dark-mode .prompts-header[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .prompts-action-split[b-m44piyhl02] {
    border-color: var(--border-secondary, #475569);
    background: var(--bg-tertiary, #334155);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark-mode .prompts-action-primary[b-m44piyhl02],
html.dark-mode .prompts-action-toggle[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .prompts-action-primary:hover[b-m44piyhl02],
html.dark-mode .prompts-action-toggle:hover[b-m44piyhl02] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .prompts-action-icon[b-m44piyhl02] {
    background: rgba(96, 165, 250, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
}

html.dark-mode .prompts-action-hint[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .prompts-action-toggle[b-m44piyhl02] {
    border-left-color: rgba(148, 163, 184, 0.2);
}

html.dark-mode .prompts-action-menu[b-m44piyhl02] {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(71, 85, 105, 0.9);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark-mode .prompts-action-menu[b-m44piyhl02]::before {
    border-color: rgba(71, 85, 105, 0.9);
}

html.dark-mode .prompts-action-menu-item[b-m44piyhl02] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .prompts-action-menu-item:hover:not(:disabled)[b-m44piyhl02],
html.dark-mode .prompts-action-menu-item:focus-visible:not(:disabled)[b-m44piyhl02] {
    background: rgba(51, 65, 85, 0.88);
    border-color: rgba(96, 165, 250, 0.22);
}

html.dark-mode .prompts-action-menu-icon[b-m44piyhl02] {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .prompts-action-menu-title[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .prompts-action-menu-description[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8);
}

/* ─── IMPORT CONFIRMATION OVERLAY ─────────────────────────────────────────── */
.import-overlay[b-m44piyhl02] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: importFadeIn-b-m44piyhl02 0.15s ease;
}

.import-dialog[b-m44piyhl02] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.import-dialog h3[b-m44piyhl02] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.import-dialog p[b-m44piyhl02] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.import-summary[b-m44piyhl02] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-m44piyhl02] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.import-actions[b-m44piyhl02] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ─── TOAST NOTIFICATION ──────────────────────────────────────────────────── */
.toast[b-m44piyhl02] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2000;
    animation: importFadeIn-b-m44piyhl02 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.toast.success[b-m44piyhl02] {
    background: #059669;
    color: white;
}

.toast.error[b-m44piyhl02] {
    background: #dc2626;
    color: white;
}

@keyframes importFadeIn-b-m44piyhl02 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── IMPORT DARK MODE ────────────────────────────────────────────────────── */
html.dark-mode .import-dialog[b-m44piyhl02] {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html.dark-mode .import-dialog h3[b-m44piyhl02] {
    color: #f1f5f9;
}

html.dark-mode .import-dialog p[b-m44piyhl02] {
    color: #cbd5e1;
}

html.dark-mode .import-summary li[b-m44piyhl02] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* ─── PROVIDER OVERRIDES DARK MODE ──────────────────────────────────────── */
html.dark-mode .provider-card-header:hover[b-m44piyhl02] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .provider-card-title[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .provider-card-subtitle[b-m44piyhl02] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .provider-card-body[b-m44piyhl02] {
    border-top-color: var(--border-primary, #475569);
}

html.dark-mode .provider-scope-note[b-m44piyhl02] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #475569);
    border-left-color: #3b82f6;
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .provider-scope-note strong[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .provider-type-btn[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .provider-type-btn.active[b-m44piyhl02] {
    background: rgba(59, 130, 246, 0.18);
    border-color: #3b82f6;
    color: #bfdbfe;
}

html.dark-mode .provider-tab[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .provider-tab.active[b-m44piyhl02] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

html.dark-mode .provider-field-label[b-m44piyhl02] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .provider-native-badge[b-m44piyhl02] {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}

html.dark-mode .provider-editor[b-m44piyhl02] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-secondary, #475569);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .provider-badge[b-m44piyhl02] {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}
/* /Components/Pages/Admin/SeoSettings.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   SEO SETTINGS PAGE - DEDICATED STYLES
   ???????????????????????????????????????????????????????????????????????????? */

/* ?? Header ??????????????????????????????????????????????????????????????????? */
.seo-header[b-waxnefqp3h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.header-left[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.header-title-row[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.seo-logo[b-waxnefqp3h] {
    width: 56px;
    height: 56px;
    background: #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-logo svg[b-waxnefqp3h] {
    width: 28px;
    height: 28px;
    stroke: #1e293b;
}

.breadcrumb[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.breadcrumb-link[b-waxnefqp3h] {
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover[b-waxnefqp3h] {
    text-decoration: underline;
}

.breadcrumb-sep[b-waxnefqp3h] {
    color: #94a3b8;
}

.breadcrumb-current[b-waxnefqp3h] {
    color: #64748b;
}

.page-title[b-waxnefqp3h] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.header-subtitle[b-waxnefqp3h] {
    font-size: 0.95rem;
}

.header-actions[b-waxnefqp3h] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-waxnefqp3h] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.action-btn.primary[b-waxnefqp3h] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.action-btn.primary:hover:not(:disabled)[b-waxnefqp3h] {
    background: #2563eb;
    border-color: #2563eb;
}

.action-btn:disabled[b-waxnefqp3h] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon[b-waxnefqp3h] {
    font-size: 1rem;
}

/* ?? Loading ?????????????????????????????????????????????????????????????????? */
.loading-container[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: #64748b;
}

.loading-spinner[b-waxnefqp3h] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-waxnefqp3h 0.8s linear infinite;
}

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

/* ?? Content Area  */
.seo-content[b-waxnefqp3h] {
    padding: 1.5rem 3rem 3rem;
    background: #f1f5f9;
    min-height: calc(100vh - 150px);
}

/* ?? SEO Score Section  */
.seo-score-section[b-waxnefqp3h] {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.score-card[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.score-circle[b-waxnefqp3h] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
}

.score-circle[b-waxnefqp3h]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: white;
}

.score-value[b-waxnefqp3h] {
    position: relative;
    font-size: 2rem;
    line-height: 1;
}

.score-max[b-waxnefqp3h] {
    position: relative;
    font-size: 0.875rem;
    opacity: 0.7;
}

.score-excellent[b-waxnefqp3h] {
    background: conic-gradient(#10b981 0deg, #10b981 calc(var(--score, 80) * 3.6deg), #e2e8f0 0deg);
    color: #10b981;
}

.score-good[b-waxnefqp3h] {
    background: conic-gradient(#3b82f6 0deg, #3b82f6 calc(var(--score, 60) * 3.6deg), #e2e8f0 0deg);
    color: #3b82f6;
}

.score-fair[b-waxnefqp3h] {
    background: conic-gradient(#f59e0b 0deg, #f59e0b calc(var(--score, 40) * 3.6deg), #e2e8f0 0deg);
    color: #f59e0b;
}

.score-poor[b-waxnefqp3h] {
    background: conic-gradient(#ef4444 0deg, #ef4444 calc(var(--score, 20) * 3.6deg), #e2e8f0 0deg);
    color: #ef4444;
}

.score-info h2[b-waxnefqp3h] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    color: #1e293b;
}

.score-status[b-waxnefqp3h] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.score-checklist[b-waxnefqp3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
}

.check-item[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.check-pass[b-waxnefqp3h] {
    background: #dcfce7;
    color: #166534;
}

.check-fail[b-waxnefqp3h] {
    background: #fee2e2;
    color: #991b1b;
}

.check-icon[b-waxnefqp3h] {
    font-size: 0.9rem;
}

/* ?? Grid Layout ?????????????????????????????????????????????????????????????? */
.seo-grid[b-waxnefqp3h] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
}

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

.seo-main[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.seo-sidebar[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ?? Card Styles ?????????????????????????????????????????????????????????????? */
.seo-card[b-waxnefqp3h] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

.card-icon[b-waxnefqp3h] {
    font-size: 1.25rem;
}

.card-header h3[b-waxnefqp3h] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.card-body[b-waxnefqp3h] {
    padding: 1.25rem;
}

.card-intro[b-waxnefqp3h] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

/* ?? Form Elements ???????????????????????????????????????????????????????????? */
.form-row[b-waxnefqp3h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row[b-waxnefqp3h] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-waxnefqp3h] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-waxnefqp3h] {
    margin-bottom: 0;
}

.form-group label[b-waxnefqp3h] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.required[b-waxnefqp3h] {
    color: #ef4444;
}

.optional[b-waxnefqp3h] {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.8rem;
}

.input[b-waxnefqp3h] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1f2937;
    transition: all 0.2s ease;
    background: white;
}

.input:focus[b-waxnefqp3h] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.input[b-waxnefqp3h]::placeholder {
    color: #9ca3af;
}

.textarea[b-waxnefqp3h] {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.textarea-sm[b-waxnefqp3h] {
    min-height: 54px;
}

.input-with-icon[b-waxnefqp3h] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-waxnefqp3h] {
    position: absolute;
    left: 0.75rem;
    font-size: 1rem;
    pointer-events: none;
}

.input-with-icon .input[b-waxnefqp3h] {
    padding-left: 2.25rem;
}

.help[b-waxnefqp3h] {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* ?? Character Counter ???????????????????????????????????????????????????????? */
.char-counter[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.8rem;
}

.char-counter .optimal[b-waxnefqp3h] {
    color: #9ca3af;
}

.counter-empty[b-waxnefqp3h] { color: #6b7280; }
.counter-short[b-waxnefqp3h] { color: #f59e0b; }
.counter-optimal[b-waxnefqp3h] { color: #10b981; }
.counter-long[b-waxnefqp3h] { color: #f59e0b; }
.counter-toolong[b-waxnefqp3h] { color: #ef4444; }

.char-counter-sm[b-waxnefqp3h] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: right;
    margin-top: 0.25rem;
}

/* ?? Page Descriptions ???????????????????????????????????????????????????????? */
.page-descriptions[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-desc-item[b-waxnefqp3h] {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.page-desc-header[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.page-icon[b-waxnefqp3h] {
    font-size: 1rem;
}

.page-name[b-waxnefqp3h] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.page-url[b-waxnefqp3h] {
    margin-left: auto;
    font-size: 0.8rem;
    color: #64748b;
    font-family: monospace;
}

/* ?? OG Preview ??????????????????????????????????????????????????????????????? */
.og-preview[b-waxnefqp3h] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.og-preview h4[b-waxnefqp3h] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.social-card-preview[b-waxnefqp3h] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    max-width: 500px;
}

.preview-image[b-waxnefqp3h] {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
}

.preview-content[b-waxnefqp3h] {
    padding: 0.75rem 1rem;
}

.preview-url[b-waxnefqp3h] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.preview-title[b-waxnefqp3h] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.preview-description[b-waxnefqp3h] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

/* ?? Schema Toggles ??????????????????????????????????????????????????????????? */
.schema-toggles[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schema-toggle[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schema-toggle:hover[b-waxnefqp3h] {
    background: #f1f5f9;
}

.schema-toggle input[b-waxnefqp3h] {
    display: none;
}

.toggle-track[b-waxnefqp3h] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.schema-toggle input:checked + .toggle-track[b-waxnefqp3h] {
    background: #10b981;
}

.toggle-thumb[b-waxnefqp3h] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.schema-toggle input:checked + .toggle-track .toggle-thumb[b-waxnefqp3h] {
    left: 22px;
}

.toggle-content[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.toggle-title[b-waxnefqp3h] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.toggle-desc[b-waxnefqp3h] {
    font-size: 0.8rem;
    color: #64748b;
}

/* ?? SERP Preview ????????????????????????????????????????????????????????????? */
.serp-preview[b-waxnefqp3h] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-family: Arial, sans-serif;
}

.serp-favicon[b-waxnefqp3h] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.serp-favicon img[b-waxnefqp3h] {
    width: 16px;
    height: 16px;
}

.serp-url[b-waxnefqp3h] {
    display: inline;
    color: #202124;
    font-size: 0.75rem;
}

.serp-title[b-waxnefqp3h] {
    color: #1a0dab;
    font-size: 1.125rem;
    margin: 0.25rem 0;
    cursor: pointer;
}

.serp-title:hover[b-waxnefqp3h] {
    text-decoration: underline;
}

.serp-description[b-waxnefqp3h] {
    color: #4d5156;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ?? Tool Links ??????????????????????????????????????????????????????????????? */
.tool-warning[b-waxnefqp3h] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #92400e;
}

.tool-warning .warning-icon[b-waxnefqp3h] {
    flex-shrink: 0;
}

.tool-links[b-waxnefqp3h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-link[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: all 0.2s ease;
}

.tool-link:hover:not(.disabled)[b-waxnefqp3h] {
    background: #e2e8f0;
}

.tool-link.disabled[b-waxnefqp3h] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
}

.tool-link.external[b-waxnefqp3h] {
    background: #f0f9ff;
}

.tool-link.external:hover[b-waxnefqp3h] {
    background: #e0f2fe;
}

.tool-icon[b-waxnefqp3h] {
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.tool-name[b-waxnefqp3h] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.tool-arrow[b-waxnefqp3h] {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* ?? Tips Card ???????????????????????????????????????????????????????????????? */
.tips-card[b-waxnefqp3h] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
}

.tips-card .card-header[b-waxnefqp3h] {
    background: transparent;
    border-bottom-color: #fde68a;
}

.tips-list[b-waxnefqp3h] {
    margin: 0;
    padding: 0 0 0 1.25rem;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
}

.tips-list li[b-waxnefqp3h] {
    margin-bottom: 0.5rem;
}

.tips-list li:last-child[b-waxnefqp3h] {
    margin-bottom: 0;
}

.tips-list strong[b-waxnefqp3h] {
    color: #78350f;
}

html.dark-mode .tips-card[b-waxnefqp3h] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(51, 65, 85, 0.92)) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

html.dark-mode .tips-card .card-header[b-waxnefqp3h] {
    border-bottom-color: rgba(251, 191, 36, 0.25) !important;
}

html.dark-mode .tips-list[b-waxnefqp3h] {
    color: #f8d477 !important;
}

html.dark-mode .tips-list strong[b-waxnefqp3h] {
    color: #fcd34d !important;
}

/* ═══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .seo-header[b-waxnefqp3h] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .header-actions[b-waxnefqp3h] {
        width: 100%;
        justify-content: flex-start;
    }

    .seo-content[b-waxnefqp3h] {
        padding: 1rem 1.5rem;
    }

    .seo-score-section[b-waxnefqp3h] {
        flex-direction: column;
        gap: 1rem;
    }

    .score-checklist[b-waxnefqp3h] {
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CRAWLER FILES EDITOR (robots.txt & llms.txt)
   ═══════════════════════════════════════════════════════════════════════════════ */

.crawler-card[b-waxnefqp3h] {
    border: 2px solid #e2e8f0;
}

.crawler-card .card-header[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-badge[b-waxnefqp3h] {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Tabs */
.crawler-tabs[b-waxnefqp3h] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.crawler-tab[b-waxnefqp3h] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.crawler-tab:hover[b-waxnefqp3h] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.crawler-tab.active[b-waxnefqp3h] {
    background: white;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.tab-icon[b-waxnefqp3h] {
    font-size: 1.125rem;
}

.tab-label[b-waxnefqp3h] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.tab-status[b-waxnefqp3h] {
    margin-left: auto;
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
}

.tab-status.auto[b-waxnefqp3h] {
    background: #dcfce7;
    color: #166534;
}

.tab-status.custom[b-waxnefqp3h] {
    background: #e0f2fe;
    color: #0369a1;
}

/* Editor */
.crawler-editor[b-waxnefqp3h] {
    background: #1e293b;
    border-radius: 8px;
    overflow: hidden;
}

.editor-toolbar[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #334155;
    border-bottom: 1px solid #475569;
}

.toolbar-label[b-waxnefqp3h] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #94a3b8;
}

.toolbar-actions[b-waxnefqp3h] {
    display: flex;
    gap: 0.25rem;
}

.toolbar-btn[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.toolbar-btn:hover[b-waxnefqp3h] {
    background: #475569;
    color: #f1f5f9;
}

.textarea-code[b-waxnefqp3h] {
    width: 100%;
    min-height: 200px;
    padding: 0.75rem;
    background: #1e293b;
    border: none;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.textarea-code[b-waxnefqp3h]::placeholder {
    color: #64748b;
}

.textarea-code:focus[b-waxnefqp3h] {
    outline: none;
}

.editor-hint[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #334155;
    border-top: 1px solid #475569;
    font-size: 0.8rem;
    color: #94a3b8;
}

.hint-icon[b-waxnefqp3h] {
    font-size: 1rem;
}

/* Info Dropdown */
.crawler-info[b-waxnefqp3h] {
    margin-top: 1rem;
}

.info-dropdown[b-waxnefqp3h] {
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
}

.info-dropdown summary[b-waxnefqp3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    list-style: none;
}

.info-dropdown summary[b-waxnefqp3h]::-webkit-details-marker {
    display: none;
}

.info-dropdown summary[b-waxnefqp3h]::after {
    content: '▸';
    margin-left: auto;
    transition: transform 0.2s ease;
}

.info-dropdown[open] summary[b-waxnefqp3h]::after {
    transform: rotate(90deg);
}

.info-dropdown summary:hover[b-waxnefqp3h] {
    background: #f1f5f9;
}

.summary-icon[b-waxnefqp3h] {
    font-size: 1rem;
}

.info-content[b-waxnefqp3h] {
    padding: 0 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item[b-waxnefqp3h] {
    padding: 0.625rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.info-item strong[b-waxnefqp3h] {
    display: block;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.info-item p[b-waxnefqp3h] {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

/* Responsive voor crawler editor */
@media (max-width: 768px) {
    .crawler-tabs[b-waxnefqp3h] {
        flex-direction: column;
    }
    
    .tab-status[b-waxnefqp3h] {
        margin-left: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .seo-header[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .seo-logo[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .seo-logo svg[b-waxnefqp3h] {
    stroke: var(--text-primary, #f1f5f9);
}

html.dark-mode .page-title[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .header-subtitle[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .action-btn[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .action-btn:hover:not(:disabled)[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .action-btn.primary[b-waxnefqp3h] {
    background: var(--accent-primary, #60a5fa);
    border-color: var(--accent-primary, #60a5fa);
    color: #ffffff;
}

html.dark-mode .action-btn.primary:hover:not(:disabled)[b-waxnefqp3h] {
    background: var(--accent-hover, #3b82f6);
    border-color: var(--accent-hover, #3b82f6);
}

html.dark-mode .loading-container[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .loading-spinner[b-waxnefqp3h] {
    border-color: var(--border-primary, #334155);
    border-top-color: var(--accent-primary, #60a5fa);
}

html.dark-mode .seo-content[b-waxnefqp3h] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .seo-score-section[b-waxnefqp3h] {
    background: transparent;
    box-shadow: none;
}

html.dark-mode .score-card[b-waxnefqp3h] {
    border-color: transparent !important;
}

html.dark-mode .score-circle[b-waxnefqp3h]::before {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .score-value[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .score-title[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .score-subtitle[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .checklist-item[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .settings-card[b-waxnefqp3h],
html.dark-mode .crawler-card[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.3));
}

html.dark-mode .card-header h3[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .card-description[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .card-badge[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .settings-form .form-group label[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .settings-form .form-group .input[b-waxnefqp3h],
html.dark-mode .settings-form .form-group input[b-waxnefqp3h],
html.dark-mode .settings-form .form-group select[b-waxnefqp3h],
html.dark-mode .settings-form .form-group textarea[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .settings-form .form-group .input[b-waxnefqp3h]::placeholder,
html.dark-mode .settings-form .form-group input[b-waxnefqp3h]::placeholder,
html.dark-mode .settings-form .form-group textarea[b-waxnefqp3h]::placeholder {
    color: var(--text-muted, #64748b);
}

html.dark-mode .char-count[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .toggle-title[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .toggle-desc[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .toggle-slider[b-waxnefqp3h] {
    background-color: var(--bg-hover, #475569);
}

html.dark-mode .serp-preview[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .serp-url[b-waxnefqp3h] {
    color: #4ade80;
}

html.dark-mode .serp-title[b-waxnefqp3h] {
    color: #93c5fd;
}

html.dark-mode .serp-description[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .tool-warning[b-waxnefqp3h] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

html.dark-mode .tool-link[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tool-link:hover:not(.disabled)[b-waxnefqp3h] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .tool-link.disabled[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    opacity: 0.5;
}

html.dark-mode .tool-link.external[b-waxnefqp3h] {
    background: rgba(96, 165, 250, 0.1);
}

html.dark-mode .tool-link.external:hover[b-waxnefqp3h] {
    background: rgba(96, 165, 250, 0.15);
}

html.dark-mode .tool-arrow[b-waxnefqp3h] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .tips-card[b-waxnefqp3h] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .tips-card .card-header[b-waxnefqp3h] {
    border-bottom-color: rgba(251, 191, 36, 0.2);
}

html.dark-mode .tips-list[b-waxnefqp3h] {
    color: #fbbf24;
}

html.dark-mode .tips-list strong[b-waxnefqp3h] {
    color: #fcd34d;
}

html.dark-mode .crawler-tab[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
}

html.dark-mode .crawler-tab:hover[b-waxnefqp3h] {
    background: var(--bg-hover, #475569);
    border-color: var(--border-secondary, #475569);
}

html.dark-mode .crawler-tab.active[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--accent-primary, #60a5fa);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

html.dark-mode .tab-label[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tab-status.auto[b-waxnefqp3h] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .tab-status.custom[b-waxnefqp3h] {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

/* Crawler editor textarea - override .input white background */
html.dark-mode .crawler-editor .textarea-code[b-waxnefqp3h],
html.dark-mode .crawler-editor .input[b-waxnefqp3h] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .crawler-editor .textarea-code[b-waxnefqp3h]::placeholder {
    color: #64748b !important;
}

/* Prevent seo-card from getting bg-secondary from wildcard selector */
html.dark-mode .seo-card[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .info-dropdown[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .info-dropdown summary[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .info-dropdown summary:hover[b-waxnefqp3h] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .info-item[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155);
}

html.dark-mode .info-item strong[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .info-item p[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8);
}

/* ════════════════════════════════════════════════════════════════════════════
   SERP PREVIEW - Google Preview in dark mode
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .serp-preview[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .serp-url[b-waxnefqp3h] {
    color: #4ade80 !important;
}

html.dark-mode .serp-title[b-waxnefqp3h] {
    color: #93c5fd !important;
}

html.dark-mode .serp-description[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   STRUCTURED DATA TOGGLES - Schema.org toggles
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .schema-toggle[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155) !important;
}

/* Override wildcard selector [class*="-content"] from admin-shared.css */
html.dark-mode .toggle-content[b-waxnefqp3h] {
    background: transparent !important;
    border-color: transparent !important;
}

html.dark-mode .schema-toggle:hover[b-waxnefqp3h] {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .toggle-track[b-waxnefqp3h] {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .schema-toggle input:checked + .toggle-track[b-waxnefqp3h] {
    background: #10b981 !important;
}

html.dark-mode .toggle-title[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .toggle-desc[b-waxnefqp3h] {
    color: var(--text-tertiary, #94a3b8) !important;
}

/* Tool links for external tools */
html.dark-mode .tool-link[b-waxnefqp3h] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .tool-link:hover:not(.disabled)[b-waxnefqp3h] {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .tool-link.external[b-waxnefqp3h] {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .tool-link.external:hover[b-waxnefqp3h] {
    background: rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .tool-name[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .tool-arrow[b-waxnefqp3h] {
    color: var(--text-muted, #64748b) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ADDITIONAL DARK MODE FIXES - Preventing white backgrounds
   ════════════════════════════════════════════════════════════════════════════ */

/* Card header background */
html.dark-mode .card-header[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

/* Social card preview (Open Graph / Twitter preview) */
html.dark-mode .social-card-preview[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .preview-image[b-waxnefqp3h] {
    background-color: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .preview-title[b-waxnefqp3h] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .preview-url[b-waxnefqp3h] {
    color: var(--text-muted, #64748b) !important;
}

html.dark-mode .preview-description[b-waxnefqp3h] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Tool link disabled state */
html.dark-mode .tool-link.disabled[b-waxnefqp3h] {
    background: var(--bg-secondary, #1e293b) !important;
    color: var(--text-muted, #64748b) !important;
}

/* /Components/Pages/Admin/SetupWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   SetupWizard.razor — Scoped CSS
   Uses CSS variables from admin-shared.css for automatic dark mode support.
   ═══════════════════════════════════════════════════════════════════════ */

.wizard-page[b-gggj4iluud] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ── Top Bar ────────────────────────────────────────────────────────── */

.wizard-top-bar[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wizard-back-btn[b-gggj4iluud] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.wizard-back-btn:hover[b-gggj4iluud] {
    background: var(--bg-secondary, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.wizard-title[b-gggj4iluud] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

/* ── Step Indicator Bar ─────────────────────────────────────────────── */

.wizard-steps-bar[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding: 0.5rem 0;
}

.wizard-step-indicator[b-gggj4iluud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    min-width: 70px;
    transition: all 0.2s;
}

.step-number[b-gggj4iluud] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s;
}

.step-label[b-gggj4iluud] {
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.step-done .step-number[b-gggj4iluud] {
    background: var(--accent-color, #4f46e5);
    color: #fff;
}

.step-done .step-label[b-gggj4iluud] {
    color: var(--accent-color, #4f46e5);
}

.step-active .step-number[b-gggj4iluud] {
    background: var(--accent-color, #4f46e5);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #4f46e5) 25%, transparent);
}

.step-active .step-label[b-gggj4iluud] {
    color: var(--text-primary, #1e293b);
    font-weight: 700;
}

.step-pending .step-number[b-gggj4iluud] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    border: 2px solid var(--border-color, #e2e8f0);
}

.step-pending .step-label[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
}

.step-connector[b-gggj4iluud] {
    flex: 1;
    height: 2px;
    background: var(--border-color, #e2e8f0);
    min-width: 20px;
    margin: 0 4px;
    margin-bottom: 1.2rem;
    transition: background 0.2s;
}

.connector-done[b-gggj4iluud] {
    background: var(--accent-color, #4f46e5);
}

/* ── Alerts ──────────────────────────────────────────────────────────── */

.wizard-alert[b-gggj4iluud] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.wizard-alert-error[b-gggj4iluud] {
    background: color-mix(in srgb, #ef4444 12%, var(--bg-primary, #ffffff));
    color: #dc2626;
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

.wizard-alert-success[b-gggj4iluud] {
    background: color-mix(in srgb, #22c55e 12%, var(--bg-primary, #ffffff));
    color: #16a34a;
    border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}

/* ── Step Panel ─────────────────────────────────────────────────────── */

.wizard-step-panel[b-gggj4iluud] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 2rem;
    min-height: 300px;
}

.step-heading[b-gggj4iluud] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 0.25rem 0;
}

.step-description[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
    margin: 0 0 1.5rem 0;
}

/* ── Form Fields ────────────────────────────────────────────────────── */

.wizard-field[b-gggj4iluud] {
    margin-bottom: 1.25rem;
}

.wizard-field label[b-gggj4iluud] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: 0.35rem;
}

.wizard-input[b-gggj4iluud] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1e293b);
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.wizard-input:focus[b-gggj4iluud] {
    outline: none;
    border-color: var(--accent-color, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #4f46e5) 15%, transparent);
}

.wizard-input[b-gggj4iluud]::placeholder {
    color: var(--text-secondary, #94a3b8);
}

.wizard-textarea[b-gggj4iluud] {
    resize: vertical;
    min-height: 60px;
}

.wizard-input-short[b-gggj4iluud] {
    width: 120px;
}

.wizard-field-row[b-gggj4iluud] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}

.wizard-field-row > .wizard-field[b-gggj4iluud] {
    flex: 1;
}

.wizard-field-grow[b-gggj4iluud] {
    flex: 2 !important;
}

.wizard-field-small[b-gggj4iluud] {
    flex: 0 0 100px !important;
}

/* ── Color Picker ───────────────────────────────────────────────────── */

.color-picker-row[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-color[b-gggj4iluud] {
    width: 40px;
    height: 38px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}

/* ── Checkbox ───────────────────────────────────────────────────────── */

.wizard-checkbox-label[b-gggj4iluud] {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500 !important;
    cursor: pointer;
}

/* ── Action Row ─────────────────────────────────────────────────────── */

.wizard-action-row[b-gggj4iluud] {
    display: flex;
    gap: 0.5rem;
}

.wizard-action-row .wizard-input[b-gggj4iluud] {
    flex: 1;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.wizard-btn[b-gggj4iluud] {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    white-space: nowrap;
}

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

.wizard-btn-primary[b-gggj4iluud] {
    background: var(--accent-color, #4f46e5);
    color: #fff;
}

.wizard-btn-primary:hover:not(:disabled)[b-gggj4iluud] {
    filter: brightness(1.1);
}

.wizard-btn-secondary[b-gggj4iluud] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border-color, #e2e8f0);
}

.wizard-btn-secondary:hover:not(:disabled)[b-gggj4iluud] {
    background: var(--bg-secondary, #e2e8f0);
}

.wizard-btn-test[b-gggj4iluud] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border-color, #e2e8f0);
    min-width: 160px;
}

.wizard-btn-test:hover:not(:disabled)[b-gggj4iluud] {
    background: var(--bg-secondary, #e2e8f0);
}

.wizard-btn-activate[b-gggj4iluud] {
    background: #16a34a;
    color: #fff;
    font-size: 1rem;
    padding: 0.75rem 2rem;
}

.wizard-btn-activate:hover:not(:disabled)[b-gggj4iluud] {
    background: #15803d;
}

/* ── Navigation Buttons ─────────────────────────────────────────────── */

.wizard-nav-buttons[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.wizard-nav-spacer[b-gggj4iluud] {
    flex: 1;
}

.wizard-creating[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
}

.wizard-spinner[b-gggj4iluud] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-top-color: var(--accent-color, #4f46e5);
    border-radius: 50%;
    animation: wizard-spin-b-gggj4iluud 0.7s linear infinite;
}

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

/* ── SMTP Test Result ───────────────────────────────────────────────── */

.wizard-test-result[b-gggj4iluud] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.test-success[b-gggj4iluud] {
    background: color-mix(in srgb, #22c55e 12%, var(--bg-primary, #ffffff));
    color: #16a34a;
}

.test-error[b-gggj4iluud] {
    background: color-mix(in srgb, #ef4444 12%, var(--bg-primary, #ffffff));
    color: #dc2626;
}

/* ── Content Copy Options ───────────────────────────────────────────── */

.copy-options-grid[b-gggj4iluud] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.copy-option[b-gggj4iluud] {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 400 !important;
}

.copy-option:hover[b-gggj4iluud] {
    border-color: var(--accent-color, #4f46e5);
}

.copy-option-label[b-gggj4iluud] {
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

.scratch-notice[b-gggj4iluud] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--bg-tertiary, #f8fafc);
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 8px;
    margin-top: 1rem;
}

.scratch-icon[b-gggj4iluud] {
    font-size: 1.5rem;
}

.scratch-notice p[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
    margin: 0;
}

/* ── Hint ────────────────────────────────────────────────────────────── */

.wizard-hint[b-gggj4iluud] {
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--accent-color, #4f46e5) 8%, var(--bg-primary, #ffffff));
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-top: 1rem;
}

/* ── Summary Grid ───────────────────────────────────────────────────── */

.summary-grid[b-gggj4iluud] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-gggj4iluud] {
    background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 1rem;
}

.summary-card-title[b-gggj4iluud] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.summary-item[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8rem;
}

.summary-label[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
    min-width: 60px;
}

.summary-value[b-gggj4iluud] {
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}

.summary-check[b-gggj4iluud] {
    font-size: 0.85rem;
}

.summary-copy-items[b-gggj4iluud] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.copy-tag[b-gggj4iluud] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: color-mix(in srgb, var(--accent-color, #4f46e5) 12%, var(--bg-primary, #ffffff));
    color: var(--accent-color, #4f46e5);
    border-radius: 999px;
    white-space: nowrap;
}

.color-dot[b-gggj4iluud] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e2e8f0);
    vertical-align: middle;
}

/* ── Validation Checklist ───────────────────────────────────────────── */

.validation-checklist[b-gggj4iluud] {
    background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 1rem;
}

.validation-checklist h3[b-gggj4iluud] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 0.75rem 0;
}

.validation-item[b-gggj4iluud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.validation-item:last-child[b-gggj4iluud] {
    border-bottom: none;
}

.validation-icon[b-gggj4iluud] {
    font-size: 0.85rem;
    min-width: 20px;
    text-align: center;
}

.validation-category[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
    min-width: 100px;
    font-weight: 600;
}

.validation-desc[b-gggj4iluud] {
    color: var(--text-primary, #1e293b);
}

.missing-required .validation-desc[b-gggj4iluud] {
    color: #dc2626;
}

.missing-optional .validation-desc[b-gggj4iluud] {
    color: var(--text-secondary, #64748b);
}

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

@media (max-width: 640px) {
    .wizard-field-row[b-gggj4iluud] {
        flex-direction: column;
        gap: 0;
    }

    .copy-options-grid[b-gggj4iluud] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-gggj4iluud] {
        grid-template-columns: 1fr;
    }

    .wizard-steps-bar[b-gggj4iluud] {
        gap: 0;
    }

    .step-label[b-gggj4iluud] {
        display: none;
    }

    .step-connector[b-gggj4iluud] {
        margin-bottom: 0;
    }
}
/* /Components/Pages/Admin/SiteStatistics.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   SITE STATISTICS DASHBOARD — Premium Analytics UI
   Dark mode via html.dark-mode for Blazor scoped CSS compatibility
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HEADER ─────────────────────────────────────────────────────────────── */

.stats-header[b-zdah0i9w33] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

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

.breadcrumb[b-zdah0i9w33] {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-zdah0i9w33] {
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover[b-zdah0i9w33] { color: #2563eb; }
.breadcrumb-sep[b-zdah0i9w33] { margin: 0 0.4rem; color: #94a3b8; }
.breadcrumb-current[b-zdah0i9w33] { color: #64748b; }

.header-title-row[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stats-logo[b-zdah0i9w33] {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-logo svg[b-zdah0i9w33] {
    width: 28px;
    height: 28px;
    color: #3b82f6;
}

.page-title[b-zdah0i9w33] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    color: #1e293b;
}

.header-subtitle[b-zdah0i9w33] {
    font-size: 0.85rem;
    color: #64748b;
}

.header-actions[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.action-btn[b-zdah0i9w33] {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.action-btn:hover[b-zdah0i9w33] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.refresh-btn[b-zdah0i9w33] { padding: 0.5rem 0.7rem; }
.spin[b-zdah0i9w33] { display: inline-block; animation: spin 1s linear infinite; }
@@keyframes spin { to[b-zdah0i9w33] { transform: rotate(360deg); } }

/* ── PERIOD SELECTOR ────────────────────────────────────────────────────── */

.period-selector[b-zdah0i9w33] {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.period-btn[b-zdah0i9w33] {
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}

.period-btn:hover[b-zdah0i9w33] { color: #334155; background: #e2e8f0; }

.period-btn.active[b-zdah0i9w33] {
    background: #3b82f6;
    color: #fff;
}

/* ── DISABLED BANNER ────────────────────────────────────────────────────── */

.disabled-banner[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    color: #664d03;
}

.banner-icon[b-zdah0i9w33] { font-size: 1.5rem; }

.banner-content p[b-zdah0i9w33] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
}

.banner-content a[b-zdah0i9w33] {
    color: #664d03;
    font-weight: 600;
    cursor: pointer;
}

/* ── LOADING ────────────────────────────────────────────────────────────── */

.loading-container[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: #64748b;
}

.loading-spinner[b-zdah0i9w33] {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── LIVE TODAY BANNER ──────────────────────────────────────────────────── */

.today-banner[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
}

.today-label[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pulse-dot[b-zdah0i9w33] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: pulse 2s infinite;
}

@@keyframes pulse {
    0%[b-zdah0i9w33] { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70%[b-zdah0i9w33] { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100%[b-zdah0i9w33] { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.today-metrics[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    flex-wrap: wrap;
}

.today-metric[b-zdah0i9w33] { text-align: center; }

.today-value[b-zdah0i9w33] {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
}

.today-key[b-zdah0i9w33] {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.today-divider[b-zdah0i9w33] {
    width: 1px;
    height: 32px;
    background: #cbd5e1;
}

.today-metric.device[b-zdah0i9w33] { flex: 1; min-width: 160px; }

.device-bar[b-zdah0i9w33] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e2e8f0;
    width: 100%;
    margin-bottom: 0.3rem;
}

.d-fill[b-zdah0i9w33] { height: 100%; transition: width 0.5s ease; }
.d-fill.desktop[b-zdah0i9w33] { background: #667eea; }
.d-fill.mobile[b-zdah0i9w33] { background: #f59e0b; }
.d-fill.tablet[b-zdah0i9w33] { background: #10b981; }

/* ── SUMMARY CARDS ──────────────────────────────────────────────────────── */

.summary-grid[b-zdah0i9w33] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover[b-zdah0i9w33] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.card-icon[b-zdah0i9w33] {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.summary-card.hits .card-icon[b-zdah0i9w33] { background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.summary-card.visitors .card-icon[b-zdah0i9w33] { background: linear-gradient(135deg, #dcfce7, #f0fdf4); }
.summary-card.sessions .card-icon[b-zdah0i9w33] { background: linear-gradient(135deg, #fef3c7, #fffbeb); }
.summary-card.peak .card-icon[b-zdah0i9w33] { background: linear-gradient(135deg, #fce7f3, #fff1f2); }

.card-body[b-zdah0i9w33] { flex: 1; min-width: 0; }

.card-value[b-zdah0i9w33] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.card-label[b-zdah0i9w33] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.card-sub[b-zdah0i9w33] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

/* ── CHART ──────────────────────────────────────────────────────────────── */

.chart-card[b-zdah0i9w33] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.chart-header[b-zdah0i9w33] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.chart-title[b-zdah0i9w33] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.chart-legend[b-zdah0i9w33] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
}

.legend-item[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-dot[b-zdah0i9w33] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.hits-color[b-zdah0i9w33] { background: #667eea; }
.visitors-color[b-zdah0i9w33] { background: #10b981; }

.chart-area[b-zdah0i9w33] {
    min-height: 200px;
    position: relative;
}

.chart-empty[b-zdah0i9w33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #94a3b8;
    gap: 0.5rem;
}

.empty-icon[b-zdah0i9w33] { font-size: 2rem; }

.chart-bars[b-zdah0i9w33] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 200px;
    padding-bottom: 24px;
    position: relative;
}

.chart-col[b-zdah0i9w33] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
    position: relative;
}

.bar-group[b-zdah0i9w33] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 100%;
}

.bar[b-zdah0i9w33] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hits-bar[b-zdah0i9w33] {
    background: linear-gradient(to top, #667eea, #818cf8);
    opacity: 0.85;
}

.visitors-bar[b-zdah0i9w33] {
    background: linear-gradient(to top, #10b981, #34d399);
    opacity: 0.85;
}

.chart-col:hover .bar[b-zdah0i9w33] { opacity: 1; filter: brightness(1.1); }

.bar-label[b-zdah0i9w33] {
    position: absolute;
    bottom: 0;
    font-size: 0.6rem;
    color: #94a3b8;
    white-space: nowrap;
    transform: rotate(-30deg);
    transform-origin: top center;
}

/* ── DETAILS GRID ───────────────────────────────────────────────────────── */

.details-grid[b-zdah0i9w33] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-card[b-zdah0i9w33] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.detail-title[b-zdah0i9w33] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Device breakdown */
.device-breakdown[b-zdah0i9w33] { display: flex; flex-direction: column; gap: 0.75rem; }

.device-row[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.device-info[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 90px;
    flex-shrink: 0;
}

.device-icon[b-zdah0i9w33] { font-size: 1rem; }
.device-name[b-zdah0i9w33] { font-size: 0.85rem; color: #475569; }

.device-bar-outer[b-zdah0i9w33] {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.device-bar-fill[b-zdah0i9w33] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-bar-fill.desktop[b-zdah0i9w33] { background: linear-gradient(90deg, #667eea, #818cf8); }
.device-bar-fill.mobile[b-zdah0i9w33] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.device-bar-fill.tablet[b-zdah0i9w33] { background: linear-gradient(90deg, #10b981, #34d399); }

.device-pct[b-zdah0i9w33] {
    width: 40px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

/* Referrers */
.referrer-empty[b-zdah0i9w33] {
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

.referrer-row[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.referrer-name[b-zdah0i9w33] {
    width: 120px;
    font-size: 0.8rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.referrer-bar-outer[b-zdah0i9w33] {
    flex: 1;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.referrer-bar-fill[b-zdah0i9w33] {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.referrer-count[b-zdah0i9w33] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    width: 40px;
    text-align: right;
}

/* ── TOP PAGES TABLE ────────────────────────────────────────────────────── */

.pages-card[b-zdah0i9w33] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
}

.pages-empty[b-zdah0i9w33] {
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
    padding: 1.5rem;
}

.pages-table[b-zdah0i9w33] { display: flex; flex-direction: column; }

.pages-header-row[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 2px solid #f1f5f9;
}

.pages-row[b-zdah0i9w33] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.15s;
    border-radius: 6px;
}

.pages-row:hover[b-zdah0i9w33] { background: #f8fafc; }

.pages-row.top-three[b-zdah0i9w33] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(102, 126, 234, 0.06));
}

.col-rank[b-zdah0i9w33] { width: 40px; text-align: center; font-size: 0.85rem; color: #64748b; }
.rank-medal[b-zdah0i9w33] { font-size: 1.1rem; }
.col-path[b-zdah0i9w33] { flex: 1; font-size: 0.85rem; color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-hits[b-zdah0i9w33] { width: 80px; text-align: right; font-size: 0.85rem; font-weight: 600; color: #1e293b; }
.col-visitors[b-zdah0i9w33] { width: 80px; text-align: right; font-size: 0.85rem; color: #64748b; }

.col-bar[b-zdah0i9w33] {
    width: 120px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.page-bar-fill[b-zdah0i9w33] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #818cf8);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

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

@@media (max-width: 768px) {
    .stats-header[b-zdah0i9w33] { flex-direction: column; }
    .header-actions[b-zdah0i9w33] { width: 100%; flex-wrap: wrap; }
    .summary-grid[b-zdah0i9w33] { grid-template-columns: 1fr; }
    .today-banner[b-zdah0i9w33] { flex-direction: column; align-items: flex-start; }
    .today-metrics[b-zdah0i9w33] { width: 100%; }
    .col-bar[b-zdah0i9w33] { display: none; }
}


/* ── AUTO-REFRESH TOGGLE ───────────────────────────────────────────────── */

.auto-refresh-toggle[b-zdah0i9w33] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
    color: #94a3b8;
}

.auto-refresh-toggle:hover[b-zdah0i9w33] { background: #f1f5f9; color: #667eea; border-color: #667eea; }

.auto-refresh-toggle.active[b-zdah0i9w33] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.auto-icon[b-zdah0i9w33] { display: inline-block; line-height: 1; }
.auto-label[b-zdah0i9w33] {
    font-size: 0.6rem;
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.3rem;
    font-weight: 600;
}

.spin-slow[b-zdah0i9w33] { animation: spin 3s linear infinite; }

/* ── HOURLY CHART ──────────────────────────────────────────────────────── */

.hourly-chart[b-zdah0i9w33] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 0.75rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

.hourly-bars[b-zdah0i9w33] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding-bottom: 18px;
    position: relative;
}

.hourly-col[b-zdah0i9w33] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    justify-content: flex-end;
}

.hourly-bar[b-zdah0i9w33] {
    width: 100%;
    min-height: 0;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #667eea, #a5b4fc);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hourly-col.current .hourly-bar[b-zdah0i9w33] {
    background: linear-gradient(to top, #22c55e, #86efac);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.hourly-col.future .hourly-bar[b-zdah0i9w33] {
    background: #e2e8f0;
    opacity: 0.3;
}

.hourly-label[b-zdah0i9w33] {
    position: absolute;
    top: -16px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #667eea;
    white-space: nowrap;
}

.hourly-col.current .hourly-label[b-zdah0i9w33] { color: #16a34a; }

.hourly-time[b-zdah0i9w33] {
    position: absolute;
    bottom: -16px;
    font-size: 0.55rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── PERIOD COMPARISON BADGES ──────────────────────────────────────────── */

.card-change[b-zdah0i9w33] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

.card-change.positive[b-zdah0i9w33] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.card-change.negative[b-zdah0i9w33] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.change-arrow[b-zdah0i9w33] { font-size: 0.8rem; }

.change-label[b-zdah0i9w33] {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 0.15rem;
    font-size: 0.6rem;
}

/* ── REFERRER FAVICON ──────────────────────────────────────────────────── */

.referrer-favicon[b-zdah0i9w33] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.referrer-favicon img[b-zdah0i9w33] {
    border-radius: 2px;
}

/* ── DEVICE COUNTS ─────────────────────────────────────────────────────── */

.device-count[b-zdah0i9w33] {
    font-size: 0.75rem;
    color: #94a3b8;
    width: 50px;
    text-align: right;
}
/* /Components/Pages/Admin/TestimonialManagement.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   TESTIMONIAL MANAGEMENT STYLES
   Admin styling for testimonial management page in BBuilder
   ???????????????????????????????????????????????????????????????????????????? */

/* ??? Pending Alert Banner ?????????????????????????????????????????????????? */
.pending-alert[b-wvayxkvmup] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    margin: 1rem 2rem;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pending-alert:hover[b-wvayxkvmup] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.pending-alert .alert-pulse[b-wvayxkvmup] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    animation: pulse-bar-b-wvayxkvmup 2s ease-in-out infinite;
}

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

.pending-alert .alert-icon[b-wvayxkvmup] {
    font-size: 1.5rem;
}

.pending-alert .alert-text[b-wvayxkvmup] {
    flex: 1;
    color: #92400e;
    font-size: 0.95rem;
}

.pending-alert .alert-action[b-wvayxkvmup] {
    color: #d97706;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ??? Header ???????????????????????????????????????????????????????????????? */
.testimonial-header[b-wvayxkvmup] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.breadcrumb[b-wvayxkvmup] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.breadcrumb-link[b-wvayxkvmup] {
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover[b-wvayxkvmup] {
    color: #3b82f6;
}

.breadcrumb-sep[b-wvayxkvmup] {
    color: #cbd5e1;
}

.breadcrumb-current[b-wvayxkvmup] {
    color: #1e293b;
    font-weight: 500;
}

.page-title[b-wvayxkvmup] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.header-subtitle[b-wvayxkvmup] {
    font-size: 0.85rem;
    color: #64748b;
}

.header-actions[b-wvayxkvmup] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.feature-toggle[b-wvayxkvmup] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.feature-toggle .toggle-label[b-wvayxkvmup] {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

.action-btn[b-wvayxkvmup] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
}

.action-btn:hover[b-wvayxkvmup] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.action-btn.primary[b-wvayxkvmup] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #2563eb;
    color: white;
}

.action-btn.primary:hover[b-wvayxkvmup] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.action-btn.primary:disabled[b-wvayxkvmup] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon[b-wvayxkvmup] {
    font-size: 1rem;
}

/* ??? Loading State ????????????????????????????????????????????????????????? */
.loading-state[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-state .spinner[b-wvayxkvmup] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-wvayxkvmup 1s linear infinite;
}

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

/* ??? Main Layout ??????????????????????????????????????????????????????????? */
.testimonial-layout[b-wvayxkvmup] {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: calc(100vh - 140px);
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .testimonial-layout[b-wvayxkvmup] {
        grid-template-columns: 1fr;
    }
}

/* ??? Sidebar ??????????????????????????????????????????????????????????????? */
.testimonial-sidebar[b-wvayxkvmup] {
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.sidebar-header[b-wvayxkvmup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-header h3[b-wvayxkvmup] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-count[b-wvayxkvmup] {
    color: #64748b;
    font-weight: 400;
}

.add-btn[b-wvayxkvmup] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #f59e0b;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-btn:hover[b-wvayxkvmup] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

/* ??? Status Filter ????????????????????????????????????????????????????????? */
.status-filter[b-wvayxkvmup] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.status-filter select[b-wvayxkvmup] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #475569;
    background: white;
    cursor: pointer;
}

.status-filter select:focus[b-wvayxkvmup] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* ??? Testimonial List ?????????????????????????????????????????????????????? */
.testimonial-list[b-wvayxkvmup] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.testimonial-list-item[b-wvayxkvmup] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.35rem;
    border: 1px solid transparent;
}

.testimonial-list-item:hover[b-wvayxkvmup] {
    background: #fffbeb;
}

.testimonial-list-item.active[b-wvayxkvmup] {
    background: #fef3c7;
    border-color: #f59e0b;
}

.testimonial-list-item.disabled[b-wvayxkvmup] {
    opacity: 0.5;
}

.testimonial-list-item.pending[b-wvayxkvmup] {
    background: #fefce8;
    border-left: 3px solid #eab308;
}

.item-main[b-wvayxkvmup] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.item-avatar[b-wvayxkvmup] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-avatar img[b-wvayxkvmup] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-wvayxkvmup] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
}

.item-text[b-wvayxkvmup] {
    flex: 1;
    min-width: 0;
}

.item-name[b-wvayxkvmup] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.item-preview[b-wvayxkvmup] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.item-rating[b-wvayxkvmup] {
    display: flex;
    gap: 0.1rem;
    margin-top: 0.35rem;
}

.item-rating .star[b-wvayxkvmup] {
    font-size: 0.7rem;
    color: #d1d5db;
}

.item-rating .star.filled[b-wvayxkvmup] {
    color: #f59e0b;
}

.item-badges[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.sort-order[b-wvayxkvmup] {
    font-size: 0.7rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge[b-wvayxkvmup] {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.badge.pending[b-wvayxkvmup] {
    background: #fef3c7;
    color: #92400e;
}

.badge.disabled[b-wvayxkvmup] {
    background: #f1f5f9;
    color: #64748b;
}

/* ??? Editor Panel ?????????????????????????????????????????????????????????? */
.testimonial-editor[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

.empty-state[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-wvayxkvmup] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h2[b-wvayxkvmup] {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.25rem;
}

.empty-state p[b-wvayxkvmup] {
    margin: 0;
    max-width: 300px;
}

.editor-header[b-wvayxkvmup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.editor-title[b-wvayxkvmup] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.approval-actions[b-wvayxkvmup] {
    display: flex;
    gap: 0.5rem;
}

.approve-btn[b-wvayxkvmup],
.reject-btn[b-wvayxkvmup] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.approve-btn[b-wvayxkvmup] {
    background: #dcfce7;
    color: #166534;
}

.approve-btn:hover[b-wvayxkvmup] {
    background: #bbf7d0;
}

.reject-btn[b-wvayxkvmup] {
    background: #fee2e2;
    color: #991b1b;
}

.reject-btn:hover[b-wvayxkvmup] {
    background: #fecaca;
}

.editor-content[b-wvayxkvmup] {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

/* ??? Form Grid ????????????????????????????????????????????????????????????? */
.form-grid[b-wvayxkvmup] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

@media (max-width: 800px) {
    .form-grid[b-wvayxkvmup],
    .form-grid.two-cols[b-wvayxkvmup] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-wvayxkvmup] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
}

.form-group label .required[b-wvayxkvmup] {
    color: #ef4444;
}

.form-group input[type="text"][b-wvayxkvmup],
.form-group input[type="number"][b-wvayxkvmup],
.form-group select[b-wvayxkvmup] {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus[b-wvayxkvmup],
.form-group select:focus[b-wvayxkvmup] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-group input[b-wvayxkvmup]::placeholder {
    color: #94a3b8;
}

/* ??? Rating Input ?????????????????????????????????????????????????????????? */
.rating-input[b-wvayxkvmup] {
    display: flex;
    gap: 0.25rem;
}

.star-btn[b-wvayxkvmup] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 1.25rem;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.15s ease;
}

.star-btn:hover[b-wvayxkvmup] {
    background: #fef3c7;
    border-color: #fde68a;
}

.star-btn.filled[b-wvayxkvmup] {
    color: #f59e0b;
    background: #fffbeb;
    border-color: #fde68a;
}

/* ??? Content Editor ???????????????????????????????????????????????????????? */
.content-editor[b-wvayxkvmup] {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1e293b;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.content-editor:focus[b-wvayxkvmup] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.content-editor[b-wvayxkvmup]::placeholder {
    color: #94a3b8;
}

.char-count[b-wvayxkvmup] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}

/* ??? Toggle ???????????????????????????????????????????????????????????????? */
.toggle-group[b-wvayxkvmup] {
    flex-direction: row !important;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.toggle[b-wvayxkvmup] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input[b-wvayxkvmup] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-wvayxkvmup] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider[b-wvayxkvmup]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider[b-wvayxkvmup] {
    background-color: #f59e0b;
}

.toggle input:checked + .toggle-slider[b-wvayxkvmup]:before {
    transform: translateX(20px);
}

.toggle-label[b-wvayxkvmup] {
    font-size: 0.85rem;
    color: #475569;
}

/* ??? Preview Section ??????????????????????????????????????????????????????? */
.preview-section[b-wvayxkvmup] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #e2e8f0;
}

.preview-section h4[b-wvayxkvmup] {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.testimonial-preview[b-wvayxkvmup] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 16px;
    padding: 1.5rem;
}

.preview-card[b-wvayxkvmup] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.preview-rating[b-wvayxkvmup] {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1rem;
}

.preview-rating .star[b-wvayxkvmup] {
    font-size: 1.25rem;
    color: #d1d5db;
}

.preview-rating .star.filled[b-wvayxkvmup] {
    color: #f59e0b;
}

.preview-content[b-wvayxkvmup] {
    margin: 0 0 1.25rem 0;
    font-size: 1rem;
    color: #334155;
    line-height: 1.7;
    font-style: italic;
}

.preview-customer[b-wvayxkvmup] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-avatar[b-wvayxkvmup] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preview-avatar img[b-wvayxkvmup] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-avatar .avatar-placeholder[b-wvayxkvmup] {
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
}

.preview-info[b-wvayxkvmup] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.preview-name[b-wvayxkvmup] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.preview-location[b-wvayxkvmup] {
    font-size: 0.8rem;
    color: #64748b;
}

/* ??? Footer ???????????????????????????????????????????????????????????????? */
.editor-footer[b-wvayxkvmup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.footer-left[b-wvayxkvmup],
.footer-right[b-wvayxkvmup] {
    display: flex;
    gap: 0.75rem;
}

.delete-btn[b-wvayxkvmup] {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.delete-btn:hover[b-wvayxkvmup] {
    background: #fee2e2;
    border-color: #f87171;
}

.cancel-btn[b-wvayxkvmup] {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
}

.cancel-btn:hover[b-wvayxkvmup] {
    background: #f1f5f9;
}

.save-btn[b-wvayxkvmup] {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.save-btn:hover[b-wvayxkvmup] {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.save-btn:disabled[b-wvayxkvmup] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ??? Toast Messages ???????????????????????????????????????????????????????? */
.toast[b-wvayxkvmup] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    z-index: 1000;
    animation: slideIn-b-wvayxkvmup 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast.success[b-wvayxkvmup] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.toast.error[b-wvayxkvmup] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

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

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .pending-alert[b-wvayxkvmup] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .pending-alert:hover[b-wvayxkvmup] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
}

html.dark-mode .pending-alert .alert-text[b-wvayxkvmup] {
    color: #fbbf24;
}

html.dark-mode .pending-alert .alert-action[b-wvayxkvmup] {
    color: #f59e0b;
}

html.dark-mode .testimonial-header[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

/* Feature toggle in header */
html.dark-mode .feature-toggle[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .feature-toggle .toggle-label[b-wvayxkvmup] {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Status filter dropdown */
html.dark-mode .status-filter[b-wvayxkvmup] {
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .status-filter select[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155) !important;
    border-color: var(--border-primary, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .breadcrumb-link[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .breadcrumb-link:hover[b-wvayxkvmup] {
    color: var(--accent-primary, #60a5fa);
}

html.dark-mode .breadcrumb-current[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .testimonial-layout[b-wvayxkvmup] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .testimonial-sidebar[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-right-color: var(--border-primary, #334155);
}

html.dark-mode .sidebar-header[b-wvayxkvmup] {
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .sidebar-header h3[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .item-count[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .add-btn[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: #fbbf24;
}

html.dark-mode .add-btn:hover[b-wvayxkvmup] {
    background: #fbbf24;
    border-color: #fbbf24;
    color: #1e293b;
}

html.dark-mode .filter-tabs button[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .filter-tabs button:hover[b-wvayxkvmup] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .filter-tabs button.active[b-wvayxkvmup] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .testimonial-list-item[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .testimonial-list-item:hover[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .testimonial-list-item.active[b-wvayxkvmup] {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
}

html.dark-mode .testimonial-list-item.pending[b-wvayxkvmup] {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #fbbf24;
}

/* CRITICAL: Item name and preview text in sidebar */
html.dark-mode .item-name[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .item-preview[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .item-text[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .avatar-placeholder[b-wvayxkvmup] {
    color: #fbbf24 !important;
}

html.dark-mode .sort-order[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155) !important;
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .item-customer[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .item-location[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .item-content-preview[b-wvayxkvmup] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .badge.pending[b-wvayxkvmup] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

html.dark-mode .badge.inactive[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-muted, #64748b);
}

html.dark-mode .testimonial-editor[b-wvayxkvmup] {
    background: var(--bg-primary, #0f172a);
}

html.dark-mode .editor-header[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .editor-title[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .form-group label[b-wvayxkvmup] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .form-group input[type="text"][b-wvayxkvmup],
html.dark-mode .form-group input[type="number"][b-wvayxkvmup],
html.dark-mode .form-group select[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .form-group input[b-wvayxkvmup]::placeholder {
    color: var(--text-muted, #64748b);
}

html.dark-mode .star-btn[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-muted, #64748b);
}

html.dark-mode .star-btn:hover[b-wvayxkvmup] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .star-btn.filled[b-wvayxkvmup] {
    color: #fbbf24;
}

html.dark-mode .content-textarea[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .content-textarea[b-wvayxkvmup]::placeholder {
    color: var(--text-muted, #64748b);
}

html.dark-mode .toggle-group .toggle-label[b-wvayxkvmup] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .toggle-slider[b-wvayxkvmup] {
    background-color: var(--bg-hover, #475569);
}

html.dark-mode .preview-section[b-wvayxkvmup] {
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .preview-section h4[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .testimonial-preview[b-wvayxkvmup] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

html.dark-mode .preview-card[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-mode .preview-rating .star[b-wvayxkvmup] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .preview-rating .star.filled[b-wvayxkvmup] {
    color: #fbbf24;
}

html.dark-mode .preview-content[b-wvayxkvmup] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .preview-avatar[b-wvayxkvmup] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
}

html.dark-mode .preview-avatar .avatar-placeholder[b-wvayxkvmup] {
    color: #fbbf24;
}

html.dark-mode .preview-name[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .preview-location[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .editor-footer[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
    border-top-color: var(--border-primary, #334155);
}

html.dark-mode .delete-btn[b-wvayxkvmup] {
    background: transparent;
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

html.dark-mode .delete-btn:hover[b-wvayxkvmup] {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
}

html.dark-mode .cancel-btn[b-wvayxkvmup] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .cancel-btn:hover[b-wvayxkvmup] {
    background: var(--bg-hover, #475569);
}

html.dark-mode .empty-state[b-wvayxkvmup] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .empty-state h2[b-wvayxkvmup] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .empty-state p[b-wvayxkvmup] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .loading-state .spinner[b-wvayxkvmup] {
    border-color: var(--border-primary, #334155);
    border-top-color: #fbbf24;
}

/* ─── IMPORT LABEL (styled as action-btn) ─────────────────────────────────── */
.import-label[b-wvayxkvmup] {
    cursor: pointer;
}

/* ─── IMPORT CONFIRMATION MODAL ───────────────────────────────────────────── */
.modal-overlay[b-wvayxkvmup] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-wvayxkvmup 0.15s ease;
}

.modal-dialog[b-wvayxkvmup] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-dialog h3[b-wvayxkvmup] {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.modal-dialog p[b-wvayxkvmup] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.import-summary[b-wvayxkvmup] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.import-summary li[b-wvayxkvmup] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.modal-actions[b-wvayxkvmup] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

@keyframes fadeIn-b-wvayxkvmup {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── IMPORT MODAL DARK MODE ──────────────────────────────────────────────── */
html.dark-mode .modal-dialog[b-wvayxkvmup] {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-dialog h3[b-wvayxkvmup] {
    color: #f1f5f9;
}

html.dark-mode .modal-dialog p[b-wvayxkvmup] {
    color: #cbd5e1;
}

html.dark-mode .import-summary li[b-wvayxkvmup] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
/* /Components/Pages/Admin/Translations.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   Translations Admin Page Styles
   Uses CSS variables from admin-shared.css for dark mode compatibility
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Header ────────────────────────────────────────────────────────── */
.trans-header[b-4z8866oono] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 3rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    flex-wrap: wrap;
}

.trans-header .page-title[b-4z8866oono] {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-primary);
}

.header-left .breadcrumb[b-4z8866oono] {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.breadcrumb-link[b-4z8866oono] {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-sep[b-4z8866oono] {
    margin: 0 0.35rem;
    color: var(--text-muted);
}

.breadcrumb-current[b-4z8866oono] {
    color: var(--text-tertiary);
}

.header-actions[b-4z8866oono] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn[b-4z8866oono] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition-theme);
}

.action-btn:hover[b-4z8866oono] {
    background: var(--bg-tertiary);
}

/* ─── Page Body ─────────────────────────────────────────────────────── */
.trans-body[b-4z8866oono] {
    padding: 1.5rem 3rem 4rem;
    background: var(--bg-primary);
    min-height: calc(100vh - 200px);
}

/* ─── Alert Banners ─────────────────────────────────────────────────── */
.alert-banner[b-4z8866oono] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid;
}

.alert-banner.alert-warning[b-4z8866oono] {
    background: #fef9ee;
    border-color: #fcd34d;
    color: #92400e;
}

.alert-banner.alert-info[b-4z8866oono] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

.alert-icon[b-4z8866oono] {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.alert-body[b-4z8866oono] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.alert-subtitle[b-4z8866oono] {
    font-weight: 400;
}

.alert-toggle[b-4z8866oono] {
    background: none;
    border: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 0.82rem;
    align-self: flex-start;
}

.alert-details[b-4z8866oono] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.alert-group[b-4z8866oono] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.alert-group-label[b-4z8866oono] {
    font-weight: 700;
    font-size: 0.78rem;
    margin-right: 0.25rem;
}

.alert-key-wrapper[b-4z8866oono] {
    display: inline-flex;
    align-items: center;
}

.alert-key-wrapper .copy-key-btn[b-4z8866oono] {
    opacity: 0;
}

.alert-key-wrapper:hover .copy-key-btn[b-4z8866oono] {
    opacity: 1;
}

.alert-key-wrapper .copy-key-btn.copied[b-4z8866oono] {
    opacity: 1;
}

.alert-key[b-4z8866oono] {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    word-break: break-all;
}

/* ─── Filter Bar ────────────────────────────────────────────────────── */
.filter-bar[b-4z8866oono] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-group[b-4z8866oono] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-4z8866oono] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-input[b-4z8866oono] {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    font-size: 0.85rem;
    min-width: 180px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.filter-input:focus[b-4z8866oono] {
    outline: 2px solid var(--accent-primary);
    border-color: transparent;
}

.search-group[b-4z8866oono] {
    flex: 1;
    min-width: 200px;
}

.search-group .filter-input[b-4z8866oono] {
    width: 100%;
}

.checkbox-label[b-4z8866oono] {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.4rem;
    font-size: 0.85rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    padding: 0.45rem 0;
    color: var(--text-primary);
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"][b-4z8866oono] {
    margin: 0;
}

/* ─── Language Tabs ─────────────────────────────────────────────────── */
.lang-tabs[b-4z8866oono] {
    display: flex;
    gap: 0.25rem;
}

.lang-tab[b-4z8866oono] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lang-tab.active[b-4z8866oono] {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.lang-tab:not(.active):hover[b-4z8866oono] {
    background: var(--bg-tertiary);
}

.tab-pct[b-4z8866oono] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
}

.tab-pct.complete[b-4z8866oono] { background: rgba(34, 197, 94, 0.2); color: #16a34a; }
.lang-tab.active .tab-pct.complete[b-4z8866oono] { background: rgba(255,255,255,0.3); color: #fff; }
.tab-pct.good[b-4z8866oono] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.lang-tab.active .tab-pct.good[b-4z8866oono] { background: rgba(255,255,255,0.3); color: #fff; }
.tab-pct.low[b-4z8866oono] { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.lang-tab.active .tab-pct.low[b-4z8866oono] { background: rgba(255,255,255,0.3); color: #fff; }

/* ─── Category Layout: Sidebar + Content ────────────────────────────── */
.trans-layout[b-4z8866oono] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.trans-sidebar[b-4z8866oono] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.5rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.sidebar-item[b-4z8866oono] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    text-align: left;
    transition: all 0.15s;
    width: 100%;
}

.sidebar-item:hover[b-4z8866oono] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-item.active[b-4z8866oono] {
    background: #1d4ed8;
    color: #ffffff;
    font-weight: 600;
    border-color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.3);
}

.sidebar-item.has-code-missing[b-4z8866oono] {
    border-left: 3px solid var(--accent-warning);
}

.sidebar-item.active.has-code-missing[b-4z8866oono] {
    border-left: 3px solid #fbbf24;
}

.sidebar-label[b-4z8866oono] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-badges[b-4z8866oono] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sidebar-badge[b-4z8866oono] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.sidebar-badge.warn[b-4z8866oono] {
    background: rgba(245, 158, 11, 0.2);
    color: #d97706;
}

.sidebar-item.active .sidebar-badge.warn[b-4z8866oono] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.sidebar-badge.untrans[b-4z8866oono] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.sidebar-item.active .sidebar-badge.untrans[b-4z8866oono] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.sidebar-count[b-4z8866oono] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.sidebar-item.active .sidebar-count[b-4z8866oono] {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Content Area ──────────────────────────────────────────────────── */
.trans-content[b-4z8866oono] {
    min-width: 0;
}

.category-header[b-4z8866oono] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.category-header h2[b-4z8866oono] {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.category-progress-mini[b-4z8866oono] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-sm[b-4z8866oono] {
    width: 120px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-sm[b-4z8866oono] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-fill-sm.complete[b-4z8866oono] { background: var(--accent-success); }
.progress-fill-sm.good[b-4z8866oono] { background: var(--accent-primary); }
.progress-fill-sm.low[b-4z8866oono] { background: var(--accent-warning); }

.progress-label-sm[b-4z8866oono] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ─── Translation Table ─────────────────────────────────────────────── */
.trans-table-wrapper[b-4z8866oono] {
    overflow-x: auto;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.trans-table[b-4z8866oono] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.trans-table th[b-4z8866oono] {
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.trans-table td[b-4z8866oono] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: top;
    color: var(--text-primary);
}

.trans-table tbody tr[b-4z8866oono] {
    background: var(--bg-secondary);
}

.trans-table tr:hover[b-4z8866oono] {
    background: var(--bg-tertiary);
}

.trans-table tr.untranslated[b-4z8866oono] {
    background: #fffbeb;
}

.trans-table tr.untranslated:hover[b-4z8866oono] {
    background: #fef3c7;
}

.trans-table tr.code-missing[b-4z8866oono] {
    background: #fff1f2;
}

.trans-table tr.code-missing:hover[b-4z8866oono] {
    background: #ffe4e6;
}

.trans-table tr.editing[b-4z8866oono] {
    background: #eff6ff;
}

.col-key[b-4z8866oono] {
    width: 220px;
    min-width: 180px;
}

.col-key code[b-4z8866oono] {
    font-size: 0.78rem;
    color: #6366f1;
    background: #eef2ff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    word-break: break-all;
}

.key-badge[b-4z8866oono] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.key-badge.warn[b-4z8866oono] {
    background: #fef3c7;
    color: #92400e;
}

/* ─── Copy Key Button ───────────────────────────────────────────────── */
.copy-key-btn[b-4z8866oono] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 0.3rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}

.trans-table tr:hover .copy-key-btn[b-4z8866oono] {
    opacity: 1;
}

.copy-key-btn:hover[b-4z8866oono] {
    opacity: 1;
    color: var(--accent-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.copy-key-btn:active[b-4z8866oono] {
    transform: scale(0.9);
}

.copy-key-btn.copied[b-4z8866oono] {
    opacity: 1;
    color: #22c55e;
}

.col-default[b-4z8866oono], .col-translation[b-4z8866oono] {
    min-width: 250px;
}

.col-status[b-4z8866oono] {
    width: 60px;
    text-align: center;
}

.text-value[b-4z8866oono] {
    cursor: pointer;
    display: block;
    line-height: 1.5;
}

.text-value:hover[b-4z8866oono] {
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
}

.text-value.ref-text[b-4z8866oono] {
    color: var(--text-tertiary);
    font-style: italic;
    cursor: default;
}

.text-value.ref-text:hover[b-4z8866oono] {
    background: transparent;
}

.text-value.missing[b-4z8866oono] {
    color: #d97706;
    font-style: italic;
}

.status-dot.ok[b-4z8866oono] { color: #22c55e; }
.status-dot.missing[b-4z8866oono] { color: #f59e0b; }
.status-dot.code-miss[b-4z8866oono] { font-size: 0.7rem; }

/* ─── Inline Edit ───────────────────────────────────────────────────── */
.edit-input[b-4z8866oono] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--accent-primary);
    border-radius: 6px;
    font-size: 0.85rem;
    resize: vertical;
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
}

.edit-actions[b-4z8866oono] {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.save-btn[b-4z8866oono], .cancel-btn[b-4z8866oono] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.save-btn:hover[b-4z8866oono] { background: #dcfce7; }
.cancel-btn:hover[b-4z8866oono] { background: #fee2e2; }

/* ─── Bottom Progress ───────────────────────────────────────────────── */
.bottom-progress[b-4z8866oono] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.progress-bar-lg[b-4z8866oono] {
    flex: 1;
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill-lg[b-4z8866oono] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-fill-lg.complete[b-4z8866oono] { background: var(--accent-success); }
.progress-fill-lg.good[b-4z8866oono] { background: var(--accent-primary); }
.progress-fill-lg.low[b-4z8866oono] { background: var(--accent-warning); }

.progress-text[b-4z8866oono] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ─── Import Modal ──────────────────────────────────────────────────── */
.modal-overlay[b-4z8866oono] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-4z8866oono] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    color: var(--text-primary);
}

.modal-content h2[b-4z8866oono] {
    color: var(--text-primary);
    margin-top: 0;
}

.import-summary[b-4z8866oono] {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.summary-item[b-4z8866oono] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.summary-item.new[b-4z8866oono] { background: #dcfce7; color: #166534; }
.summary-item.update[b-4z8866oono] { background: #dbeafe; color: #1d4ed8; }
.summary-item.skip[b-4z8866oono] { background: var(--bg-tertiary); color: var(--text-tertiary); }

.summary-count[b-4z8866oono] {
    font-size: 1.8rem;
    font-weight: 700;
}

.modal-footer[b-4z8866oono] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.btn[b-4z8866oono] {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    font-weight: 500;
}

.btn.secondary[b-4z8866oono] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.btn.primary[b-4z8866oono] {
    background: var(--accent-primary);
    color: #fff;
}

.btn.primary:hover[b-4z8866oono] {
    background: var(--accent-hover);
}

/* ─── Toast ─────────────────────────────────────────────────────────── */
.toast[b-4z8866oono] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2000;
    animation: slideIn 0.3s ease;
}

.toast.success[b-4z8866oono] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.toast.error[b-4z8866oono] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@@keyframes slideIn {
    from[b-4z8866oono] { transform: translateY(20px); opacity: 0; }
    to[b-4z8866oono] { transform: translateY(0); opacity: 1; }
}

/* ─── Utilities ─────────────────────────────────────────────────────── */
.loading-state[b-4z8866oono], .empty-state[b-4z8866oono] {
    text-align: center;
    padding: 3rem;
    color: var(--text-tertiary);
}

.spinner[b-4z8866oono] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@@keyframes spin {
    to[b-4z8866oono] { transform: rotate(360deg); }
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@@media (max-width: 900px) {
    .trans-layout[b-4z8866oono] {
        grid-template-columns: 1fr;
    }

    .trans-sidebar[b-4z8866oono] {
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .sidebar-item[b-4z8866oono] {
        flex: 0 0 auto;
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
    }
}

@@media (max-width: 768px) {
    .filter-bar[b-4z8866oono] {
        flex-direction: column;
    }

    .lang-tabs[b-4z8866oono] {
        flex-wrap: wrap;
    }

    .col-key[b-4z8866oono] {
        width: 140px;
        min-width: 120px;
    }
}
/* /Components/Pages/Admin/UserDetails.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   USER DETAILS - PAGE SPECIFIC STYLES
   (Gedeelde stijlen staan in admin-shared.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
.user-header[b-sobg4r2qcg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 3rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.header-title-row[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Status Badges ──────────────────────────────────────────────────────────── */
.status-badge[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-sobg4r2qcg] { background: #dcfce7; color: #166534; }
.status-badge.blocked[b-sobg4r2qcg] { background: #fee2e2; color: #dc2626; }
.status-badge.pending[b-sobg4r2qcg] { background: #fef3c7; color: #92400e; }

.role-badge[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.role-badge.admin[b-sobg4r2qcg] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.role-badge.test[b-sobg4r2qcg] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
}

/* ── User Stats Section ─────────────────────────────────────────────────────── */
.user-stats-section[b-sobg4r2qcg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.user-stats-section .stat-card.highlight[b-sobg4r2qcg] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
}

/* ── Main Layout ────────────────────────────────────────────────────────────── */
.user-details-page .admin-page[b-sobg4r2qcg] {
    min-height: calc(100vh - 300px);
}

.left-col[b-sobg4r2qcg],
.right-col[b-sobg4r2qcg] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* ── Inline Row (single line layout) ────────────────────────────────────────── */
.inline-row[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.status-select[b-sobg4r2qcg] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 180px;
}

.status-select.select-active[b-sobg4r2qcg] { background-color: #dcfce7; border-color: #86efac; }
.status-select.select-blocked[b-sobg4r2qcg] { background-color: #fee2e2; border-color: #fecaca; }
.status-select.select-pending[b-sobg4r2qcg] { background-color: #fef3c7; border-color: #fde68a; }

.toggle-row[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.test-account-checkbox[b-sobg4r2qcg] {
    width: 1.1rem;
    height: 1.1rem;
}

.test-account-badge[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.test-account-badge.test[b-sobg4r2qcg] {
    background: #ede9fe;
    color: #5b21b6;
}

.test-account-badge.regular[b-sobg4r2qcg] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Account Extra's ────────────────────────────────────────────────── */
.extras-row[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.extras-info[b-sobg4r2qcg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 200px;
}

.extras-label[b-sobg4r2qcg] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.extras-hint[b-sobg4r2qcg] {
    font-size: 0.78rem;
    color: #64748b;
}

.extras-divider[b-sobg4r2qcg] {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}

.role-badge.muted[b-sobg4r2qcg] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

/* iOS-style toggle switch */
.switch[b-sobg4r2qcg] {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.switch input[type="checkbox"][b-sobg4r2qcg] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider[b-sobg4r2qcg] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    transition: 0.25s;
    border-radius: 999px;
}

.switch .slider[b-sobg4r2qcg]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch input:checked + .slider[b-sobg4r2qcg] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.switch input:checked + .slider[b-sobg4r2qcg]::before {
    transform: translateX(20px);
}

.switch input:focus-visible + .slider[b-sobg4r2qcg] {
    box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}

.save-msg[b-sobg4r2qcg] {
    font-size: 0.8rem;
    color: #166534;
    padding: 0.25rem 0.5rem;
    background: #dcfce7;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── OAuth Info ─────────────────────────────────────────────────────────────── */
.oauth-info[b-sobg4r2qcg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oauth-row[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.oauth-label[b-sobg4r2qcg] {
    font-weight: 500;
    color: #64748b;
    min-width: 140px;
    font-size: 0.9rem;
}

.oauth-value[b-sobg4r2qcg] {
    color: #1e293b;
    font-size: 0.9rem;
}

.oauth-value.mono[b-sobg4r2qcg] {
    font-family: monospace;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    word-break: break-all;
}

.oauth-value.oauth-provider[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.oauth-icon[b-sobg4r2qcg] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.oauth-icon.google[b-sobg4r2qcg] {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 25%, #fbbc05 50%, #ea4335 75%);
    color: white;
}

.oauth-note[b-sobg4r2qcg] {
    font-style: italic;
    color: #64748b;
    font-size: 0.85rem;
}

.credits-input[b-sobg4r2qcg] {
    width: 100px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
}

.credits-unit[b-sobg4r2qcg] {
    font-weight: 500;
    color: #64748b;
}

/* ── Data Tables ────────────────────────────────────────────────────────────── */
.data-table[b-sobg4r2qcg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table thead tr[b-sobg4r2qcg] {
    background: #f8fafc;
}

.data-table th[b-sobg4r2qcg] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td[b-sobg4r2qcg] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.data-table tbody tr:last-child td[b-sobg4r2qcg] {
    border-bottom: none;
}

.data-table tbody tr:hover[b-sobg4r2qcg] {
    background: #f8fafc;
}

.data-table .center[b-sobg4r2qcg] {
    text-align: center;
}

.data-table .nowrap[b-sobg4r2qcg] {
    white-space: nowrap;
}

/* ── Process & Run Status Badges ────────────────────────────────────────────── */
.process-badge[b-sobg4r2qcg],
.run-status[b-sobg4r2qcg] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.process-badge.success[b-sobg4r2qcg],
.run-status.success[b-sobg4r2qcg] {
    background: #dcfce7;
    color: #166534;
}

.process-badge.pending[b-sobg4r2qcg],
.run-status.pending[b-sobg4r2qcg] {
    background: #fef3c7;
    color: #92400e;
}

.run-status.error[b-sobg4r2qcg] {
    background: #fee2e2;
    color: #dc2626;
}

.error-row td[b-sobg4r2qcg] {
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

/* ── Delete Button ──────────────────────────────────────────────────────────── */
.delete-btn[b-sobg4r2qcg] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.delete-btn:hover[b-sobg4r2qcg] {
    background: #fee2e2;
}

/* ── Carousel ───────────────────────────────────────────────────────────────── */
.carousel[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.carousel-arrow[b-sobg4r2qcg] {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #475569;
}

.carousel-arrow:hover:not(:disabled)[b-sobg4r2qcg] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.carousel-arrow:disabled[b-sobg4r2qcg] {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-inner[b-sobg4r2qcg] {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    flex: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-inner[b-sobg4r2qcg]::-webkit-scrollbar {
    display: none;
}

.carousel-item[b-sobg4r2qcg] {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.char-img[b-sobg4r2qcg] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 0%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: 3px solid white;
}

.image-name[b-sobg4r2qcg] {
font-size: 0.75rem;
margin-top: 0.5rem;
text-align: center;
color: var(--text-secondary, #475569);
max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-indicator[b-sobg4r2qcg] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.75rem;
    z-index: 10;
    background: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Preview Container ──────────────────────────────────────────────────────── */
.preview-container[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.thumb-wrapper[b-sobg4r2qcg] {
    position: relative;
}

.thumb[b-sobg4r2qcg] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.thumb-badge[b-sobg4r2qcg] {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
    background: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.preview-arrow[b-sobg4r2qcg] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ── Placeholder ────────────────────────────────────────────────────────────── */
.placeholder[b-sobg4r2qcg] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Fixed Footer ───────────────────────────────────────────────────────────── */
.user-footer[b-sobg4r2qcg] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer-info[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-email[b-sobg4r2qcg] {
    font-weight: 600;
    color: #1e293b;
}

.footer-sep[b-sobg4r2qcg] {
    color: #cbd5e1;
}

.footer-credits[b-sobg4r2qcg] {
    color: #3b82f6;
    font-weight: 500;
}

.footer-actions[b-sobg4r2qcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Modal Styles ───────────────────────────────────────────────────────────── */
.modal[b-sobg4r2qcg] {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal.is-visible[b-sobg4r2qcg] {
    display: flex;
}

.modal-content[b-sobg4r2qcg] {
    background-color: #fff;
    padding: 2rem;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.form-group[b-sobg4r2qcg] {
    margin-bottom: 1rem;
}

.form-group label[b-sobg4r2qcg] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group .input[b-sobg4r2qcg],
.form-group textarea[b-sobg4r2qcg] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .user-header[b-sobg4r2qcg] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .user-stats-section[b-sobg4r2qcg] {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 1.5rem;
    }

    .user-footer[b-sobg4r2qcg] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 540px) {
    .user-stats-section[b-sobg4r2qcg] {
        grid-template-columns: 1fr;
    }

    .credits-row[b-sobg4r2qcg] {
        flex-direction: column;
        align-items: stretch;
    }

    .credits-input[b-sobg4r2qcg] {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .user-header[b-sobg4r2qcg] {
    background: var(--bg-secondary, #1e293b);
    border-bottom-color: var(--border-primary, #334155);
}

html.dark-mode .user-avatar[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .user-title[b-sobg4r2qcg] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .user-meta[b-sobg4r2qcg] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .user-stats-section[b-sobg4r2qcg] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .stat-card[b-sobg4r2qcg] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .stat-value[b-sobg4r2qcg] {
    color: var(--text-primary, #f1f5f9) !important;
}

html.dark-mode .stat-label[b-sobg4r2qcg] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .user-content[b-sobg4r2qcg] {
    background: var(--bg-primary, #0f172a) !important;
}

html.dark-mode .detail-card[b-sobg4r2qcg],
html.dark-mode .orders-card[b-sobg4r2qcg] {
    background: var(--bg-secondary, #1e293b) !important;
    border-color: var(--border-primary, #334155) !important;
}

html.dark-mode .detail-card h3[b-sobg4r2qcg],
html.dark-mode .orders-card h3[b-sobg4r2qcg] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .detail-item label[b-sobg4r2qcg] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .detail-item span[b-sobg4r2qcg] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .credits-display[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .credits-input[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .orders-table thead tr[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .orders-table th[b-sobg4r2qcg] {
    color: var(--text-tertiary, #94a3b8) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .orders-table td[b-sobg4r2qcg] {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-primary, #334155) !important;
}

html.dark-mode .orders-table tbody tr:hover[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155) !important;
}

html.dark-mode .action-btn[b-sobg4r2qcg] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .action-btn:hover:not(:disabled)[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .user-footer[b-sobg4r2qcg] {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: var(--border-primary, #334155);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .user-email[b-sobg4r2qcg] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .footer-sep[b-sobg4r2qcg] {
    color: var(--border-primary, #334155);
}

html.dark-mode .footer-credits[b-sobg4r2qcg] {
    color: var(--accent-primary, #60a5fa);
}

html.dark-mode .modal-content[b-sobg4r2qcg] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .form-group label[b-sobg4r2qcg] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .form-group .input[b-sobg4r2qcg],
html.dark-mode .form-group textarea[b-sobg4r2qcg] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

/* ================================================================
   PREVIEW RENDERS
   Uses CSS variables from admin-shared.css that auto-switch
   between light and dark mode.
   ================================================================ */

.preview-group[b-sobg4r2qcg] {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 8px;
    border: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-secondary, #475569);
}

.preview-group-top[b-sobg4r2qcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-cachekey[b-sobg4r2qcg] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
}

.preview-date[b-sobg4r2qcg] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
}

.preview-badges[b-sobg4r2qcg] {
    display: flex;
    gap: 0.5rem;
}

.preview-thumbs[b-sobg4r2qcg] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.preview-thumb-item[b-sobg4r2qcg] {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
}

.preview-thumb-img[b-sobg4r2qcg] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-primary, #e2e8f0);
}

.preview-thumb-placeholder[b-sobg4r2qcg] {
    width: 80px;
    height: 80px;
    background: var(--bg-secondary, #ffffff);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-tertiary, #94a3b8);
}
/* /Components/Pages/Admin/UserDetailsComponents/RenderCreditsSection.razor.rz.scp.css */
/* Scoped styles for RenderCreditsSection */
.admin-card[b-5xwjlkuxlh] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.credits-row[b-5xwjlkuxlh] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.credits-title[b-5xwjlkuxlh] {
    margin: 0;
    flex: 0 0 auto;
}

.credits-input[b-5xwjlkuxlh] {
    width: 120px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
}

.credits-unit[b-5xwjlkuxlh] {
    font-size: 0.9rem;
    color: #666;
}

.credits-btn[b-5xwjlkuxlh] {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: none;
    background: var(--primary-color, #4a90e2);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.credits-btn:hover:not(:disabled)[b-5xwjlkuxlh] {
    background: var(--primary-hover, #357abd);
}

.credits-btn:disabled[b-5xwjlkuxlh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.status[b-5xwjlkuxlh] {
    font-size: 0.85rem;
    color: #28a745;
    font-weight: 500;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-5xwjlkuxlh] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .credits-title[b-5xwjlkuxlh] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .credits-input[b-5xwjlkuxlh] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .credits-unit[b-5xwjlkuxlh] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .status[b-5xwjlkuxlh] {
    color: #4ade80;
}
/* /Components/Pages/Admin/UserDetailsComponents/UserBasicInfoSection.razor.rz.scp.css */
/* Scoped styles for UserBasicInfoSection */
.admin-card[b-xu2jl92ef2] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-xu2jl92ef2] {
    margin-bottom: .8rem;
}

dl[b-xu2jl92ef2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

dt[b-xu2jl92ef2] {
    font-weight: 600;
    color: #555;
}

dd[b-xu2jl92ef2] {
    margin: 0;
    color: #333;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-xu2jl92ef2] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-xu2jl92ef2] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode dt[b-xu2jl92ef2] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode dd[b-xu2jl92ef2] {
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/UserDetailsComponents/UserImageRunsSection.razor.rz.scp.css */
/* Scoped styles for UserImageRunsSection */
.admin-card[b-tsgscchfiy] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-tsgscchfiy] {
    margin-bottom: .4rem;
}

.placeholder[b-tsgscchfiy] {
    color: #777;
    font-style: italic;
}

.tbl[b-tsgscchfiy] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tbl thead[b-tsgscchfiy] {
    background: #f6f6f6;
}

.tbl th[b-tsgscchfiy],
.tbl td[b-tsgscchfiy] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
}

.tbl th[b-tsgscchfiy] {
    font-weight: 600;
}

.num[b-tsgscchfiy] {
    text-align: right;
}

.nowrap[b-tsgscchfiy] {
    white-space: nowrap;
}

.thumb[b-tsgscchfiy] {
    width: 48px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    margin-right: 0.5rem;
}

.error-row td[b-tsgscchfiy] {
    color: #e00000;
    background: #fff5f5;
    padding: .6rem .75rem;
    font-style: italic;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-tsgscchfiy] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-tsgscchfiy] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .placeholder[b-tsgscchfiy] {
    color: var(--text-muted, #64748b);
}

html.dark-mode .tbl thead[b-tsgscchfiy] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-tsgscchfiy] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tbl th[b-tsgscchfiy],
html.dark-mode .tbl td[b-tsgscchfiy] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .error-row td[b-tsgscchfiy] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}
/* /Components/Pages/Admin/UserDetailsComponents/UserImagesSection.razor.rz.scp.css */
/* Scoped styles for UserImagesSection */
.admin-card[b-1duwj609mx] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-1duwj609mx] {
    margin-bottom: .4rem;
}

.carousel[b-1duwj609mx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.arrow[b-1duwj609mx] {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow:disabled[b-1duwj609mx] {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-inner[b-1duwj609mx] {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    flex: 1;
}

.carousel-item[b-1duwj609mx] {
    flex-shrink: 0;
    text-align: center;
}

.char-img[b-1duwj609mx] {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.image-name[b-1duwj609mx] {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.tbl[b-1duwj609mx] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tbl thead[b-1duwj609mx] {
    background: #f6f6f6;
}

.tbl th[b-1duwj609mx],
.tbl td[b-1duwj609mx] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
}

.tbl th[b-1duwj609mx] {
    font-weight: 600;
}

.nowrap[b-1duwj609mx] {
    white-space: nowrap;
}

.del-btn[b-1duwj609mx] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.del-btn:hover[b-1duwj609mx] {
    opacity: 1;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-1duwj609mx] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-1duwj609mx] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .arrow[b-1duwj609mx] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .image-name[b-1duwj609mx] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .tbl thead[b-1duwj609mx] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-1duwj609mx] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tbl th[b-1duwj609mx],
html.dark-mode .tbl td[b-1duwj609mx] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}
/* /Components/Pages/Admin/UserDetailsComponents/UserOrdersSection.razor.rz.scp.css */
/* Scoped styles for UserOrdersSection */
.admin-card[b-egzja4tcd0] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    box-shadow: var(--shadow);
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2[b-egzja4tcd0] {
    margin-bottom: .4rem;
}

.tbl[b-egzja4tcd0] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tbl thead[b-egzja4tcd0] {
    background: #f6f6f6;
}

.tbl th[b-egzja4tcd0],
.tbl td[b-egzja4tcd0] {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
}

.tbl th[b-egzja4tcd0] {
    font-weight: 600;
}

.tbl tbody tr:last-child td[b-egzja4tcd0] {
    border-bottom: none;
}

.cta[b-egzja4tcd0] {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    background: var(--primary-color, #4a90e2);
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.cta:hover[b-egzja4tcd0] {
    background: var(--primary-hover, #357abd);
}
tr[role="button"][b-egzja4tcd0]
{
    cursor: pointer;
}

tr[role="button"]:hover[b-egzja4tcd0]
{
    background: rgba(0,0,0,0.03);
}

tr[role="button"]:focus[b-egzja4tcd0]
{
    outline: 2px solid var(--accent, #1e66ff);
    outline-offset: -2px;
}

/* ????????????????????????????????????????????????????????????????????????????
   DARK MODE SUPPORT
   ???????????????????????????????????????????????????????????????????????????? */

html.dark-mode .admin-card[b-egzja4tcd0] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .admin-card h2[b-egzja4tcd0] {
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .tbl thead[b-egzja4tcd0] {
    background: var(--bg-tertiary, #334155);
}

html.dark-mode .tbl th[b-egzja4tcd0] {
    color: var(--text-tertiary, #94a3b8);
}

html.dark-mode .tbl th[b-egzja4tcd0],
html.dark-mode .tbl td[b-egzja4tcd0] {
    border-bottom-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode tr[role="button"]:hover[b-egzja4tcd0] {
    background: var(--bg-tertiary, #334155);
}
/* /Components/Pages/Compose/BookBuilderSection.razor.rz.scp.css */
/* ---------------------------------------------------------------
   VARIABELEN
---------------------------------------------------------------- */
:root[b-8llfyvz53f] {
    --phi: 1.618;
    --img-box: 240px;
    --item-gap: 8px;
    --item-h: calc((var(--img-box) - 2*var(--item-gap))/3);
    --char-img-w: 150px; /* breedte 1 karakter‑illustratie */
    --bb-total-w: calc(var(--phi)*var(--img-box) + 2*var(--char-img-w) + 4rem); /* panel + 2 karakters + gap */
}
/* ===============================================================
   INTRO‑KOP & SUB
================================================================ */
.boekbouwer-section[b-8llfyvz53f] {
    position: relative; 
}
#boekbouwer > h2.bb-intro[b-8llfyvz53f],
#boekbouwer > .bb-sub.bb-intro[b-8llfyvz53f] {
    max-width: var(--bb-total-w);
    margin-left: auto;
    margin-right: auto;
}
/* ===============================================================
   SECTION‑LAY‑OUT
================================================================ */
.bb-flex[b-8llfyvz53f] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
}
/* kolom met karakters + knop */
.bb-left[b-8llfyvz53f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
/* ===============================================================
   KNOP + CONNECTORS
================================================================ */
.bb-use-holder[b-8llfyvz53f] {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 10px;
    /* //AANPASSING START ➊ – extra ruimte tussen de twee CTA’s */
    gap: 1rem;
    /* //AANPASSING EINDE ➊ */
}

@media (max-width:640px) {
    .bb-use-holder[b-8llfyvz53f] {
        width: 100%;
    }
}

.cta.use-btn[b-8llfyvz53f] {
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: .8rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: filter .15s, transform .15s;
}

    .cta.use-btn:hover[b-8llfyvz53f] {
        filter: brightness(1.05);
        transform: translateY(-2px);
    }

.ctaRefined[b-8llfyvz53f] {
    padding-left: 10px;
    padding-right: 10px;
}
/* ===============================================================
   CAROUSEL
================================================================ */
.bb-carousel[b-8llfyvz53f] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
    gap: 2rem;
}

@media (max-width:640px) {
    .bb-carousel[b-8llfyvz53f] {
        flex-direction: row;
        gap: 1.6rem;
        flex-wrap: nowrap;
        justify-content: center;
    }
}

.char-stack[b-8llfyvz53f] {
    display: flex;
    align-items: center;
    gap: .8rem;
}

    .char-stack.dim[b-8llfyvz53f] {
        opacity: .35;
        cursor: pointer;
    }

.nav-btn[b-8llfyvz53f],
.panel-nav[b-8llfyvz53f] {
    background: none;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    padding: .2rem;
}
/* figuur + marker */
.char-figure[b-8llfyvz53f] {
    position: relative;
    text-align: center;
    transition: transform .2s;
}

    .char-figure .main-img[b-8llfyvz53f] {
        width: var(--char-img-w);
        height: 175px;
        object-fit: contain;
        object-position: 50% 0;
    }

    .char-figure .marker[b-8llfyvz53f] {
        position: absolute;
        bottom: -15px;
        left: 50%;
        width: 96px;
        height: 4px;
        background: var(--brand);
        border-radius: 3px;
        transform: translateX(-50%);
    }

.orig-photo[b-8llfyvz53f] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
/* ===============================================================
   PANEL
================================================================ */
.bb-panel[b-8llfyvz53f] {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: 2rem 2.4rem;
    width: calc(var(--phi)*var(--img-box));
    aspect-ratio: var(--phi)/1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.panel-head[b-8llfyvz53f] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

    .panel-head h3[b-8llfyvz53f] {
        margin: 0;
        font-size: 1.5rem;
    }

.small[b-8llfyvz53f] {
    margin: -.2rem 0 1.4rem;
    color: #55637a;
    font-size: .95rem;
}

.panel-body[b-8llfyvz53f] {
    display: flex;
    gap: 1.6rem;
    align-items: stretch;
}
.panel-main[b-8llfyvz53f] {
    position: relative;
}

.form-col[b-8llfyvz53f] {
    flex: 0 0 var(--img-box);
    width: var(--img-box);
    height: var(--img-box);
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
}

    .form-col > *[b-8llfyvz53f] {
        height: var(--item-h);
        flex: 0 0 var(--item-h);
        box-sizing: border-box;
    }

    .form-col .input[b-8llfyvz53f] {
        width: 100%;
        padding: .6rem 1rem;
        border: 2px solid #ccd3e0;
        border-radius: 14px;
        font-size: 1rem;
        font-family: inherit;
    }

    .form-col select.input[b-8llfyvz53f] {
        background-color: #fff;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

.cta.wide[b-8llfyvz53f] {
    width: 100%;
    border: none;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 14px;
    transition: filter .15s;
}

    .cta.wide:hover[b-8llfyvz53f] {
        filter: brightness(1.05);
    }
/* placeholder‑vierkant */
.img-col[b-8llfyvz53f] {
    position: relative;
    flex: 0 0 var(--img-box);
    width: var(--img-box);
    height: var(--img-box);
    border-radius: 14px;
    background: linear-gradient(145deg,#f6f8fc 0%,#eef1f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

    .img-col img[b-8llfyvz53f] {
        opacity: .45;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

        .img-col img.preview[b-8llfyvz53f] {
            opacity: 1;
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 14px;
        }
/* ===============================================================
   BADGE (voorlopig behouden)
================================================================ */
.badge[b-8llfyvz53f] {
    position: absolute;
    right: -115px;
    top: -48px;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(6deg);
    background-image: url(/images/Elements/niet-Mattel.png);
    background-size: 100% 100%;
}

@media (max-width:640px) {
    .badge[b-8llfyvz53f] {
        left: 50%;
        right: auto;
        top: -60px;
        transform: translateX(-50%) rotate(6deg);
    }
    .bb-use-holder[b-8llfyvz53f] { 
        display: none !important;
    }
}
/* loader / sub‑kop */
.bb-sub[b-8llfyvz53f] {
    color: #54637a;
    margin: -.3rem 0 1.6rem;
}

.loading[b-8llfyvz53f] {
    padding: 4rem;
    text-align: center;
    font-size: 1.2rem;
}
/* ───── Processing overlay ─────────────────────────────── */
.bb-processing-overlay[b-8llfyvz53f] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.95);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

    .bb-processing-overlay .overlay-inner[b-8llfyvz53f] {
        position: relative;
        text-align: center;
        max-width: 480px;
    }

    .bb-processing-overlay .thumbs[b-8llfyvz53f] {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 1.2rem 0;
    }

    .bb-processing-overlay .thumb[b-8llfyvz53f] {
        width: 88px;
        aspect-ratio: 2/3;
        position: relative;
        outline: 2px solid white;
        border: 2px solid black;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,.05);
        background-color: #fff;
    }

        .bb-processing-overlay .thumb img[b-8llfyvz53f] {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bb-processing-overlay .thumb.pending figcaption[b-8llfyvz53f] {
            display: none;
        }

        .bb-processing-overlay .thumb.pending[b-8llfyvz53f]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.15);
        }

        .bb-processing-overlay .thumb.done[b-8llfyvz53f]::after {
            display: none;
        }

        .bb-processing-overlay .thumb.failed[b-8llfyvz53f]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(231, 76, 60, .35);
        }

        .bb-processing-overlay .thumb.failed .failed-mark[b-8llfyvz53f] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 700;
            color: #e74c3c;
            z-index: 1;
            text-shadow: 0 1px 4px rgba(0,0,0,.4);
        }

    .bb-processing-overlay figcaption[b-8llfyvz53f] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: .8rem;
        font-weight: 600;
    }

    .bb-processing-overlay .thumb .spinner[b-8llfyvz53f] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px; 
        border: 3px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: bb-spin-b-8llfyvz53f .8s linear infinite;
    }
@keyframes bb-spin-b-8llfyvz53f {
    to {
        transform: rotate(360deg);
    }
}
@keyframes spin-b-8llfyvz53f {
    to {
        transform: rotate(360deg);
    }
}
.builder-wrapper[b-8llfyvz53f] {
    position: relative; 
    display: inline-block;
}

.thumbs-over[b-8llfyvz53f] {
    position: absolute;
    left: 10px; 
    bottom: 10px; 
    display: flex;
    flex-direction: row;
    align-items: flex-end; 
    gap: 1rem; 
    z-index: 2;
}
.loader[b-8llfyvz53f] {
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-8llfyvz53f 1s linear infinite;
}

.upload-badge[b-8llfyvz53f] {
    position: absolute;
    border-radius: 10px;
    top: 30px;
    width: 200px;
    right: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    z-index: 2;
}

    .upload-badge .num[b-8llfyvz53f] {
        display: inline-block;
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        font-size: .8rem;
        line-height: 1.3rem;
        text-align: center;
    }
.upload-error[b-8llfyvz53f] {
    position: absolute;
    top: calc(100% + 4px); 
    right: 0;
    left: 0;
    animation: fadeIn .25s ease-out;
}

.form-col[b-8llfyvz53f] {
    position: relative;
}

input.needs-attention[b-8llfyvz53f] {
    border-color: #ff6600;
    animation: pulseBorder-b-8llfyvz53f .9s infinite alternate;
}

@keyframes pulseBorder-b-8llfyvz53f {
    from {
        border-color: #ff6600;
    }

    to {
        border-color: #ffa64d;
    }
}
@keyframes popInSilhouette-b-8llfyvz53f {
    0% {
        opacity: 0;
        transform: scale(.8) rotateY(-8deg);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

.main-img.pop-in[b-8llfyvz53f] {
    animation: popInSilhouette-b-8llfyvz53f .45s cubic-bezier(.23,1.2,.32,1) both;
}


@media (max-width:640px) {
    .panel-body[b-8llfyvz53f] {
        flex-direction: column;
        align-items: stretch;
    }

        .panel-body .img-col[b-8llfyvz53f] {
            display: none !important;
        }

        .panel-body .form-col[b-8llfyvz53f] {
            position: relative;
            width: 100% !important;
        }

    .bb-use-holder.desktop[b-8llfyvz53f] {
        display: none !important;
    }

    .bb-use-holder.mobile[b-8llfyvz53f] {
        display: block !important;
        justify-content: center;
        margin-top: 1.4rem;
    }
}

@media (min-width: 641px) {
    .bb-use-holder.mobile[b-8llfyvz53f] {
        display: none !important;
    }

    .use-btn.mobile[b-8llfyvz53f] {
        display: none !important;
    }
}

@media (max-width:640px) {
    .bb-flex[b-8llfyvz53f] {
        gap: 3rem;
    }
}
@media (max-width:640px) {
    .bb-processing-overlay .bb-use-holder[b-8llfyvz53f] {
        display: flex !important;
        flex-direction: column; 
        align-items: center;
        gap: 1rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .form-col .input[b-8llfyvz53f] {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border-primary, #334155);
    color: var(--text-primary, #f1f5f9);
}

html.dark-mode .form-col select.input[b-8llfyvz53f] {
    background-color: var(--bg-tertiary, #334155);
}

html.dark-mode .img-col[b-8llfyvz53f] {
    background: linear-gradient(145deg, var(--bg-tertiary, #334155) 0%, var(--bg-secondary, #1e293b) 100%);
}

html.dark-mode .bb-panel[b-8llfyvz53f] {
    background: var(--bg-secondary, #1e293b);
}

html.dark-mode .bb-overlay[b-8llfyvz53f] {
    background: rgba(15, 23, 42, 0.95);
}

html.dark-mode .bb-processing-overlay[b-8llfyvz53f] {
    background: rgba(15, 23, 42, 0.95) !important;
}

html.dark-mode .bb-sub[b-8llfyvz53f] {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .loading[b-8llfyvz53f] {
    color: var(--text-secondary, #cbd5e1) !important;
}

html.dark-mode .form-col label[b-8llfyvz53f] {
    color: var(--text-secondary, #cbd5e1) !important;
}
/* /Components/SiteFooter.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   ADMIN FOOTER - FIXED FOOTER MET DARK MODE TOGGLE
   Stijlvolle fixed footer voor BBuilder Admin
   ════════════════════════════════════════════════════════════════════════════ */

.admin-footer[b-v6me6yf3vk] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-secondary, #ffffff);
    border-top: 1px solid var(--border-primary, #e2e8f0);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.admin-footer.collapsed[b-v6me6yf3vk] {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

/* Dark mode footer */
html.dark-mode .admin-footer[b-v6me6yf3vk] {
    background: var(--bg-secondary, #1e293b);
    border-top-color: var(--border-primary, #334155);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .admin-footer.collapsed[b-v6me6yf3vk] {
    border-color: var(--border-secondary, #475569);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.footer-inner[b-v6me6yf3vk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    gap: 1.5rem;
}

.admin-footer.collapsed .footer-inner[b-v6me6yf3vk] {
    padding: 0.35rem;
    gap: 0;
    width: auto;
}

/* ── Copyright ───────────────────────────────────────────────────────────────── */
.footer-copyright[b-v6me6yf3vk] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-tertiary, #64748b);
    transition: color 0.3s ease;
}

html.dark-mode .footer-copyright[b-v6me6yf3vk] {
    color: var(--text-tertiary, #94a3b8);
}

/* ── Navigation ──────────────────────────────────────────────────────────────── */
.footer-nav[b-v6me6yf3vk] {
    display: flex;
    gap: 1.5rem;
}

.footer-nav a[b-v6me6yf3vk] {
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover[b-v6me6yf3vk] {
    color: var(--accent-primary, #3b82f6);
}

html.dark-mode .footer-nav a[b-v6me6yf3vk] {
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .footer-nav a:hover[b-v6me6yf3vk] {
    color: var(--accent-primary, #60a5fa);
}

/* ── Theme Toggle Container ──────────────────────────────────────────────────── */
.theme-toggle-container[b-v6me6yf3vk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-controls[b-v6me6yf3vk] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: auto;
}

.theme-label[b-v6me6yf3vk] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-tertiary, #64748b);
    min-width: 50px;
    text-align: right;
    transition: color 0.3s ease;
}

html.dark-mode .theme-label[b-v6me6yf3vk] {
    color: var(--text-tertiary, #94a3b8);
}

/* ── Collapse Button ───────────────────────────────────────────────────────── */
.footer-collapse-toggle[b-v6me6yf3vk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-collapse-toggle:hover[b-v6me6yf3vk] {
    border-color: var(--accent-primary, #3b82f6);
    color: var(--accent-primary, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.16);
    transform: translateY(-1px);
}

.admin-footer.collapsed .footer-collapse-toggle[b-v6me6yf3vk] {
    height: 36px;
    min-width: 62px;
    background: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
    box-shadow: none;
}

.collapsed-theme-dot[b-v6me6yf3vk] {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
}

.footer-collapse-chevron[b-v6me6yf3vk] {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.footer-collapse-chevron.is-collapsed[b-v6me6yf3vk] {
    transform: rotate(180deg);
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────────── */
.theme-toggle[b-v6me6yf3vk] {
    position: relative;
    width: 56px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

.theme-toggle:focus-visible .toggle-track[b-v6me6yf3vk] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.toggle-track[b-v6me6yf3vk] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 15px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Track gradient voor light mode (zon) */
.toggle-track[b-v6me6yf3vk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Track gradient voor dark mode (nacht) */
html.dark-mode .toggle-track[b-v6me6yf3vk] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

html.dark-mode .toggle-track[b-v6me6yf3vk]::before {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
    opacity: 1;
}

/* Sterren effect in dark mode */
.toggle-track[b-v6me6yf3vk]::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 
        12px 3px 0 0 white,
        6px 10px 0 0 white,
        18px 8px 0 0 white;
    transition: opacity 0.3s ease 0.15s;
}

html.dark-mode .toggle-track[b-v6me6yf3vk]::after {
    opacity: 0.6;
}

/* ── Toggle Thumb ────────────────────────────────────────────────────────────── */
.toggle-thumb[b-v6me6yf3vk] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                background 0.3s ease,
                box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark-mode .toggle-thumb[b-v6me6yf3vk] {
    transform: translateX(26px);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

/* ── Toggle Icon ─────────────────────────────────────────────────────────────── */
.toggle-icon[b-v6me6yf3vk] {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .toggle-icon[b-v6me6yf3vk] {
    transform: scale(1.1);
}

html.dark-mode .toggle-icon[b-v6me6yf3vk] {
    animation: moonPulse-b-v6me6yf3vk 2s ease-in-out infinite;
}

@keyframes moonPulse-b-v6me6yf3vk {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ── Hover Effects ───────────────────────────────────────────────────────────── */
.theme-toggle:hover .toggle-track[b-v6me6yf3vk] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

html.dark-mode .theme-toggle:hover .toggle-track[b-v6me6yf3vk] {
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3);
}

.theme-toggle:hover .toggle-thumb[b-v6me6yf3vk] {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

html.dark-mode .theme-toggle:hover .toggle-thumb[b-v6me6yf3vk] {
    box-shadow: 0 3px 12px rgba(251, 191, 36, 0.5);
}

html.dark-mode .footer-collapse-toggle[b-v6me6yf3vk] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: var(--border-primary, #334155);
    color: var(--text-secondary, #cbd5e1);
}

html.dark-mode .footer-collapse-toggle:hover[b-v6me6yf3vk] {
    border-color: var(--accent-primary, #60a5fa);
    color: var(--accent-primary, #60a5fa);
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.2);
}

html.dark-mode .admin-footer.collapsed .footer-collapse-toggle[b-v6me6yf3vk] {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: white;
}

/* ── Active/Click Effect ─────────────────────────────────────────────────────── */
.theme-toggle:active .toggle-thumb[b-v6me6yf3vk] {
    transform: scale(0.95);
}

html.dark-mode .theme-toggle:active .toggle-thumb[b-v6me6yf3vk] {
    transform: translateX(26px) scale(0.95);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .footer-inner[b-v6me6yf3vk] {
        padding: 0.75rem 1rem;
        gap: 1rem;
    }

    .footer-copyright[b-v6me6yf3vk] {
        font-size: 0.75rem;
    }

    .theme-label[b-v6me6yf3vk] {
        display: none;
    }

    .footer-controls[b-v6me6yf3vk] {
        gap: 0.5rem;
    }

    .footer-nav[b-v6me6yf3vk] {
        display: none;
    }

    .theme-toggle[b-v6me6yf3vk] {
        width: 50px;
        height: 26px;
    }

    .toggle-thumb[b-v6me6yf3vk] {
        width: 20px;
        height: 20px;
    }

    html.dark-mode .toggle-thumb[b-v6me6yf3vk] {
        transform: translateX(24px);
    }

    .toggle-icon[b-v6me6yf3vk] {
        font-size: 12px;
    }
}