/* ---------------------------------------------------------------------------
   Stripe-inspired platform theme. Mirrors the design tokens used in
   mlmargin-site/src/styles/global.css so the marketing site and the in-app
   experience share the same visual language: warm whites, deep navy ink,
   signature purple-blue accent, cyan secondary, Inter type.
--------------------------------------------------------------------------- */

:root {
    /* surfaces */
    --color-bg: #ffffff;
    --color-bg-soft: #f6f9fc;
    --color-bg-deep: #0a2540;

    /* ink */
    --color-ink: #0a2540;
    --color-ink-muted: #425466;
    --color-ink-faint: #697386;

    /* lines */
    --color-border: #e3e8ee;
    --color-border-soft: #eef1f6;

    /* accent */
    --color-accent: #635bff;
    --color-accent-hover: #5048e5;
    --color-accent-soft: #f0eeff;
    --color-cyan: #00d4ff;

    /* type */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* radii */
    --radius-card: 12px;
    --radius-pill: 999px;

    /* shadows */
    --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.04), 0 4px 16px rgba(10, 37, 64, 0.06);
    --shadow-cta: 0 1px 2px rgba(99, 91, 255, 0.16), 0 4px 12px rgba(99, 91, 255, 0.18);
}

html, body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--color-ink);
    background: var(--color-bg);
}

::selection {
    background: var(--color-accent);
    color: #fff;
}

a, .btn-link {
    color: var(--color-accent);
}

a:hover, .btn-link:hover {
    color: var(--color-accent-hover);
}

/* Bootstrap primary button → Stripe purple, with a radius that matches
   AntDesign Button's default so a Bootstrap-rendered button next to an
   AntDesign Button on the same page reads as one design system. */
.btn,
.btn-primary {
    border-radius: 6px;
}

.btn-primary {
    color: #fff;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:hover, .btn-primary:focus {
    color: #fff;
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-cta);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(99, 91, 255, 0.45);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #1ea672;
}

.invalid {
    outline: 1px solid #d8443c;
}

.validation-message {
    color: #d8443c;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border);
}

/* ---------------------------------------------------------------------------
   AntDesign Blazor overrides. Specificity-targeted instead of LESS recompile;
   covers the elements that show on every page (primary buttons, links, focus
   rings, card surfaces). Components not listed keep AntDesign defaults until
   they trip the eye.
--------------------------------------------------------------------------- */

.ant-btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: none;
}

.ant-btn-primary:not(:disabled):hover,
.ant-btn-primary:not(:disabled):focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-cta);
}

.ant-btn-primary[disabled],
.ant-btn-primary[disabled]:hover {
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-ink-faint);
}

.ant-btn-dangerous.ant-btn-primary {
    background-color: #d8443c;
    border-color: #d8443c;
}

.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous) {
    border-color: var(--color-border);
    color: var(--color-ink);
}

.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.ant-card,
.ant-modal-content {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-soft);
}

.ant-card-head {
    border-bottom: 1px solid var(--color-border-soft);
}

.ant-card-head-title {
    color: var(--color-ink);
    font-weight: 600;
}

.ant-input,
.ant-input-number,
.ant-select-selector,
.ant-picker {
    border-color: var(--color-border) !important;
    border-radius: 8px !important;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-number:focus,
.ant-input-number-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15) !important;
}

.ant-table-thead > tr > th {
    background: var(--color-bg-soft);
    color: var(--color-ink-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-soft);
}

/* Decision Making Report: force genuinely compact rows. AntDesign's own "small" size only
   trims padding a little, so tighten the cell padding and type directly. Scoped to the report's
   wrapper so other tables keep their default density. */
.dmr-compact-table .ant-table-tbody > tr > td,
.dmr-compact-table .ant-table-thead > tr > th {
    padding: 6px 10px;
    font-size: 0.82rem;
}

/* Keep every cell on a single line — the wide text columns (SKU, name, supplier) use the column's
   Ellipsis to clip + tooltip; this backstop stops the short/number cells from wrapping too.
   Horizontal scroll + the pinned identity columns are handled natively by the table's ScrollX +
   Fixed="Left" — no CSS overflow override here, which previously leaked the scroll to the page. */
.dmr-compact-table .ant-table-tbody > tr > td {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   QSC decision visualization shell — the landing page's CrpsViz design language
   (viz-shell / viz-bar / seg / counter / detail-h / legend), themed with the
   app's Stripe tokens. The DOM is built by qsc-viz.js, so these are global.
--------------------------------------------------------------------------- */
.viz-shell { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); overflow: visible; }
.viz-bar { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-border-soft); }
.viz-bar .grp { display: flex; align-items: center; gap: 8px; }
.viz-bar label { font-size: 11px; color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.viz-bar .counter, .viz-shell .counter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--color-ink-muted); }
.viz-bar .seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.viz-bar .seg button { border: 0; background: transparent; padding: 4px 10px; font-size: 12px; color: var(--color-ink-muted); cursor: pointer; }
.viz-bar .seg button.on { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.viz-body { padding: 14px 18px; }
.viz-body .detail-h { font-size: 11px; color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.viz-shell .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--color-ink-muted); }
.viz-shell .legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-empty { color: var(--color-ink-muted); padding: 24px; }
.viz-bar input[type="text"] { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; }
.viz-bar select { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; background: var(--color-bg); color: var(--color-ink-muted); }
.btn-accent { background: var(--color-accent); color: #fff; border: 0; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.btn-accent:disabled { opacity: 0.45; cursor: default; }
.qsc-results { position: absolute; top: 100%; left: 54px; z-index: 30; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(10,37,64,0.12); min-width: 280px; }
.qsc-hit { padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.qsc-hit:hover { background: var(--color-bg-soft); }
.qsc-hit span { color: var(--color-ink-faint); margin-left: 6px; }
.qsc-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 0; }
.qsc-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.qsc-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 13px; }

/* Budget threshold highlight. Rows are RoR-ranked, so the affordable prefix is the "buy now" set:
   mark it with an accent bar on the leading cell. Recommended rows beyond the budget are muted to
   read as "profitable but deferred". The boundary between the two IS the budget threshold. */
.dmr-within-budget > td:first-child {
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.dmr-over-budget > td {
    color: var(--color-ink-faint);
    background: #fafbfc;
}

.ant-tooltip-inner {
    background: var(--color-bg-deep);
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
}

.ant-tooltip-arrow-content,
.ant-tooltip-arrow::before {
    background: var(--color-bg-deep);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-card);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Login: the show-password control. Static-rendered page, so it is a plain checkbox that flips the
   input's type — see LoginForm.razor. */
.login-reveal {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-ink-muted, #697386);
    cursor: pointer;
}

.login-reveal input {
    cursor: pointer;
}

/* The API key, shown once. Monospace and wrapping: it is long, and it gets selected and copied. */
.api-key {
    background: var(--color-surface-sunken, #f6f8fb);
    border: 1px solid var(--color-border-soft, #eef1f6);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
    white-space: pre-wrap;
    user-select: all;
}