/* ============================================
   MODO DESENVOLVEDOR - Developer Mode
   ============================================ */

/* Badge fixo no canto superior direito */
.dev-mode-badge {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #22d3ee;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,211,238,0.2);
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 500px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.dev-mode-badge:hover {
    box-shadow: 0 4px 20px rgba(34,211,238,0.2), 0 0 0 1px rgba(34,211,238,0.4);
}

.dev-mode-badge .dev-icon {
    color: #22d3ee;
    font-size: 16px;
}

.dev-mode-badge .dev-file {
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dev-mode-badge .dev-modal-name {
    color: #fbbf24;
    font-weight: 500;
    margin-left: 4px;
}

.dev-mode-badge .dev-copy-btn {
    background: rgba(34,211,238,0.15);
    border: 1px solid rgba(34,211,238,0.3);
    color: #22d3ee;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dev-mode-badge .dev-copy-btn:hover {
    background: rgba(34,211,238,0.3);
}

.dev-mode-badge .dev-copy-btn.copied {
    background: rgba(74,222,128,0.2);
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
}

/* Highlight de componentes interativos ao hover */
[data-dev-mode="true"] button:hover,
[data-dev-mode="true"] a.btn:hover,
[data-dev-mode="true"] .btn:hover {
    outline: 1px dashed #22d3ee !important;
    outline-offset: 2px;
}

[data-dev-mode="true"] input:hover,
[data-dev-mode="true"] select:hover,
[data-dev-mode="true"] textarea:hover {
    outline: 1px dashed #a78bfa !important;
    outline-offset: 1px;
}

/* Badge indicador no canto inferior esquerdo (tipo modo demo) */
.dev-mode-indicator {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 9998;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #22d3ee;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: dev-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dev-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

/* Print: esconder tudo do dev mode */
@media print {
    .dev-mode-badge,
    .dev-mode-indicator,
    .dev-hover-tooltip { display: none !important; }
}