/*
 * 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;
}

/* 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-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;
}

.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 .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 {
        width: auto;
        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;
    }

    .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;
    }
}