/* JGasFlow brand — the JPharmaPlus look (Saqib, 29-Sep-2026: "keep the color theme like jpharmaplus").
   Loaded AFTER design-system.css and app.css, so it wins over both. design-system.css is
   the base design system and must never be hand-edited — every colour change for the brand goes here.
   The dark "Control" theme is left as it was. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root, :root[data-theme="modern"], :root[data-theme="industry"] {
  /* page */
  --color-bg: #f2f7f4;
  --color-surface: #ffffff;
  --color-text: #14231c;
  --color-divider: #e6efe9;

  /* brand green and its ramp (100 = palest … 900 = darkest) */
  --color-accent: #0e9e63;
  --color-accent-100: #e7f7ef;
  --color-accent-200: #c9eedb;
  --color-accent-300: #9fdfbf;
  --color-accent-400: #5cc795;
  --color-accent-500: #22b476;
  --color-accent-600: #0b7d4e;
  --color-accent-700: #0b7d4e;
  --color-accent-800: #09613d;
  --color-accent-900: #064329;
  --color-accent-2: #0d9488;
  --color-accent-2-100: #e6f6f4;
  --color-accent-2-800: #0b5f58;

  /* neutrals with the same green tint as the page */
  --color-neutral-100: #f5f9f7;
  --color-neutral-200: #e6efe9;
  --color-neutral-300: #d3ded8;
  --color-neutral-400: #b3c2bb;
  --color-neutral-500: #8a9c95;
  --color-neutral-600: #6c8079;
  --color-neutral-700: #52645d;
  --color-neutral-800: #34443e;
  --color-neutral-900: #14231c;

  /* type and shape */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);

  /* status colours (JPharmaPlus) */
  --warn-text: #b86e10;
  --danger-strong: #e5484d;

  /* chart palette: green first */
  --ch-1: #0e9e63; --ch-2: #0d9488; --ch-3: #e6952b; --ch-4: #7c5cff; --ch-5: #94a3b8;
}

/* cards, panels and dialogs: white, 14 px corners, soft shadow */
:root[data-theme="modern"] .blueprint, :root[data-theme="modern"] .card, :root[data-theme="modern"] .dialog,
:root[data-theme="industry"] .blueprint, :root[data-theme="industry"] .card, :root[data-theme="industry"] .dialog {
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 14px; box-shadow: var(--shadow-sm);
}
:root[data-theme="industry"] .corner { display: none; }
:root[data-theme="modern"] .btn, :root[data-theme="modern"] .input, :root[data-theme="modern"] .seg,
:root[data-theme="industry"] .btn, :root[data-theme="industry"] .input, :root[data-theme="industry"] .seg { border-radius: 9px; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: #0b7d4e; border-color: #0b7d4e; color: #fff; }
.btn-primary:active { background: #09613d; }
body { font-size: 14.5px; }

/* the left menu: dark green gradient, active link a green pill with a glow */
.sidebar {
  --sb-bg: #0c2b21; --sb-fg: #c9d4d0; --sb-muted: #8fa89e; --sb-line: rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #0c2b21, #0f3d2d); color: var(--sb-fg);
}
.sidebar .nl { color: #aebfb8; border-radius: 9px; margin: 1px 10px; border-left: 0; font-weight: 500; }
.sidebar .nl:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .nl[aria-current="page"] { background: var(--color-accent); color: #fff; box-shadow: 0 6px 16px rgba(14, 158, 99, .4); }
.sidebar .seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.sidebar .sidebar-name { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.02em; }

/* the top bar: white, like JPharmaPlus */
.topbar { background: var(--color-surface); }

/* ── status colours (Build conventions B.6, J.5; brief 9.1 and 10). <x-status-tag> draws tag-<tone> from the registry:
   good = green, neutral = grey, info = blue, warn = amber, bad = red. The brand green is the "good" green. ── */
:root {
  --good-bg: #e7f7ef;  --good-fg: #0b7d4e;  --good-line: #9fdfbf;
  --info-bg: #e8f1fd;  --info-fg: #1d5fb8;  --info-line: #a9c8f2;
  --warn-bg: #fdf3e3;  --warn-fg: #9a5b0b;  --warn-line: #f0c985;  --warn-strong: #e6952b;
  --bad-bg:  #fdecec;  --bad-fg:  #b3261e;  --bad-line:  #f0a9ab;  --bad-strong:  #e5484d;
  --danger-bg: #fdecec; --danger-border: #f0a9ab; --danger-text: #b3261e; --danger-strong: #e5484d;
}
[data-theme="control"] {
  --good-bg: #12301f;  --good-fg: #7fdcac;  --good-line: #2f6b4b;
  --info-bg: #13253d;  --info-fg: #9cc4f5;  --info-line: #2c4d78;
  --warn-bg: #3a2a12;  --warn-fg: #f5c16c;  --warn-line: #7a5520;  --warn-strong: #f0a33a;
  --bad-bg:  #3a1618;  --bad-fg:  #f6b3b3;  --bad-line:  #7a2c30;  --bad-strong:  #f07470;
  --danger-bg: #3a1618; --danger-border: #7a2c30; --danger-text: #f6b3b3; --danger-strong: #f07470;
}
.tag-good    { background: var(--good-bg); color: var(--good-fg); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-info    { background: var(--info-bg); color: var(--info-fg); }
.tag-warn    { background: var(--warn-bg); color: var(--warn-fg); }
.tag-bad     { background: var(--bad-bg); color: var(--bad-fg); }
[data-theme="control"] .tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* messages: ok = green (the .flash of app.css), warn = amber, err = red */
.flash.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); }

/* the red button: ends a document (<x-cancel-form>) — never used for anything else */
.btn-danger { background: var(--bad-strong); border-color: var(--bad-strong); color: #fff; }
.btn-danger:hover { background: #c93a3f; border-color: #c93a3f; color: #fff; }
[data-theme="control"] .btn-danger { color: #15171a; }

/* a field with a validation message */
.field.error .input, .field.error .ss-control, .field.error .money-input .input { border-color: var(--bad-strong); }
.field .err { color: var(--bad-fg); }