/*
 * WISEcode Intelligence — Brand Theme Rules
 * =========================================================================
 * Semantic, app-wide styling rules derived from the ip-b2b design system
 * (pages/aha.html). This is the single home for "how the brand is applied"
 * — as opposed to tokens.css, which holds the raw values.
 *
 * Loaded AFTER design-system.css + components.css so these rules win over the
 * generated utility classes and the legacy component defaults.
 *
 * Decisions encoded here (from the 2026-06-22 Arthur color & design review):
 *   - Body face is DM Sans (var(--font-family-primary)).
 *   - Noto Serif (var(--font-family-serif)) is the DISPLAY face, used ONLY for:
 *       • H1 headings (only H1 for now, deliberately)
 *       • headlines that sit inside a container/card
 *       • primary / action buttons
 *       • large "main score" numerals in charts (not legends or sub-scores)
 *   - Everything else stays DM Sans.
 * ========================================================================= */

/* ---- Body face: DM Sans everywhere by default --------------------------- */
body {
    font-family: var(--font-family-primary);
}

/* H2–H6 ride the body face (the legacy Poppins display face is retired). */
h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
}

/* ---- Noto Serif: H1 ----------------------------------------------------- */
h1,
.page-title {
    font-family: var(--font-family-serif);
    letter-spacing: -0.01em;
}

/* ---- Noto Serif: headlines inside a container / card -------------------- */
.feature-title,
.drawer-title,
.bottom-sheet-title,
.card-title,
.card-header h2,
.card-header h3,
.section-title,
.report-title,
.chart-card-title,
.upf-card-title,
.card :is(h2, h3, h4):not(.tracking-wide),
.feature-card :is(h2, h3, h4):not(.tracking-wide),
div.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl) :is(h2, h3, h4):not(.tracking-wide) {
    font-family: var(--font-family-serif);
    letter-spacing: -0.01em;
}

/* ---- Noto Serif: primary / action buttons ------------------------------- */
/* "Any sort of button" gets the serif face. App + Bootstrap + Radzen primaries
   are covered; buttons keep their icon on the left or right (markup-driven). */
.primary-action-button,
.drawer-action-primary,
.drawer-action-secondary,
.text-button,
.retry-button,
.btn-primary,
.btn-secondary,
button.btn,
.wise-btn,
.dash-btn,
.rz-button .rz-button-text {
    font-family: var(--font-family-serif);
    letter-spacing: 0;
}

/* ---- Canonical button sizing ------------------------------------------- */
/* The legacy .btn-primary / .btn-secondary (design-system.css) are already
   brand-blue / white pills, but oversized — 24px padding, ~16px font, and a
   hover scale-up. Bring them down to the canonical .wise-btn geometry so every
   primary/secondary button across the app is one consistent size. This is a
   size/shape pass only — the fill colors are left untouched. Loaded after
   design-system.css, so these win. Width utilities (px-8, w-full, flex-1) on
   individual call sites still layer on top. */
.btn-primary,
.btn-secondary {
    gap: 7px;
    padding: 9px 15px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
}
.btn-primary .material-icons,
.btn-secondary .material-icons { font-size: 16px; }
/* Swap the old hover scale for the .wise-btn--primary lift + blue glow. */
.btn-primary { box-shadow: 0 4px 12px rgba(37, 80, 124, 0.25); }
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 80, 124, 0.3);
}
.btn-secondary:hover { transform: translateY(-1px); }

/* ---- Noto Serif: large "main score" chart numerals ---------------------- */
/* Only the headline score numeral — never legends, axis labels or sub-scores. */
.score-value,
.main-score,
.metric-value-lg,
.stat-bignum,
.stat-number,
.upf-stat-num,
.upf-donut-num,
.upf-cmp-num,
.upf-cmp-delta-num,
.c-score,
.pi-c-score,
.card :is(.text-2xl, .text-3xl, .text-5xl).font-bold,
div.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl) :is(.text-2xl, .text-3xl, .text-5xl).font-bold {
    font-family: var(--font-family-serif);
}

/* ---- Rounded container consistency -------------------------------------- */
/* White app containers settle on the 16px app-card radius. Controls keep their
   existing button/input radii because the type selector scopes this to layout
   containers instead of every Tailwind utility use. */
.card,
.feature-card,
div.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl) {
    border-radius: calc(var(--radius-xl) * 1px);
}

/* ---- Circular gauge (Intelligence-reports style) ------------------------ */
/* Generalizes the raised-center-disc + serif-numeral look of the reports'
   UpfDonut (.upf-report .upf-donut-*, reports-upf.css) so any single-value
   progress ring — e.g. the My Foods "audit-ready" gauge — gets the same
   treatment. Usage: a square, position:relative wrapper holding the SVG ring
   (track circle + progress arc) and a .wise-gauge-center overlay. */
.wise-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    pointer-events: none;
}
/* Raised white stat disc — the reports' exact border + soft drop shadow.
   --wise-gauge-disc tunes the disc diameter to the ring thickness (thin rings
   ~74%, thick segmented donuts ~52%); set it on the wrapper to override. */
.wise-gauge-center::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--wise-gauge-disc, 74%);
    height: var(--wise-gauge-disc, 74%);
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 10px 22px rgba(8, 15, 26, .12), 0 3px 8px rgba(8, 15, 26, .08);
}

/* ---- Organization profile form ------------------------------------------ */
.organization-form,
.organization-form * {
    min-width: 0;
}

.organization-form input,
.organization-form select {
    min-width: 0;
}

.organization-form label {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .organization-form .organization-form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .organization-form .organization-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }

    .organization-form .organization-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .organization-form .organization-city-field {
        grid-column: 1 / -1;
    }
}
.wise-gauge-center > * { position: relative; z-index: 1; }
.wise-gauge-num {
    font-family: var(--font-family-serif);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}
.wise-gauge-num .wise-gauge-pct { font-size: 0.6em; font-weight: 700; vertical-align: super; }
.wise-gauge-label {
    margin-top: 3px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-oyster-700);
}

/* =========================================================================
 * PASS 2 (held for visual review, intentionally not enabled yet):
 *   - Floating sidebar as a rounded container with a linen→white gradient.
 *   - Full-bleed page layout (drop max-width/mx-auto centering on data pages).
 * These touch layout math (sidebar offset, page width) so they land after a
 * first look at the color/type pass.
 * ========================================================================= */

/* ---- Product Portfolio responsive layout -------------------------------- */
.my-foods-table-card {
    overflow: visible;
}

.my-foods-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.my-foods-data-table {
    min-width: 860px;
}

/* Bulk selection bar: a .card, but a toolbar rather than a panel, so it sits tighter
   than the card default padding. */
.my-foods-bulk-bar {
    padding: 0.75rem 1rem;
}

/* Zero-state landing (reqs 1A + 1B): the whole page is one invitation to upload, so the
   card is generous and centered rather than a notice strip. */
.my-foods-zero {
    padding: 3.5rem 2rem;
}

.my-foods-zero-icon {
    font-size: 3rem;
    color: var(--color-indigo-500, #4f46e5);
    opacity: 0.6;
}

.my-foods-zero-title {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-oyster-900);
}

.my-foods-zero-copy {
    margin: 0.75rem auto 0;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-oyster-600);
}

.my-foods-zero-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Upload-vs-single-product guidance: a caption stacked under each entry button (header
   and zero state both) so the hint reads as part of the choice rather than as body copy
   floating above the pair. The wrapper takes over the flex slot the button used to hold,
   so the surrounding gap/wrap behavior is unchanged. */
.my-foods-choice {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.my-foods-choice-hint {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-oyster-500);
    white-space: nowrap;
}

/* Column sizing is class-based, not positional, so lane-to-lane column differences
   (the Claimed lane adds Data / Shield columns) never mis-assign widths. */
.my-foods-data-table th.my-foods-col-select,
.my-foods-data-table td.my-foods-col-select {
    width: 2.75rem;
    min-width: 2.75rem;
}

.my-foods-data-table th.my-foods-col-product,
.my-foods-data-table td[data-label="Product"] {
    min-width: 280px;
    width: 34%;
}

.my-foods-data-table th.my-foods-col-upc,
.my-foods-data-table td[data-label="UPC"] {
    min-width: 150px;
}

/* The UPC cell wherever it appears: the Product Portfolio and every Non-UPF verification table. A
   barcode is the one identifier a brand cross-checks against its own records, so this cell explicitly
   refuses to clip. The overflow trio is the point: the verification select-foods cell carried a stray
   `truncate` inside a table-fixed column and rendered the barcode as an ellipsis. Mobile card layouts
   relax the floor and wrap instead (see the stacking blocks).

   The mono stack is declared here rather than left to a `font-mono` class: this bundle is a purged
   utility set that does not define one, so the portfolio's UPC cell had been asking for a mono face and
   silently rendering in the body font. Digit alignment is the whole reason a barcode column reads. */
.wi-upc-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    min-width: 150px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.my-foods-data-table th.my-foods-col-data,
.my-foods-data-table td[data-label="Data"] {
    min-width: 175px;
}

.my-foods-data-table th.my-foods-col-shield,
.my-foods-data-table td[data-label="Non-UPF Shield"] {
    min-width: 190px;
}

.my-foods-data-table td[data-label="Product"] .font-medium {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 768px) {
    .my-foods-page {
        max-width: none;
        padding: 0 !important;
    }

    .my-foods-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.875rem !important;
    }

    .my-foods-header h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    .my-foods-header-actions,
    .my-foods-header-actions .my-foods-choice,
    .my-foods-header-actions .wise-btn {
        width: 100%;
    }

    .my-foods-header-actions .wise-btn {
        justify-content: center;
    }

    .my-foods-lane-row {
        justify-content: stretch !important;
        margin-right: 0;
        margin-left: 0;
        padding: 0 0 0.25rem;
        overflow: visible;
    }

    .my-foods-lane-tabs {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    .my-foods-lane-tabs [role="tab"] {
        min-width: 0;
        justify-content: center;
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
        font-size: clamp(0.75rem, 3.1vw, 0.875rem) !important;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }

    .portfolio-summary-card,
    .my-foods-search-card,
    .my-foods-table-card {
        padding: 1.25rem !important;
    }

    .portfolio-summary-card h2 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .portfolio-summary-card span[aria-hidden="true"] {
        display: none;
    }

    .portfolio-stage-filters {
        align-items: center !important;
        gap: 0.625rem !important;
    }

    .portfolio-stage-card {
        /* !important: the desktop cards carry an equal-width min-width utility (see StageCardClass),
           and at this breakpoint they collapse to content-width pills instead. */
        width: auto !important;
        min-width: 0 !important;
        flex: 0 1 auto;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        border-width: 1px !important;
        border-top-width: 1px !important;
        border-radius: 9999px !important;
        box-shadow: none !important;
        text-align: left;
        transform: none !important;
    }

    .portfolio-stage-card > span:first-child {
        font-family: var(--font-family-primary);
        font-size: 0.9375rem !important;
        line-height: 1 !important;
        font-weight: 800;
    }

    .portfolio-stage-card > span:last-child {
        padding: 0 !important;
        background: transparent !important;
        font-size: 0.875rem !important;
        line-height: 1.1 !important;
        white-space: nowrap;
    }

    .portfolio-summary-card .border-t > .flex {
        align-items: flex-start !important;
    }

    .portfolio-summary-card .border-t > .flex > :last-child {
        width: 100%;
        justify-content: flex-start;
    }

    .my-foods-search-card .relative {
        max-width: none;
    }

    .my-foods-table-scroll {
        overflow: visible;
    }

    .my-foods-data-table,
    .my-foods-data-table thead,
    .my-foods-data-table tbody,
    .my-foods-data-table tr,
    .my-foods-data-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .my-foods-data-table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 0;
    }

    .my-foods-data-table thead {
        display: none;
    }

    .my-foods-data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .my-foods-data-table tbody tr {
        overflow: visible;
        padding: 1rem;
        border: 1px solid var(--color-oyster-200);
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    }

    .my-foods-data-table tbody tr:hover {
        background: #fff !important;
    }

    .my-foods-data-table td {
        padding: 0.75rem 0 !important;
        white-space: normal !important;
    }

    .my-foods-data-table td[data-label] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--color-oyster-100);
    }

    .my-foods-data-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 7.5rem;
        color: var(--color-oyster-500);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Card layout: the selection checkbox leads the card with no label row of its own
       (it carries no data-label, so it gets no ::before). */
    .my-foods-data-table td.my-foods-col-select {
        width: auto;
        min-width: 0;
        padding: 0 0 0.5rem 0 !important;
    }

    .my-foods-data-table td[data-label="Product"] {
        display: block;
        padding-top: 0 !important;
        border-top: 0;
    }

    .my-foods-data-table td[data-label="Product"]::before {
        display: block;
        margin-bottom: 0.5rem;
    }

    .my-foods-data-table td[data-label="Product"] > .flex {
        align-items: flex-start !important;
    }

    .my-foods-data-table td[data-label="Product"] .font-medium {
        overflow-wrap: anywhere;
    }

    .my-foods-data-table td[data-label="UPC"] {
        align-items: center;
        overflow-wrap: anywhere;
    }

    .my-foods-data-table td[data-label="Data"] > *,
    .my-foods-data-table td[data-label="Non-UPF Shield"] > * {
        max-width: 100%;
        white-space: normal;
    }

    .my-foods-data-table .my-foods-row-actions {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 0 !important;
    }

    .my-foods-data-table .my-foods-row-actions > .flex {
        flex-wrap: wrap;
    }
    /* The report popover is positioned by JS (positionReportMenu) as a
       viewport-fixed element on all viewports, so no mobile-specific
       absolute-positioning override is needed here. */
}

/* ---- Non-UPF verification flow responsive layout ------------------------- */
.verification-flow-page,
.verification-flow-page * {
    min-width: 0;
}

/* Disabled buttons across the flow. Was a duplicated inline <style> block on
   ReviewAttest + Payment that applied app-wide while those pages were mounted;
   defined once here and scoped to the flow instead. */
.verification-flow-page button:disabled,
.verification-step-header button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.verification-food-table-wrap {
    max-width: 100%;
    overflow-y: visible;
}

.verification-food-table {
    min-width: 860px;
}

.verification-food-table td[data-label="Product"] {
    min-width: 280px;
}

.verification-food-table td[data-label="Product"] .font-medium,
.verification-food-table td[data-label="Product"] .font-medium + *,
.verification-food-table td[data-label="Product"] div[class*="font-medium"] {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 768px) {
    .verification-flow-page {
        max-width: none !important;
        padding: 1.5rem !important;
    }

    .verification-flow-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .verification-flow-header h1 {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    .verification-flow-header p {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .verification-flow-count {
        width: 100%;
    }

    .verification-flow-count span {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        align-items: center;
        border-radius: 999px;
        background: #e2fffd;
        color: #0f766e !important;
        padding: 0.45rem 0.75rem;
        line-height: 1.2;
    }

    .verification-filter-card,
    .verification-table-card {
        padding: 1.25rem !important;
        overflow: visible !important;
    }

    .verification-filter-card input {
        min-height: 44px;
    }

    .verification-table-card h3 {
        font-size: 1.125rem;
        line-height: 1.3;
    }

    .verification-food-table-wrap {
        overflow: visible !important;
    }

    .verification-food-table,
    .verification-food-table thead,
    .verification-food-table tbody,
    .verification-food-table tr,
    .verification-food-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .verification-food-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .verification-food-table thead {
        display: none;
    }

    .verification-food-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .verification-food-row {
        border: 1px solid var(--color-oyster-200) !important;
        border-radius: 1rem;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    }

    .verification-food-row.bg-indigo-50,
    .verification-food-row.bg-indigo-50\/50 {
        background: #eef7ff !important;
        border-color: #cfe1f5 !important;
    }

    .verification-food-row:hover {
        background: #fff !important;
    }

    .verification-food-row.bg-indigo-50:hover,
    .verification-food-row.bg-indigo-50\/50:hover {
        background: #eef7ff !important;
    }

    .verification-food-row .verification-control-cell {
        display: inline-flex;
        width: auto;
        padding: 0 0.5rem 0.75rem 0 !important;
        vertical-align: middle;
    }

    .verification-food-row .verification-control-cell button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .verification-food-table td {
        padding: 0.75rem 0 !important;
        white-space: normal !important;
    }

    .verification-food-table td[data-label] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--color-oyster-100);
    }

    .verification-food-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 6.75rem;
        color: var(--color-oyster-500);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .verification-food-table td[data-label="Product"] {
        display: block;
        border-top: 0;
        padding-top: 0 !important;
    }

    .verification-food-table td[data-label="Product"]::before {
        display: none;
    }

    .verification-food-table td[data-label="Product"] > .flex,
    .verification-food-table td[data-label="Product"] > div {
        align-items: center !important;
        max-width: 100%;
    }

    .verification-food-table td[data-label="Product"] .truncate {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .verification-food-table td[data-label="Product"] .font-medium,
    .verification-food-table td[data-label="Product"] div[class*="font-medium"] {
        overflow-wrap: anywhere;
    }

    .verification-food-table td[data-label="UPC"] {
        align-items: center;
        overflow-wrap: anywhere;
    }

    .verification-food-table td[data-label="Status"] > * {
        max-width: 100%;
        white-space: normal;
    }

    .verification-row-actions {
        display: flex !important;
        justify-content: flex-end;
        border-top: 1px solid var(--color-oyster-100);
    }

    .verification-expanded-row {
        border: 1px solid var(--color-oyster-200);
        border-radius: 1rem;
        background: #fff;
        overflow: hidden;
    }

    .verification-expanded-row > td {
        padding: 0 !important;
    }

    .verification-expanded-row .attestation-section {
        padding: 1rem !important;
        border-radius: 0 !important;
    }

    .verification-pagination {
        align-items: stretch !important;
        flex-direction: column;
        gap: 1rem;
    }

    .verification-pagination > div:last-child {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .verification-attestation-panel label {
        align-items: flex-start !important;
    }

    .verification-attestation-panel span {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .verification-flow-actions {
        align-items: stretch !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .verification-flow-actions > * {
        justify-content: center;
        min-height: 44px;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .verification-flow-page {
        padding: 1.25rem !important;
    }

    .verification-flow-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .my-foods-lane-tabs [role="tab"] {
        min-height: 2.75rem;
        padding-right: 0.375rem !important;
        padding-left: 0.375rem !important;
        white-space: normal;
    }
}