/* =========================================================
   MATPLANERAREN – FRONTEND STYLES (SORTERAD & SAMKÖRD)
   ========================================================= */

/* ---------- Variabler & bas ---------- */
:root{
    --mp-bg:#fff; --mp-text:#111827; --mp-muted:#6b7280; --mp-soft:#eef2f6;
    --mp-border:#e5e7eb; --mp-shadow:0 1px 3px rgba(0,0,0,.06);
    --mp-green:#979849; --mp-blue:#2563eb; --mp-track:#f2f4f7;
}
.mp-foodpanel{ margin:1rem auto; font-family:inherit; color:var(--mp-text); }
.mp-hint{ color:var(--mp-muted); font-size:.78rem; font-weight:600; margin-left:.35rem; }

/* ---------- Header (titel, kontroller) ---------- */
.mp-head .mp-title{ margin:0; font-weight:700; line-height:1.2; }
.mp-head .mp-cat{ opacity:.75; margin-bottom:.25rem; }
.mp-desc{ margin-top:.75rem; color:#475569; }
.mp-head-row{ display:flex; align-items:center; gap:.75rem; padding:.25rem 0 .5rem; }
.mp-head-row .mp-title{ font-size:1.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-head-controls{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; margin-bottom:-1px; margin-left:14px; }
.mp-weight{
    appearance:none; background:#fff; border:1px solid #f3f4f6; border-radius:10px;
    padding:.45rem .8rem; font-size:.95rem; line-height:1; cursor:pointer;
}
.mp-weight-quick{
    display:inline-block; padding:.45rem .7rem; border-radius:10px;
    text-decoration:none; font-weight:600; line-height:1; background:#fff;
}
.mp-weight-quick:hover{ background:#f8fafc; }
.mp-more-btn{
    margin-left:auto; flex:0 0 auto; width:36px; height:36px; border-radius:10px; border:1px solid var(--mp-border);
    display:inline-flex; align-items:center; justify-content:center; background:#fff; cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.mp-more-btn:hover{ background:#f8fafc; }
.mp-naringsvarde, .mp-dri-info{ padding:0 1rem; }

.mp-head-controls .mp-weight{
    background:#f3f4f6; border-radius:12px;
    padding:.6rem 2.1rem .6rem .9rem; font-size:.98rem; min-width:120px; color:#111827;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%238694a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right .6rem center; background-size:14px 14px;
}

.mp-head-controls .mp-weight:hover{ filter:brightness(.98); }
.mp-head-controls .mp-weight:active{ filter:brightness(.96); }

/* ---------- Layout-top (diagram + info) ---------- */
.mp-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; }
@media (max-width:900px){ .mp-top{ grid-template-columns:1fr;} }

/* =========================================================
   KOMPONENTER
   ========================================================= */

/* ---------- Nutri-kort (Protein/Fett/Kolhydrater) ---------- */
.mp-nutricards{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin:0 0 1rem; }
@media (max-width:900px){ .mp-nutricards{ grid-template-columns:1fr; } }
.mp-nutricard {
    background: #fff;
    border: 1px solid hsla(0, 0%, 7%, .07) !important;
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0 !important;
    position: relative;
}

.mpnc-head{ display:flex; align-items:center; }
.mpnc-title{ font-size:.95rem; font-weight:600; color:#6d7873; }
.mpnc-ico{ margin-left:auto; color:#979849; opacity:.9; }
.mpnc-main{ margin-top:.2rem; }
.mpnc-val{ font-size:1.5rem; font-weight:800; line-height:1; }
.mpnc-val::after{ content:""; }
.mpnc-badge{
    display:inline-block; margin-top:.6rem; padding:4px 10px 6px; border-radius:999px;
    font-size:.85rem; font-weight:700; color:#fff; background:#9ca3af;
}
.mpnc-badge.good{ background:#1f7a36; }
.mpnc-badge.warn{ background:#f59e0b; }
.mpnc-badge.bad{  background:#dc2626; }
.mpnc-badge.info{ background:#2563eb; }
.mpnc-badge.muted{background:#6b7280; }
.mpnc-tag{
    position:absolute; right:14px; bottom:12px; padding:4px 12px 6px; border-radius:999px;
    font-size:.85rem; font-weight:600; background:#eef7ee; color:#1f7a36;
}
.mpnc-tag.good-soft{  background:#ecfdf3; color:#1f7a36; }
.mpnc-tag.warn-soft{  background:#fff7ed; color:#b45309; }
.mpnc-tag.info-soft{  background:#eff6ff; color:#1d4ed8; }
.mpnc-tag.muted-soft{ background:#f3f4f6; color:#374151; }

/* ---------- Hälsoindex-kort ---------- */
.mp-healthcard {
    background: #fff;
    border: 1px solid hsla(0, 0%, 7%, .07) !important;
    border-radius: 14px;
    padding: 1.6rem;
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0 !important;
    margin-bottom: 0rem;
}

.mp-healthcard .mph-row{ display:flex; align-items:center; gap:.5rem; }
.mp-healthcard .mph-title{ font-size:.95rem; font-weight:600; color:#6d7873; margin-bottom:8px; }
.mp-healthcard .mph-shield{ margin-left:auto; color:#2e7d32; opacity:.9; }
.mp-healthcard .mph-main{ display:flex; align-items:baseline; gap:.35rem; margin-top:.35rem; }
.mp-healthcard .mph-score{ font-size:1.8rem; font-weight:800; line-height:1; }
.mp-healthcard .mph-outof{ font-size:.95rem; color:#6b7280; font-weight:600; }
.mp-healthcard .mph-badge{
    display:inline-block; margin-top:.6rem; padding:4px 20px 6px !important; border-radius:999px;
    font-size:.9rem; font-weight:600; color:#fff; background:#9ca3af;
}
.mp-healthcard .mph-badge.low{   background:#dc2626; }
.mp-healthcard .mph-badge.ok{    background:#f59e0b; }
.mp-healthcard .mph-badge.good{  background:#1f7a36; }
.mp-healthcard .mph-badge.great{ background:#166534; }

/* ---------- Donut + legend ---------- */
.mp-chart {
    position: relative;
    border-radius: 14px;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid hsla(0, 0%, 7%, .07) !important;
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0 !important;
    display: grid;
    gap: 1rem;
    align-items: center;
}

.nt-card.nt-nutrition {
    border: 1px solid hsla(0, 0%, 7%, .07) !important;
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0 !important;
    border-radius: 14px;
}


.mp-activity.mp-donut.one-ring{
    position:relative; width:100%; max-width:520px; margin:0 auto;
    --donut-gap-deg:1.2; --outer-r:44; --outer-w:10; --track:#eef2f6;
    --c-carb:#f9a786; --c-fat:#979849; --c-prot:#feda1c;
}
@media (max-width:900px){ .mp-activity.mp-donut.one-ring{ --outer-r:40; --outer-w:9; } }
.mp-donut-svg{ display:block; width:100%; height:auto; }
.mp-activity.mp-donut.one-ring .track{ stroke:var(--track); stroke-width:var(--outer-w); }
.mp-activity.mp-donut.one-ring .seg{
    fill:none; stroke-linecap:round; transition:stroke-dashoffset 900ms cubic-bezier(.4,0,.2,1), opacity .2s ease; cursor:pointer;
}
.mp-activity.mp-donut.one-ring .seg:hover{ opacity:.9; }
.mp-activity-center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none; text-align:center;
}
.mp-center-top{ font-size:1rem; line-height:1; }
.mp-center-num{ font-weight:800; font-size:1.35rem; }
.mp-center-unit{ opacity:.75; margin-left:.25rem; }
.mp-center-sub{ opacity:.7; font-size:.85rem; margin-top:.35rem; }
.mp-tooltip{
    position:absolute; left:0; top:0; transform:translate(-50%,-120%);
    background:#111827; color:#fff; font-size:.8rem; line-height:1.2;
    padding:.4rem .55rem; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.15);
    pointer-events:none; white-space:nowrap;
}
.mp-tooltip .name{ opacity:.9; margin-right:.35rem; }
.mp-tooltip .val{ font-weight:700; }

.mp-legend.metrics{
    align-self:center; justify-self:center; width:100%; max-width:320px;
    display:flex; flex-direction:column; gap:.25rem; font-feature-settings:"tnum" 1,"lnum" 1; align-items:center;
}
.mp-legend.metrics .metric{
    --c:#ddd; --dot:18px; --gap-x:.6rem;
    display:grid; grid-template-columns:var(--dot) 1fr; grid-template-rows:auto auto;
    column-gap:var(--gap-x); row-gap:.1rem; align-items:center; padding:.3rem .2rem; border-radius:10px; position:relative;
}
.mp-legend.metrics .metric::before{
    content:"";
    grid-column:1;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:center;
    width:var(--dot);
    height:var(--dot);
    border-radius:50%;
    background:var(--c);
    border:2px solid #eef2f6; /* <-- grå ytterrand */
    box-shadow:none;          /* ta bort gamla skuggan */
}

.mp-nutricard.fat-card {
    background-color: #F3F3E7;
}

.mp-nutricard.carb-card {
    background-color: #FEF4F0;
}

.mp-nutricard.protein-card {
    background-color: #FFFAE1;
}


.mp-legend.metrics .label{ grid-column:2; grid-row:1; margin:0; font-size:.8rem; line-height:1.15; color:#6b7280; font-weight:600; letter-spacing:.2px; }
.mp-legend.metrics .val{ grid-column:2; grid-row:2; font-size:.9rem; font-weight:700; line-height:1.1; color:var(--mp-text); white-space:nowrap; }
.mp-legend.metrics .val .per100{ margin-left:.25rem; font-weight:600; font-size:.7rem; }
.mp-legend.metrics .carb{ --c:#f9a786; } .mp-legend.metrics .fat{ --c:#979849; } .mp-legend.metrics .protein{ --c:#feda1c; }
.mp-legend.metrics .pct{ display:none !important; }

/* =========================================================
   TABELLER – NT (nya flikar) & MP (renderaren)
   ========================================================= */

/* ---------- NT-kort & flikar ---------- */
.nt-card{
    background: #fff;
    border-color: hsla(0, 0%, 7%, .07);
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0;
}
.nt-tablecard{ padding:1rem 1rem 0; }
.nt-table-caption{ margin:0 0 .5rem; font-size:1.05rem; font-weight:700; color:#1d2320; }

.nt-tabs{ margin-top:.5rem; }
.nt-tabbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 .75rem; padding:1rem; }
.nt-dri-info{ padding:0 1rem; }
.nt-naringsvarde{ padding:1rem 1rem 0 1rem; color: #3f5f2b; }
.nt-tab{
    appearance:none; border:1px solid #dfe3e6; background:#fff;
    padding:.45rem .9rem; border-radius:999px; font-weight:400; color:#2c3a34; cursor:pointer; font-size: 15px;
}
.nt-tab[aria-selected="true"]{ background: #ededfe; border-color:#ededfe; color:#151516; }
.nt-tab:focus{ outline:2px solid #b9e5cf; outline-offset:2px; }
.nt-tabpanels > [role="tabpanel"]{ outline:0; }

/* ---------- NT-tabell ---------- */
.nt-table{ display:block; overflow:hidden; border-radius:12px; }
.nt-tr{
    display:grid; grid-template-columns:1fr minmax(110px,170px) 80px;
    gap:12px; align-items:center; padding:12px 16px;
}
.nt-tr:first-child{ border-top:0; }
.nt-th{
    background:#f6f8f9; border-bottom:1px solid #e9ecef;
    font-weight:700; color:#4b5651; padding:12px 16px;
}
.nt-th > div{ opacity:.9; }
.nt-td-name{ font-weight:600; color:#151a17; }
.nt-td-val, .nt-td-pct{ text-align:right; white-space:nowrap; }
.nt-td-pct{ font-weight:800; color:#0f1412; }
.nt-td-val{ letter-spacing:.1px; }
.nt-td-val sub{ font-size:.8em; vertical-align:baseline; }
.nt-tr:not(.nt-th):hover{ background:#fafbfc; }
.nt-card + .nt-card{ margin-top:1rem; }

/* NT – mobil (header döljs) */
@media (max-width:720px){
    .nt-tr{ grid-template-columns:1fr auto; grid-template-rows:auto auto; }
    .nt-tr.nt-th{ display:none; }
    .nt-tr > .nt-td:nth-child(1){ grid-column:1 / 2; grid-row:1; font-weight:700; }
    .nt-tr > .nt-td:nth-child(2){ grid-column:1 / 2; grid-row:2; color:#2b3530; }
    .nt-tr > .nt-td:nth-child(3){ grid-column:2 / 3; grid-row:1 / span 2; align-self:center; }
    .nt-card{ border-radius:12px; }
}

/* ---------- MP-tabell (mappad till NT-stil, fast kolumn för %DRI) ---------- */
.mp-table{ display:block; overflow:hidden; }
.mp-th{
    border-bottom:1px solid #e9ecef;
    font-weight:700; color:#6D7885; padding:12px 0px;
}
.mp-table .mp-tr,
.mp-table .mp-tr.mp-th{
    display:grid; grid-template-columns:1fr minmax(8rem,auto) 6ch; /* Namn | Innehåll | %DRI */
    align-items:center; font-size:15px;
}
/* Header utan extra gap, liten luft under */
.mp-table .mp-tr.mp-th{ column-gap:0 !important; margin-bottom:12px; }
/* Datarader med lagom gap + vert padding */
.mp-table .mp-tr:not(.mp-th){ column-gap:12px; padding:12px 0; }
.mp-td-val, .mp-td-pct,
.mp-table .mp-tr.mp-th > :nth-child(2),
.mp-table .mp-tr.mp-th > :nth-child(3){
    text-align:right; white-space:nowrap;
}
.mp-td-pct{ font-weight:800; }
/* Ingen extra padding-hack på värden – linjeras via grid */
.mp-td-val{ padding-right:0 !important; color:#6D7885; }

/* MP – mobil: behåll tre kolumner och headern synlig */
@media (max-width:720px){
    .mp-table .mp-tr{ grid-template-columns:1fr minmax(8rem,auto) 6ch; }
    .mp-th{ display:grid !important; }
}

/* =========================================================
   INFO-LISTOR (mp-info) – matchar NT/MP-tabeller
   ========================================================= */

.mp-info{  padding:1rem;
    border: 1px solid hsla(0, 0%, 7%, .07) !important;
    box-shadow: 0px 2px 2px -1px hsla(0, 0%, 7%, .11),
    0px 4px 10px -2px #f0f0f0 !important;
}






















/* =========================================================
   SUBBARS (delkort)
   ========================================================= */

.mp-subbars{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-top:1rem; }
@media (max-width:900px){ .mp-subbars{ grid-template-columns:1fr; } }
.mp-sub{ border:1px solid var(--mp-border); }
.mp-sub > h3{ margin:0 0 .5rem; font-weight:700; font-size:1rem; line-height:1.25; }
.mp-sub-inner{
    border:1px solid var(--mp-border); border-radius:12px; overflow:hidden; background:#fff;
    box-shadow:var(--mp-shadow); font-variant-numeric:tabular-nums lining-nums;
}
.mp-mini-row{ display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center; padding:.6rem .9rem; border-bottom:1px dashed var(--mp-soft); }
.mp-mini-row:last-child{ border-bottom:0; }
.mp-mini-label{ color:#111827; font-size:.95rem; font-weight:400; letter-spacing:.1px; }
.mp-mini-val{ text-align:right; white-space:nowrap; font-size:.95rem; font-weight:700; }
.mp-mini-grouphead{
    background:#f8fafc; color:#374151; font-weight:700; font-size:.9rem; padding:.6rem .9rem; border-bottom:1px solid var(--mp-border);
}
.mp-mini-row.detail{ color:#374151; }
.mp-mini-bar{ display:none; }
.mp-sub-inner > .mp-mini-row.main:last-of-type{ border-bottom:1px dashed var(--mp-soft); }

/* =========================================================
   Mobila flikar (separerade från NT-flikar)
   ========================================================= */

.mp-mobile-tabs{ display:none; margin-top:1rem; }
.mp-tabbar{
    display:flex; gap:.25rem; padding:.25rem; border:1px solid var(--mp-border);
    background:#f3f4f6; border-radius:12px; overflow:auto; -webkit-overflow-scrolling:touch;
}
.mp-tab{
    appearance:none; border:0; background:transparent; font-weight:700; font-size:.95rem;
    padding:.55rem .9rem; border-radius:10px; color:#6b7280; cursor:pointer; white-space:nowrap;
}
.mp-tab.is-active{ background:#111827; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.mp-tab:focus-visible{ outline:2px solid #111827; outline-offset:2px; border-radius:12px; }
.mp-tabpanels{ margin-top:.75rem; }
.mp-pane[hidden]{ display:none; }
@media (max-width:900px){
    .mp-grid.mp-grid-tables, .mp-subbars{ display:none; }
    .mp-mobile-tabs{ display:block; }
}

/* =========================================================
   Responsiva småjusteringar (header-kontroller)
   ========================================================= */

@media (max-width:900px){
    .mp-chart .mp-head{ grid-column:1 / -1; margin:0 0 .25rem; }
    .mp-head-row{ gap:.5rem; }
    .mp-head-row .mp-title{ font-size:1.8rem; }
    .mp-head-controls .mp-weight{ padding:.75rem 2.5rem .75rem 1rem; border-radius:8px; }
    .mp-weight-quick{ padding:.55rem .85rem; border-radius:11px; }
    .mp-more-btn{ width:34px; height:34px; border-radius:9px; }
}

/* =========================================================
   Kort (generellt)
   ========================================================= */

.mp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
@media (max-width:900px){ .mp-grid{ grid-template-columns:1fr; } }
.mp-card{ background:#fff; }
.mp-grid.mp-grid-tables{ margin-top:.5rem; }
.mp-card h3{ margin:0 0 .5rem; font-weight:700; font-size:1rem; }











.mp-naringsvarde { margin-top: 2.5rem; /* justera efter smak */ }

/* ---------- BAS ---------- */
:root{
    --mp-bg: #ffffff;
    --mp-text: #111827;
    --mp-muted: #6b7280;
    --mp-soft: #eef2f6;
    --mp-border: #e5e7eb;
    --mp-shadow: 0 1px 3px rgba(0,0,0,.06);
    --mp-green: #16a34a;
    --mp-blue: #2563eb;
    --mp-track: #f2f4f7;
}

.mp-foodpanel{margin:1rem auto;font-family:inherit;color:var(--mp-text)}
.mp-head .mp-title{margin:0;font-weight:700;line-height:1.2}
.mp-head .mp-cat{opacity:.75;margin-bottom:.25rem}
.mp-desc{margin-top:.75rem;color:#475569}

/* ---------- HEAD RAD: titel + viktkontroller + kebab ---------- */
.mp-head-row{
    display:flex;align-items:center;gap:.75rem; justify-content: space-between;
    padding:.25rem 0 .5rem 0;
}
.mp-head-row .mp-title{
    font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-head-controls{
    display:flex;align-items:center;gap:.5rem;
    flex:0 0 auto;margin-bottom:-1px;margin-left:14px;
}

/* Bas (om du använder select någon annanstans) */
.mp-weight{
    appearance:none;background:#fff;border-radius:10px;
    padding:.45rem .8rem;font-size:.95rem;line-height:1;cursor:pointer;;
}
.mp-weight-quick{
    display:inline-block;padding:.45rem .7rem;border-radius:10px;
    text-decoration:none;font-weight:600;line-height:1;
    box-shadow:0 1px 2px rgba(0,0,0,.03); background:#fff;
}
.mp-weight-quick:hover{background:#f8fafc}

/* Kebab */
.mp-more-btn{
    margin-left:auto;flex:0 0 auto;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--mp-border);
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.mp-more-btn:hover{background:#f8fafc}

/* Flytt av head in i .mp-chart på mobil */
@media (max-width: 900px){
    .mp-chart .mp-head{grid-column:1 / -1;margin:0 0 .25rem 0}
    .mp-head-row{gap:.5rem}
    .mp-head-row .mp-title{font-size:1.8rem}
    .mp-weight-quick{ padding:.55rem .85rem; border-radius:11px }
    .mp-more-btn{width:34px;height:34px;border-radius:9px}
}

/* ---------- ÖVERGRIPANDE ---------- */
.mp-top{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
@media (max-width: 900px){ .mp-top{ grid-template-columns:1fr; } }

/* ===== mp-chart layout med grid-areas (DESKTOP) ===== */
.mp-chart{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
    "head head"
    "donut legend";
    gap: 1rem;
    align-items: start; /* rubriken ska inte stretchas */
    background:var(--mp-bg);
    box-shadow:var(--mp-shadow);
}

/* Knyt element till sina ytor */
.mp-chart .mp-head{ grid-area: head; }
.mp-chart .mp-activity.mp-donut{ grid-area: donut; }
.mp-chart .mp-legend.metrics{ grid-area: legend; }

/* Se till att ev. "anchor" inte tar plats */
.mp-chart .mp-head-anchor[hidden]{ display:none !important; }


/* ===== Mobil: behåll nuvarande stapling (head, donut, legend) ===== */
@media (max-width: 900px){
    .mp-chart{
        position:relative;background:var(--mp-bg);border-radius:14px;padding:1rem;box-shadow:var(--mp-shadow);
        display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center;
    }
}


/* ---------- LEGEND (stor prick + två rader) ---------- */
.mp-legend.metrics{ align-self:center;justify-self:center; width:100%;max-width:320px; display:flex;flex-direction:column;gap:.25rem; font-feature-settings:"tnum" 1,"lnum" 1; align-items:center; }
.mp-legend.metrics .metric{ --c:#ddd; --dot:18px; --gap-x:.6rem; display:grid; grid-template-columns: var(--dot) 1fr; grid-template-rows:auto auto; column-gap:var(--gap-x); row-gap:.1rem; align-items:center; padding:.3rem .2rem; border-radius:10px; position:relative; }
.mp-legend.metrics .label{ grid-column:2;grid-row:1; margin:0; font-size:.8rem; line-height:1.15; color:#6b7280; font-weight:600; letter-spacing:.2px; }
.mp-legend.metrics .val{ grid-column:2;grid-row:2; font-size:0.9rem; font-weight:700; line-height:1.1; color:var(--mp-text); white-space:nowrap; }
.mp-legend.metrics .val .per100{ margin-left:.25rem; font-weight:600; font-size:.7rem; color:inherit; }
.mp-legend.metrics .carb { --c:#f9a786; }
.mp-legend.metrics .fat { --c:#979849; }
.mp-legend.metrics .protein{ --c:#feda1c; }
.mp-legend.metrics .pct{ display:none !important; }
.mp-legend.metrics .metric:hover{ background:#f8fafc; }

/* ---------- DONUT (EN ring) ---------- */
.mp-activity.mp-donut.one-ring{
    position:relative;width:100%;max-width:520px;margin:0 auto;
    --donut-gap-deg: 1.2; --outer-r: 44; --outer-w: 10;
    --track: #eef2f6; --c-carb: #f9a786; --c-fat: #979849; --c-prot: #feda1c;
}
@media (max-width: 900px){
    .mp-activity.mp-donut.one-ring{ --outer-r: 40; --outer-w: 9; }
}
.mp-donut-svg{display:block;width:100%;height:auto}
.mp-activity.mp-donut.one-ring .track{ stroke:var(--track); stroke-width:var(--outer-w); }
.mp-activity.mp-donut.one-ring .seg{ fill:none; stroke-linecap:round; transition:stroke-dashoffset 900ms cubic-bezier(.4,0,.2,1), opacity .2s ease; cursor:pointer; }
.mp-activity.mp-donut.one-ring .seg:hover{ opacity:.9; }

/* centertext (i mitten av ringen) */
.mp-activity-center{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; pointer-events:none;text-align:center; }
.mp-center-top{font-size:1rem;line-height:1}
.mp-center-num{font-weight:800;font-size:1.35rem}
.mp-center-unit{opacity:.75;margin-left:.25rem}
.mp-center-sub{opacity:.7;font-size:.85rem;margin-top:.35rem}

/* Tooltip för hover över segment */
.mp-tooltip{ position:absolute; left:0; top:0; transform:translate(-50%,-120%); background:#111827; color:#fff; font-size:.8rem; line-height:1.2; padding:.4rem .55rem; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.15); pointer-events:none; white-space:nowrap; }
.mp-tooltip .name{opacity:.9; margin-right:.35rem}
.mp-tooltip .val{font-weight:700}

/* (förberedda men ej använda flytande etiketter) */
.mp-activity.mp-donut .mp-labels{ display:none; }
.mp-activity.mp-donut .mp-label{ position:absolute; transform:translate(-50%,-50%); display:flex; gap:.35rem; font-size:.85rem; }
.mp-activity.mp-donut .mp-label .dot{ width:.55rem;height:.55rem;border-radius:50%;background:var(--c); }

/* ---------- PANELER & NÄRINGSINNEHÅLL ---------- */
.mp-info{ background:var(--mp-bg);border-radius:14px;padding:1rem;box-shadow:var(--mp-shadow) }
/* Gör varje mp-box mer "kort-lik" */
.mp-info .mp-box{ margin:.75rem 0; }
@media (max-width: 900px){
    .mp-info .mp-box{ padding:0; border:0; border-radius:0; box-shadow:none; }
}

/* Nutrition-listor – tabulära siffror och snygg alignment */
.mp-ul{list-style:none;margin:0;padding:0}
.mp-li{ display:grid; grid-template-columns: 1fr auto; align-items:baseline; gap:.75rem; padding:.45rem .1rem; border-bottom:1px dashed var(--mp-soft); font-variant-numeric: tabular-nums lining-nums; }
.mp-ul > .mp-li:first-child{padding-top:.2rem}
.mp-ul > .mp-li:last-child{border-bottom:0}

/* Huvudrader (Fett, Kolhydrater, Fibrer etc.) */
.mp-li > .mp-li-label strong{ font-size:1rem; letter-spacing:.1px; }
.mp-li > .mp-li-val{white-space:nowrap; font-weight: 800; font-size: 15px;}

/* Underposter (varav ...) */
.mp-ul.sub{ margin:.25rem 0 .2rem .9rem; padding-left:.75rem; border-left:3px solid var(--mp-soft); }
.mp-li.sub{ border-bottom:0; padding:.25rem 0; color:#374151; }
.mp-li.sub .mp-li-label{font-weight:400; font-size: 0.95rem}
.mp-li.sub .mp-li-val{color: #6D7885; font-size: 15px; font-weight: 400;}

/* Små hjälpetexter */
.mp-hint{ color:var(--mp-muted); font-size:.78rem; font-weight:600; margin-left:.35rem; }

/* DRI/DRI-bars & subbars */
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
@media (max-width: 900px){ .mp-grid{grid-template-columns:1fr} }
.mp-col{background:#fff;padding:1rem;border-radius: 12px;}
.mp-row{margin:.55rem 0}
.mp-row-head{display:flex;justify-content:space-between;gap:.5rem}
.mp-bar{background:var(--mp-track);border-radius:999px;height:8px;overflow:hidden;margin:.35rem 0}
.mp-bar span{display:block;height:8px;background:var(--mp-green)}
.mp-dri{font-size:.85em;opacity:.75}

.mp-subbars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}
@media (max-width: 900px){ .mp-subbars{grid-template-columns:1fr} }
.mp-sub{background:#fff;border-radius:14px;padding:1rem;box-shadow:var(--mp-shadow)}
.mp-mini-row{margin:.4rem 0}
.mp-mini-head{display:flex;justify-content:space-between;gap:.5rem}
.mp-mini-bar{background:var(--mp-track);border-radius:999px;height:6px;overflow:hidden;margin:.3rem 0}
.mp-mini-bar span{display:block;height:6px;background:var(--mp-blue)}

/* Hjälpklass för skärmläsare */
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Små förbättringar på mobil för listornas läsbarhet */
@media (max-width: 480px){
    .mp-li{padding:.4rem .05rem}
    .mp-li > .mp-li-label strong{font-size:.98rem}
    .mp-li.sub{padding:.2rem 0}
    .mp-ul.sub{margin-left:.7rem;padding-left:.6rem}
}










/* Ta bort/kommentera bort ev. tidigare flex-direction: column på .mph-footer */

.mph-footer{
    margin-top:.5rem;
    display:grid;
    grid-template-columns: auto 1fr; /* badge | (flexyta för länk) */
    align-items: end;                /* bottenjustera båda */
    column-gap:.75rem;
}

.mph-footer .mph-badge {
    flex-shrink: 0;
}

.mph-footer .mph-link{
    justify-self: end;     /* skjut till höger */
    align-self: end;       /* bottenjustera mot badgen */
    font-size:.875rem;
    font-weight:500;
    color: #475569;
    border-bottom:1px solid currentColor; /* “understrykning” med kontrollbar spacing */
    line-height:1.2;
}

.mph-footer .mph-link:hover{
    color:#979849;
    border-bottom-color:#979849;
}







/* Exceptionell (95–100) – klar grön */
.mph-badge.hi-exceptional {
    background:#e6f9f0;
    color:#0f5132;
    border-color:#b8eccc;
}

/* Mycket hälsosamt (80–94) – frisk limegrön */
.mph-badge.hi-verygood {
    background:#f0fdf4;
    color:#166534;
    border-color:#bbf7d0;
}

/* Bra val (65–79) – mjuk gul/grön */
.mph-badge.hi-good {
    background:#fefce8;
    color:#854d0e;
    border-color:#fde68a;
}

/* Okej (50–64) – neutral orange */
.mph-badge.hi-ok {
    background:#fff7ed;
    color:#9a3412;
    border-color:#fdba74;
}

/* Begränsa (35–49) – varning röd/orange */
.mph-badge.hi-limit {
    background:#fef2f2;
    color:#991b1b;
    border-color:#fecaca;
}

/* Undvik ofta (0–34) – tydlig röd */
.mph-badge.hi-avoid {
    background:#fee2e2;
    color:#7f1d1d;
    border-color:#fca5a5;
}