/* Citrix Sizer by Niyyasoft - theme on top of Bootstrap 5.3.
   Citrix-led: Citrix Blue header and actions on a clean white page (colours
   measured on citrix.com), with the niyyasoft.com accents - pink, amber and
   green - in the logo dots, stat bars and progress bar. Dark-mode blues
   (#4D8BFF, #8FB3FF) are lighter steps of Citrix Blue for contrast; the
   chart slots are validated for colour-vision deficiency in both modes. */

:root {
  /* Citrix (citrix.com) */
  --cx-blue: #0045DB;
  --cx-blue-deep: #003894;
  --cx-blue-bright: #1C69F2;
  --cx-teal: #00687A;
  --cx-mint: #C2FFD0;

  /* Niyyasoft (niyyasoft.com) */
  --cs-ink: #0B0B0B;
  --cs-ink-2: #161616;
  --cs-pink: #F06FA8;
  --cs-amber: #EDC22E;
  --cs-green: #3ECF8E;
  --cs-green-ink: #1F8A5B;
  --cs-amber-ink: #8A6D00;
  --cs-pink-ink: #B3346E;

  /* Surfaces and roles */
  --cs-paper: #FFFFFF;
  --cs-paper-2: #F2F5FC;
  --cs-line: #DCE3F2;
  --cs-muted: #6B6B66;
  --cs-card: #FFFFFF;
  --cs-header-bg: var(--cx-blue);
  --cs-action: var(--cx-blue);
  --cs-action-hover: var(--cx-blue-deep);
  --cs-action-active: #002C75;
  --cs-accent-line: var(--cx-blue);
  --cs-focus-ring: rgba(0, 69, 219, .18);
  --cs-blue: var(--cx-blue-deep);
  --cs-done: var(--cx-mint);
  --cs-guest-bg: var(--cx-mint);
  --cs-guest-line: #8BE3A0;
  --cs-guest-ink: var(--cx-teal);

  /* Chart slots, in fixed order (dataviz-validated) */
  --cs-chart-1: #0045DB;
  --cs-chart-2: #F06FA8;
  --cs-chart-3: #1F8A5B;

  --cs-radius: 16px;
  --cs-shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 16px rgba(11, 11, 11, .04);
  --cs-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bs-body-font-family: var(--cs-font);
  --bs-body-bg: var(--cs-paper);
  --bs-body-color: var(--cs-ink);
  --bs-border-color: var(--cs-line);
  --bs-secondary-color: var(--cs-muted);
  --bs-link-color: #0045DB;
  --bs-link-hover-color: #003894;
  --bs-link-color-rgb: 0, 69, 219;
  --bs-emphasis-color: var(--cs-ink);
}

:root[data-theme="dark"] {
    --cs-paper: #0B1220;
    --cs-paper-2: #111A2E;
    --cs-line: #22304D;
    --cs-muted: #9AA6B8;
    --cs-card: #0F182B;
    --cs-header-bg: var(--cx-blue-deep);
    --cs-action: var(--cx-blue-bright);
    --cs-action-hover: var(--cx-blue);
    --cs-action-active: var(--cx-blue-deep);
    --cs-accent-line: #4D8BFF;
    --cs-focus-ring: rgba(77, 139, 255, .3);
    --cs-blue: #4D8BFF;
    --cs-done: var(--cx-mint);
    --cs-guest-bg: #0F2A1B;
    --cs-guest-line: #1F5C36;
    --cs-guest-ink: var(--cx-mint);
    --cs-chart-1: #4D8BFF;
    --cs-chart-2: #E0609A;
    --cs-chart-3: #1E8A5A;
    --bs-body-bg: #0B1220;
    --bs-body-color: #ECEBE7;
    --bs-emphasis-color: #FFFFFF;
    --bs-border-color: #22304D;
    --bs-secondary-color: #9AA6B8;
    --bs-link-color: #8FB3FF;
    --bs-link-hover-color: #C2D5FF;
    --bs-link-color-rgb: 143, 179, 255;
    --bs-tertiary-bg: #111A2E;
    --bs-secondary-bg: #111A2E;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --cs-paper: #0B1220;
      --cs-paper-2: #111A2E;
      --cs-line: #22304D;
      --cs-muted: #9AA6B8;
      --cs-card: #0F182B;
      --cs-header-bg: var(--cx-blue-deep);
      --cs-action: var(--cx-blue-bright);
      --cs-action-hover: var(--cx-blue);
      --cs-action-active: var(--cx-blue-deep);
      --cs-accent-line: #4D8BFF;
      --cs-focus-ring: rgba(77, 139, 255, .3);
      --cs-blue: #4D8BFF;
      --cs-done: var(--cx-mint);
      --cs-guest-bg: #0F2A1B;
      --cs-guest-line: #1F5C36;
      --cs-guest-ink: var(--cx-mint);
      --cs-chart-1: #4D8BFF;
      --cs-chart-2: #E0609A;
      --cs-chart-3: #1E8A5A;
      --bs-body-bg: #0B1220;
      --bs-body-color: #ECEBE7;
      --bs-emphasis-color: #FFFFFF;
      --bs-border-color: #22304D;
      --bs-secondary-color: #9AA6B8;
      --bs-link-color: #8FB3FF;
      --bs-link-hover-color: #C2D5FF;
      --bs-link-color-rgb: 143, 179, 255;
      --bs-tertiary-bg: #111A2E;
      --bs-secondary-bg: #111A2E;
      color-scheme: dark;
}
}

body { background: var(--cs-paper); color: var(--bs-body-color); font-family: var(--cs-font); font-feature-settings: "tnum" 1; }
.tabular, td, .num { font-variant-numeric: tabular-nums; }

/* ---------- brand ---------- */
.cs-wordmark { font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.cs-dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.cs-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cs-dots i:nth-child(1) { background: var(--cs-pink); }
.cs-dots i:nth-child(2) { background: var(--cs-amber); }
.cs-dots i:nth-child(3) { background: var(--cs-green); }

.cs-nav { background: var(--cs-header-bg); }
.cs-nav .navbar-brand { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.cs-nav .navbar-brand img { width: 30px; height: 30px; }
.cs-nav .brand-sub { color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.cs-nav .nav-link { color: rgba(255, 255, 255, .72); font-weight: 500; border-radius: 10px; padding: .45rem .8rem !important; }
.cs-nav .nav-link:hover, .cs-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, .14); }
.cs-nav .dropdown-menu { border-radius: 12px; border-color: var(--cs-line); box-shadow: var(--cs-shadow); }
.cs-nav .navbar-toggler { border-color: rgba(255,255,255,.25); }
.cs-nav .navbar-toggler-icon { filter: invert(1); }
.cs-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cs-pink); color: var(--cs-ink); font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- surfaces ---------- */
.card, .cs-card { background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--cs-line); font-weight: 700; }
.card-header form .form-control, .card-header form .form-select { width: auto; flex: 0 1 auto; font-weight: 400; }
@media (max-width: 576px) { .card-header form .form-control, .card-header form .form-select { width: 100%; } }
.cs-page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin: 1.6rem 0 1.2rem; }
.cs-page-head h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cs-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.text-muted, .form-text { color: var(--cs-muted) !important; }
hr { border-color: var(--cs-line); opacity: 1; }

.btn { border-radius: 10px; font-weight: 600; }
.btn-dark, .btn-primary { --bs-btn-bg: var(--cs-action); --bs-btn-border-color: var(--cs-action); --bs-btn-hover-bg: var(--cs-action-hover); --bs-btn-hover-border-color: var(--cs-action-hover); --bs-btn-active-bg: var(--cs-action-active); --bs-btn-active-border-color: var(--cs-action-active); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-dark { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--cs-line); --bs-btn-hover-bg: var(--cs-paper-2); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--cs-muted); }
.btn-accent { background: var(--cs-pink); border-color: var(--cs-pink); color: var(--cs-ink); }
.btn-accent:hover { background: #e95b9a; border-color: #e95b9a; color: var(--cs-ink); }

.form-control, .form-select { border-radius: 10px; border-color: var(--cs-line); background-color: var(--cs-card); color: var(--bs-body-color); }
.form-control:focus, .form-select:focus { border-color: var(--cs-accent-line); box-shadow: 0 0 0 .2rem var(--cs-focus-ring); }
.form-check-input:checked { background-color: var(--cs-action); border-color: var(--cs-action); }
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.input-group-text { background: var(--cs-paper-2); border-color: var(--cs-line); color: var(--cs-muted); border-radius: 10px; }
.cs-help { cursor: help; color: var(--cs-muted); font-size: .8rem; margin-left: .25rem; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); margin-bottom: 0; }
.table > :not(caption) > * > * { border-color: var(--cs-line); padding: .55rem .65rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-muted); font-weight: 700; background: var(--cs-paper-2); white-space: nowrap; }
.table-hover tbody tr:hover > * { background: var(--cs-paper-2); }
.table-sm > :not(caption) > * > * { padding: .35rem .5rem; }

/* ---------- KPI tiles ---------- */
.cs-stat { padding: 1rem 1.1rem; height: 100%; }
.cs-stat .label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-muted); }
.cs-stat .value { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: .25rem; }
.cs-stat .sub { font-size: .8rem; color: var(--cs-muted); }
.cs-stat .bar { height: 4px; border-radius: 4px; margin-top: .7rem; }

/* ---------- classification badges ---------- */
.cs-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; letter-spacing: .01em; }
.cs-badge-official { background: #E3F7EE; color: #11603F; border-color: #A8E6CA; }
.cs-badge-customer { background: #E8EEF9; color: #1F3F7A; border-color: #BFD0EF; }
.cs-badge-assumption { background: #FBF3D3; color: #6B5300; border-color: #EDD98A; }
.cs-badge-calculated { background: var(--cs-paper-2); color: var(--bs-body-color); border-color: var(--cs-line); }
.cs-badge-validate { background: #FDE7F1; color: #8F1F52; border-color: #F6B9D4; }

.cs-sev-critical { border-left: 4px solid #D7263D; }
.cs-sev-warning { border-left: 4px solid var(--cs-amber); }
.cs-sev-info { border-left: 4px solid #6C8FD1; }
.badge-sev-critical { background: #D7263D; color: #fff; }
.badge-sev-warning { background: var(--cs-amber); color: var(--cs-ink); }
.badge-sev-info { background: #DCE6F7; color: #1F3F7A; }

.cs-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; }
.cs-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-muted); }
.cs-status.blocked::before { background: #D7263D; }
.cs-status.preliminary::before { background: var(--cs-amber); }
.cs-status.reviewed_inputs::before, .cs-status.calculated::before { background: var(--cs-green); }

/* ---------- wizard ---------- */
.cs-stepper { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.cs-step { flex: 1 0 auto; min-width: 104px; text-decoration: none; color: var(--cs-muted); border: 1px solid var(--cs-line); background: var(--cs-card); border-radius: 12px; padding: .45rem .7rem; font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.cs-step .n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-paper-2); color: var(--cs-ink); font-size: .72rem; font-weight: 800; flex: none; }
.cs-step.done .n { background: var(--cs-done); color: var(--cs-ink); }
.cs-step.current { border-color: var(--cs-accent-line); color: var(--bs-body-color); }
.cs-step.current .n { background: var(--cs-action); color: #fff; }
.cs-step:hover { color: var(--bs-body-color); }
.cs-progress { height: 4px; background: var(--cs-line); border-radius: 4px; overflow: hidden; }
.cs-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cs-pink), var(--cs-amber), var(--cs-green)); }
.cs-section-title { font-weight: 800; font-size: 1.05rem; margin: 1.4rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.cs-section-title:first-child { margin-top: 0; }
.cs-pool { border: 1px dashed var(--cs-line); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; background: var(--cs-paper); }
.cs-toggle-card { border: 1px solid var(--cs-line); border-radius: 14px; padding: .9rem 1rem; height: 100%; background: var(--cs-card); cursor: pointer; }
.cs-toggle-card:has(input:checked) { border-color: var(--cs-accent-line); box-shadow: inset 0 0 0 1px var(--cs-accent-line); }
.cs-toggle-card .title { font-weight: 700; }
.cs-sticky-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--cs-paper) 30%); padding: 1rem 0 .8rem; margin-top: 1rem; z-index: 5; }

/* ---------- results ---------- */
.cs-tabs { border-bottom: 1px solid var(--cs-line); gap: .2rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.cs-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--cs-muted); font-weight: 600; font-size: .88rem; white-space: nowrap; padding: .6rem .75rem; }
.cs-tabs .nav-link.active { color: var(--bs-body-color); border-bottom-color: var(--cs-accent-line); background: transparent; }
.cs-formula { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; color: var(--cs-muted); }
.cs-kv dt { color: var(--cs-muted); font-weight: 600; font-size: .85rem; }
.cs-kv dd { font-weight: 600; }
.chart-box { position: relative; height: 260px; }

/* ---------- diagrams ---------- */
.cs-diagram { position: relative; height: 72vh; min-height: 520px; overflow: hidden; background: #fff; border: 1px solid var(--cs-line); border-radius: 14px; cursor: grab; touch-action: none; }
.cs-diagram:active { cursor: grabbing; }
.cs-diagram .canvas { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.cs-diagram .canvas svg { max-width: none !important; height: auto; }
.cs-diagram .toolbar { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; }
/* the diagram canvas stays light in both themes, so its toolbar does too */
.cs-diagram .toolbar .btn { background: #fff; color: #0B0B0B; border-color: #DCE3F2; }
.cs-diagram .toolbar .btn:hover { background: #F2F5FC; color: #0B0B0B; }
.cs-diagram g.node { cursor: pointer; }
.cs-diagram g.node.cs-selected rect { stroke: var(--cs-pink) !important; stroke-width: 3px !important; }
.cs-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--cs-muted); }
.cs-legend .sw { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: .35rem; }
.cs-legend .sw.dash { border-top-style: dashed; }
.cs-legend .box { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .35rem; border: 1.5px solid; }
textarea.cs-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; min-height: 340px; }

/* ---------- login ---------- */
.cs-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.cs-auth .side { background: var(--cs-header-bg); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.cs-auth .side h1 { font-weight: 900; letter-spacing: -.035em; font-size: 2.6rem; line-height: 1.05; }
.cs-auth .side p { color: rgba(255,255,255,.66); max-width: 34rem; }
.cs-auth .main { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.cs-auth .panel { width: 100%; max-width: 420px; }
.cs-provider-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .75rem 1rem; }
.cs-guest-bar { background: var(--cs-guest-bg); border-bottom: 1px solid var(--cs-guest-line); padding: .55rem 0; font-size: .85rem; }
.cs-guest-bar strong { color: var(--cs-guest-ink); }
.cs-or { display: flex; align-items: center; gap: .8rem; color: var(--cs-muted); font-size: .8rem; margin: 1.2rem 0; }
.cs-or::before, .cs-or::after { content: ""; flex: 1; height: 1px; background: var(--cs-line); }
@media (max-width: 900px) { .cs-auth { grid-template-columns: 1fr; } .cs-auth .side { padding: 2rem 1rem; } .cs-auth .side h1 { font-size: 2rem; } }

.cs-footer { color: var(--cs-muted); background: var(--cs-paper-2); font-size: .78rem; border-top: 1px solid var(--cs-line); margin-top: 3rem; padding: 1.2rem 0 2rem; }
.cs-empty { text-align: center; padding: 3rem 1rem; color: var(--cs-muted); }
.cs-icon { width: 1em; height: 1em; vertical-align: -.125em; flex: none; }
.cs-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.cs-truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagination { --bs-pagination-active-bg: var(--cs-action); --bs-pagination-active-border-color: var(--cs-action); --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--cs-card); --bs-pagination-border-color: var(--cs-line); margin-bottom: 0; }
.alert { border-radius: 12px; }

@media (max-width: 576px) {
  .cs-page-head h1 { font-size: 1.35rem; }
  .cs-stat .value { font-size: 1.45rem; }
  .cs-diagram { height: 460px; }
}

@media print {
  .cs-nav, .cs-footer, .no-print, .cs-sticky-actions, .cs-tabs { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .cs-diagram { height: auto; border: none; overflow: visible; }
  .cs-diagram .canvas { position: static; transform: none !important; }
  a[href]::after { content: none; }
}