/* ==================================================================
   Omnissa Sizer by Niyyasoft — niyyasoft.com palette
   ink #0B0B0B · paper #FAF9F6 · pink #F06FA8 · amber #EDC22E · green #3ECF8E
   ================================================================== */
:root {
  --ink: #0B0B0B;
  --ink-2: #161616;
  --paper: #FAF9F6;
  --paper-2: #F3F1EC;
  --line: #E4E1D9;
  --muted: #6B6B66;
  --pink: #F06FA8;
  --pink-ink: #D6336C;
  --amber: #EDC22E;
  --green: #3ECF8E;
  --green-ink: #0E8A5A;
  --blue-ink: #2B579A;
  --red-ink: #B42318;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 16px rgba(11, 11, 11, .05);

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 11, 11, 11;
  --bs-link-hover-color: var(--pink-ink);
  --bs-link-hover-color-rgb: 214, 51, 108;
  --bs-primary: #0B0B0B;
  --bs-primary-rgb: 11, 11, 11;
}

body { background: var(--paper); color: var(--ink); font-size: .925rem; -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 2px; color: var(--ink); }
a:hover { color: var(--pink-ink); }
main a:not(.btn):not(.nav-link):not(.badge):not(.dropdown-item) { text-decoration-color: rgba(214, 51, 108, .45); }
.text-muted, .form-text { color: var(--muted) !important; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---------- brand ---------- */
.os-navbar { background: var(--ink); }
.os-navbar .nav-link { color: rgba(255,255,255,.72); font-weight: 500; border-radius: 10px; padding: .45rem .8rem; }
.os-navbar .nav-link:hover, .os-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.os-brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.os-brand img { width: 34px; height: 34px; }
.os-wordmark { font-weight: 900; font-size: 1.15rem; letter-spacing: -.035em; line-height: 1; }
.os-by { display: block; font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.os-dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.os-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.os-dots i:nth-child(1) { background: var(--pink); } .os-dots i:nth-child(2) { background: var(--amber); } .os-dots i:nth-child(3) { background: var(--green); }

/* ---------- surfaces ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; padding: .9rem 1.2rem; }
.card-body { padding: 1.2rem; }
.section-label { display: flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.section-label span { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }
.page-title { font-weight: 800; letter-spacing: -.02em; }
.hero { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.6rem 1.8rem; }
.hero .text-muted { color: rgba(255,255,255,.62) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--pink-ink); --bs-btn-hover-border-color: var(--pink-ink); --bs-btn-active-bg: #a8204f; --bs-btn-disabled-bg: #55554f; --bs-btn-disabled-border-color: #55554f; }
.btn-outline-primary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: var(--ink); }
.btn-accent { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.btn-accent:hover { background: var(--pink-ink); color: #fff; }

/* ---------- KPIs ---------- */
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; height: 100%; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-accent, var(--pink)); }
.kpi .kpi-label { font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kpi .kpi-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kpi .kpi-sub { font-size: .78rem; color: var(--muted); }

/* ---------- classification badges ---------- */
.cls { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .14rem .45rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.cls-official { background: #EEF3FB; color: var(--blue-ink); border-color: #C9D7EF; }
.cls-customer { background: #E7F7F0; color: var(--green-ink); border-color: #BDE8D3; }
.cls-assumption { background: #FFF8E6; color: #9A6700; border-color: #EFDFAF; }
.cls-calculated { background: var(--paper-2); color: #55554f; border-color: var(--line); }
.cls-vendor_validation { background: #FDECEC; color: var(--red-ink); border-color: #F5C2C0; }

.sev-error { color: var(--red-ink); } .sev-warning { color: #9A6700; } .sev-vendor_validation { color: var(--blue-ink); } .sev-info { color: var(--muted); }
.finding { border-left: 3px solid var(--line); padding: .45rem .75rem; margin-bottom: .45rem; background: #fff; border-radius: 0 10px 10px 0; }
.finding.error { border-color: var(--red-ink); } .finding.warning { border-color: var(--amber); } .finding.vendor_validation { border-color: var(--blue-ink); } .finding.info { border-color: var(--line); }

/* ---------- project layout ---------- */
.project-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 991.98px) { .project-shell { grid-template-columns: minmax(0, 1fr); } }
.min-w-0 { min-width: 0; }
.step-nav { position: sticky; top: 1rem; }
.step-nav .nav-link { display: flex; align-items: center; gap: .55rem; color: var(--ink); border-radius: 10px; padding: .42rem .65rem; font-weight: 500; font-size: .88rem; }
.step-nav .nav-link:hover { background: var(--paper-2); }
.step-nav .nav-link.active { background: var(--ink); color: #fff; }
.step-nav .nav-link .step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; background: #fff; color: var(--muted); }
.step-nav .nav-link.done .step-dot { background: var(--green); border-color: var(--green); color: var(--ink); }
.step-nav .nav-link.active .step-dot { border-color: #fff; }
.step-nav .group-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin: .8rem .65rem .35rem; }
.progress { height: 6px; background: var(--paper-2); border-radius: 99px; }
.progress-bar { background: linear-gradient(90deg, var(--pink), var(--amber), var(--green)); }

/* ---------- forms ---------- */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select { border-radius: 10px; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--pink); box-shadow: 0 0 0 .2rem rgba(240, 111, 168, .2); }
.input-group-text { background: var(--paper-2); border-color: var(--line); font-size: .8rem; color: var(--muted); }
.tip { color: var(--muted); cursor: help; font-size: .85rem; }
fieldset.os-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem .4rem; margin-bottom: 1.1rem; background: #fff; }
fieldset.os-fieldset > legend { float: none; width: auto; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 .4rem; margin: 0; }
.form-actions { position: sticky; bottom: 0; background: rgba(250, 249, 246, .94); backdrop-filter: blur(4px); border-top: 1px solid var(--line); padding: .8rem 0; margin-top: 1rem; z-index: 5; }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; font-size: .86rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; border-bottom-width: 1px; white-space: nowrap; }
.table-ink thead th { background: var(--ink); color: #fff; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-sm td, .table-sm th { padding: .4rem .5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }

/* ---------- diagrams ---------- */
.diagram-frame { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; height: 70vh; min-height: 420px; position: relative; }
.diagram-frame svg { width: 100%; height: 100%; display: block; }
.diagram-toolbar { position: absolute; right: .6rem; top: .6rem; z-index: 3; display: flex; gap: .3rem; }
.diagram-toolbar .btn { background: #fff; border: 1px solid var(--line); }

/* ---------- misc ---------- */
.trace-step { border-bottom: 1px dashed var(--line); padding: .6rem 0; }
.trace-step:last-child { border-bottom: 0; }
.trace-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; background: var(--paper-2); border-radius: 8px; padding: .2rem .5rem; display: inline-block; }
.alert { border-radius: 12px; }
.alert-gate { background: #FDECF3; border: 1px solid #F7C4DA; color: var(--ink); }
.disclaimer { font-size: .78rem; color: var(--muted); }
.chart-box { position: relative; height: 260px; }
footer.os-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
/* niyyasoft.com's gate.js appends its own <niyya-bar> under every app; this app has its own footer. */
niyya-bar { display: none !important; }

@media print {
  .os-navbar, .step-nav, .form-actions, .diagram-toolbar, .no-print, footer.os-footer { display: none !important; }
  .project-shell { display: block; }
  .card { box-shadow: none; break-inside: avoid; }
  .diagram-frame { height: auto; border: 0; }
  body { background: #fff; }
}