/* ==========================================================================
   CSS ANALYTICS DASHBOARDS - DISEÑO PREMIUM ATLASSIAN
   ========================================================================== */

.dashboard-container {
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   HEADER PANEL
   ========================================================= */
.header-section {
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 6px;
    border: 1px solid #DFE1E6;
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.modal-overlay-base {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(9, 30, 66, 0.54);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.workspace-title { margin: 0 0 4px 0; color: #172B4D; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.workspace-desc { margin: 0; color: #6B778C; font-size: 14px; line-height: 1.5; }

.btn-header-primary {
    background: #0052CC; color: white; border: none; padding: 10px 18px; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px rgba(0,82,204,0.2);
}
.btn-header-primary:hover { background: #0065FF; box-shadow: 0 2px 4px rgba(0,82,204,0.3); }

.btn-header-secondary {
    background: #FAFBFC; color: #42526E; border: 1px solid #DFE1E6; padding: 9px 18px; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.btn-header-secondary:hover { background: #EBECF0; color: #172B4D; }

/* =========================================================
   GRIDSTACK WIDGET CARDS
   ========================================================= */
.grid-stack-item-content {
    background: #ffffff;
    border: 1px solid #DFE1E6;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.grid-stack-item-content:hover {
    box-shadow: 0 4px 12px rgba(9, 30, 66, 0.08);
    border-color: #C1C7D0;
}

.widget-header {
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid #EBECF0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: move;
}

.widget-info-group { display: flex; flex-direction: column; gap: 4px; }
.widget-title { margin: 0; font-size: 14.5px; color: #172B4D; font-weight: 600; letter-spacing: -0.2px; }
.widget-description { margin: 0; font-size: 12px; color: #6B778C; font-weight: 400; line-height: 1.4; }

/* Menus de Widgets */
.widget-menu { position: relative; }
.menu-trigger { background: none; border: none; color: #6B778C; cursor: pointer; padding: 6px 8px; border-radius: 3px; transition: background 0.2s, color 0.2s; }
.menu-trigger:hover { background: #EBECF0; color: #172B4D; }

.menu-content {
    display: none; position: absolute; right: 0; top: 100%;
    background: #ffffff; min-width: 200px;
    box-shadow: 0 8px 16px rgba(9, 30, 66, 0.15);
    z-index: 1000; border: 1px solid #DFE1E6; border-radius: 4px; padding: 8px 0;
}
.menu-content.show { display: block; }

.menu-item {
    color: #172B4D; padding: 10px 16px; display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; cursor: pointer; border: none; width: 100%; text-align: left;
    background: none; position: relative; transition: background 0.15s; font-weight: 500;
}
.menu-item i { width: 16px; text-align: center; color: #6B778C; }
.menu-item:hover { background: #FAFBFC; color: #0052CC; }
.menu-item:hover i { color: #0052CC; }

.menu-item.text-danger { color: #DE350B; }
.menu-item.text-danger i { color: #DE350B; }
.menu-item.text-danger:hover { background: #FFEBE6; }

.menu-divider { border-top: 1px solid #EBECF0; margin: 4px 0; }
.submenu-arrow { float: right; font-size: 10px; color: #8993A4; margin-left: auto; }

.submenu-content {
    display: none; position: absolute; right: 100%; top: 0;
    background: #ffffff; min-width: 160px; border: 1px solid #DFE1E6;
    box-shadow: -4px 4px 12px rgba(9, 30, 66, 0.1); border-radius: 4px; padding: 8px 0;
}
.submenu-content.show { display: block; }

.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* =========================================================
   CANVAS & FILTER BAR INTERNALS
   ========================================================= */
.canvas-filter-bar {
    flex-shrink: 0;
    background: #FAFBFC;
    border-bottom: 1px solid #DFE1E6;
    padding: 10px 16px !important;
    gap: 16px !important;
    align-items: center;
    flex-wrap: wrap;
    display: none; /* Blocked by JS */
}

.widget-body {
    flex: 1 1 0%; min-height: 0; padding: 16px;
    position: relative; display: flex; flex-direction: column;
}
.widget-body canvas { display: block; width: 100% !important; height: 100% !important; flex-grow: 1; min-height: 0; }

/* Sobreescribiendo estilos JS inline para filtros */
.multiselect-button {
    background: #ffffff !important; border: 1px solid #DFE1E6 !important; padding: 6px 12px !important;
    border-radius: 4px !important; font-size: 12px !important; color: #172B4D !important;
    box-shadow: inset 0 1px 2px rgba(9,30,66,0.02) !important; transition: border-color 0.2s !important;
}
.multiselect-button:hover { border-color: #C1C7D0 !important; background: #FAFBFC !important; }
.multiselect-dropdown {
    border: 1px solid #DFE1E6 !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(9,30,66,0.1) !important;
}
.multiselect-option:hover { background-color: #FAFBFC !important; color: #0052CC !important; }

.filter-date-input {
    border: 1px solid #DFE1E6 !important; padding: 6px 8px !important; border-radius: 4px !important;
    font-size: 12px !important; color: #172B4D !important; background: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(9,30,66,0.02) !important;
}
.filter-date-input:focus { border-color: #4C9AFF !important; outline: none !important; }

/* =========================================================
   MODAL ESPECÍFICO DE WIDGETS
   ========================================================= */
.text-danger { color: #DE350B; }

.btn-analyze-magic {
    width: 100%; background: #E6EFFC; color: #0052CC; border: 2px dashed #0052CC;
    padding: 12px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 8px; justify-content: center; transition: all 0.2s;
}
.btn-analyze-magic:hover { background: #B3D4FF; border-style: solid; }

.filter-columns-list {
    display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto;
    padding: 8px 12px; border: 1px solid #DFE1E6; border-radius: 4px; background: #FAFBFC;
}

.CodeMirror {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    height: 100% !important; /* Llenar espacio modal */
}
#customCodeModal .modal-content {
    width: 80%;
    height: 85vh; /* Mantenemos altura */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* IMPORTANTE: El modal no debe desbordarse */
}

/* El área del editor debe crecer y permitir scroll interno */
.modal-body-base {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite scroll si la ventana es pequeña */
    padding: 0;
}

/* CodeMirror debe adaptarse al contenedor */
.CodeMirror {
    height: 100% !important;
    flex-grow: 1;
    border: none;
}