/* Small post-release layout corrections found during live desktop QA. */

/* Inventory: keep the ledger readable instead of allowing the update controls
   to squeeze the earlier table columns down to single-character wrapping. */
.inventory-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.inventory-table {
    min-width: 1010px;
}

.inventory-table th {
    white-space: nowrap;
}

.inventory-table th:nth-child(1),
.inventory-table td:nth-child(1) {
    min-width: 190px;
}

.inventory-table th:nth-child(2),
.inventory-table td:nth-child(2) {
    min-width: 96px;
    white-space: nowrap;
}

.inventory-table th:nth-child(3),
.inventory-table td:nth-child(3) {
    min-width: 76px;
    white-space: nowrap;
}

.inventory-table th:nth-child(4),
.inventory-table td:nth-child(4) {
    min-width: 112px;
    white-space: nowrap;
}

.inventory-table th:nth-child(5),
.inventory-table td:nth-child(5) {
    min-width: 68px;
    white-space: nowrap;
}

.inventory-table th:nth-child(6),
.inventory-table td:nth-child(6) {
    min-width: 170px;
}

.inventory-table th:nth-child(7),
.inventory-table td:nth-child(7) {
    min-width: 360px;
}

.inventory-inline-form {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    min-width: 340px;
    max-width: 430px;
    align-items: end;
}

.inventory-inline-save {
    min-width: 96px;
}

.inventory-inline-save .button {
    width: 100%;
}

/* Make the long dashboard navigation scrollbar visually belong to the app. */
.v2-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(44, 247, 107, 0.34) transparent;
}

.v2-sidebar::-webkit-scrollbar {
    width: 8px;
}

.v2-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.v2-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(44, 247, 107, 0.30);
    background-clip: padding-box;
}

@media (max-width: 620px) {
    .inventory-inline-form {
        grid-template-columns: repeat(2, minmax(105px, 1fr));
        min-width: 300px;
    }
}

/* DR-012 / DR-013 — was this recommendation useful?
   Sits inside the opportunity card footer, so it has to stay quiet: the
   card's own actions are what the person came for. No inline styles and
   no script, because the control is two ordinary POST forms. */
.opportunity-feedback {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.opportunity-feedback form {
    margin: 0;
}

.opportunity-feedback-label {
    color: var(--text-muted);
    font-size: .84rem;
}

.opportunity-feedback-reason {
    padding: .2rem .55rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: .78rem;
}

.opportunity-feedback-negative > summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 .85rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .55rem;
    color: var(--text-soft);
    cursor: pointer;
    font-size: .86rem;
}

.opportunity-feedback-negative[open] > summary {
    border-color: rgba(255, 255, 255, .3);
}

.opportunity-feedback-negative form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem;
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .7rem;
    background: rgba(0, 0, 0, .18);
}

.opportunity-feedback-negative label {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: .8rem;
}

.opportunity-feedback-negative select {
    box-sizing: border-box;
    min-height: 44px;
    padding: .55rem .7rem;
    border: 1px solid #46516a;
    border-radius: .5rem;
    background: #0b1423;
    color: #f1f5f9;
    color-scheme: dark;
    font: inherit;
}

/* Withdrawing a verdict must stay reachable, but it should not read as
   loudly as giving one. */
.opportunity-feedback-undo {
    min-height: 44px;
    padding: 0 .6rem;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    text-decoration: underline;
}

.opportunity-feedback-undo:hover {
    color: var(--text);
}

.opportunity-feedback-negative > summary:focus-visible,
.opportunity-feedback-negative select:focus-visible,
.opportunity-feedback-undo:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .opportunity-feedback,
    .opportunity-feedback-negative,
    .opportunity-feedback-negative > summary,
    .opportunity-feedback-negative select {
        width: 100%;
    }

    .opportunity-feedback-negative > summary {
        justify-content: center;
    }
}

/* DR-008: the pre-signup demo.
   Form controls are styled here because the existing input rules are scoped
   to .v2-app, and this page is deliberately outside the authenticated shell. */
.demo-badge {
    display: inline-block;
    margin: 1.5rem 0 0.75rem;
}

.demo-form {
    margin: 0 0 2rem;
}

.demo-form fieldset {
    border: 1px solid var(--dr-navy-700, #1A2438);
    border-radius: 10px;
    padding: 1.25rem;
    margin: 0;
}

.demo-form legend {
    padding: 0 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.demo-form-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.demo-field label {
    font-size: 0.875rem;
}

.demo-field :is(input, select) {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dr-navy-700, #1A2438);
    border-radius: 8px;
    background: var(--dr-navy-850, #0C1120);
    color: var(--dr-text, #F8FAFC);
    font: inherit;
    font-size: 1rem;
}

.demo-field-action .button {
    min-height: 44px;
}

.demo-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}

/* A grid item keeps min-width: auto unless told otherwise, which lets a
   long figure push the whole row wider than the viewport. */
.demo-results > * {
    min-width: 0;
}

.demo-score {
    margin: 0.5rem 0 0.25rem;
}

.demo-verdict {
    margin: 0.75rem 0 0;
}

.demo-warning {
    border-left: 2px solid var(--dr-warning, #FFB84D);
    padding-left: 0.75rem;
}

.demo-reasons {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.demo-reasons li + li {
    margin-top: 0.35rem;
}

.demo-cta {
    margin: 1.5rem 0 0;
}

@media (max-width: 720px) {
    .demo-form-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .demo-field-action .button {
        width: 100%;
    }
}