/* ============================================================
   Live Steel & Metal Prices — front-end widget styles
   Scoped under .mwp-live-steel so it never leaks into the theme
   (renamed from the generic .wrap so it can't collide with
   theme/plugin classes already using that name on the page).
   ============================================================ */
.mwp-live-steel{
    --bg:#0f1420;
    --panel:#171d2b;
    --panel-alt:#1c2333;
    --border:#2a3245;
    --text:#e8ecf3;
    --muted:#8b93a7;
    --up:#e5484d;      /* price up = red */
    --down:#3ddc84;    /* price down = green */
    --stable:#eab308;  /* stable = yellow */
    --accent:#4f8dfd;

    max-width:1100px;
    margin:0 auto;
    padding:24px;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    box-sizing:border-box;
}
.mwp-live-steel *{box-sizing:border-box;}

/* ------------------------------------------------------
   Category nav — doubles as the live filter for the table.
   "Live Prices" = all rows. Every other tab narrows the
   table to that one category. Nothing here navigates away.
------------------------------------------------------- */
.mwp-live-steel nav.tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:transparent;
    border:none;
    padding:2px 2px 12px 2px;
    margin-bottom:20px;
}
.mwp-live-steel nav.tabs::-webkit-scrollbar{display:none;}
.mwp-live-steel nav.tabs a{
    flex:0 0 auto;
    white-space:nowrap;
    text-align:center;
    padding:10px 18px;
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    outline:none;
    box-shadow:none;
}
.mwp-live-steel nav.tabs a:hover,
.mwp-live-steel nav.tabs a:focus{color:var(--text);border-color:var(--muted);outline:none;}
.mwp-live-steel nav.tabs a.active{
    background:var(--panel-alt);
    color:var(--text);
    font-weight:600;
    border-color:var(--text);
}

/* Top nav — flat/connected strip (original style), overrides the pill
   base above. The nav below the ticker keeps the pill style untouched. */
.mwp-live-steel nav.tabs-top{
    gap:0;
    padding:0;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
}
.mwp-live-steel nav.tabs-top a{
    padding:16px 18px;
    background:transparent;
    border:none;
    border-right:1px solid var(--border);
    border-radius:0;
}
.mwp-live-steel nav.tabs-top a:last-child{border-right:none;}
.mwp-live-steel nav.tabs-top a:hover,
.mwp-live-steel nav.tabs-top a:focus{background:var(--panel-alt);border-color:var(--border);}
.mwp-live-steel nav.tabs-top a.active{
    background:var(--panel-alt);
    border-color:var(--border);
    box-shadow:inset 0 -2px 0 var(--accent);
}

/* Header */
.mwp-live-steel .header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    flex-wrap:wrap;
    gap:10px;
}
.mwp-live-steel .header h1{
    font-size:28px;
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
}
.mwp-live-steel .live-badge{
    background:var(--down);
    color:#04150c;
    font-size:12px;
    font-weight:700;
    padding:3px 10px;
    border-radius:6px;
    letter-spacing:.5px;
}
.mwp-live-steel .updated{color:var(--muted);font-size:14px;}

/* Ticker cards */
.mwp-live-steel .ticker{
    display:flex;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    overflow-x:auto;
    margin-bottom:20px;
}
.mwp-live-steel .ticker-card{
    min-width:150px;
    max-width:220px;
    padding:16px 20px;
    border-right:1px solid var(--border);
}
.mwp-live-steel .ticker-card:last-child{border-right:none;}
.mwp-live-steel .ticker-card .label{color:var(--muted);font-size:13px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mwp-live-steel .ticker-card .price{font-weight:700;font-size:16px;transition:color .2s ease;white-space:nowrap;}

/* ------------------------------------------------------
   Price table — Product, Specifications, Price, Unit, Trend.
------------------------------------------------------- */
.mwp-live-steel table{
    width:100%;
    border-collapse:collapse;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    table-layout:fixed;
}
.mwp-live-steel thead th{
    text-align:left;
    padding:16px;
    font-size:13px;
    border-bottom:1px solid var(--border);
    background:var(--panel);
    color:var(--muted);
}
.mwp-live-steel thead th:nth-child(1){width:48%;}
.mwp-live-steel thead th:nth-child(2),
.mwp-live-steel thead th:nth-child(3),
.mwp-live-steel thead th:nth-child(4){width:17.33%;}

.mwp-live-steel tbody tr:nth-child(odd){background:var(--panel-alt);}
.mwp-live-steel tbody td{
    padding:14px 16px;
    font-size:14px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mwp-live-steel .col-product{font-weight:600;color:var(--text);}
.mwp-live-steel .col-spec-inline{color:var(--muted);font-weight:400;}
.mwp-live-steel .col-price{font-weight:700;color:var(--text);}
.mwp-live-steel .col-unit{color:var(--muted);}
.mwp-live-steel .col-trend{font-weight:600;}

/* Trend colors: up = red, down = green, stable = yellow.
   Shared by the table's Trend column and the ticker prices. */
.mwp-live-steel .trend-up{color:var(--up)!important;}
.mwp-live-steel .trend-down{color:var(--down)!important;}
.mwp-live-steel .trend-stable{color:var(--stable)!important;}

.mwp-live-steel .status-row td{
    text-align:center;
    color:var(--muted);
    padding:40px 16px!important;
    font-size:14px;
    white-space:normal!important;
}

.mwp-live-steel footer{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin-top:18px;
}
.mwp-live-steel .data-note{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:6px;
}

/* ------------------------------------------------------
   Responsive
------------------------------------------------------- */
.mwp-live-steel .table-scroll{overflow-x:auto;border-radius:10px;}

@media (max-width:760px){
    .mwp-live-steel{padding:16px 12px;}
    .mwp-live-steel nav.tabs a{min-width:96px;font-size:13px;padding:12px 8px;}
    .mwp-live-steel .header h1{font-size:22px;}
    .mwp-live-steel table{table-layout:auto;min-width:620px;}
    .mwp-live-steel thead th, .mwp-live-steel tbody td{padding:10px 8px;font-size:12px;white-space:nowrap;}
}