/*
 * Cast Conductor Proprietary License v5
 * SPDX-License-Identifier: LicenseRef-CastConductor-Proprietary-v5
 * 
 * Copyright (c) 2025 CastConductor.com. All Rights Reserved.
 * 
 * This file is part of Cast Conductor ("Software"). The Software and its source
 * code constitute proprietary, confidential, and trade secret information of
 * CastConductor.com ("Company"). Any access or use is governed strictly by the
 * Cast Conductor Proprietary License v5 ("License"). By installing, copying,
 * accessing, compiling, or otherwise using the Software you agree to be bound by
 * all terms of the License. If you do not agree, you must cease use immediately.
 * 
 * Key Terms (Summary – see full License for binding terms):
 *  1. No Redistribution: You may not publish, distribute, sublicense, rent,
 *     lease, transfer, sell, or otherwise make the Software (or any derivative)
 *     available to any third party without prior written consent of Company.
 *  2. No Modification: Modification, reverse engineering, decompilation, or
 *     disassembly is prohibited except to the limited extent expressly permitted
 *     by applicable law that cannot be contractually waived.
 *  3. Confidentiality: Treat all source code and related artifacts as Company
 *     Confidential Information. Maintain at least the same degree of care as for
 *     your own confidential materials, and not less than reasonable care.
 *  4. No Patent License: No express or implied patent rights are granted. Future
 *     patents (if any) are fully reserved.
 *  5. No Trademark License: Company names, marks, and logos may not be used
 *     without prior written permission.
 *  6. Limited Internal Use: Use is limited solely to internal evaluation and
 *     operation of licensed Cast Conductor deployments. Commercial hosting or
 *     resale as a service requires a separate written agreement.
 *  7. Telemetry & License Validation: The Software may periodically transmit a
 *     hashed installation identifier, domain (or site ID), plugin/app version,
 *     and a truncated (non-reversible) fragment of the license key solely to
 *     validate activation status and enforce licensing. This minimal "phone home"
 *     check contains no personal or content data. If optional telemetry is later
 *     introduced it will be limited to aggregate operational metrics (no PII),
 *     fully documented, and optionally disableable per published instructions.
 *  8. Third-Party Components: The Software may include open source components
 *     covered by their own licenses. See THIRD-PARTY-NOTICES.md. Those licenses
 *     govern their respective components; this License governs all remaining code.
 *  9. Export Compliance: You are responsible for compliance with all applicable
 *     export control and sanctions laws.
 * 10. Warranty Disclaimer: THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF
 *     ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO MERCHANTABILITY,
 *     FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT.
 * 11. Limitation of Liability: IN NO EVENT WILL COMPANY OR AUTHORS BE LIABLE FOR
 *     ANY INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE
 *     DAMAGES, OR LOST PROFITS, EVEN IF ADVISED OF THE POSSIBILITY.
 * 12. Acceptance: Use of the Software constitutes acceptance of the License.
 * 13. Enforcement: Unauthorized reproduction or distribution may result in civil
 *     and criminal penalties and will be prosecuted to the maximum extent allowed
 *     by law.
 * 
 * Authoritative EULA: EULA-v5.1.md (repository root – private) and https://castconductor.com/eula
 * Precedence: If this summary conflicts with the EULA, the EULA governs.
 * Revision: Current EULA revision v5.1 (subject to update; check EULA for current enterprise thresholds).
 * 
 * Full License text available from: licensing@castconductor.com
 * Security reports: security@castconductor.com
 * Commercial inquiries: licensing@castconductor.com
 * 
 * END OF HEADER
 */
/* Scope canvas preview HTML within the assign modal body */
.cc-assign-scope .castconductor-preview-block { transform: scale(0.8); transform-origin: top left; max-width: 100%; overflow: hidden; }
.cc-assign-scope .castconductor-preview-block .artwork-container img { border-radius: 6px; }

/* Intended Container preset feedback */
.ccve-preset-flash, .ccve-preset-flash-initial {
        outline: 2px solid #38bdf8 !important;
        box-shadow: 0 0 0 3px rgba(56,189,248,0.35);
        transition: outline-color .3s ease, box-shadow .6s ease;
}
.ccve-preset-flash { animation: ccvePresetPulse .55s ease; }
.ccve-preset-flash-initial { animation: ccvePresetPulse 1.1s ease; }
@keyframes ccvePresetPulse {
    0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.65); }
    70% { box-shadow: 0 0 0 6px rgba(56,189,248,0); }
    100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

/* Assign modal form sugar */
.cc-form { display: grid; gap: 12px; }
.cc-form-row label { display: block; font-weight: 600; margin-bottom: 4px; }
.cc-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cc-form-actions .primary { background: #2271b1; color: #fff; border: none; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
.cc-form-actions .primary:hover { background: #135e96; }

/* Ensure New Container button is readable (avoid blue-on-blue) */
#ccve-btn-new-container, #create-container-btn {
    color: #fff !important;
    background: #2271b1 !important;
    border: 1px solid #135e96 !important;
}
#ccve-btn-new-container:hover, #create-container-btn:hover {
    background: #135e96 !important;
}
.cc-help { color: #6b7280; font-size: 11px; }
.cc-radio-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.cc-radio-row {
    display: flex; gap: 8px; align-items: center;
    padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px;
}
.cc-radio-row input { margin: 0; }
.cc-radio-text strong { margin-right: 6px; }
.rotation-total-indicator { font-size: 12px; color: #374151; margin: 6px 0; }
/**
 * CastConductor Canvas Editor Styles
 * 
 * Unified canvas editor interface styling.
 * Mobile-responsive design for WordPress admin integration.
 * 
 * @package CastConductor
 * @since 5.0.0
 */

/* ===== MAIN CANVAS EDITOR LAYOUT ===== */
#canvas-editor-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

/* Canvas Editor Header */
.canvas-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.canvas-editor-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #23282d;
    margin: 0;
}

.canvas-editor-actions {
    display: flex;
    gap: 10px;
}

/* Content Block Selection */
.canvas-block-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.canvas-block-selector label {
    font-weight: 600;
    color: #23282d;
}

#canvas-content-block-select {
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #7e8993;
    border-radius: 3px;
    background: #fff;
}

#canvas-new-block-btn {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#canvas-new-block-btn:hover {
    background: #005177;
}

/* ===== PREVIEW SECTION ===== */
.canvas-preview-section {
    flex: 1;
    min-height: 500px;
}

.canvas-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.canvas-preview-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #23282d;
    margin: 0;
}

.canvas-preview-container {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #2a2d33 0%, #1c1e22 100%);
    border: 1px dashed #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.canvas-preview-placeholder {
    color: #666;
    font-size: 14px;
    text-align: center;
}

/* Ensure preview content inside canvas containers does not intercept mouse events */
.canvas-container .container-content-preview {
    pointer-events: none;
}

/* Zones overlay is informational only; allow underlying drag/resize */
.zones-overlay { pointer-events: none; }
.zones-overlay .zone-rect { position: absolute; outline: 1px dashed rgba(51, 65, 85, 0.6); }
.zones-overlay .zone-rect .zone-gear { pointer-events: auto; position: absolute; top: 4px; right: 4px; }
/* Optional per-zone grid visualization toggled by JS (uses --zone-grid set in JS) */
.zones-overlay .zone-rect.show-grid {
    background-image: linear-gradient(to right, rgba(2, 132, 199, 0.08) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(2, 132, 199, 0.08) 1px, transparent 1px);
    background-size: var(--zone-grid, 8px) var(--zone-grid, 8px);
    background-position: 0 0;
}

/* Admin preview badges (non-zoned and zoned) */
.container-preview-badge, .zone-preview-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    background: rgba(2, 132, 199, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    pointer-events: none;
}

/* Token layer explicit edit button */
#block-stage .ccve-layer-edit-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #0ea5e9;
    background: #0ea5e9;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
}
#block-stage .ccve-token-text-layer:hover .ccve-layer-edit-btn,
#block-stage .ccve-token-image-layer:hover .ccve-layer-edit-btn { opacity: 1; }

/* Ensure overlay never blocks interactions */
#block-stage .ccve-block-bg { pointer-events: none !important; z-index: 0 !important; }
#block-stage .canvas-container { pointer-events: none; }
/* Re-enable pointer events for unified layers (modern) and legacy classes */
#block-stage .unified-layer { pointer-events: auto; z-index: 5; }
#block-stage .ccve-token-text-layer, #block-stage .ccve-token-image-layer { pointer-events: auto; z-index: 5; }

/* Unified Layer Selection State - visual indicator when layer is selected */
#block-stage .unified-layer.unified-layer--selected {
    outline: 2px solid #4caf50;
    outline-offset: -1px;
    z-index: 10;
}

/* Multi-select visual indicator - slightly different style for multiple selection */
#block-stage .unified-layer.unified-layer--multi-selected {
    outline: 2px solid #38bdf8;
    outline-offset: -1px;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
    z-index: 10;
}

/* When a single layer is selected but multiple exist, use green */
#block-stage .unified-layer.unified-layer--selected:not(.unified-layer--multi-selected) {
    outline-color: #4caf50;
    box-shadow: none;
}

/* Marquee selection box */
.ccve-marquee-selection {
    border: 1px dashed #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

/* Selection count badge */
.ccve-selection-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 10px 16px;
    background: #1e2328;
    border: 1px solid #38bdf8;
    border-radius: 6px;
    color: #38bdf8;
    font-size: 13px;
    font-weight: 600;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 1;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}
.ccve-selection-badge.fade-out {
    opacity: 0;
}
.ccve-selection-badge.grouped {
    border-color: #22c55e;
    color: #22c55e;
}
.ccve-selection-badge.ungrouped {
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Layer panel multi-select highlight */
#ccve-layers-list li.multi-selected {
    background: rgba(56, 189, 248, 0.15) !important;
    border-left: 3px solid #38bdf8;
}

/* Group header in layer panel */
.ccve-layer-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 4px 0 2px;
    background: rgba(56, 189, 248, 0.08);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #38bdf8;
    cursor: pointer;
}

.ccve-layer-group-header:hover {
    background: rgba(56, 189, 248, 0.15);
}

.ccve-layer-group-header .group-icon {
    font-size: 14px;
}

.ccve-layer-group-header .group-toggle {
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.2s;
}

.ccve-layer-group-header.collapsed .group-toggle {
    transform: rotate(-90deg);
}

/* Indent grouped layers */
#ccve-layers-list li.in-group {
    margin-left: 12px;
    border-left: 2px solid rgba(56, 189, 248, 0.3);
    padding-left: 6px;
}

/* Group badge indicator in layer panel */
.ccve-group-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: #22c55e;
    opacity: 0.8;
    vertical-align: middle;
    cursor: help;
}

/* Hide grouped layers when group is collapsed */
.ccve-layer-group-header.collapsed + li.in-group,
#ccve-layers-list .group-collapsed {
    display: none;
}

/* Content Block Editor: ALWAYS hide server preview - show only draggable layers */
/* The flat server preview is for Scenes/Containers assignment, not layer editing */
#block-stage .cc-block-editor-inner { display: none !important; }
#block-stage .cc-block-handle { display: none !important; }
#block-stage .castconductor-preview-block { display: none !important; }
#block-stage .cc-preview-host { display: none !important; }

/* Simple Mode: hide legacy hydrated layers to avoid confusion */
.ccve-simple-mode #block-stage .ccve-legacy-layer { display: none !important; }
/* In Simple Mode, hide server-rendered preview content and block handles to leave a clean authoring surface */
.ccve-simple-mode #canvas-preview-container .cc-block-editor-inner { display: none !important; }
.ccve-simple-mode #canvas-preview-container .cc-block-handle { display: none !important; }
.ccve-simple-mode #canvas-preview-container .cc-block-editor-wrap { outline: none !important; background: transparent !important; }

/* CRITICAL: box-sizing ensures padding is included in set width/height, not added outside */
.cc-block-editor-wrap { box-sizing: border-box; }

.container-preview-badge.warn, .zone-preview-badge.warn { background: rgba(245, 110, 40, 0.9); }
.container-preview-badge.error, .zone-preview-badge.error { background: rgba(179, 45, 46, 0.9); }

/* Generic scale wrappers used by JS when fitting preview HTML */
.cc-fit-outer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Subtle hint when working with zoned containers */
.zone-hint {
    margin: 8px 0 6px;
    padding: 6px 8px;
    background: rgba(30, 60, 114, 0.08);
    color: #334155;
    border-left: 3px solid #3b82f6;
    border-radius: 3px;
    font-size: 12px;
}
.cc-fit-inner { position: absolute; left: 0; top: 0; transform-origin: top left; }

/* Preview content blocks */
.castconductor-preview-block {
    position: relative;
    box-sizing: border-box;
}

.castconductor-preview-block .artwork-container {
    overflow: hidden;
}

.castconductor-preview-block .artwork-container img {
    display: block;
}

.castconductor-preview-block .text-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== CONTROLS PANEL ===== */
.canvas-controls-panel {
    width: 350px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.canvas-controls-panel.preview-mode {
    display: none;
}

/* Control Section Headers */
.canvas-control-section {
    border-bottom: 1px solid #ddd;
}

.canvas-control-section:last-child {
    border-bottom: none;
}

.canvas-control-header {
    background: #23282d;
    color: #fff;
    padding: 12px 15px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.canvas-control-header:hover {
    background: #32373c;
}

.canvas-control-header::after {
    content: '▼';
    font-size: 12px;
    transition: transform 0.2s;
}

.canvas-control-header.collapsed::after {
    transform: rotate(-90deg);
}

.canvas-control-content {
    padding: 15px;
    background: #fff;
}

.canvas-control-content.collapsed {
    display: none;
}

/* Control Groups */
.canvas-control-group {
    margin-bottom: 20px;
}

.canvas-control-group:last-child {
    margin-bottom: 0;
}

.canvas-control-label {
    display: block;
    font-weight: 600;
    color: #23282d;
    margin-bottom: 5px;
    font-size: 13px;
}

.canvas-control-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #7e8993;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}

.canvas-control-input:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Inline Controls */
.canvas-control-inline {
    display: flex;
    gap: 10px;
    align-items: center;
}

.canvas-control-inline .canvas-control-input {
    flex: 1;
}

/* Checkbox Controls */
.canvas-control-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.canvas-control-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Color Picker */
.canvas-color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.canvas-color-input {
    width: 50px;
    height: 30px;
    padding: 0;
    border: 1px solid #7e8993;
    border-radius: 3px;
    cursor: pointer;
}

.canvas-color-value {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
}

/* Range Sliders */
.canvas-range-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.canvas-range-input {
    flex: 1;
}

.canvas-range-value {
    min-width: 40px;
    text-align: right;
    font-size: 12px;
    color: #666;
}

/* Artwork Controls */
#canvas-artwork-controls {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-top: 15px;
}

.canvas-artwork-apis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ===== ACTION BUTTONS ===== */
.canvas-action-buttons {
    display: flex;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}

.canvas-action-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
}

#canvas-save-btn {
    background: #00a32a;
    color: #fff;
}

#canvas-save-btn:hover:not(:disabled) {
    background: #008a20;
}

#canvas-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#canvas-preview-btn {
    background: #0073aa;
    color: #fff;
}

#canvas-preview-btn:hover {
    background: #005177;
}

#canvas-reset-btn {
    background: #b32d2e;
    color: #fff;
}

#canvas-reset-btn:hover {
    background: #8a2424;
}

/* ===== NOTIFICATIONS ===== */
.canvas-notification {
    position: fixed;
    top: 32px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease-out;
}

.canvas-notification-success {
    background: #00a32a;
}

.canvas-notification-error {
    background: #b32d2e;
}

.canvas-notification-warning {
    background: #f56e28;
}

.canvas-notification-info {
    background: #0073aa;
}

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

/* ===== LOADER ===== */
#canvas-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.canvas-loader-content {
    display: none; /* Hidden by default - orphaned loader from V4 containers tab */
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.canvas-loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text {
    color: #23282d;
    font-size: 14px;
    font-weight: 600;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    #canvas-editor-container {
        flex-direction: column;
    }
    
    .canvas-controls-panel {
        width: 100%;
    }
    
    .canvas-preview-container {
        height: 300px;
    }
}

@media (max-width: 768px) {
    #canvas-editor-container {
        padding: 15px;
        margin: 15px 0;
    }
    
    .canvas-editor-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .canvas-editor-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .canvas-block-selector {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    #canvas-content-block-select {
        width: 100%;
    }
    
    .canvas-preview-container {
        height: 250px;
    }
    
    .canvas-action-buttons {
        flex-direction: column;
    }
    
    .canvas-action-btn {
        justify-content: center;
    }
}

/* ===== ACCESSIBILITY ===== */
.canvas-control-input:focus,
.canvas-action-btn:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.canvas-control-header[aria-expanded="false"] .canvas-control-content {
    display: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .canvas-preview-container {
        background: #000;
        border-color: #000;
    }
    
    .canvas-control-header {
        background: #000;
        border: 1px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .canvas-notification,
    .canvas-loader-spinner,
    .canvas-control-header::after {
        animation: none;
        transition: none;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    #canvas-editor-container {
        background: #1e1e1e;
        border-color: #444;
        color: #fff;
    }
    
    .canvas-controls-panel {
        background: #2a2a2a;
        border-color: #444;
    }
    
    .canvas-control-content {
        background: #1e1e1e;
        color: #fff;
    }
    
    .canvas-control-input {
        background: #2a2a2a;
        border-color: #555;
        color: #fff;
    }
    
    .canvas-preview-container {
        border-color: #555;
    }

    /* Containers header and controls: ensure readable contrast in dark mode */
    .container-canvas-header {
        background: #2a2a2a;
        color: #ffffff;
    }
    .container-canvas-header h4 {
        color: #ffffff;
    }
    .canvas-view-controls label {
        color: #ffffff;
    }
}

/* Inline range value badge next to sliders created by JS */
.range-value {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: #666;
    min-width: 34px;
}

/* Invalid color text input indicator for color picker sync */
.canvas-color-value.invalid {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15);
}

/* ===== ROKU VALIDATION INDICATORS ===== */
.canvas-roku-warning {
    background: #f56e28;
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.canvas-roku-error {
    background: #b32d2e;
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.canvas-control-input.roku-warning {
    border-color: #f56e28;
}

.canvas-control-input.roku-error {
    border-color: #b32d2e;
}

/* ===== PREMIUM VISUAL ENHANCEMENTS ===== */
.canvas-editor-badge {
    background: linear-gradient(45deg, #0073aa, #00a32a);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.canvas-preview-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0073aa, #00a32a);
    border-radius: 4px 4px 0 0;
}

.canvas-controls-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px 4px 0 0;
}

/* ===== CONTAINER TAB STYLES ===== */

/* Tab Navigation */
.canvas-editor-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

/* Top-level tabs unified styling (active dark) */
.canvas-tab-button { background:#f1f5f9; color:#1e293b !important; border:1px solid #cbd5e1; border-bottom:none; padding:10px 16px; cursor:pointer; border-radius:4px 4px 0 0; font-weight:500; transition:all .18s ease; position:relative; }
.canvas-tab-button:hover { background:#e2e8f0; color:#1e293b !important; }
.canvas-tab-button.active { background:#1e293b !important; color:#fff !important; border-color:#1e293b !important; z-index:2; }

/* Removed original light-theme active underline */

/* Tab Content */
.canvas-tab-content {
    display: none;
}

/* Active (selected) tab */
.canvas-tab-button.active {
    background:#1e293b;
    color:#ffffff;
    border-color:#1e293b;
    z-index:2;
}
.canvas-tab-button:not(.active):hover { background:#e2e8f0; }

/* subtle underline seam for inactive region */
.canvas-tabs { border-bottom:1px solid #1e293b; }

.background-header h4 {
    margin: 0;
    color: #495057;
    font-size: 18px;
}

.background-actions {
    display: flex;
    gap: 10px;
}

.background-controls-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
}

/* Current Background Display */
.current-background-display {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
}

.current-background-display h5 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.current-background-info {
    min-height: 80px;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.current-background-preview {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid #dee2e6;
    position: relative;
    overflow: hidden;
}

.background-info-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    font-size: 11px;
}

/* Background Type Controls */
.background-type-controls {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
}

.background-type-controls h5 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.background-type-selector {
    margin-bottom: 15px;
}

.background-type-selector label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
}

.background-type-selector select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

/* Background Configuration Panels */
.background-config-panel {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.config-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

.config-row:last-child {
    margin-bottom: 0;
}

.config-row label {
    min-width: 80px;
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}

.config-row input,
.config-row select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 13px;
}

.config-row input[type="color"] {
    width: 50px;
    height: 32px;
    padding: 2px;
    flex: none;
}

.config-row input[type="checkbox"] {
    flex: none;
    margin-right: 8px;
}

#gradient-controls {
    margin-top: 10px;
    padding: 10px;
    background: white;
    border-radius: 3px;
    border: 1px solid #dee2e6;
}

/* Rotating Images */
.rotating-images-list h6 {
    margin: 15px 0 10px 0;
    font-size: 13px;
    color: #495057;
}

#rotating-images-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    min-height: 60px;
    margin-bottom: 10px;
}

.rotation-image-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    background: #f8f9fa;
    border-radius: 3px;
    margin-bottom: 5px;
}

.rotation-image-item:last-child {
    margin-bottom: 0;
}

.rotation-image-info {
    font-size: 12px;
    color: #495057;
}

.rotation-image-remove {
    background: #dc3545;
    border: none;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

/* Background Creation Actions */
.background-creation-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

#bg-name {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Available Backgrounds */
.available-backgrounds-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
}

.available-backgrounds-section h5 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.available-backgrounds-list {
    max-height: 300px;
    overflow-y: auto;
}

.background-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.background-item:hover {
    border-color: #0073aa;
    background: #f0f8ff;
}

.background-item.active {
    border-color: #00a32a;
    background: #f0fff4;
}

.background-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.background-preview-small {
    width: 40px;
    height: 25px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    border: 1px solid #dee2e6;
}

.background-item-details h6 {
    margin: 0;
    font-size: 13px;
    color: #495057;
}

.background-item-details span {
    font-size: 11px;
    color: #6c757d;
}

.background-item-actions {
    display: flex;
    gap: 5px;
}

.activate-background-btn {
    background: #28a745;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.activate-background-btn:hover {
    background: #218838;
}

.activate-background-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.edit-background-btn,
.delete-background-btn {
    background: #6c757d;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.edit-background-btn:hover {
    background: #5a6268;
}

.delete-background-btn {
    background: #dc3545;
}

.delete-background-btn:hover {
    background: #c82333;
}

/* Container Canvas */
.canvas-editor-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

/* (Removed older duplicate light theme block) */

/* Tab Content */
.canvas-tab-content {
    display: none;
}

.canvas-tab-content.active {
    display: block;
}

/* Container Canvas */
.container-canvas-section {
    margin-bottom: 30px;
}

.container-canvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 4px;
    /* Ensure readable text on light header */
    color: #23282d;
}

/* ================= Added: Structural + Tab/Category Layout Fixes (2025-08-30) ================= */
/* Top-level canvas tabs */
.canvas-tabs { display:flex; gap:6px; margin:16px 0 0; }
/* Ensure tab bar sits above dynamic canvas elements */
.canvas-persistent-menu { position:relative; z-index:10; }

/* Category (sub-tab) buttons */
.canvas-category-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 10px; }
.canvas-category-tab-button { background:#f0f2f4; border:1px solid #d0d7de; padding:6px 10px; cursor:pointer; border-radius:4px; font-size:12px; line-height:1.2; transition:all .15s ease; color:#1e293b !important; }
.canvas-category-tab-button:hover { background:#e2e8ec; color:#1e293b !important; }
.canvas-category-tab-button.active { background:#0073aa; border-color:#0073aa; color:#fff !important; }

/* Fix white-on-white text in category panels */
.category-panel label,
.category-panel h3,
.category-panel p,
.category-panel .hint,
.category-panel span {
    color: #1e293b !important;
}

/* Consistent label layout across all category panels - text on left, input below or inline */
.category-panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 13px;
}

.category-panel label input,
.category-panel label select {
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.category-panel label input:focus,
.category-panel label select:focus {
    outline: 2px solid #0073aa;
    outline-offset: 0;
    border-color: #0073aa;
}

/* Category panels: hide non-active to prevent vertical expansion */
.category-panel { display:none; margin:0 0 16px; padding:12px 14px 14px; background:#fff; border:1px solid #dfe3e6; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.category-panel.active { display:block; }

/* Normalize editor container width & centering */
/* FIXED: Increased max-width to 1400px for larger canvas */
#canvas-editor-container { position:relative; max-width:1400px; }
.canvas-editor-root { margin-top:8px; }
.canvas-editor-layout { padding-top:4px; }
.canvas-editor-layout { max-width:1400px; margin:0 auto; }

/* Center stages - CSS-First approach */
.block-stage-wrapper, #ccve-canvas-wrapper { margin-left:auto; margin-right:auto; }
.block-stage-wrapper .ccve-stage-outer { margin:0 auto; }

/* Inline toggles spacing reduction */
#canvas-inline-toggles { margin:12px 0 16px !important; }

/* Block Stage - CSS-First approach with aspect-ratio */
/* NOTE: Main styling is in later section with width:100%, max-width:1200px, aspect-ratio:16/9 */
#block-stage-wrapper { position:relative; }
#block-stage-wrapper .canvas-stage { display:block; }
#block-stage-wrapper .canvas-preview-container.ccve-placeholder { color:#8899aa; font-size:14px; text-align:center; padding-top:200px; }

/* Scale wrapper constraint to prevent double-height expansion until JS rescales */
/* (Removed fixed-height stage duplicate; using responsive aspect-ratio version below) */

/* Prevent cumulative vertical stacking before JS hides inactive panels */
.canvas-controls-panel { min-height:0; }

/* Stage scaling anchor fix (ensure transforms behave predictably) */
#block-stage, #container-canvas { transform-origin: top left; }

/* Provide a modest min-height to keep initial layout stable without pushing far down */
.canvas-controls-panel { position:relative; }

/* High-level guard so overflowing panels do not shove tab bar off-screen */
#canvas-editor-container { overflow:visible; }
/* ================= End Added ================= */

.container-canvas-header h4 {
    margin: 0;
    color: #23282d;
}

.canvas-view-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.canvas-view-controls label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    /* Prevent white-on-white in some admin themes */
    color: #23282d;
}

.container-canvas {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* enforce 16:9 viewport */
    border: 2px solid #0073aa;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.canvas-background {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* 1280x720 logical */
    overflow: hidden; /* ensure no extra vertical space from children */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 0%, transparent 50%);
}

.canvas-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.3);
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    z-index: 1;
}

#canvas-containers {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
    transform-origin: top left;
}

/* Zone Edit Mode */
.zone-edit-active .zones-overlay { pointer-events: auto; }
.zone-edit-active .zones-overlay .zone-rect { cursor: move; outline-style: solid; }
.zone-edit-active .zones-overlay .zone-rect .zone-handle {
    position: absolute;
    width: 10px; height: 10px;
    background: #fff; border: 2px solid #0ea5e9; border-radius: 2px;
    z-index: 10;
}
.zone-edit-active .zones-overlay .zone-rect .zone-handle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
.zone-edit-active .zones-overlay .zone-rect .zone-handle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
.zone-edit-active .zones-overlay .zone-rect .zone-handle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
.zone-edit-active .zones-overlay .zone-rect .zone-handle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* Container Elements */
.canvas-container {
    border: 2px solid #00a32a;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(2px);
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.canvas-container:hover {
    border-color: #ffc107;
    box-shadow: 0 0 10px rgba(255,193,7,0.5);
}

.canvas-container.selected {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.5);
}

.canvas-container[data-enabled="0"] {
    border-color: #dc3545;
    background: rgba(220,53,69,0.1);
}

.container-border {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
}

/* Phase 3a: Zones overlay */
.zones-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none; /* let container receive drag/click */
}
.zones-overlay .zone-rect {
    position: absolute;
    outline: 2px dashed rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    pointer-events: none; /* disable hit to avoid blocking */
}
.zones-overlay .zone-rect.active {
    outline-color: #4caf50;
    background: rgba(76,175,80,0.08);
}
.zones-overlay .zone-rect .zone-label {
    position: absolute;
    top: -18px;
    left: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
/* Make the gear itself clickable */
.zones-overlay .zone-rect .zone-gear { pointer-events: auto; position: absolute; top: -22px; right: 0; }

/* Per-zone mini grid (uses --zone-grid) */
.zones-overlay .zone-rect.show-grid {
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: var(--zone-grid, 8px) var(--zone-grid, 8px), var(--zone-grid, 8px) var(--zone-grid, 8px);
}

.container-label {
    position: absolute;
    top: -25px;
    left: 0;
    background: #00a32a;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
}

/* Grid overlay (toggled) */
/* Default grid size variable on canvas root */
.container-canvas { --grid-size: 8px; }
/* Grid applied to wrapper background layer */
.container-canvas.show-grid .canvas-background::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    mix-blend-mode: normal;
}

/* Background layer */
.canvas-background { position:absolute; inset:0; background:#0d0f12; }

/* Layers panel placeholder - margin-bottom ensures it pushes controls panel down when visible */
.ccve-layers-panel-wrapper { margin:12px auto 16px; max-width:960px; position:relative; z-index:1; }
.ccve-layers-panel { width:100%; background:#181b20; color:#e5e7eb; border:1px solid #222; padding:8px 10px; overflow:visible; border-radius:6px; }
.ccve-layers-panel h3 { margin:4px 0 8px; font-size:13px; color:#f1f5f9; }
.ccve-layers-panel ul { list-style:none; margin:0; padding:0; }
.ccve-layers-panel li { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; font-size:12px; border-radius:4px; cursor:pointer; color:#e5e7eb; }
.ccve-layers-panel li.active { background:#2a313a; }
.ccve-layer-eye { cursor:pointer; opacity:0.8; }
.ccve-layer-eye:hover { opacity:1; }

/* === New v5 Layer Panel Enhancements === */
/* Visibility + lock buttons inherit panel font sizing */
.ccve-layers-panel button.ccve-layer-visibility,
.ccve-layers-panel button.ccve-layer-lock,
.ccve-layers-panel .ccve-layer-order button,
.ccve-layers-panel .ccve-layer-convert { background:#222; color:#e2e8f0; border:1px solid #333; padding:2px 6px; font-size:11px; line-height:1; border-radius:4px; cursor:pointer; margin-right:4px; }
.ccve-layers-panel button.ccve-layer-visibility:hover,
.ccve-layers-panel button.ccve-layer-lock:hover,
.ccve-layers-panel .ccve-layer-order button:hover,
.ccve-layers-panel .ccve-layer-convert:hover { background:#2b3036; }
.ccve-layers-panel .ccve-layer-name { flex:1; padding:0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Renamable layer name - shows cursor hint on hover */
.ccve-layers-panel .ccve-layer-name.ccve-layer-renamable { cursor:text; border-radius:3px; transition:background-color 0.15s; }
.ccve-layers-panel .ccve-layer-name.ccve-layer-renamable:hover { background-color:rgba(52, 152, 219, 0.15); }
/* Copy/Duplicate button styling */
.ccve-layers-panel .ccve-layer-copy { background:#222; color:#e2e8f0; border:1px solid #333; padding:2px 6px; font-size:11px; line-height:1; border-radius:4px; cursor:pointer; margin-right:2px; }
.ccve-layers-panel .ccve-layer-copy:hover { background:#2d5a2d; border-color:#3d7a3d; }
/* Drag handle */
.ccve-layer-drag { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:12px; color:#888; background:#202327; border:1px solid #333; border-radius:4px; margin-right:6px; cursor:grab; user-select:none; }
.ccve-layer-drag:active { cursor:grabbing; }
li.ccve-dragging { opacity:0.4; }
li .ccve-dragging-ghost { opacity:0.4; }
.ccve-dragging-ghost { /* ghost list item created during drag */ opacity:0.35; }

/* Locked layer visual on canvas */
.canvas-container.ccve-locked { outline:2px dashed #c98612; outline-offset:0; }
.canvas-container.ccve-locked .container-label { background:#c98612; }

/* Active / hover affordances */
.ccve-layers-panel li:hover:not(.active) { background:#23292f; }

/* Focus rings (keyboard navigation) */
.ccve-layers-panel [tabindex="0"]:focus-visible,
.ccve-layers-panel button:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.ccve-layer-drag:focus-visible { box-shadow:0 0 0 2px #3b82f6; }

/* Order button group */
.ccve-layer-order { display:flex; align-items:center; }
.ccve-layer-order button { width:22px; padding:2px 0; }

/* Responsive-only inputs hidden by default; JS toggles display */
.ccve-responsive-only { display:none; }

/* Geometry pills container (if not already styled) */
.ccve-geometry-pills { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.ccve-geometry-pill { background:#1e2328; border:1px solid #2d333b; padding:4px 8px; font-size:11px; border-radius:4px; color:#c9d1d9; line-height:1; }
.ccve-geometry-pill strong { color:#58a6ff; margin-left:4px; }

/* Advanced geometry drawer */
#ccve-advanced-geometry { background:#14171a; border:1px solid #222; padding:10px; border-radius:6px; margin-top:6px; }
#ccve-advanced-geometry h4 { margin:4px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#bbb; }
#ccve-advanced-geometry label { display:block; font-size:11px; margin:6px 0 2px; color:#9da5ad; }
#ccve-advanced-geometry input[type=number] { width:100%; background:#1d2125; color:#e6e6e6; border:1px solid #2c3238; border-radius:4px; padding:4px 6px; font-size:11px; }

/* Diagnostics panel */
.ccve-diagnostics { background:#181b20; border:1px solid #222; padding:8px 10px; border-radius:6px; margin:12px 0; font-size:11px; line-height:1.4; color:#bdbdbd; }
.ccve-diagnostics pre { background:#111; padding:8px; border-radius:4px; overflow:auto; max-height:200px; }
.ccve-drift-ok { color:#0fa960; }
.ccve-drift-drift { color:#eab308; }
.ccve-drift-error { color:#ef4444; }

/* Preview parity badge refinement */
.ccve-preview-badge { position:absolute; top:6px; right:6px; background:#20252b; border:1px solid #2d3238; color:#99a3ad; font-size:10px; padding:4px 6px; border-radius:4px; display:flex; gap:4px; align-items:center; font-weight:600; letter-spacing:0.5px; }
.ccve-preview-badge.ccve-state-live { border-color:#0fa960; color:#0fa960; }
.ccve-preview-badge.ccve-state-stale { border-color:#eab308; color:#eab308; }
.ccve-preview-badge.ccve-state-drift { border-color:#ef4444; color:#ef4444; }
.ccve-preview-badge.ccve-state-error { border-color:#ef4444; color:#ef4444; }

/* Block background highlight (intended container). Light translucent fill + outline; NOT a dimmer of rest of stage. */
.ccve-block-bg { background:rgba(255,255,255,0.18); mix-blend-mode:normal; outline:2px solid rgba(88,166,255,0.9); box-shadow:0 0 0 1px rgba(0,0,0,0.4); }

/* Logical block stage sizing (unscaled internal coord system) */
#block-stage { width:1280px; height:720px; position:relative; }
#block-stage .canvas-preview-container { height:100%; }

/* Block Stage Grid (applies when .ccve-stage-outer.show-grid present) */
.ccve-stage-outer.show-grid::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:8px 8px, 8px 8px;
    mix-blend-mode:normal;
    z-index:5;
    /* Ensure no extra height contribution */
    overflow:hidden;
}

/* Explicit grid layer (in case pseudo-element blocked) */
.ccve-stage-grid { display:none; }

/* Inline toggles spacing adjustments */
#canvas-inline-toggles label { font-size:13px; cursor:pointer; }
#canvas-inline-toggles input[type=checkbox] { vertical-align:middle; margin-right:4px; }

/* Rulers */
.ccve-rulers-wrapper { position:relative; }
.ccve-ruler-h { position:absolute; top:0; left:0; right:0; height:24px; background:#101316; border-bottom:1px solid #222; display:flex; align-items:flex-end; font-size:9px; color:#666; user-select:none; z-index:35; }
.ccve-ruler-v { position:absolute; top:24px; left:0; bottom:0; width:24px; background:#101316; border-right:1px solid #222; display:flex; flex-direction:column; align-items:flex-start; font-size:9px; color:#666; user-select:none; z-index:35; }
.ccve-ruler-h span, .ccve-ruler-v span { position:absolute; font-size:9px; color:#777; }

/* Guides */
.ccve-guide { pointer-events:auto; }
.ccve-guide::after { content:''; position:absolute; inset:0; background:rgba(59,130,246,0.15); opacity:0; transition:opacity .15s; }
.ccve-guide:hover::after { opacity:1; }

/* Container inner padding wrapper */
.canvas-container-inner { position:absolute; inset:0; box-sizing:border-box; }

/* Percentage overlay helper when in responsive mode (optional future) */
.ccve-mode-responsive .ccve-geometry-pill strong { color:#f59e0b; }

/* Utility */
.text-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }


/* Hidden container state */
.canvas-container.hidden { opacity:0.15; pointer-events:none; }

/* Snap feedback */
.canvas-container.snap-pulse { box-shadow:0 0 0 2px #00b4ff inset, 0 0 6px #00b4ff; transition:box-shadow 0.25s ease; }

/* Simple modal for Roku payload */
.canvas-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.canvas-modal-content { background: #1e1e1e; color: #ddd; width: 80%; max-width: 1000px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); overflow: hidden; }
.canvas-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.canvas-modal-header h3 { margin: 0; font-size: 16px; }
.canvas-modal-close { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.canvas-modal-body { padding: 0; max-height: 70vh; overflow: auto; }
.canvas-json-viewer { margin: 0; padding: 16px; background: #111; color: #b7e3ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; }

.container-status {
    margin-left: 5px;
}

.container-content-preview {
    width: 100%;
    height: 100%;
    position: relative; /* anchor absolute zone previews inside */
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    overflow: hidden; /* prevent child preview from overflowing and making halves */
}

/* Fit wrappers ensure content scales down without cropping */
.cc-fit-outer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc-fit-inner { position: absolute; left: 0; top: 0; transform-origin: top left; will-change: transform; }
.cc-fit-inner img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

/* Drag/Resize affordances */
.canvas-container .container-label { cursor: move; }
.canvas-container .resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #007acc;
    border-radius: 2px;
    z-index: 3;
}
.canvas-container .resize-handle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
.canvas-container .resize-handle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
.canvas-container .resize-handle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
.canvas-container .resize-handle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* Indicate draggable areas for moving containers */
.canvas-container .container-border,
.canvas-container .container-label {
    cursor: move;
}

/* Let clicks pass through preview content so container drag/selection works reliably */
.canvas-container .container-content-preview {
    pointer-events: none;
}

/* Container Management Panel */
.container-management-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.container-list-section,
.content-assignment-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.container-list-section h4,
.content-assignment-section h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
}

/* Container Items */
.containers-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    transition: all 0.2s ease;
}

.container-item:hover {
    border-color: #0073aa;
    box-shadow: 0 2px 4px rgba(0,115,170,0.1);
}

.container-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.container-item-header h5 {
    margin: 0;
    font-size: 16px;
    color: #23282d;
}

.container-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toggle Switch */
.container-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.container-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #00a32a;
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.container-edit-btn {
    background: #0073aa;
    border: none;
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.container-edit-btn:hover {
    background: #005a87;
}

.container-defaults-btn {
    background: #6c757d;
    border: none;
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.container-defaults-btn:hover {
    background: #5a6268;
}

.container-details {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}

.container-position,
.container-size,
.container-zindex {
    background: #e9ecef;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: monospace;
}

/* Container Assignments */
.container-assignments h6 {
    margin: 10px 0 5px 0;
    font-size: 13px;
    color: #495057;
}

/* Assigned Blocks */
.assigned-blocks {
    min-height: 40px;
    background: white;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.assigned-blocks.drag-over {
    border-color: #0073aa;
    background: #f0f8ff;
}

.assigned-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 5px;
    font-size: 12px;
}

.assigned-block:last-child {
    margin-bottom: 0;
}

.block-name {
    font-weight: 500;
    color: #1976d2;
}

.block-percentage {
    background: #2196f3;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

.remove-assignment-btn {
    background: #f44336;
    border: none;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
}

.remove-assignment-btn:hover {
    background: #d32f2f;
}

.no-assignments {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 15px;
}

.assign-block-btn {
    background: #28a745;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    width: 100%;
}

.assign-block-btn:hover {
    background: #218838;
}

/* Available Blocks */
.available-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.available-block {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    cursor: grab;
    transition: all 0.2s ease;
}

.available-block:hover {
    border-color: #0073aa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,115,170,0.15);
}

.available-block:active {
    cursor: grabbing;
}

.available-block.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.block-header h6 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #23282d;
}

.block-type {
    background: #6c757d;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
}

/* Container Actions */
.container-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

#create-container-btn {
    background: #007cba;
}

#create-container-btn:hover {
    background: #005a87;
}

#save-container-changes-btn {
    background: #00a32a;
}

#save-container-changes-btn:hover {
    background: #007317;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container-management-panel {
        grid-template-columns: 1fr;
    }
    
    .container-canvas {
        max-width: 100%;
    }
    
    .canvas-view-controls {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .available-blocks {
        grid-template-columns: 1fr;
    }
}

/* Live Data Features */
.live-data-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.live-badge {
    background: #00aa00;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.preview-live-btn {
    background: #0073aa;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.preview-live-btn:hover {
    background: #005a87;
}

/* Live Data Modal */
.canvas-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.canvas-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-modal-content {
    background: white;
    border-radius: 6px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.canvas-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}

.canvas-modal-title {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.canvas-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.canvas-modal-close:hover {
    color: #333;
}

.canvas-modal-body {
    padding: 20px;
}

.live-data-modal .live-data-header {
    margin-bottom: 20px;
}

.live-data-modal .live-data-header h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.live-data-modal .live-data-header p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.live-data-modal .live-data-content {
    margin-bottom: 20px;
}

.live-data-modal .live-data-content h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.live-data-modal .live-data-content pre {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid #ddd;
}

.live-data-modal .live-data-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.live-data-modal .live-data-actions button {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.live-data-modal .live-data-actions button:hover {
    background: #f5f5f5;
}

.live-data-modal .live-data-actions #refresh-live-data {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

.live-data-modal .live-data-actions #refresh-live-data:hover {
    background: #005a87;
    border-color: #005a87;
}

body.modal-open {
    overflow: hidden;
}

/* === Canvas Editor Layout (v5) === */
/* FIXED: Max-width for layout container only */
.canvas-editor-layout { position:relative; max-width:1400px; margin:0 auto; padding:0 12px 32px; box-sizing:border-box; }

/* Stage wrapper - FIXED DIMENSIONS approach matching Scenes & Containers stage (scenes-stage.css) */
/* Key: FIXED 960x540 viewport, scale 0.75, NOT responsive */
/* This ensures Content Block stage looks IDENTICAL to Scenes & Containers stage */
.block-stage-wrapper, #block-stage-wrapper {
    position: relative;
    width: 960px;   /* FIXED - matches scenes-stage.css */
    height: 540px;  /* FIXED - matches scenes-stage.css */
    margin: 0 auto 16px;
    padding: 0;
    box-sizing: border-box;
    overflow: visible; /* Allow rulers outside */
    background: #0b1220; /* Match scenes-stage background */
    border-radius: 10px;
    z-index: 60;
}

/* When rulers are shown, add padding to make room for them outside the canvas */
.block-stage-wrapper.has-rulers, #block-stage-wrapper.has-rulers { 
    padding-top: var(--ccve-ruler-thickness); 
    padding-left: var(--ccve-ruler-thickness); 
}
.block-stage-wrapper .ccve-rulers-wrapper { position:relative; }
.canvas-persistent-menu { position:relative; z-index:50; }


/* Preview status badge */
.ccve-preview-status-badge { transition: background 0.25s ease, transform 0.25s ease; font-weight:600; }
.ccve-preview-status-badge.stale { animation: ccvePulse 1s ease-in-out infinite alternate; }
@keyframes ccvePulse { from { transform: scale(1); } to { transform: scale(1.08); } }
.ccve-preview-stale { outline: 2px dashed rgba(179,110,0,0.5); outline-offset: 2px; }

/* === Stage & Rulers (Outside Layout) === */
/* Stage outer reflects logical full size (1280×720) within scale host */
/* FIXED: Added overflow:hidden and border-radius for proper corner clipping */
.ccve-stage-outer { position:absolute; top:0; left:0; width:1280px; height:720px; max-width:none; overflow:hidden; border-radius:10px; }
/* Removed duplicate .block-stage-wrapper size declaration (already set above) */
/* Unified scaling host - FIXED: exact canvas size, rulers render OUTSIDE via negative positioning */
:root { --ccve-stage-w:1280px; --ccve-stage-h:720px; --ccve-ruler-thickness:24px; }
/* Scale host is exactly canvas size - rulers will use negative positioning to sit outside */
.ccve-scale-host { position:absolute; top:0; left:0; width:var(--ccve-stage-w); height:var(--ccve-stage-h); transform-origin:top left; overflow:visible; }
/* Stage sits at origin (0,0) always - no offset for rulers */
/* FIXED: Added overflow:hidden and border-radius for proper corner clipping */
.ccve-scale-host .ccve-stage-outer { position:absolute; top:0; left:0; width:var(--ccve-stage-w); height:var(--ccve-stage-h); overflow:hidden; border-radius:10px; }
/* Ruler containers - FIXED: render OUTSIDE canvas using negative positioning */
.ccve-scale-host .ccve-ruler-horizontal, .ccve-scale-host .ccve-ruler-vertical, .ccve-scale-host .ccve-ruler-corner { position:absolute; background:#0f172a; font:10px/1 ui-monospace,monospace; color:#94a3b8; z-index:30; pointer-events:none; }
/* Horizontal ruler sits ABOVE the canvas (negative top) */
.ccve-scale-host .ccve-ruler-horizontal { top:calc(-1 * var(--ccve-ruler-thickness)); left:0; height:var(--ccve-ruler-thickness); width:var(--ccve-stage-w); border-bottom:1px solid #1e293b; box-sizing:border-box; }
/* Vertical ruler sits LEFT of the canvas (negative left) */
.ccve-scale-host .ccve-ruler-vertical { top:0; left:calc(-1 * var(--ccve-ruler-thickness)); width:var(--ccve-ruler-thickness); height:var(--ccve-stage-h); border-right:1px solid #1e293b; box-sizing:border-box; }
/* Corner sits at top-left outside canvas */
.ccve-scale-host .ccve-ruler-corner { top:calc(-1 * var(--ccve-ruler-thickness)); left:calc(-1 * var(--ccve-ruler-thickness)); width:var(--ccve-ruler-thickness); height:var(--ccve-ruler-thickness); border-right:1px solid #1e293b; border-bottom:1px solid #1e293b; box-sizing:border-box; }
.ccve-scale-host:not(.rulers-active) .ccve-ruler-horizontal,
.ccve-scale-host:not(.rulers-active) .ccve-ruler-vertical,
.ccve-scale-host:not(.rulers-active) .ccve-ruler-corner { display:none; }
/* Fallback guards: frame-level classes can also hide/show rulers to avoid class skew */
#block-stage-wrapper.rulers-hidden .ccve-ruler-horizontal,
#block-stage-wrapper.rulers-hidden .ccve-ruler-vertical,
#block-stage-wrapper.rulers-hidden .ccve-ruler-corner { display:none !important; }
#block-stage-wrapper.has-rulers .ccve-ruler-horizontal,
#block-stage-wrapper.has-rulers .ccve-ruler-vertical,
#block-stage-wrapper.has-rulers .ccve-ruler-corner { display:block !important; }
/* Tick styling */
.ccve-ruler-tick { position:absolute; background:#1e293b; }
.ccve-ruler-horizontal .ccve-ruler-tick { bottom:0; width:1px; }
.ccve-ruler-vertical .ccve-ruler-tick { right:0; height:1px; }
/* Stage inherits scaling; rulers positioned by pixel so transform on host preserves measurement integrity */
/* FIXED: overflow:visible allows rulers outside canvas; removed duplicate overflow:hidden */
/* Duplicate legacy inline ruler block removed; authoritative outside-edge rulers defined above. */
/* Canvas stage container */
.ccve-stage-outer > .canvas-stage { position:absolute; inset:0; width:1280px; height:720px; transform-origin:top left; background:#111; border:1px solid #222; border-radius:10px; overflow:hidden; }
/* Ensure inline toggles stay clickable above oversized / mis-scaled stage during diagnostics */
#canvas-inline-toggles { position:relative; z-index:120; }
.canvas-preview-container.ccve-placeholder { display:flex; align-items:center; justify-content:center; color:#666; font-size:14px; }
.ccve-preview-stale { outline:2px dashed #d97706; position:relative; }
.ccve-preview-stale:after { content:'Stale'; position:absolute; top:4px; right:6px; background:#d97706; color:#fff; font-size:10px; padding:2px 5px; border-radius:3px; font-weight:600; letter-spacing:.5px; }

/* === Dynamic Scale Badge & Full Pixel Overlay (2025-09-01) === */
.ccve-scale-badge { position:absolute; top:4px; left:4px; background:rgba(30,30,30,.85); color:#fff; font:11px/1.3 ui-monospace,monospace; padding:4px 6px; border-radius:4px; z-index:200; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.4); letter-spacing:.5px; }
.ccve-scale-badge.warn { background:#7f1d1d; color:#fff; }
.ccve-scale-badge.warn-low { background:#7f1d1d; }
.ccve-scale-badge.warn-align { background:#92400e; }
.ccve-fullpixel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); z-index:9999; display:flex; align-items:center; justify-content:center; padding:32px; box-sizing:border-box; }
.ccve-fullpixel-overlay .ccve-fp-inner { position:relative; background:#0b0f14; padding:12px; box-shadow:0 0 0 1px #1e293b, 0 8px 40px -8px rgba(0,0,0,0.65); overflow:auto; max-width:100%; max-height:100%; border-radius:10px; }
.ccve-fullpixel-overlay .ccve-scale-host.fullpixel-active { position:relative; width:1280px; height:720px; }
.ccve-fullpixel-overlay .ccve-fp-exit { position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:50%; border:none; background:#dc2626; color:#fff; font-size:20px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; font-weight:600; }
.ccve-fullpixel-overlay .ccve-fp-exit:hover { background:#ef4444; }
.ccve-fullpixel-overlay .ccve-fp-note { position:absolute; left:12px; bottom:12px; background:rgba(17,24,39,0.85); color:#fff; font:12px/1.3 ui-monospace,monospace; padding:6px 8px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
/* Zoom help button (inline) */
label > button[aria-label="Zoom Help"]:hover { background:#1e293b !important; color:#fff !important; }
/* Compact chrome mode */
.ccve-compact .canvas-controls-panel, .ccve-compact .ccve-layers-panel-wrapper, .ccve-compact #canvas-inline-toggles button[aria-label="Zoom Help"], .ccve-compact #ccve-drift-btn, .ccve-compact #ccve-pin-ui-btn:not(.active) { display:none !important; }
.ccve-compact .ccve-scale-badge { opacity:0.9; }
.ccve-compact-hint { position:absolute; top:28px; left:4px; background:#1e293b; color:#fff; font:10px/1.2 ui-monospace,monospace; padding:4px 6px; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.4); z-index:210; }
#ccve-pin-ui-btn.active { background:#2563eb !important; color:#fff !important; }

/* Add Layer Dropdown Menu Styles */
.ccve-add-layer-dropdown {
    position: relative;
    display: inline-block;
}

.ccve-add-layer-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    min-width: 280px;
    max-width: 320px;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1000;
}

.ccve-menu-section {
    padding: 8px;
}

.ccve-menu-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

.ccve-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.ccve-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ccve-menu-item:hover {
    background: #f3f4f6;
}

.ccve-menu-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ccve-menu-item-content {
    flex: 1;
    min-width: 0;
}

.ccve-menu-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.ccve-menu-item-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.ccve-menu-footer {
    padding: 8px 12px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 6px 6px;
}
