{
  "screenshots": [
    "/home/centralgoparts/public_html/profitability-period-stats-light-collapsed.png",
    "/home/centralgoparts/public_html/profitability-period-stats-light-expanded.png",
    "/home/centralgoparts/public_html/profitability-period-stats-dark-collapsed.png",
    "/home/centralgoparts/public_html/profitability-period-stats-dark-expanded.png"
  ],
  "cssClasses": [
    "btn",
    "btn-default",
    "btn-sm",
    "col-md-2",
    "col-md-6",
    "col-sm-12",
    "col-sm-4",
    "fa",
    "fa-chart-line",
    "fa-chevron-down",
    "fa-chevron-up",
    "fa-info-circle",
    "row"
  ],
  "stylingIssues": [
    "DARK MODE COLLAPSED: .summary-stats still has white background",
    "DARK MODE EXPANDED: Inner card 0 has white background",
    "DARK MODE EXPANDED: Inner card 1 has white background",
    "DARK MODE EXPANDED: Inner card 2 has white background",
    "DARK MODE EXPANDED: Inner card 3 has white background"
  ],
  "colorValues": {
    "light-collapsed": {
      "DIV": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "8px 0px 0px",
        "display": "block",
        "fontSize": "16px"
      },
      "H4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "block",
        "fontSize": "14px"
      },
      "fa fa-chart-line": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px 8px 0px 0px",
        "display": "inline",
        "fontSize": "14px"
      },
      "SPAN": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(220, 53, 69)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "inline",
        "fontSize": "18px"
      },
      "toggleStatsBtn": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "4px 10px",
        "margin": "0px",
        "display": "block",
        "fontSize": "16px"
      },
      "statsToggleIcon": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "inline",
        "fontSize": "16px"
      },
      "statsToggleText": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "inline",
        "fontSize": "16px"
      },
      "row": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "block",
        "fontSize": "16px"
      },
      "col-md-2 col-sm-4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "5px",
        "margin": "0px",
        "display": "block",
        "fontSize": "16px"
      },
      "detailedStats": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(233, 236, 239) rgb(228, 228, 231) rgb(228, 228, 231)",
        "borderWidth": "1px 0px 0px",
        "padding": "15px 0px 0px",
        "margin": "15px 0px 0px",
        "display": "none",
        "fontSize": "16px"
      },
      "col-md-6 col-sm-12": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "5px",
        "margin": "0px",
        "display": "block",
        "fontSize": "16px"
      },
      "SMALL": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "inline",
        "fontSize": "10px"
      },
      "fa fa-info-circle": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "borderWidth": "0px",
        "padding": "0px",
        "margin": "0px",
        "display": "inline",
        "fontSize": "10px"
      }
    },
    "light-expanded": {
      "expanded-row": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "expanded-col-md-6 col-sm-12": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "expanded-DIV": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "expanded-SMALL": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "expanded-fa fa-info-circle": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      }
    },
    "dark-collapsed": {
      "DIV": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "H4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "fa fa-chart-line": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      },
      "SPAN": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(220, 53, 69)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      },
      "toggleStatsBtn": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "statsToggleIcon": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      },
      "statsToggleText": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      },
      "row": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "col-md-2 col-sm-4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "detailedStats": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(233, 236, 239) rgb(228, 228, 231) rgb(228, 228, 231)",
        "display": "none"
      },
      "col-md-6 col-sm-12": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block"
      },
      "SMALL": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      },
      "fa fa-info-circle": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline"
      }
    },
    "dark-expanded": {
      "DIV": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "H4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "fa fa-chart-line": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "SPAN": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(220, 53, 69)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "toggleStatsBtn": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "statsToggleIcon": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "statsToggleText": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "row": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "col-md-2 col-sm-4": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "detailedStats": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(233, 236, 239) rgb(228, 228, 231) rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "col-md-6 col-sm-12": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(9, 9, 11)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "block",
        "visibility": "visible"
      },
      "SMALL": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      },
      "fa fa-info-circle": {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "color": "rgb(108, 117, 125)",
        "borderColor": "rgb(228, 228, 231)",
        "display": "inline",
        "visibility": "visible"
      }
    }
  },
  "htmlStructure": "<div class=\"summary-stats\" style=\"padding: 12px 20px;\">\n            <!-- Compact Header with Toggle -->\n            <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;\">\n                <h4 style=\"margin: 0; font-size: 14px; font-weight: 600;\">\n                    <i class=\"fa fa-chart-line\" style=\"margin-right: 8px;\"></i>\n                    Period Statistics\n                    <span style=\"font-size: 12px; font-weight: 400; color: #6c757d; margin-left: 8px;\">\n                        <!--[if BLOCK]><![endif]-->                            (Aug 01 - Aug 31, 2025)\n                        <!--[if ENDBLOCK]><![endif]-->\n                    </span>\n                </h4>\n                <button type=\"button\" class=\"btn btn-sm btn-default\" id=\"toggleStatsBtn\" onclick=\"toggleStats()\" style=\"padding: 4px 10px;\">\n                    <i class=\"fa fa-chevron-up\" id=\"statsToggleIcon\"></i>\n                    <span id=\"statsToggleText\">Collapse Details</span>\n                </button>\n            </div>\n\n            <!-- Compact Summary Row (Always Visible) -->\n            <div class=\"row\" style=\"margin: 0;\">\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center; border-right: 1px solid #e9ecef;\">\n                        <div style=\"font-size: 18px; font-weight: bold; color: #212529;\">3,876</div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">Orders</div>\n                    </div>\n                </div>\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center; border-right: 1px solid #e9ecef;\">\n                        <div style=\"font-size: 18px; font-weight: bold; color: #212529;\">$494,001</div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">Revenue</div>\n                    </div>\n                </div>\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center; border-right: 1px solid #e9ecef;\">\n                        <div style=\"font-size: 18px; font-weight: bold; color: #212529;\">27.9%</div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">Avg Margin %</div>\n                    </div>\n                </div>\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center; border-right: 1px solid #e9ecef;\">\n                        <div style=\"font-size: 18px; font-weight: bold;\">\n                            <span style=\"color: #28a745;\">4531</span>\n                            <span style=\"color: #6c757d; font-size: 14px;\">/</span>\n                            <span style=\"color: #dc3545;\">124</span>\n                        </div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">Profit Split</div>\n                    </div>\n                </div>\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center; border-right: 1px solid #e9ecef;\">\n                        <div style=\"font-size: 18px; font-weight: bold; color: #dc3545;\">\n                            76.7%\n                        </div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">COGS %</div>\n                    </div>\n                </div>\n                <div class=\"col-md-2 col-sm-4\" style=\"padding: 5px;\">\n                    <div style=\"text-align: center;\">\n                        <div style=\"font-size: 18px; font-weight: bold; color: #28a745;\">\n                            99.4%\n                        </div>\n                        <div style=\"font-size: 10px; color: #6c757d; text-transform: uppercase;\">Data Accuracy</div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Detailed Stats (Collapsible) -->\n            <div id=\"detailedStats\" style=\"display: block; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgb(233, 236, 239);\">\n                <div class=\"row\" style=\"margin: 0;\">\n                    <!-- Orders & Revenue -->\n                    <div class=\"col-md-6 col-sm-12\" style=\"padding: 5px;\">\n                        <div style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;\">\n                            <div style=\"font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; letter-spacing: 0.5px;\">Orders &amp; Revenue</div>\n                            <div style=\"display: flex; justify-content: space-around;\">\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">4,655</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Total Items</div>\n                                </div>\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">$106.12</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Avg Item Price</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Profitability -->\n                    <div class=\"col-md-6 col-sm-12\" style=\"padding: 5px;\">\n                        <div style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;\">\n                            <div style=\"font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; letter-spacing: 0.5px;\">Profitability</div>\n                            <div style=\"display: flex; justify-content: space-around;\">\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">$29.58</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Avg Margin/Item</div>\n                                </div>\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">$356,287</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Total Margin</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"row\" style=\"margin: 0;\">\n                    <!-- COGS Details -->\n                    <div class=\"col-md-6 col-sm-12\" style=\"padding: 5px;\">\n                        <div style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;\">\n                            <div style=\"font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; letter-spacing: 0.5px;\">COGS Breakdown</div>\n                            <div style=\"display: flex; justify-content: space-around;\">\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">$378,720</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Total COGS</div>\n                                </div>\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #212529;\">$81.36</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Avg COGS/Item</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Data Accuracy Details -->\n                    <div class=\"col-md-6 col-sm-12\" style=\"padding: 5px;\">\n                        <div style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;\">\n                            <div style=\"font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; letter-spacing: 0.5px;\">Data Accuracy Breakdown</div>\n                            <div style=\"display: flex; justify-content: space-around;\">\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #28a745;\">4,620</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">High</div>\n                                </div>\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #ffc107;\">17</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Medium</div>\n                                </div>\n                                <div style=\"text-align: center;\">\n                                    <div style=\"font-size: 20px; font-weight: bold; color: #dc3545;\">18</div>\n                                    <div style=\"font-size: 10px; color: #6c757d; margin-top: 4px;\">Low</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div style=\"text-align: center; margin-top: 8px;\">\n                    <small style=\"color: #6c757d; font-size: 10px;\">\n                        <i class=\"fa fa-info-circle\"></i> Accuracy Formula: ((High × 100%) + (Medium × 50%)) / Total Items\n                    </small>\n                </div>\n            </div>\n        </div>"
}