/* Myragen Admin Panel Styles */

/* CSS Variables for Theme Support */
:root {
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
}

.myragen-wrapper {
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --bg-primary: rgba(255, 255, 255, 0.03);
    --bg-secondary: rgba(255, 255, 255, 0.05);
}

.myragen-wrapper.myragen-light {
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --bg-primary: rgba(255, 255, 255, 0.9);
    --bg-secondary: rgba(255, 255, 255, 0.7);
}

/* Light mode specific overrides */
.myragen-wrapper.myragen-light .chart-title-text h3,
.myragen-wrapper.myragen-light .metric-number {
    color: #1a202c !important;
}

.myragen-wrapper.myragen-light .chart-subtitle,
.myragen-wrapper.myragen-light .metric-label {
    color: #4a5568 !important;
}

/* Reset and Base Styles */
.myragen-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.myragen-wrapper {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(140deg, #0a0a18 0%, #151525 100%);
    min-height: 100vh;
    color: #e2e8f0;
    letter-spacing: -0.01em;
}

/* ============================================
   ICON SYSTEM - CSS ICONS (CORRIGIDO)
   ============================================ */

/* Base icon styles */
.icon-pages-header,
.icon-products-header,
.icon-plus,
.icon-empty-pages,
.icon-seo,
.icon-edit,
.icon-eye,
.icon-view,
.icon-copy,
.icon-duplicate,
.icon-trash,
.icon-delete,
.icon-rocket {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    vertical-align: middle;
    margin-right: 0.5rem;
    font-style: normal;
    line-height: 16px;
    font-size: 14px;
    position: relative;
}

/* REMOVIDO: Todas as definições ::before que causavam conflito */
/* Os ícones agora usam apenas Font Awesome ou emoji quando necessário */

/* Plus icon - mantido apenas este por ser usado em botões */
.icon-plus::before {
    content: "+";
    color: #ffffff;
    font-weight: bold;
    background: #4ade80;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(74, 222, 128, 0.3);
}

/* Empty pages icon - usando Font Awesome */
.icon-empty-pages {
    width: 48px;
    height: 48px;
    font-size: 48px;
    margin: 0 auto 1rem;
}

/* Reset removido - permitindo ícones dos pedidos funcionarem */
/* Os ícones dos pedidos são definidos em pedidos.css */

/* REMOVIDO: Alternative CSS-only icons que causavam conflito */
/* Agora usamos apenas Font Awesome */

/* Button specific icon sizes */
.btn-new-page .icon-plus {
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 18px;
    margin-right: 0.5rem;
}

/* Action button icon sizes */
.action-btn i {
    width: 14px;
    height: 14px;
    font-size: 12px;
    line-height: 14px;
    margin: 0;
}

/* CORREÇÃO CRÍTICA: Força exibição dos ícones de pedidos com Font Awesome */
/* Usando códigos Unicode Font Awesome - APENAS para seção de pedidos */
.orders-management .icon-edit::before,
.orders-table .icon-edit::before,
.woo-orders .icon-edit::before,
[class*="pedidos"] .icon-edit::before,
[class*="orders"] .icon-edit::before {
    content: "\f044" !important; /* fa-edit */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #3b82f6 !important; /* Azul claro */
    line-height: 1 !important;
}

.orders-management .icon-eye::before,
.orders-table .icon-eye::before,
.woo-orders .icon-eye::before,
[class*="pedidos"] .icon-eye::before,
[class*="orders"] .icon-eye::before {
    content: "\f06e" !important; /* fa-eye */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #10b981 !important; /* Verde claro */
    line-height: 1 !important;
}

.orders-management .icon-trash::before,
.orders-table .icon-trash::before,
.woo-orders .icon-trash::before,
[class*="pedidos"] .icon-trash::before,
[class*="orders"] .icon-trash::before {
    content: "\f2ed" !important; /* fa-trash-alt */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #ef4444 !important; /* Vermelho claro */
    line-height: 1 !important;
}

.orders-management .icon-clock::before,
.orders-table .icon-clock::before,
.woo-orders .icon-clock::before,
[class*="pedidos"] .icon-clock::before,
[class*="orders"] .icon-clock::before {
    content: "\f017" !important; /* fa-clock */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #f59e0b !important; /* Amarelo/laranja claro */
    line-height: 1 !important;
}

.orders-management .icon-refresh::before,
.orders-table .icon-refresh::before,
.woo-orders .icon-refresh::before,
[class*="pedidos"] .icon-refresh::before,
[class*="orders"] .icon-refresh::before {
    content: "\f021" !important; /* fa-sync-alt */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #8b5cf6 !important; /* Roxo claro */
    line-height: 1 !important;
}

.orders-management .icon-plus::before,
.orders-table .icon-plus::before,
.woo-orders .icon-plus::before,
[class*="pedidos"] .icon-plus::before,
[class*="orders"] .icon-plus::before {
    content: "\f067" !important; /* fa-plus */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    margin-right: 0.35rem !important;
    vertical-align: middle !important;
    color: #10b981 !important; /* Verde claro */
    line-height: 1 !important;
}

/* Garantir que botões de pedidos tenham bom espaçamento */
.orders-management .action-btn,
.orders-table .action-btn,
.woo-orders .action-btn,
[class*="pedidos"] .action-btn,
[class*="orders"] .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.375rem 0.75rem !important;
    margin: 0 0.125rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

/* Hover states para botões de pedidos */
.orders-management .action-btn:hover,
.orders-table .action-btn:hover,
.woo-orders .action-btn:hover,
[class*="pedidos"] .action-btn:hover,
[class*="orders"] .action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* SEO panel header */
.seo-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-panel-header .icon-seo {
    margin-right: 0;
}

/* Fallback for missing icons */
[class*="icon-"]:empty::before {
    content: "●";
    color: #94a3b8;
}

/* Icon fallback styles */
.icon-fallback {
    display: inline-block;
    margin-right: 0.5rem;
    font-style: normal;
    vertical-align: middle;
    line-height: 1;
    /* Hide fallback text when CSS icons are available */
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    width: 16px;
    height: 16px;
    position: relative;
}

/* Show fallback when no CSS support or as last resort */
.no-css-icons .icon-fallback {
    font-size: inherit;
    text-indent: 0;
    overflow: visible;
    width: auto;
    height: auto;
}

/* Action button styling */
.action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem;
    margin: 0 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #f1f5f9;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.action-btn span {
    font-size: 14px;
    line-height: 1;
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* Ensure action button icons are properly displayed */
.action-btn .icon-edit,
.action-btn .icon-eye,
.action-btn .icon-duplicate,
.action-btn .icon-delete {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0;
}

/* REMOVIDO: Regra geral que causava duplicação */
/* Esta regra foi muito genérica e afetava todas as páginas */
/*
.action-btn .icon-edit::before,
.action-btn .icon-eye::before,
.action-btn .icon-duplicate::before,
.action-btn .icon-delete::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    line-height: 1;
    margin-right: 0;
    color: inherit;
}
*/

/* Override margin for icons inside action buttons */
.action-btn .icon-edit,
.action-btn .icon-eye,
.action-btn .icon-duplicate,
.action-btn .icon-delete {
    margin-right: 0 !important;
}

/* SOLUÇÃO RADICAL: Reset completo de pseudo-elementos quando há Font Awesome */

/* SOLUÇÃO FINAL: CSS puro para resolver duplicação definitivamente */

/* RESET ESPECÍFICO: Esconder ::before apenas em botões de PRODUTOS que tenham elementos <i> */
.products-management button:has(i)::before,
.products-management button:has(i) *::before,
.products-management .action-btn:has(i)::before,
.products-management .action-btn:has(i) *::before,
.products-management .btn:has(i)::before,
.products-management .btn:has(i) *::before,
.products-management .product-action-btn:has(i)::before,
.products-management .product-action-btn:has(i) *::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

/* RESET por classe JavaScript - apenas em produtos */
.products-management .has-fa-icon::before,
.products-management .has-fa-icon *::before,
.products-management .has-fa-icon::after,
.products-management .has-fa-icon *::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

/* Garantir que Font Awesome sempre apareça */
button i.fas,
button i.fa,
.action-btn i.fas,
.action-btn i.fa,
.btn i.fas,
.btn i.fa {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CSS simples para ícones de páginas usando emojis */
.pages-management .action-btn .icon-edit::before {
    content: "📝" !important;
    display: inline-block !important;
    font-style: normal !important;
}

.pages-management .action-btn .icon-eye::before {
    content: "👁" !important;
    display: inline-block !important;
    font-style: normal !important;
}

.pages-management .action-btn .icon-duplicate::before {
    content: "⧉" !important;
    display: inline-block !important;
    font-style: normal !important;
}

.pages-management .action-btn .icon-delete::before {
    content: "✗" !important;
    display: inline-block !important;
    font-style: normal !important;
}

/* Fallback absoluto - forçar esconder pseudo-elementos em contextos problemáticos */
.pages-management .action-btn.has-fa-icon .icon-edit::before,
.pages-management .action-btn.has-fa-icon .icon-eye::before,
.pages-management .action-btn.has-fa-icon .icon-duplicate::before,
.pages-management .action-btn.has-fa-icon .icon-delete::before {
    display: none !important;
    content: none !important;
}

/* CSS simples para controle de ícones */

/* CORREÇÃO CRÍTICA: Força exibição dos ícones de pedidos com Font Awesome */

/* Page actions container */
.page-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* ============================================
   ADDITIONAL ICON STYLES FOR PAGES SYSTEM
   ============================================ */

/* Bulk Operation Icons */
.icon-publish::before { content: "↗"; color: #22c55e; font-weight: bold; }
.icon-draft::before { content: "□"; color: #64748b; }
.icon-close::before { content: "✕"; color: #ef4444; font-weight: bold; }

/* Search Icons */
.icon-search::before { content: "⚲"; color: #8b5cf6; }

/* ============================================
   PAGES MANAGEMENT SYSTEM STYLES
   ============================================ */

.pages-management {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    margin-top: 2rem;
}

.pages-management.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Ensure pages management takes full width when active */
.content-area .pages-management.active {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide all other content when pages management is active */
.pages-management.active ~ .selected-site-info,
.pages-management.active ~ .dashboard-cards,
.pages-management.active ~ .modern-activity-panel,
.pages-management.active ~ .modern-charts-grid,
.pages-management.active ~ .modern-controls-panel,
.content-area:has(.pages-management.active) .selected-site-info,
.content-area:has(.pages-management.active) .dashboard-cards,
.content-area:has(.pages-management.active) .modern-activity-panel,
.content-area:has(.pages-management.active) .modern-charts-grid,
.content-area:has(.pages-management.active) .modern-controls-panel,
.content-area:has(.pages-management.active) .content-header {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure pages management content is properly styled */
.pages-management.active .pages-header,
.pages-management.active .pages-toolbar,
.pages-management.active .pages-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Pages Header */
.pages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pages-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pages-header-left h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.pages-header-left .pages-count {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.pages-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.pages-header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-new-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-new-page:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Pages Search and Filters */
.pages-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pages-search {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex: 1;
    max-width: 400px;
}

.search-input {
    flex: 1;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: #94a3b8;
}

.pages-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-btn {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    border-color: #667eea;
}

/* Pages List */
.pages-list {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pages-table {
    width: 100%;
    border-collapse: collapse;
}

.pages-table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    text-align: left;
    font-weight: 500;
    color: #f1f5f9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

.pages-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 0.9rem;
}

.pages-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.page-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.page-title-text {
    font-weight: 500;
    color: #f1f5f9;
}

.page-slug {
    font-size: 0.8rem;
    color: #94a3b8;
    font-family: 'Monaco', 'Menlo', monospace;
}

.page-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-status.published {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.page-status.draft {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.page-status.private {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.action-btn.edit {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.action-btn.edit:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: scale(1.1);
}

.action-btn.preview {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.action-btn.preview:hover {
    background: rgba(34, 197, 94, 0.3);
    transform: scale(1.1);
}

.action-btn.duplicate {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.action-btn.duplicate:hover {
    background: rgba(168, 85, 247, 0.3);
    transform: scale(1.1);
}

.action-btn.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}

/* Page Creation Modal */
.page-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.page-modal.active {
    display: flex;
}

.page-modal-content {
    background: linear-gradient(140deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.page-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.page-modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.page-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.page-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-weight: 500;
    color: #f1f5f9;
    font-size: 0.9rem;
}

.form-input,
.form-textarea,
.form-select {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Fix para options dos selects */
.form-select option,
select option {
    background: #1a202c !important;
    color: #f1f5f9 !important;
    padding: 0.5rem !important;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.btn-save {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* SEO Panel */
.seo-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.seo-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #f1f5f9;
    font-weight: 500;
}

.seo-preview {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.seo-preview-title {
    color: #3b82f6;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    text-decoration: underline;
}

.seo-preview-url {
    color: #22c55e;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.seo-preview-description {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Empty State */
.pages-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #94a3b8;
}

.pages-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.pages-empty-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
}

.pages-empty-description {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pages-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .pages-toolbar {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .pages-search {
        max-width: none;
    }
    
    .pages-table {
        font-size: 0.8rem;
    }
    
    .pages-table th,
    .pages-table td {
        padding: 0.5rem;
    }
    
    .page-modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
}

/* Light Mode (roxo e branco) */
.myragen-wrapper.myragen-light {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}
.myragen-wrapper.myragen-light .myragen-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}
.myragen-wrapper.myragen-light .myragen-brand {
    background: linear-gradient(45deg, #ffffff, #e0e7ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.myragen-wrapper.myragen-light .myragen-brand::after {
    background: linear-gradient(90deg, #ffffff, transparent);
}
.myragen-wrapper.myragen-light .myragen-subtitle {
    color: rgba(255, 255, 255, 0.9);
}
.myragen-wrapper.myragen-light .myragen-sidebar {
    background: white;
    border-right: 1px solid #e2e8f0;
}
.myragen-wrapper.myragen-light .nav-link {
    color: #4a5568;
}
.myragen-wrapper.myragen-light .nav-link:hover {
    background: #f1f5f9;
    color: #667eea;
}
.myragen-wrapper.myragen-light .nav-item.active .nav-link {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.myragen-wrapper.myragen-light .pro-badge {
    background: linear-gradient(45deg, #f093fb, #f5576c);
}
.myragen-wrapper.myragen-light .myragen-main {
    background: #f8fafc;
}
.myragen-wrapper.myragen-light .content-header h2 {
    color: #2d3748;
}
.myragen-wrapper.myragen-light .content-header p {
    color: #718096;
}
.myragen-wrapper.myragen-light .card {
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.myragen-wrapper.myragen-light .card::before {
    background: linear-gradient(90deg, transparent, #667eea, transparent);
}
.myragen-wrapper.myragen-light .card-header h3 {
    color: #4a5568;
}
.myragen-wrapper.myragen-light .card-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.myragen-wrapper.myragen-light .recent-activity {
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.myragen-wrapper.myragen-light .recent-activity::before {
    background: linear-gradient(90deg, transparent, #667eea, transparent);
}
.myragen-wrapper.myragen-light .recent-activity h3 {
    color: #2d3748;
}
.myragen-wrapper.myragen-light .activity-item {
    background: #f8fafc;
    border-left: 4px solid #667eea;
}
.myragen-wrapper.myragen-light .activity-details p {
    color: #2d3748;
}
.myragen-wrapper.myragen-light .activity-time {
    color: #718096;
}
.myragen-wrapper.myragen-light .update-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Header Styles */
.myragen-header {
    background: rgba(10, 10, 24, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: white;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo Styles */
.myragen-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.myragen-brand {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #2dd4ff, #4a65ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    margin: 0;
    text-transform: uppercase;
    position: relative;
}

.myragen-brand::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #2dd4ff, transparent);
    border-radius: 1px;
}

.myragen-subtitle {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00d4ff;
}

/* User Info */
.myragen-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-name {
    font-weight: 500;
}

.update-btn {
    background: linear-gradient(135deg, #2dd4ff, #4a65ff);
    border: none;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(45, 212, 255, 0.18);
}

.update-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 212, 255, 0.25);
    background: linear-gradient(135deg, #00b8e6, #4f63ff);
}

/* Container */
.myragen-container {
    display: flex;
    min-height: calc(100vh - 80px);
}

/* Sidebar Styles */
.myragen-sidebar {
    width: 280px;
    background: rgba(10, 10, 24, 0.7);
    backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2rem 1.25rem;
    overflow-y: auto;
}

.site-selector {
    margin-bottom: 2rem;
}

.site-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #a0aec0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.site-select {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.site-select:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

/* Fix para options do site-select */
.site-select option {
    background: #1a202c !important;
    color: #e2e8f0 !important;
    padding: 0.75rem !important;
}

/* Navigation */
.nav-menu {
    list-style: none;
}

.nav-item {
    margin-bottom: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    color: #a0aec0;
    text-decoration: none;
    border-radius: 8px;
    opacity: 0.75;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    border: none;
}

.nav-link:hover {
    background: rgba(74, 101, 255, 0.08);
    color: #2dd4ff;
    transform: translateX(6px);
    opacity: 1;
    border: none;
}

.nav-item.active .nav-link {
    background: rgba(74, 101, 255, 0.12);
    color: #2dd4ff;
    opacity: 1;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(74, 101, 255, 0.15);
    border: none;
}

.nav-link i {
    width: 18px;
    height: 18px;
    margin-right: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0.8;
    font-style: normal;
    transition: all 0.3s ease;
}

/* Ícones removidos - usando Font Awesome via icon-fixes.css */

/* Leads Icon */
.icon-leads::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.icon-leads::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 0 0 6px 6px;
    border-top: none;
    top: 8px;
    left: -2px;
}

/* Stats Icon */
.icon-stats::before {
    content: '';
    width: 2px;
    height: 8px;
    background: currentColor;
    box-shadow: 4px 2px 0 currentColor, 8px -2px 0 currentColor, 12px 4px 0 currentColor;
    border-radius: 1px;
}

/* Settings Icon */
.icon-settings::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.icon-settings::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

/* Extras Icon */
.icon-extras::before {
    content: '';
    width: 14px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px currentColor inset;
}
.icon-extras::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
}

/* Pro Icon */
.icon-pro::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid currentColor;
    position: relative;
}

/* Marketing Icon */
.icon-marketing::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

/* Blog Icon */
.icon-blog::before {
    content: '';
    width: 12px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
}
.icon-blog::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: currentColor;
    top: 4px;
    left: 2px;
    box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor;
}

/* Team Icon */
.icon-team::before {
    content: '';
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 8px 0 0 -1px currentColor;
}
.icon-team::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    border: 2px solid currentColor;
    border-radius: 0 0 4px 4px;
    border-top: none;
    top: 8px;
    left: -1px;
    box-shadow: 8px 0 0 -1px currentColor;
}

/* Backup Icon */
.icon-backup::before {
    content: '';
    width: 12px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: relative;
}
.icon-backup::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid currentColor;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Help Icon */
.icon-help::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.icon-help::after {
    content: '?';
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
}

/* PRO Badge */
.nav-item.pro .nav-link {
    justify-content: space-between;
}

.pro-badge {
    background: linear-gradient(135deg, #2e6fff, #892cdc);
    color: white;
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Main Content */
.myragen-main {
    flex: 1;
    padding: 2.5rem;
    background: transparent;
}

.content-area {
    max-width: 1400px;
}

.content-header {
    margin-bottom: 2.5rem;
}

.content-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.content-header p {
    color: rgba(224, 232, 240, 0.6);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: 400;
}

/* Dashboard Cards */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.7;
    background: linear-gradient(90deg, transparent, rgba(74, 101, 255, 0.5), transparent);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-header h3 {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(224, 232, 240, 0.5);
}

.card-number {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #2dd4ff, #4a65ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-status.active {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #00ff88, #00d4ff);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.card-content p {
    color: #718096;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Recent Activity */
.recent-activity {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.recent-activity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5b73ff, transparent);
}

.recent-activity h3 {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.125rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border-left: 2px solid rgba(74, 101, 255, 0.5);
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.activity-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(91, 115, 255, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.activity-details p {
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.activity-time {
    color: #a0aec0;
    font-size: 0.8rem;
    font-weight: 400;
}

/* PRO Badge */
.nav-item.pro .nav-link {
    justify-content: space-between;
}

.pro-badge {
    background: linear-gradient(135deg, #2e6fff, #892cdc);
    color: white;
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: none;
    border: none;
    margin-left: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    font-size: 0.95em;
    transition: background 0.2s;
}
.theme-toggle-btn:hover {
    background: rgba(74, 101, 255, 0.08);
}
.theme-toggle-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.theme-toggle-icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2dd4ff 60%, #23272f 60%);
    box-shadow: 0 0 0 2px rgba(74,101,255,0.08);
    transition: background 0.3s;
}
.myragen-wrapper.myragen-light .theme-toggle-icon::before {
    background: linear-gradient(135deg, #667eea 60%, #ffffff 60%);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.theme-toggle-text {
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
    .myragen-container {
        flex-direction: column;
    }
    
    .myragen-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .myragen-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .myragen-brand {
        font-size: 1.8rem;
    }
    
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
    
    .myragen-main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .myragen-brand {
        font-size: 1.5rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .card-number {
        font-size: 1.5rem;
    }
}

/* ===============================
   ENHANCED SITE SELECTOR STYLES
   =============================== */

/* Site Selector States */
.site-select.loaded {
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.1);
}

.site-select.error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.site-select.empty {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.site-select.site-selected {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}

/* Loading States */
.site-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00d4ff;
    font-weight: 600;
    border-radius: 12px;
    z-index: 10;
}

/* Dashboard Loading States */
.stat-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.stat-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.stat-card.updated {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
    border-color: #00d4ff;
}

/* Navigation States */
.nav-item.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.nav-item.disabled .nav-link {
    color: #64748b;
    cursor: not-allowed;
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 1000;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideInRight 0.3s ease-out;
}

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

.notification-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.notification-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.notification-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 0.5rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Error Messages */
.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.error-message button {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
}

/* Site Count Display */
.sites-count {
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Selected Site Info */
.selected-site-title {
    font-weight: 600;
    color: #00d4ff;
}

.selected-site-url {
    color: #4ade80;
    text-decoration: none;
    font-size: 0.9rem;
}

.selected-site-url:hover {
    text-decoration: underline;
}

.last-updated {
    font-size: 0.8rem;
    color: #94a3b8;
    font-style: italic;
}

/* Light Mode Overrides for New Styles */
.myragen-wrapper.myragen-light .site-select.loaded {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.myragen-wrapper.myragen-light .site-select.site-selected {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.myragen-wrapper.myragen-light .notification {
    color: white;
}

.myragen-wrapper.myragen-light .selected-site-title {
    color: #667eea;
}

.myragen-wrapper.myragen-light .selected-site-url {
    color: #10b981;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Dashboard Cards - Enhanced (4 cards only) */
.dashboard-cards.integrated-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0 3rem 0;
}

/* Charts Section */
.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.chart-section {
    display: flex;
    flex-direction: column;
}

.chart-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    height: 100%;
}

.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: rgba(255,255,255,0.2);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}

.chart-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.chart-header h4 {
    margin: 0;
    color: var(--text-primary, #f1f5f9);
    font-size: 1.1rem;
    font-weight: 600;
}

.chart-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.chart-metric {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.chart-source {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.chart-container {
    position: relative;
    height: 200px;
    margin-top: 1rem;
}

#leadsChart {
    border: 2px solid rgba(240, 147, 251, 0.3);
    border-radius: 8px;
}

#salesChart {
    border: 2px solid rgba(79, 172, 254, 0.3);
    border-radius: 8px;
}

.stats-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.stats-card#leads-card::before {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.stats-card#sales-card::before {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.stats-card#revenue-card::before {
    background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.stats-card#conversion-card::before {
    background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%);
}

.stats-card#products-card::before {
    background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.2);
}

.stats-card .card-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.card-info {
    flex: 1;
}

.card-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-number {
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    line-height: 1;
}

.stat-change {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trend-indicator {
    font-weight: 600;
    color: #4ade80;
}

.trend-indicator.negative {
    color: #f87171;
}

.trend-text {
    color: #94a3b8;
}

/* Dashboard Secondary */
.dashboard-secondary {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.dashboard-chart-section {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.dashboard-chart-section h4 {
    margin: 0 0 1rem 0;
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 600;
}

.chart-container {
    position: relative;
    height: 200px;
}

.recent-activity {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.recent-activity h4 {
    margin: 0 0 1rem 0;
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 600;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.1);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.activity-details {
    flex: 1;
}

.activity-details p {
    margin: 0 0 0.25rem 0;
    color: #f1f5f9;
    font-size: 0.9rem;
    line-height: 1.4;
}

.activity-time {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Loading States */
.stats-card.loading {
    opacity: 0.7;
}

.stats-card.loading .card-number::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #4ade80;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

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

/* Responsive */
@media (max-width: 768px) {
    .dashboard-cards.integrated-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .dashboard-charts {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .dashboard-secondary {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stats-card .card-header {
        padding: 1rem;
    }
    
    .card-number {
        font-size: 1.5rem;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .chart-summary {
        align-items: flex-start;
        text-align: left;
    }
}
#debug-sites-btn {
    margin-left: 10px;
    padding: 5px 10px;
    background: #f39c12;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

#debug-sites-btn:hover {
    background: #e67e22;
}

/* Debug Info Styling */
.debug-info {
    max-height: 500px;
    overflow-y: auto;
}

.debug-info h4 {
    color: #333 !important;
    margin-bottom: 15px !important;
}

/* ===============================
   MODERN CHARTS STYLING - CLEAN
   =============================== */

/* Separação visual entre seções */
.content-area > .dashboard-cards + .modern-charts-grid,
.content-area > .modern-charts-grid + .secondary-charts-grid,
.content-area > .secondary-charts-grid + .modern-controls-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 2rem;
}

/* Modern Charts Grid */
.modern-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 3rem 0 2.5rem 0;
}

/* Layout 2x2 para os gráficos */
.modern-charts-grid.charts-2x2-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;
    margin: 2.5rem 0;
}

/* Atividade Recente acima dos gráficos */
.modern-activity-panel.activity-above-charts {
    margin: 2.5rem 0;
    width: 100%;
}

.modern-chart-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.modern-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(102, 126, 234, 0.3);
}

.modern-chart-card.leads-chart::before {
    background: rgba(240, 147, 251, 0.3);
}

.modern-chart-card.sales-chart::before {
    background: rgba(79, 172, 254, 0.3);
}

.modern-chart-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.15);
}

/* Chart Card Header */
.chart-card-header {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.chart-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Icons for Stats Cards */
.card-icon-visits::before {
    content: "👁";
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-icon-conversion::before {
    content: "●";
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-icon-revenue::before {
    content: "$";
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-icon-products::before {
    content: "▦";
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.chart-icon-modern {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

/* CSS Icons for Charts - CORRIGIDO */
.chart-icon-modern::before {
    content: '📊';
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Ícones específicos para cada tipo de gráfico */
.sales-chart .chart-icon-modern::before {
    content: '💰';
    font-size: 16px;
}

.revenue-chart .chart-icon-modern::before {
    content: '📈';
    font-size: 16px;
}

.leads-chart .chart-icon-modern::before {
    content: '👥';
    font-size: 16px;
}

.traffic-chart .chart-icon-modern::before {
    content: '\f1fe' !important; /* fa-rocket - CORRIGIDO */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: #06b6d4 !important;
}

/* Fallback para traffic-chart */
.traffic-chart .chart-icon-modern:not(.fa-loaded)::before {
    content: '🚀' !important;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
    font-size: 16px !important;
}

/* Remover after desnecessário */
.leads-chart .chart-icon-modern::after {
    display: none;
}

/* Estilos para Tabela de Leads */
.leads-list, [data-leads-table] {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lead-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.lead-row:hover {
    background: rgba(59, 130, 246, 0.1);
}

.lead-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lead-info strong {
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lead-info small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.lead-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lead-contact strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.lead-contact small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.lead-date, .lead-source {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
}

.lead-source {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Estilo para indicador de sistema ativo */
.leads-notice.leads-active {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leads-notice.leads-active i {
    color: #22c55e;
    font-size: 0.9rem;
}

/* Estilos para seção de leads recentes */
.recent-leads-container {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-leads-container h5 {
    color: #ffffff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leads-table-wrapper {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.leads-list {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
}

.leads-list thead {
    background: rgba(59, 130, 246, 0.1);
}

.leads-list th {
    padding: 12px 16px;
    text-align: left;
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leads-list td {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsividade para tabela de leads */
@media (max-width: 768px) {
    .lead-row td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }
    
    .lead-info strong,
    .lead-contact strong {
        font-size: 0.8rem;
    }
    
    .lead-info small,
    .lead-contact small {
        font-size: 0.7rem;
    }
}

.sales-chart .chart-icon-modern::before {
    content: '💰';
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

.sales-chart .chart-icon-modern::after {
    display: none;
}

/* Traffic Chart Icon */
.chart-icon-traffic {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.chart-icon-traffic::before {
    content: '';
    width: 16px;
    height: 2px;
    background: #94a3b8;
    position: relative;
    box-shadow: 0 -4px 0 #94a3b8, 0 4px 0 #94a3b8;
}

.chart-icon-traffic::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    right: 8px;
    animation: pulse 2s infinite;
}

/* Activity Panel Icons */
.activity-icon-modern {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.activity-icon-modern::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid #94a3b8;
    border-radius: 2px;
}

.activity-icon.success::before {
    content: '✓';
    color: #4ade80;
    font-size: 14px;
    font-weight: bold;
}

.chart-title-text h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.3;
}

.chart-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    font-weight: 400;
}

.chart-metrics {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.metric-item {
    text-align: center;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.metric-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Chart Canvas Wrapper */
.chart-canvas-wrapper {
    position: relative;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    min-height: 260px; /* Expandir altura mínima */
}

/* Remover estilos de overlay desnecessários - botões demo removidos */

/* Chart Footer */
.chart-footer {
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255,255,255,0.01);
}

.chart-source {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

.source-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
}

.chart-trend {
    font-size: 0.75rem;
    color: #4ade80;
    font-weight: 500;
}

.chart-details {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.detail-item {
    font-size: 0.8rem;
    color: #94a3b8;
}

.detail-item strong {
    color: #f1f5f9;
}

/* Secondary Charts Grid - Clean */
.secondary-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 3rem 0 2.5rem 0;
}

.visits-chart.wide-chart {
    grid-column: 1;
}

.modern-activity-panel {
    grid-column: 2;
}

/* Chart Controls - Simple */
.chart-controls-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #64748b;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.control-btn.active,
.control-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #f1f5f9;
}

/* Chart Stats Overlay - Minimal */
.chart-stats-overlay {
    position: absolute;
    top: 0.5rem;
    left: 1.5rem;
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.stat-bubble {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    min-width: 50px;
}

.stat-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Modern Activity Panel - Clean */
.modern-activity-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.activity-header {
    padding: 2rem 2rem 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.activity-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.activity-icon-modern {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

/* Simple CSS Icon for Activity - CORRIGIDO */
.activity-icon-modern::before {
    content: '📋';
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

.activity-title-text h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.activity-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}

.activity-controls {
    display: flex;
    gap: 0.5rem;
}

.refresh-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #f1f5f9;
}

.activity-content {
    padding: 1.5rem 2rem 2rem 2rem;
}

.activity-list.modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item.modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.activity-item.modern:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.activity-icon-wrapper {
    flex-shrink: 0;
}

.activity-icon.success,
.activity-icon.info,
.activity-icon.warning {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    position: relative;
}

/* Simple CSS Icons for Activity Types */
.activity-icon.success {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.activity-icon.success::before {
    content: '';
    width: 6px;
    height: 3px;
    border-left: 2px solid #4ade80;
    border-bottom: 2px solid #4ade80;
    transform: rotate(-45deg);
}

.activity-icon.info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.activity-icon.info::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid #3b82f6;
    border-radius: 50%;
}

.activity-icon.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.activity-icon.warning::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #f59e0b;
}

.activity-content-text {
    flex: 1;
}

.activity-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.25rem;
}

.activity-description {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.activity-time {
    font-size: 0.7rem;
    color: #475569;
}

.activity-badge {
    flex-shrink: 0;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.success {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.badge.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Responsive Modern Charts */
@media (max-width: 1024px) {
    .modern-charts-grid,
    .modern-charts-grid.charts-2x2-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2rem;
        margin: 2.5rem 0;
    }
    
    .secondary-charts-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 2.5rem 0;
    }
    
    .chart-metrics {
        gap: 1rem;
    }
    
    .controls-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .modern-activity-panel.activity-above-charts {
        margin: 2rem 0;
    }
}

@media (max-width: 768px) {
    .chart-card-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .chart-canvas-wrapper {
        padding: 0 1.5rem;
    }
    
    .chart-footer {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .chart-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        width: 100%;
    }
    
    .chart-details {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .chart-stats-overlay {
        position: static;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    
    .activity-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .activity-content {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }
    
    .modern-charts-grid,
    .modern-charts-grid.charts-2x2-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .modern-activity-panel.activity-above-charts {
        margin: 1.5rem 0;
    }
}

/* ===============================
   MODERN CONTROLS PANEL - MINIMAL
   =============================== */

.modern-controls-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin: 3rem 0 2rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.controls-header {
    padding: 2rem 2rem 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.controls-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.controls-icon-modern {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

/* Simple CSS Icon for Controls */
.controls-icon-modern::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
}

.controls-icon-modern::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.controls-title-text h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.controls-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 400;
}

.controls-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}

.status-indicator.online .status-dot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
}

.status-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4ade80;
}

.controls-grid {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.control-group {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.control-group-header {
    margin-bottom: 1.5rem;
}

.control-group-header h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
}

.control-group-header p {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}

.control-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modern-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    color: #f1f5f9;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    margin-bottom: 0.25rem;
}

.modern-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
}

.modern-btn.primary:hover {
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.05);
}

.modern-btn.success:hover {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.05);
}

.modern-btn.demo:hover {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
}

.modern-btn.secondary:hover {
    border-color: rgba(100, 116, 139, 0.3);
    background: rgba(100, 116, 139, 0.05);
}

.modern-btn.warning:hover {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.btn-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

/* Simple CSS Icons for Buttons */
.btn-icon::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #94a3b8;
}

/* Rocket Icon */
.modern-btn.primary .btn-icon::before {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #00d4ff;
    border-top: none;
}

/* Sync Icon */
.modern-btn.success .btn-icon::before {
    border-radius: 50%;
    border-top-color: #4ade80;
    border-right-color: transparent;
    animation: spin 2s linear infinite;
}

/* Clean Icon */
.modern-btn.secondary .btn-icon::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-color: #64748b;
}

/* Warning Icon */
.modern-btn.warning .btn-icon::before {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #f59e0b;
}

/* Demo Icons */
.modern-btn.demo .btn-icon::before {
    width: 2px;
    height: 6px;
    background: #a855f7;
    box-shadow: 3px 1px 0 #a855f7, 6px -1px 0 #a855f7;
    border: none;
}

.btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.btn-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.125rem;
}

.btn-subtitle {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 400;
}

.controls-footer {
    padding: 1.5rem 2rem 2rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
}

.system-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.info-label {
    color: #64748b;
    font-weight: 500;
}

.info-value {
    color: #f1f5f9;
    font-weight: 600;
}

.info-value.success {
    color: #4ade80;
}

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

/* Responsive Controls */
@media (max-width: 1024px) {
    .controls-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .control-buttons-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .control-group:nth-child(2) .control-buttons-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .controls-header {
        padding: 2rem 1.5rem 1rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .controls-grid {
        padding: 1.5rem 1.5rem;
        gap: 1.25rem;
    }
    
    .control-group {
        padding: 1.25rem;
    }
    
    .controls-footer {
        padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    }
    
    .system-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .modern-btn {
        padding: 1rem 0.75rem;
        gap: 0.75rem;
    }
    
    .btn-icon {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
}

/* ========================================
   PRODUCTS MANAGEMENT STYLES (WOOCOMMERCE)
   ======================================== */

/* Garantir visibilidade da seção de produtos */
.products-management {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    display: none !important; /* Hidden by default, shown via JS */
}

.products-management.active,
.products-management[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.products-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Products header icon - DEPRECATED: usando CSS moderno do icon-fixes.css */
/*
.icon-products-header::before {
    content: '🛍️';
    font-size: 1.25rem;
}
*/

.products-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.products-count {
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-add-product {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-add-product:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
}

.icon-add::before {
    content: '+';
    font-weight: bold;
}

.products-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.products-search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.search-input::placeholder {
    color: #64748b;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

.products-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-select {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.9rem;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: #4ade80;
}

.products-list {
    min-height: 400px;
}

/* Products View Controls */
.products-view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.view-buttons {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.view-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
}

.view-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
}

.products-count-display {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Products List View */
.products-list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-list-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.product-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.product-list-checkbox {
    margin-right: 1rem;
}

.product-list-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    overflow: hidden;
    font-size: 24px;
}

.product-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-list-info {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 150px;
    gap: 1rem;
    align-items: center;
}

.product-list-title {
    font-weight: 600;
    color: #fff;
    margin: 0;
    font-size: 1rem;
}

.product-list-sku {
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: 'Courier New', monospace;
}

.product-list-price {
    font-weight: 600;
    color: #10b981;
    font-size: 1rem;
}

.product-list-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.product-list-status.publish {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.product-list-status.draft {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.product-list-status.private {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.product-list-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.product-list-actions .product-action-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* Grid View (existing) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(74, 222, 128, 0.3);
}

.product-checkbox {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.product-image {
    width: 100%;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #64748b;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #4ade80;
    margin-bottom: 0.5rem;
}

.sale-price {
    font-size: 0.9rem;
    color: #ef4444;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.product-sku {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.product-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: inline-block;
}

.product-status.publish {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.product-status.draft {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.product-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.product-action-btn {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.product-action-btn.edit {
    color: #60a5fa;
}

.product-action-btn.edit:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
}

.product-action-btn.view {
    color: #4ade80;
}

.product-action-btn.view:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: #4ade80;
}

.product-action-btn.duplicate {
    color: #fbbf24;
}

.product-action-btn.duplicate:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
}

.product-action-btn.delete {
    color: #ef4444;
}

.product-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.product-action-btn::before {
    font-size: 0.9rem;
}

/* Font Awesome Icons for Product Actions */
.product-action-btn i {
    font-size: 1rem;
    line-height: 1;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
}

/* Fallback icons if Font Awesome doesn't load */
.product-action-btn.edit:not(:has(i))::before { 
    content: "\f044"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.view:not(:has(i))::before { 
    content: "\f35d"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.duplicate:not(:has(i))::before { 
    content: "\f0c5"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.delete:not(:has(i))::before { 
    content: "\f2ed"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

/* Alternative fallback for browsers that don't support :has() */
.product-action-btn.edit.no-icon::before { 
    content: "\f044"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.view.no-icon::before { 
    content: "\f35d"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.duplicate.no-icon::before { 
    content: "\f0c5"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.product-action-btn.delete.no-icon::before { 
    content: "\f2ed"; 
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
}

.loading-state,
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #4ade80;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

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

.empty-icon,
.error-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-state h3,
.error-state h3 {
    color: #f1f5f9;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-state p,
.error-state p {
    color: #94a3b8;
    margin-bottom: 1.5rem;
    max-width: 400px;
}

.empty-actions {
    display: flex;
    gap: 1rem;
}

/* Product Modal Styles */
.page-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.page-modal-content {
    background: linear-gradient(140deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.page-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-modal-title {
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 600;
}

.page-modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.page-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.page-form {
    padding: 2rem;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section h4 {
    color: #f1f5f9;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

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

.form-checkbox label {
    margin: 0;
    cursor: pointer;
}

.page-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.btn-save {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
}

.btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Icon for products in sidebar */
.icon-products::before {
    content: '🛍️';
    font-size: 1.1rem;
}

/* Form styling specific to products */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 6px;
    height: 10px;
    border: solid #4ade80;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.form-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: rgba(74, 222, 128, 0.1);
    border-color: #4ade80;
}

.form-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    opacity: 1;
}

.form-checkbox:hover .checkbox-custom {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.stock-fields {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.upload-product-image {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.upload-product-image:hover {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.05);
}

.upload-product-image p {
    margin: 0.5rem 0;
    color: #e2e8f0;
    font-weight: 500;
}

.upload-product-image small {
    color: #94a3b8;
    font-size: 0.8rem;
}

.price-savings {
    color: #4ade80;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.sku-feedback {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.sku-feedback.success {
    color: #4ade80;
}

.sku-feedback.error {
    color: #ef4444;
}

/* Light mode adjustments for products */
.myragen-wrapper.myragen-light .form-checkbox label,
.myragen-wrapper.myragen-light .upload-product-image p {
    color: #1a202c;
}

.myragen-wrapper.myragen-light .checkbox-custom {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.myragen-wrapper.myragen-light .stock-fields {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

.myragen-wrapper.myragen-light .upload-product-image {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.02);
}

.myragen-wrapper.myragen-light .upload-product-image:hover {
    background: rgba(74, 222, 128, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .products-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .products-search {
        max-width: none;
    }
    
    .products-filters {
        flex-wrap: wrap;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .page-modal {
        padding: 1rem;
    }
    
    .page-modal-content {
        max-height: 95vh;
    }
}

/* Image Upload Styles */
.image-upload-area {
    margin-top: 0.5rem;
}

.image-preview {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.image-preview:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.upload-placeholder {
    text-align: center;
    color: #94a3b8;
    cursor: pointer;
    padding: 2rem;
}

.upload-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #667eea;
}

.upload-placeholder p {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.upload-placeholder small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.image-preview.has-image {
    border-style: solid;
    border-color: rgba(102, 126, 234, 0.3);
}

.image-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    object-fit: cover;
}

.image-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.image-remove-btn:hover {
    background: #ef4444;
    transform: scale(1.1);
}

/* Gallery Upload Styles */
.gallery-upload-area {
    margin-top: 0.5rem;
}

.gallery-preview {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    min-height: 150px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.gallery-preview:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item .image-remove-btn {
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* Downloadable Files Styles */
.downloadable-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    padding-top: 2rem;
}

.downloadable-files {
    margin-bottom: 1rem;
}

.downloadable-file-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.downloadable-file-item .form-row {
    margin-bottom: 1rem;
}

.btn-remove-file {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-remove-file:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.btn-add-file {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.btn-add-file:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.4);
}

/* File input styling */
input[type="file"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    color: #e2e8f0;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

input[type="file"]:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

input[type="file"]::file-selector-button {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(102, 126, 234, 0.3);
}

/* ============================================
   MEDIA MANAGEMENT STYLES
   ============================================ */

/* Media Management Container */
.media-management {
    display: none;
    padding: 2rem;
    animation: fadeInUp 0.3s ease;
}

.media-management.active {
    display: block;
}

/* Media Header */
.media-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.media-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.media-header h3 i {
    color: #667eea;
    font-size: 1.6rem;
}

.media-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.media-count {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-add-media {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-add-media:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Media Toolbar */
.media-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.media-search {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.media-search .search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.media-search .search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.media-search .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
}

.media-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.media-filters .filter-select {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.85rem;
    min-width: 120px;
}

.media-filters .filter-select:focus {
    border-color: #667eea;
    outline: none;
}

/* Media View Controls */
.media-view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.media-view-controls .view-buttons {
    display: flex;
    gap: 0.5rem;
}

.media-view-controls .view-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.media-view-controls .view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.media-view-controls .view-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.media-count-display {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.media-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.media-image {
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.media-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.media-type {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.media-size {
    font-weight: 500;
}

.media-dimensions {
    font-size: 0.75rem;
    color: #94a3b8;
}

.media-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.media-card:hover .media-actions {
    opacity: 1;
}

.media-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    flex: 1;
}

.media-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.media-action-btn.edit:hover {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
}

.media-action-btn.view:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.media-action-btn.copy:hover {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.media-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Media List View */
.media-list-view {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow: hidden;
}

.media-list-item {
    display: grid;
    grid-template-columns: auto 60px 1fr auto auto auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.media-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.media-list-item:last-child {
    border-bottom: none;
}

.media-list-checkbox {
    display: flex;
    align-items: center;
}

.media-list-thumbnail {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-list-info {
    display: contents;
}

.media-list-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.media-list-filename {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.media-list-type,
.media-list-size,
.media-list-dimensions,
.media-list-date {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
}

.media-list-actions {
    display: flex;
    gap: 0.5rem;
}

/* Media Upload Modal */
#media-upload-modal,
#media-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease;
}

#media-upload-modal[style*="flex"],
#media-edit-modal[style*="flex"] {
    display: flex !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#media-upload-modal .modal-content,
#media-edit-modal .modal-content {
    background: linear-gradient(140deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 100000;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#media-upload-modal .modal-header,
#media-edit-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#media-upload-modal .modal-title,
#media-edit-modal .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

#media-upload-modal .modal-close,
#media-edit-modal .modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0.5rem;
    border-radius: 6px;
}

#media-upload-modal .modal-close:hover,
#media-edit-modal .modal-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.file-upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.file-upload-content p {
    margin: 0.5rem 0;
    color: #94a3b8;
}

.file-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.file-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.preview-image,
.preview-file {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.preview-info {
    color: #e2e8f0;
    font-size: 0.9rem;
}

/* Media Edit Modal */
.media-edit-preview {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.media-info {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-item strong {
    color: #e2e8f0;
}

.info-item span,
.info-item a {
    color: #94a3b8;
}

.info-item a:hover {
    color: #667eea;
}

/* Modal Form Styles */
#media-upload-modal .form-group,
#media-edit-modal .form-group {
    margin-bottom: 1.5rem;
}

#media-upload-modal .form-label,
#media-edit-modal .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.9rem;
}

#media-upload-modal .form-input,
#media-edit-modal .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

#media-upload-modal .form-input:focus,
#media-edit-modal .form-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

#media-upload-modal .form-input::placeholder,
#media-edit-modal .form-input::placeholder {
    color: #94a3b8;
}

/* Modal Form Actions */
#media-upload-modal .form-actions,
#media-edit-modal .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#media-upload-modal .primary-btn,
#media-edit-modal .primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

#media-upload-modal .primary-btn:hover,
#media-edit-modal .primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#media-upload-modal .primary-btn:disabled,
#media-edit-modal .primary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#media-upload-modal .secondary-btn,
#media-edit-modal .secondary-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

#media-upload-modal .secondary-btn:hover,
#media-edit-modal .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.2);
}

#media-upload-modal .danger-btn,
#media-edit-modal .danger-btn {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

#media-upload-modal .danger-btn:hover,
#media-edit-modal .danger-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}

/* File Input Styling */
.file-input-container {
    position: relative;
    margin-bottom: 1rem;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-input-wrapper:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.file-input-wrapper.drag-over {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.02);
}

.file-upload-area.file-selected .file-upload-content {
    opacity: 0.7;
}

.file-upload-area.file-selected {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

#media-upload-modal input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.file-input-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.file-input-icon {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.file-input-text {
    color: #e2e8f0;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.file-input-hint {
    color: #94a3b8;
    font-size: 0.85rem;
}

.file-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-preview-icon {
    font-size: 1.5rem;
    color: #667eea;
}

.file-preview-info {
    flex: 1;
}

.file-preview-name {
    color: #e2e8f0;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.file-preview-size {
    color: #94a3b8;
    font-size: 0.85rem;
}

.file-preview-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.file-preview-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Empty State Styles for Products */
.products-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

.products-list .empty-state .empty-icon {
    font-size: 4rem;
    color: #667eea;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.products-list .empty-state h3 {
    color: #e2e8f0;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0;
}

.products-list .empty-state p {
    color: #94a3b8;
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 400px;
    line-height: 1.6;
}

.products-list .empty-state .primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.products-list .empty-state .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.products-list .empty-state .primary-btn i {
    font-size: 0.9rem;
}

/* Loading State for Products */
.products-list .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 300px;
}

.products-list .loading-state .loading-spinner {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1.5rem;
}

.products-list .loading-state p {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
}

/* Error State for Products */
.products-list .error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 400px;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 12px;
    border: 2px dashed rgba(239, 68, 68, 0.2);
}

.products-list .error-state .error-icon {
    font-size: 4rem;
    color: #ef4444;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.products-list .error-state h3 {
    color: #e2e8f0;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0;
}

.products-list .error-state p {
    color: #94a3b8;
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 400px;
    line-height: 1.6;
}

.products-list .error-state .secondary-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.products-list .error-state .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Empty and Loading States */
.empty-state,
.loading-state,
.error-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #94a3b8;
}

.empty-icon,
.error-icon {
    font-size: 4rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.error-icon {
    color: #ef4444;
}

.empty-state h3,
.error-state h3 {
    color: #e2e8f0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.empty-state p,
.error-state p {
    margin-bottom: 2rem;
}

/* ============================================
   MARKETING & EMAIL AUTOMATION STYLES
   ============================================ */

/* Marketing Management Container */
.marketing-management {
    padding: 2rem 0;
}

.marketing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marketing-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
}

.marketing-header h3 i {
    color: #ff6b35;
}

.marketing-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.campaigns-count {
    font-size: 0.9rem;
    color: #94a3b8;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-create-campaign {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.btn-create-campaign:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* Marketing Stats Cards */
.marketing-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.stat-card:nth-child(1) .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card:nth-child(2) .stat-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3) .stat-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4) .stat-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info h4 {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.stat-period {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Marketing Tabs */
.marketing-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    gap: 0.25rem;
}

.marketing-tabs .tab-btn {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    color: #94a3b8;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.9rem;
}

.marketing-tabs .tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

.marketing-tabs .tab-btn.active {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

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

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

/* Campaigns Section */
.campaigns-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.campaigns-search {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.campaigns-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.campaigns-list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-height: 400px;
    padding: 2rem;
}

/* Automation Templates */
.automation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.automation-header h4 {
    font-size: 1.25rem;
    color: #f1f5f9;
    font-weight: 600;
}

.btn-create-automation {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-create-automation:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.automation-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.automation-template-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.automation-template-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.automation-template-card .template-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.automation-template-card:nth-child(2) .template-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.automation-template-card:nth-child(3) .template-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.automation-template-card:nth-child(4) .template-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.template-info h5 {
    font-size: 1rem;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.template-info p {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.template-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.template-status.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.template-status.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Active Automations */
.active-automations {
    margin-top: 3rem;
}

.active-automations h4 {
    font-size: 1.25rem;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.automations-list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-height: 300px;
    padding: 2rem;
}

/* Subscribers Section */
.subscribers-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.subscribers-search {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.subscribers-actions {
    display: flex;
    gap: 1rem;
}

.btn-import-subscribers,
.btn-export-subscribers {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-import-subscribers:hover,
.btn-export-subscribers:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.subscribers-list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-height: 400px;
    padding: 2rem;
}

/* Templates Section */
.templates-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.templates-search {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.templates-actions {
    display: flex;
    gap: 1rem;
}

.btn-create-template {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.btn-create-template:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

.templates-grid {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-height: 400px;
    padding: 2rem;
}

/* Analytics Section */
.analytics-dashboard {
    padding: 1rem 0;
}

.analytics-filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.analytics-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.chart-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
}

.chart-container h4 {
    font-size: 1.1rem;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
}

.top-campaigns {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
}

.top-campaigns h4 {
    font-size: 1.1rem;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
}

.campaigns-ranking {
    min-height: 200px;
}

/* Modal Styles for Marketing */
.modal .large-modal {
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Campaign Form Styles */
.campaign-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.email-editor-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px 6px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
}

.toolbar-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.email-content-editor {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
}

.email-content-editor:focus {
    outline: none;
    border-color: #ff6b35;
    background: rgba(255, 255, 255, 0.08);
}

.recipients-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #f1f5f9;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #ff6b35;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #f1f5f9;
    margin-bottom: 0.75rem;
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #8b5cf6;
}

/* Automation Flow Styles */
.automation-flow {
    margin-bottom: 2rem;
}

.flow-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-header h4 {
    color: #f1f5f9;
    font-weight: 600;
}

.condition-group,
.action-type {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.time-delay {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form-input.small {
    width: 80px;
}

/* Template Builder Styles */
.template-builder {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: 1rem;
    height: 600px;
    margin: 1rem 0;
}

.builder-sidebar,
.builder-properties {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    overflow-y: auto;
}

.builder-sidebar h4,
.builder-properties h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.component-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.component-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f1f5f9;
    font-size: 0.85rem;
}

.component-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.component-item:active {
    cursor: grabbing;
}

.builder-canvas {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    overflow-y: auto;
}

.email-preview {
    background: #ffffff;
    color: #1a202c;
    padding: 2rem;
    border-radius: 6px;
    min-height: 500px;
    font-family: Arial, sans-serif;
}

.email-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.email-body {
    margin-bottom: 2rem;
    line-height: 1.6;
}

.email-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #64748b;
}

.properties-panel {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Import Modal Styles */
.import-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.import-method {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.import-method:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.import-method.active {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
}

.import-method i {
    font-size: 2rem;
    color: #06b6d4;
    margin-bottom: 1rem;
}

.import-method h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.import-method p {
    color: #94a3b8;
    font-size: 0.85rem;
}

.import-content {
    margin-bottom: 2rem;
}

.csv-mapping {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.csv-mapping h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.mapping-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mapping-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.5rem;
    align-items: center;
}

.mapping-row label {
    color: #94a3b8;
    font-size: 0.85rem;
}

.import-options-config {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.import-options-config h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #374151;
}

.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #94a3b8;
}

.empty-state small {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 2rem;
    display: block;
}

/* Loading States */
.loading-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #ff6b35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

/* Campaign Item Styles */
.campaign-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.5rem;
    align-items: center;
    transition: all 0.2s ease;
}

.campaign-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.campaign-info h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.campaign-subject {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.campaign-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.campaign-type {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campaign-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campaign-status.status-draft {
    background: rgba(156, 163, 175, 0.2);
    color: #d1d5db;
}

.campaign-status.status-sent {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.campaign-status.status-scheduled {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.campaign-status.status-sending {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.campaign-date {
    color: #64748b;
    font-size: 0.8rem;
}

.campaign-stats {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.campaign-stats .stat {
    text-align: center;
}

.campaign-stats .stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.campaign-stats .stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.campaign-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
    transform: translateY(-1px);
}

.btn-action.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: white;
}

.btn-action.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Automation Item Styles */
.automation-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    transition: all 0.2s ease;
}

.automation-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.automation-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.automation-info h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.automation-trigger {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.automation-stats {
    color: #64748b;
    font-size: 0.8rem;
}

.automation-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.automation-status.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.automation-status.inactive {
    background: rgba(156, 163, 175, 0.2);
    color: #d1d5db;
}

/* Subscriber Item Styles */
.subscriber-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    transition: all 0.2s ease;
}

.subscriber-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.subscriber-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.subscriber-info h4 {
    color: #f1f5f9;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.subscriber-email {
    color: #94a3b8;
    font-size: 0.85rem;
}

.subscriber-meta {
    color: #64748b;
    font-size: 0.8rem;
    text-align: right;
}

.subscriber-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.subscriber-status.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.subscriber-status.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Template Card Styles */
.template-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.template-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.template-preview {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.template-thumbnail {
    color: white;
    font-size: 2rem;
    opacity: 0.8;
}

.template-info h4 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.template-info p {
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.template-category {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Notification Styles for Marketing */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease;
}

.notification-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.notification-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.notification-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.notification-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .marketing-stats-cards {
        grid-template-columns: 1fr;
    }
    
    .campaign-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .campaign-stats {
        justify-content: center;
        gap: 1rem;
    }
    
    .automation-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }
    
    .subscriber-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.75rem;
    }
    
    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 1rem;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .table-wrapper {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .marketing-management {
        padding: 1rem;
    }
    
    .section-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .marketing-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .marketing-tabs .tab-nav {
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .marketing-tabs .tab-nav button {
        min-width: 120px;
        flex-shrink: 0;
    }
}

/* Loading and Empty States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #10b981;
    animation: spin 1s linear infinite;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: #94a3b8;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.empty-state p {
    margin-bottom: 2rem;
    line-height: 1.5;
}

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

.marketing-tabs {
    overflow-x: auto;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .campaigns-toolbar,
    .subscribers-toolbar,
    .templates-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .campaigns-search,
    .subscribers-search,
    .templates-search {
        min-width: auto;
    }
    
    .template-builder {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .builder-sidebar,
    .builder-canvas,
    .builder-properties {
        height: 300px;
    }
    
    .import-options {
        grid-template-columns: 1fr;
    }
    
    .campaign-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .analytics-charts {
        grid-template-columns: 1fr;
    }
    
    .automation-templates {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .media-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .media-search {
        min-width: auto;
    }
    
    .media-filters {
        justify-content: center;
    }
    
    .media-list-item {
        grid-template-columns: auto 50px 1fr auto;
        gap: 0.5rem;
        font-size: 0.8rem;
    }
    
    .media-list-type,
    .media-list-dimensions,
    .media-list-date {
        display: none;
    }
}

/* ============================================
   MARKETING MODALS - CSS para campanhas, automações, templates
   ============================================ */

/* Base modal styles for marketing modals */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
    backdrop-filter: blur(10px) !important;
}

/* When modal is shown */
.modal[style*="block"],
.modal[style*="flex"] {
    display: flex !important;
}

/* Modal content container */
.modal .modal-content {
    background: linear-gradient(140deg, #1e293b 0%, #334155 100%) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    width: 90% !important;
    max-width: 700px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    margin: auto !important;
}

/* Large modals (like template builder) */
.modal .modal-content.large-modal {
    max-width: 1200px !important;
    width: 95% !important;
}

/* Modal header */
.modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Modal title */
.modal .modal-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    margin: 0 !important;
}

/* Modal close button */
.modal .modal-close {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* Form styles inside modals */
.modal .form-group {
    margin-bottom: 1.5rem !important;
}

.modal .form-label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
    color: #f1f5f9 !important;
}

.modal .form-input,
.modal .form-select {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
}

.modal .form-input:focus,
.modal .form-select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Form row for side-by-side inputs */
.modal .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

/* Form actions (buttons at bottom) */
.modal .form-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-end !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Button styles inside modals */
.modal .btn,
.modal .primary-btn,
.modal .secondary-btn {
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.modal .primary-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
}

.modal .primary-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.modal .secondary-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.modal .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Specific styles for campaign modal */
.modal .email-content-editor {
    min-height: 200px !important;
    padding: 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important;
    font-family: inherit !important;
}

.modal .email-content-editor:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Toolbar for email editor */
.modal .email-editor-toolbar {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

.modal .toolbar-btn {
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.modal .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Checkbox and radio styles */
.modal .checkbox-label,
.modal .radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
}

.modal input[type="checkbox"],
.modal input[type="radio"] {
    accent-color: #3b82f6 !important;
}

/* Automation flow styles */
.modal .automation-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.modal .flow-step {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal .step-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.modal .step-number {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
}

/* Time delay inputs */
.modal .time-delay {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

.modal .form-input.small {
    width: 80px !important;
}

/* Template builder styles */
.modal .template-builder {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 1.5rem !important;
    margin-top: 1rem !important;
}

.modal .builder-sidebar {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.modal .component-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.modal .component-item {
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    cursor: grab !important;
    transition: all 0.2s ease !important;
    color: #f1f5f9 !important;
}

.modal .component-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.modal .builder-canvas {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    min-height: 400px !important;
}

/* Responsive modal styles */
@media (max-width: 768px) {
    .modal .modal-content {
        width: 95% !important;
        padding: 1.5rem !important;
        max-height: 95vh !important;
    }
    
    .modal .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .modal .form-actions {
        flex-direction: column !important;
    }
    
    .modal .template-builder {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   CORREÇÃO GLOBAL PARA SELECTS
   ============================================ */

/* Fix para TODOS os selects do sistema */
.myragen-wrapper select,
.myragen-wrapper .form-select,
.myragen-wrapper .filter-select,
.myragen-wrapper .site-select,
select {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Fix para TODAS as options */
.myragen-wrapper select option,
.myragen-wrapper .form-select option,
.myragen-wrapper .filter-select option,
.myragen-wrapper .site-select option,
select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    padding: 0.75rem !important;
    border: none !important;
}

/* Fix para hover nas options */
.myragen-wrapper select option:hover,
.myragen-wrapper select option:checked,
.myragen-wrapper select option:selected {
    background: #334155 !important;
    color: #ffffff !important;
}

/* Override any WordPress admin styles that might interfere */
.modal * {
    box-sizing: border-box !important;
}

/* Ensure modals are on top of everything */
#campaign-modal,
#automation-modal,
#template-modal,
#import-modal {
    z-index: 100000 !important;
}

/* ============================================
   GLOBAL SELECT FIXES - VISIBILITY
   ============================================ */

/* Fix all select elements with dark background and light text */
.myragen-wrapper select,
.myragen-wrapper .site-select,
.myragen-wrapper .filter-select,
.myragen-wrapper .form-select,
.myragen-wrapper #site-select,
.myragen-wrapper #orders-status-filter,
.myragen-wrapper #orders-date-filter,
.myragen-wrapper #products-status-filter,
.myragen-wrapper #products-type-filter,
select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Focus states for selects */
.myragen-wrapper select:focus,
.myragen-wrapper .site-select:focus,
.myragen-wrapper .filter-select:focus,
.myragen-wrapper .form-select:focus,
select:focus {
    outline: none !important;
    border-color: #667eea !important;
    background-color: #2d3748 !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Hover states for selects */
.myragen-wrapper select:hover,
.myragen-wrapper .site-select:hover,
.myragen-wrapper .filter-select:hover,
.myragen-wrapper .form-select:hover,
select:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-color: #2d3748 !important;
}

/* Option elements styling */
.myragen-wrapper select option,
.myragen-wrapper .site-select option,
.myragen-wrapper .filter-select option,
.myragen-wrapper .form-select option,
select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    padding: 0.5rem !important;
    border: none !important;
}

/* Option hover/selected states */
.myragen-wrapper select option:hover,
.myragen-wrapper select option:checked,
.myragen-wrapper select option:selected,
select option:hover,
select option:checked,
select option:selected {
    background-color: #667eea !important;
    color: #ffffff !important;
}

/* Light mode overrides for selects */
.myragen-wrapper.myragen-light select,
.myragen-wrapper.myragen-light .site-select,
.myragen-wrapper.myragen-light .filter-select,
.myragen-wrapper.myragen-light .form-select {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

.myragen-wrapper.myragen-light select option,
.myragen-wrapper.myragen-light .site-select option,
.myragen-wrapper.myragen-light .filter-select option,
.myragen-wrapper.myragen-light .form-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.myragen-wrapper.myragen-light select option:hover,
.myragen-wrapper.myragen-light select option:checked,
.myragen-wrapper.myragen-light select option:selected {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

/* Special styling for site selector */
.site-selector .site-select {
    min-width: 200px !important;
    max-width: 300px !important;
}

/* Disabled state */
.myragen-wrapper select:disabled,
.myragen-wrapper .site-select:disabled,
.myragen-wrapper .filter-select:disabled,
.myragen-wrapper .form-select:disabled,
select:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #374151 !important;
    color: #9ca3af !important;
}

/* Multiple select styling */
.myragen-wrapper select[multiple],
select[multiple] {
    height: auto !important;
    min-height: 120px !important;
    padding: 0.5rem !important;
}

.myragen-wrapper select[multiple] option,
select[multiple] option {
    padding: 0.5rem !important;
    margin-bottom: 2px !important;
    border-radius: 4px !important;
}

/* WordPress admin override fixes */
.wp-admin .myragen-wrapper select,
.wp-admin .myragen-wrapper .site-select,
.wp-admin .myragen-wrapper .filter-select,
.wp-admin .myragen-wrapper .form-select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

/* Force styling even with WordPress admin styles */
body.wp-admin .myragen-wrapper select,
body.wp-admin .myragen-wrapper .site-select,
body.wp-admin .myragen-wrapper .filter-select,
body.wp-admin .myragen-wrapper .form-select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   VIEW OPTIONS BUTTONS - LIST/GRID
   ============================================ */

/* Container dos botões de visualização */
.orders-view-options {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.25rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Botões individuais */
.view-btn {
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-width: 44px;
    position: relative;
    overflow: hidden;
}

/* Ícones dos botões */
.view-btn i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* Estado hover */
.view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

/* Estado ativo */
.view-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.view-btn.active i {
    transform: scale(1.1);
}

/* Efeito ripple ao clicar */
.view-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Tooltip hover */
.view-btn:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease forwards;
    z-index: 1000;
}

@keyframes tooltipFadeIn {
    to {
        opacity: 1;
        bottom: -2rem;
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .orders-view-options {
        margin-top: 1rem;
    }
    
    .view-btn {
        padding: 0.6rem 0.8rem;
        min-width: 40px;
    }
    
    .view-btn i {
        font-size: 1rem;
    }
}