/* ==========================================================================
   „Wszystko, czego potrzebuje dział sprzedaży” – makiety w wyglądzie panelu
   wtyczki z mikroanimacjami (js/bento-vis.js).
   ========================================================================== */

.bx-mock {
    --g-700: #0a7a48;
    --g-600: #0c9256;
    --g-300: #a7dfc1;
    --g-100: #e5f5e9;
    --g-50: #ebf7f0;
    --line: #e1e9e4;
    --ink: #101c19;
    --muted: #5f6b66;
    --warn: #9a5b00;
    --warn-bg: #fff6e5;
    --bad: #b42318;
    position: relative;
    gap: 10px;
    background: #f7faf8;
    border: 1px solid var(--line);
    border-bottom: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink);
    overflow: hidden;
}

.bento-mock-bleed-right.bx-mock,
.bento-mock-side.bx-mock { border-right: 0; }

.bx-mock b { font-weight: 600; }
.bx-g { color: var(--g-700); }
.bx-r { color: var(--bad); }
.bx-link { color: var(--g-700); text-decoration: underline; font-size: 10.5px; }

.bx-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--g-100); color: var(--g-700); font-size: 10px; font-weight: 600; line-height: 1.7; white-space: nowrap; transition: background .3s, color .3s; }
.bx-pill-warn { background: var(--warn-bg); color: var(--warn); }
.bx-pill-muted { background: #f1f3f2; color: var(--muted); }
.bx-pill.is-busy { background: var(--warn-bg); color: var(--warn); }

.bx-card { padding: 10px 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 28, 25, .03); }
.bx-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bx-card-head b { font-size: 12px; }
.bx-card-head > span:not(.bx-pill) { color: var(--muted); font-size: 10px; }

/* ---------- 1. Pulpit ---------- */

.bx-top { display: flex; align-items: center; gap: 8px; }
.bx-top img { width: 18px; height: 18px; }
.bx-top b { font-size: 13px; }
.bx-top .bx-pill { margin-left: auto; }

.bx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bx-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; transition: border-color .4s, box-shadow .4s; }
.bx-kpi > span { color: var(--muted); font-size: 10.5px; }
.bx-kpi > b { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bx-kpi small { font-size: 10px; color: var(--muted); }
.bx-kpi small.bx-g { color: var(--g-700); }
.bx-kpi.is-flash { border-color: var(--g-300); box-shadow: 0 0 0 3px var(--g-50); }

.bx-bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 92px; border-bottom: 1px solid var(--line); }
.bx-bars i { flex: 1; height: var(--h); min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--g-300); transition: height .9s cubic-bezier(.22, 1, .36, 1), background .2s; }
.bx-bars i.is-cur { background: var(--g-600); }
.bx-bars i.is-hover { background: #8fd3ae; }
.bx-bars i.is-cur.is-hover { background: var(--g-700); }
.bx-mock.is-pre .bx-bars i { height: 2px; }
.bx-tip { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 4px 7px; border-radius: 7px; background: var(--ink); color: #ffffff; font-size: 10px; font-style: normal; line-height: 1.25; text-align: center; white-space: nowrap; opacity: 0; transform: translate(var(--tx, 0), calc(var(--ty, 0px) + 4px)); transition: opacity .2s, transform .25s; pointer-events: none; }
.bx-tip small { display: block; opacity: .7; font-size: 9px; }
.bx-tip.is-on { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)); }

.bx-feed { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.bx-feed li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bx-feed li:last-child { border-bottom: 0; }
.bx-feed li > div span { display: block; color: var(--muted); font-size: 10px; }
.bx-feed em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-feed em i { display: block; font-style: normal; font-size: 10px; font-weight: 500; }
.bx-feed li.is-new { animation: bx-in .6s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(90deg, var(--g-50), transparent 75%); }

@keyframes bx-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Kontrola braków ---------- */

.bx-ready { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.bx-ready > div:last-child b { display: block; font-size: 12px; }
.bx-ready > div:last-child span { color: var(--muted); font-size: 10.5px; }
.bx-ring { position: relative; width: 52px; height: 52px; flex: none; }
.bx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bx-ring circle[data-bx-ring] { transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1); }
.bx-ring > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.bx-issues { margin: 0; padding: 4px 12px; list-style: none; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.bx-issues li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); transition: opacity .3s; }
.bx-issues li:last-child { border-bottom: 0; }
.bx-issues li > div b { display: block; }
.bx-issues li > div span { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-ico { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e0a100; color: #ffffff; font-style: normal; font-weight: 700; font-size: 11px; transition: background .35s; }
.bx-issues li.is-ok .bx-ico { background: var(--g-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; color: transparent; }
.bx-issues li.is-ok > div span { color: var(--g-700); }
.bx-fix { padding: 3px 8px; border-radius: 7px; background: #ffffff; border: 1px solid #e8d6b0; color: var(--warn); font-size: 10px; font-weight: 600; transition: opacity .25s, transform .15s; }
.bx-issues li.is-ok .bx-fix { opacity: 0; }
.bx-fix.is-press { transform: scale(.92); }
.bx-issues li.is-pop .bx-ico { animation: bx-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bx-pop { from { transform: scale(.3); } to { transform: scale(1); } }

/* ---------- 3. Inwestycje ---------- */

.bx-inv { margin: 0; padding: 2px 12px; list-style: none; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.bx-inv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); transition: background .3s; }
.bx-inv li:last-child { border-bottom: 0; }
.bx-inv li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bx-inv li > em { font-style: normal; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.bx-inv li > em b { color: var(--ink); }
.bx-pill-s { font-size: 9.5px; padding: 0 7px; }
.bx-prog { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--g-50); overflow: hidden; }
.bx-prog i { display: block; height: 100%; width: var(--w); background: var(--g-600); transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.bx-mock.is-pre .bx-prog i { width: 0; }
.bx-inv li.is-live { background: linear-gradient(90deg, var(--g-50), transparent 85%); }
.bx-inv b.is-flash { color: var(--g-700); }

.bx-files { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--g-50); border: 1px solid #d3eddd; color: var(--g-700); font-size: 10.5px; font-weight: 500; }
.bx-files i { width: 8px; height: 8px; border-radius: 50%; background: var(--g-600); box-shadow: 0 0 0 3px rgba(12, 146, 86, .18); }

.bx-toast { position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #ffffff; font-size: 10.5px; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.bx-toast b { color: #ff9a8f; }
.bx-toast.is-on { opacity: 1; transform: none; }

/* ---------- 4. Wygląd ---------- */

.bx-look { --brand: #0c9256; --rad: 14px; }
.bx-look-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.bx-lbl { display: block; margin: 0 0 6px; color: var(--muted); font-size: 10px; font-weight: 500; }
.bx-lbl b { color: var(--ink); }
.bx-controls { padding: 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.bx-controls .bx-lbl:not(:first-child) { margin-top: 12px; }
.bx-swatches { display: flex; gap: 8px; }
.bx-swatches i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px transparent; transition: box-shadow .25s, transform .25s; }
.bx-swatches i.is-on { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--c); transform: scale(1.06); }
.bx-slider { position: relative; height: 4px; margin: 10px 4px 4px; border-radius: 2px; background: var(--line); }
.bx-slider::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--k, 58%); border-radius: 2px; background: var(--brand); transition: width .6s cubic-bezier(.22, 1, .36, 1), background .4s; }
.bx-slider span { position: absolute; top: 50%; left: var(--k, 58%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #ffffff; border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); transition: left .6s cubic-bezier(.22, 1, .36, 1), border-color .4s; }
.bx-toggles { display: flex; flex-wrap: wrap; gap: 5px; }
.bx-toggles span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; transition: background .3s, color .3s, border-color .3s; }
.bx-toggles span.is-on { background: var(--brand); border-color: var(--brand); color: #ffffff; }

.bx-preview { padding: 12px; border-radius: 10px; background: linear-gradient(160deg, #eef5f1, #e2ece6); }
.bx-tipcard { padding: 10px 12px; border-radius: var(--rad); background: #ffffff; box-shadow: 0 10px 24px rgba(16, 28, 25, .14); transition: border-radius .5s; }
.bx-tip-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.bx-st { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); font-size: 9.5px; font-weight: 700; white-space: nowrap; transition: color .4s, background .4s; }
.bx-tip-r { display: flex; gap: 14px; margin-top: 6px; overflow: hidden; }
.bx-tip-r > div { transition: opacity .3s, max-width .4s; max-width: 80px; }
.bx-tip-r > div.is-off { opacity: 0; max-width: 0; }
.bx-tip-r small { display: block; color: var(--muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; }
.bx-tip-p { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.bx-tip-p b { font-size: 13px; color: var(--brand); transition: color .4s; }
.bx-tip-p small { color: var(--muted); font-size: 9.5px; }
.bx-btn { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: calc(var(--rad) * .6); background: var(--brand); color: #ffffff; font-size: 10px; font-weight: 600; transition: background .4s, border-radius .5s; }
.bx-mini-table { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 8px; padding: 7px 10px; border-radius: var(--rad); background: #ffffff; font-size: 10.5px; transition: border-radius .5s; }
.bx-mini-table span:nth-child(2) { font-weight: 600; text-align: right; }

/* ---------- Telefon ---------- */

@media (max-width: 640px) {
    .bx-look-grid { grid-template-columns: minmax(0, 1fr); }
    .bx-kpi > b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bx-mock *, .bx-mock *::before { animation: none !important; transition: none !important; }
    .bx-toast { display: none; }
}

/* Makiety wychodzące poza prawą krawędź karty: treść kończy się wewnątrz karty */
.bento-mock-bleed-right.bx-mock,
.bento-mock-side.bx-mock { padding-right: 74px; }
@media (max-width: 640px) {
    .bento-mock-bleed-right.bx-mock,
    .bento-mock-side.bx-mock { padding-right: 76px; }
    .bx-toast { top: 10px; bottom: auto; transform: translateY(-8px); }
}

/* Listy w makietach: wewnętrzne marginesy (nadpisują .bento-mock ul) i bez zielonego tła przy nowych wpisach */
.bento-mock ul.bx-issues { padding: 4px 12px; }
.bento-mock ul.bx-inv { padding: 2px 12px; }
.bx-feed li.is-new, .bx-inv li.is-live { background: none; }