/**
 * Unsurfaced AI - D3.js Chart Styles
 * Custom styling for D3.js charts in the Unsurfaced AI dashboard
 */

/* Chart containers */
.chart-container {
    background-color: #1f2937;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* SVG styling */
.d3-chart {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Axes */
.d3-chart .domain {
    stroke: rgba(255, 255, 255, 0.3);
}

.d3-chart .tick line {
    stroke: rgba(255, 255, 255, 0.3);
}

/* Grid lines */
.d3-chart .grid line {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-dasharray: 3, 3;
}

.d3-chart .grid path {
    stroke-width: 0;
}

/* Tooltips */
.d3-tooltip {
    position: fixed !important;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    pointer-events: none;
    font-size: 12px;
    z-index: 9999 !important;
    max-width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

.d3-tooltip:after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent;
}

/* Chart-specific styling */

/* Line charts */
.line-chart path.line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.line-chart .circle-point {
    fill: white;
    stroke-width: 2px;
}

/* Bar charts */
.bar-chart rect {
    transition: opacity 0.2s;
}

.bar-chart rect:hover {
    opacity: 0.9;
}

/* Pie charts */
.pie-chart path {
    transition: opacity 0.2s, stroke-width 0.2s;
}

.pie-chart text {
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Geo map */
.geo-chart path {
    transition: opacity 0.2s, stroke-width 0.2s;
}

/* Dashboard-specific color schemes */

/* Heating Up Dashboard */
.heating-up-chart .line-path {
    stroke-width: 3;
}

.heating-up-chart .line-point {
    r: 5;
}

/* Daily Biz Dashboard */
.daily-biz-chart rect.bar {
    rx: 2;
    ry: 2;
}

/* On The Pulse Dashboard */
.on-the-pulse-chart path.area {
    opacity: 0.7;
}

/* Pocket Watch Dashboard */
.pocket-watch-chart .geo-region {
    stroke: #334155;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .chart-container {
        padding: 0.5rem;
    }
    
    .d3-chart text {
        font-size: 10px !important;
    }
    
    .d3-chart .legend text {
        font-size: 8px !important;
    }
}