/* ============================================================
   StackUI Widget: financial-graph  (scoped styles — ALL variants)
   ------------------------------------------------------------
   Everything is scoped under .stk-financial-graph so it can never
   leak into other widgets or fight the core.

   Variants covered:
     - overview  (col-12)  three ECharts bar/line charts in cards

   REMOVED vs the original ref-template (now provided by core):
     - Google-font @import, * reset, base body/p/a  -> core + tokens
     - .container + media queries                    -> Bootstrap
     - .row / .col-* grid                            -> Bootstrap grid
     - generic utils (.mt-0, .mb-0)                  -> Bootstrap

   KEPT (widget-specific — needed for fidelity), all scoped:
     card / card-body overrides, .financial-graph card-title +
     card-description, custom spacing (.mb-24, responsive .mb-sm-24).

   NOTE: chart colors/fonts (#57cc34, #000, 'Noto Sans Thai') live
   in financial-graph.js and are intentionally NOT tokenized.
   ============================================================ */

.stk-financial-graph {
  /* original :root tokens, moved onto the widget scope */
  --text-header: #000000;
  --text-sub-header: #888888;
  --bg-card: #FAFBFD;
  --border-radius-medium: 8px;
}

/* ----- widget-scoped custom spacing (override Bootstrap within widget) ----- */
.stk-financial-graph .mb-24 { margin-bottom: 24px; }

@media (max-width: 767px) {
  .stk-financial-graph .mb-sm-24 { margin-bottom: 24px; }
}
@media (max-width: 575px) {
  .stk-financial-graph .mb-sm-24 { margin-bottom: 16px; }
}

/* ----- Card (custom in the original style.css) ----- */
.stk-financial-graph .card {
  padding: 24px;
  background-color: var(--bg-card);
  border-radius: var(--border-radius-medium);
  border: none;
}

.stk-financial-graph .card-body {
  padding: 0;
}

@media (max-width: 575px) {
  .stk-financial-graph .card {
    padding: 20px;
  }
}

/* ============================================================
   Variant: overview (col-12) — financial-graph specific
   ============================================================ */
.stk-financial-graph .financial-graph .card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-header);
  padding-bottom: 8px;
}

.stk-financial-graph .financial-graph .card-description {
  font-size: 14px;
  color: var(--text-sub-header);
}