/* ========================================================
   MODERN DARK THEME (DesignHtml6 - Inherited Variable System)
   ======================================================== */

/* Base Dashboard and Page Container Theme (Variables inherit down to all canvases) */
.modern-dark,
#dashboard,
#chart_p,
.mfb-dashboard.modern-dark {
    --mfc-background: #1e293b;
    --mfc-plot-background: #1e293b;
    --mfc-axis-stroke: #475569;
    --mfc-axis-labels-brush: #94a3b8;
    --mfc-axis-title-brush: #f8fafc;
    --mfc-grid-line-color: #334155;
    --mfc-grid-color1: #1e293b;
    --mfc-grid-color2: #242f4d;
    --mfc-grid-color-1: #1e293b;
    --mfc-grid-color-2: #242f4d;
    --mfc-axis-title-brush: #f8fafc;
    --mfc-legend-background: #242f4d;
    --mfc-legend-border-stroke: #334155;
    --mfc-legend-title-brush: #38bdf8;
    --mfc-title-brush: #94a3b8; /* Matches radiant KPI values */
    --mfc-subtitle-brush: #94a3b8; /* Matches subtle KPI headers */
    --mfc-data-labels-brush: #f8fafc;
    --mfc-data-labels-background: #242f4d;
    --mfc-plot-border-stroke: #1e293b; /* Hidden border */
    /* Fonts */
    --mfc-axis-labels-font-name: 'Segoe UI', Tahoma, Verdana, 'sans-serif';
    --mfc-axis-labels-font-size: 11px;
    --mfc-axis-title-font-name: 'Segoe UI', Tahoma, Verdana, 'sans-serif';
    --mfc-axis-title-font-size: 12px;
    --mfc-axis-title-font-style: bold;
    --mfc-data-labels-font-name: 'Segoe UI', Tahoma, Verdana, 'sans-serif';
    --mfc-data-labels-font-size: 12px;
    /* Series Palette - Nordic Cool */
    --mfc-common-series-fill-0: #0284c7; /* Ocean Blue */
    --mfc-common-series-fill-1: #0d9488; /* Teal */
    --mfc-common-series-fill-2: #10b981; /* Mint */
    --mfc-common-series-fill-3: #db2777; /* Berry */
    --mfc-common-series-fill-4: #818cf8; /* Lavender */

    --mfc-common-series-stroke-0: #1e293b;
    --mfc-common-series-stroke-1: #1e293b;
    --mfc-common-series-stroke-2: #1e293b;
    --mfc-common-series-stroke-3: #1e293b;
    --mfc-common-series-stroke-4: #1e293b;
    --mfc-uniform-series-stroke-thickness: 1px;
}

/* ========================================================
   SPECIFIC CHART TYPE OVERRIDES (Inherited or Direct)
   ======================================================== */

/* Line, Radar, Scatter, Step - Bold 5px Strokes */
.modern-dark .mfc-line-chart,
.mfc-line-chart.modern-dark,
.modern-dark .mfc-bar-chart,
.mfc-bar-chart.modern-dark,
.modern-dark .mfc-radar-chart,
.mfc-radar-chart.modern-dark,
.modern-dark .mfc-scatter-chart,
.mfc-scatter-chart.modern-dark,
#lineChart,
#radarChart {
    --mfc-common-series-stroke-thickness-0: 5px;
    --mfc-common-series-stroke-thickness-1: 5px;
    --mfc-common-series-stroke-thickness-2: 5px;
    --mfc-common-series-stroke-thickness-3: 5px;
    --mfc-common-series-stroke-thickness-4: 5px;
    
    --mfc-common-series-stroke-0: #0284c7;
    --mfc-common-series-stroke-1: #0d9488;
    --mfc-common-series-stroke-2: #10b981;
    --mfc-common-series-stroke-3: #db2777;
    --mfc-common-series-stroke-4: #818cf8;
}

/* Area charts need semi-transparent fills */
.modern-dark .mfc-area-chart,
.mfc-area-chart.modern-dark,
#areaChart {
    --mfc-common-series-fill-0: rgba(2, 132, 199, 0.75);
    --mfc-common-series-fill-1: rgba(13, 148, 136, 0.75);
    --mfc-common-series-fill-2: rgba(16, 185, 129, 0.75);
    --mfc-common-series-fill-3: rgba(219, 39, 119, 0.75);
    --mfc-common-series-fill-4: rgba(129, 140, 248, 0.75);
}

/* Candlestick charts - High contrast visible wicks */
.modern-dark .mfc-candlestick-chart,
.mfc-candlestick-chart.modern-dark,
#candlestickChart {
    --mfc-candlestick-rising-brush: #10b981;
    --mfc-candlestick-falling-brush: #ef4444;
    --mfc-candlestick-stroke: #38bdf8;
    --mfc-candlestick-stroke-thickness: 1.5px;
    --mfc-common-series-stroke-0: #38bdf8;
    --mfc-common-series-stroke-1: #2dd4bf;
    --mfc-common-series-stroke-2: #34d399;
    --mfc-common-series-stroke-3: #f472b6;
    --mfc-common-series-stroke-4: #a5b4fc;
    --mfc-common-series-stroke-thickness-0: 1.5px;
    --mfc-common-series-stroke-thickness-1: 1.5px;
    --mfc-common-series-stroke-thickness-2: 1.5px;
    --mfc-common-series-stroke-thickness-3: 1.5px;
    --mfc-common-series-stroke-thickness-4: 1.5px;
}

/* Multi-segmented single-series charts (Pie, Funnel, Tower) */
.modern-dark .mfc-pie-chart,
.mfc-pie-chart.modern-dark,
.modern-dark .mfc-funnel-chart,
.mfc-funnel-chart.modern-dark,
.modern-dark .mfc-tower-chart,
.mfc-tower-chart.modern-dark,
#pieChart,
#funnelChart,
#towerChart {
    --mfc-series-fill-0-0: #0284c7;
    --mfc-series-fill-0-1: #0d9488;
    --mfc-series-fill-0-2: #10b981;
    --mfc-series-fill-0-3: #db2777;
    --mfc-series-fill-0-4: #818cf8;
    --mfc-series-fill-0-5: #6366f1;
    --mfc-series-fill-0-6: #f59e0b;
    --mfc-series-fill-0-7: #f97316;

    /* Segment cutout outlines */
    --mfc-series-stroke-0-0: #1e293b;
    --mfc-series-stroke-0-1: #1e293b;
    --mfc-series-stroke-0-2: #1e293b;
    --mfc-series-stroke-0-3: #1e293b;
    --mfc-series-stroke-0-4: #1e293b;
    --mfc-series-stroke-0-5: #1e293b;
    --mfc-series-stroke-0-6: #1e293b;
    --mfc-series-stroke-0-7: #1e293b;
    --mfc-series-stroke-thickness-0-0: 1px;
}

/* ========================================================
   DATAVIEWS GRID STYLES
   ======================================================== */
.mfdv-grid.modern-dark,
.modern-dark .mfdv-grid {
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    font-family: system-ui, -apple-system, sans-serif;
}
.mfdv-grid.modern-dark .mfdv-grid-header,
.mfdv-grid.modern-dark .mfdv-grid-scroll-wrapper div,
.modern-dark .mfdv-grid .mfdv-grid-header {
    background-color: #0f172a;
    color: #f8fafc;
    font-weight: 600;
}
.mfdv-grid.modern-dark .mfdv-grid-data-table > div:nth-child(even),
.modern-dark .mfdv-grid .mfdv-grid-data-table > div:nth-child(even) {
    background-color: #111827;
}

/* ========================================================
   DASHBOARD WIDGETS
   ======================================================== */
.mfb-dashboard.modern-dark .mfb-widget-container,
.modern-dark .mfb-widget-container {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: hidden;
}

.mfb-dashboard.modern-dark .mfb-kpi-widget,
.modern-dark .mfb-kpi-widget {
    background-color: #1e293b;
    color: #f8fafc;
}

.mfb-dashboard.modern-dark .mfb-kpi-widget .mfb-kpi-header {
    color: #94a3b8;
}

.mfb-dashboard.modern-dark .mfb-kpi-widget .mfb-kpi-value {
    color: #38bdf8;
    font-weight: 700;
}

/* Gauge styling - Corrected to use .mfg-linear-gauge and .mfg-oval-gauge with --mfg- variables */
    .modern-dark .mfg-linear-gauge,
    .mfg-linear-gauge.modern-dark,
    .modern-dark .mfg-oval-gauge,
    .mfg-oval-gauge.modern-dark,
    .mfb-dashboard.modern-dark .mfg-linear-gauge,
    .mfb-dashboard.modern-dark .mfg-oval-gauge {
         --mfg-gauge-stroke: #334155;
        --mfg-gauge-stroke-thickness: 1;
        --mfg-gauge-scale-background: #818cf8;
        --mfg-gauge-scale-stroke: #334155;
        --mfg-gauge-scale-stroke-thickness: 1; 
        --mfg-gauge-pointer-background: #0284c7; /* Radiant ocean blue needle */
        --mfg-gauge-pointer-stroke: #0284c7;
        --mfg-gauge-pointer-stroke-thickness: 1;
        --mfg-gauge-tick-background: #f8fafc; /* Crisp white ticks & dial numbers for high visibility */  
        --mfg-gauge-tick-stroke: #cbd5e1; /* Subdued border stroke */
        --mfg-gauge-tick-stroke-thickness: 1; 
        --mfg-gauge-font-name: 'Segoe UI', Tahoma, Verdana, 'sans-serif';
        --mfg-gauge-font-size: 11; /* Unitless font size! */
        --mfg-gauge-font-style: bold;
    }

/* KPI Trend Indicators */
.mfb-dashboard.modern-dark .mfb-kpi-widget .mfb-kpi-change {
    font-size: 1.1rem;
    font-weight: 600;
    overflow: hidden;
    margin-top: 5px;
}

.mfb-dashboard.modern-dark .mfb-kpi-widget-trend-up .mfb-kpi-change {
    color: #10b981;                                  /* Beautiful Emerald Green for gains */
}

.mfb-dashboard.modern-dark .mfb-kpi-widget-trend-up .mfb-kpi-change:before {
    content: "\2B06 ";
}

.mfb-dashboard.modern-dark .mfb-kpi-widget-trend-down .mfb-kpi-change {
    color: #ef4444;                                  /* Radiant Coral Red for losses */
}

.mfb-dashboard.modern-dark .mfb-kpi-widget-trend-down .mfb-kpi-change:before {
    content: "\2B07 ";
}

/* ========================================================
   DIAGRAMMING STYLING (CSS Custom Properties via mfd-*)
   ======================================================== */

/* Base styling for all diagram nodes */
.mfd-diagramnode.modern-dark,
mfd-diagramnode.modern-dark,
mfd-diagramnode {
    --stroke: #334155;
    --stroke-thickness: 1.5px;
    --font-name: 'Segoe UI', Tahoma, Verdana, sans-serif;
    --font-size: 11px;
    --text-color: #f8fafc;
    --shadow-color: transparent;
    --selected-brush: rgba(219, 39, 119, 0.35); /* Muted Berry from chart series */
    --selected-stroke: #f472b6;                 /* Soft Rose border highlight */
}

/* ShapeNodes - Elevated Card Style (#243044 matching scheduling forms) */
.mfd-shapenode.modern-dark,
mfd-shapenode.modern-dark,
mfd-shapenode {
    --brush: #243044;
    --stroke: #38bdf8;
    --stroke-thickness: 1.5px;
    --text-color: #f8fafc;      
    --selected-brush: rgba(219, 39, 119, 0.35);
    --selected-stroke: #f472b6;
}

/* ContainerNodes */
.mfd-containernode.modern-dark,
mfd-containernode.modern-dark,
mfd-containernode {
    --brush: rgba(36, 48, 68, 0.8);
    --caption-brush: #0f172a;
    --stroke: #334155;
    --stroke-thickness: 1.5px;
    --text-color: #f8fafc;
    --selected-brush: rgba(219, 39, 119, 0.25);
    --selected-stroke: #f472b6;
}

/* TableNodes */
.mfd-tablenode.modern-dark,
mfd-tablenode.modern-dark,
mfd-tablenode {
    --brush: #243044;
    --caption-brush: #0f172a;
    --stroke: #334155;
    --stroke-thickness: 1px;
    --text-color: #f8fafc;
    --vertical-border-stroke: #334155;
    --horizontal-border-stroke: #334155;
    --selected-brush: rgba(219, 39, 119, 0.35);
    --selected-stroke: #f472b6;
}

/* ControlNode wrapper & content */
.mfd-controlnode.modern-dark,
mfd-controlnode.modern-dark,
mfd-controlnode,
.mfd-controlnode {
    background-color: #243044;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px;
    font-family: 'Segoe UI', Tahoma, Verdana, 'sans-serif';
}
.mfd-controlnode.modern-dark button,
mfd-controlnode.modern-dark button,
mfd-controlnode button,
.mfd-controlnode button {
    background-color: #0284c7;
    color: #f8fafc;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}
.mfd-controlnode.modern-dark button:hover,
mfd-controlnode.modern-dark button:hover,
mfd-controlnode button:hover,
.mfd-controlnode button:hover {
    background-color: #38bdf8;
}

/* FreeFormNodes */
.mfd-freeformnode.modern-dark,
mfd-freeformnode.modern-dark,
mfd-freeformnode {
    --brush: #243044;
    --stroke: #0284c7;
    --stroke-thickness: 1.5px;
}

/* Diagram Links / Connectors */
.mfd-diagramlink.modern-dark,
mfd-diagramlink.modern-dark,
mfd-diagramlink {
    --stroke: #0284c7;
    --stroke-thickness: 2px;
    --text-color: #f8fafc;
}

/* Selection & Focus Highlight */
.mfd-diagramitem.modern-dark,
mfd-diagramitem.modern-dark,
mfd-diagramitem {
    --selected-stroke: #f472b6;
    --selected-brush: rgba(219, 39, 119, 0.35);
}

/* properties for the diagram */
.mfd-diagram.modern-dark,
mfd-diagram.modern-dark,
mfd-diagram {
    --back-brush: #0f172a;
}