/* ═══════════════════════════════════════════════════════════
   FlowERP Dynamic CSS Bridge — Auto-generated
   Source: FlowERP Theme Settings (DocType)
   ALHADDAQ Information Technology · flowerp.one
   Version: 8.0.0

   Thin VARIABLE layer only. It overrides the design tokens that the
   static stylesheets (flowerp_brand/theme/v15/components.css) read,
   so a single Settings change recolors / resizes the whole theme
   live. Component-level styling lives in the static files — kept out
   of here to avoid duplicated !important wars. Loads last.

   DARK MODE: intentionally handled WITHOUT a separate dark :root here.
   The static [data-theme="dark"] block derives every brand tint / focus
   ring / accent from var(--fp-brand) via color-mix(), and it no longer
   re-sets --fp-brand — so the single --fp-brand we emit below cascades
   into dark mode and a custom brand color recolors both themes.
   ═══════════════════════════════════════════════════════════ */



/* ── Design tokens (override the static defaults) ─────────── */
:root {
  /* Brand — drives the entire static system via --fp-* */
  --fp-brand:         #6BCD7A;
  --fp-brand-600:     #4aa85a;
  --fp-brand-700:     #2d7a3d;

  /* Typography */
  --fp-font:          'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fp-text-base:     13px;

  /* Layout */
  --fp-sidebar-w:     248px;
  --fp-topbar-h:      54px;

  /* Border-radius scale */
  --fp-r-xs:          3px;
  --fp-r-sm:          6px;
  --fp-r-md:          8px;
  --fp-r-lg:          12px;
  --fp-r-xl:          16px;
  --fp-r-2xl:         20px;

  /* Frappe bridge vars so native desk widgets follow the brand */
  --primary:          #6BCD7A;
  --primary-color:    #6BCD7A;
  --brand-color:      #6BCD7A;
  --btn-primary:      #6BCD7A;
  --navbar-height:    54px;

  /* Legacy aliases (back-compat for any older references) */
  --brand:            #6BCD7A;
  --brand-600:        #4aa85a;
  --brand-700:        #2d7a3d;
  --brand-10:         rgba(107,205,122,0.1);
  --brand-20:         rgba(107,205,122,0.2);
  --brand-shadow:     rgba(107,205,122,0.3);
  --sidebar-w:        248px;
  --topbar-h:         54px;
  --font:             var(--fp-font);
  --text-base:        13px;

  /* Frappe's desk typography reads these two — overriding them here replaces
     the old `body … !important` hammer (P3.5): same effect, no specificity
     war, and app CSS that intentionally sets its own font keeps working. */
  --font-stack:       var(--fp-font);
  --font-size-base:   13px;

  /* Brand-derived categorical chart palette (P4.3.4) — consumed by the
     frappe.Chart defaults patch (flowerp_theme.js) and CSS chart chrome */
  --fp-chart-1:      #67CB76;
  --fp-chart-2:      #CB679E;
  --fp-chart-3:      #67CBBF;
  --fp-chart-4:      #CBBB67;
  --fp-chart-5:      #8067CB;
  --fp-chart-6:      #88CB67;
  --fp-chart-7:      #679CCB;
  --fp-chart-8:      #CB6C67;
}


/* ── Settings-driven structural layout (not in static files) ─
   NOTE: sidebar width is deliberately NOT force-set here — Frappe owns
   the desk sidebar's collapse/expand width and forcing it with
   !important would break the collapse toggle. --fp-sidebar-w remains
   available for the .flowerp-ui component library. */
.navbar {
  min-height: var(--fp-topbar-h) !important;
}

/* ── Font size base (settings-driven) ─────────────────────────
   Plain body rule, no !important: this sheet loads LAST (after the
   frappe/website bundles), so the cascade already favours it. Desk
   widgets follow via --font-stack/--text-base above. */
body {
  font-family: var(--fp-font);
  font-size:   var(--fp-text-base);
}