/* Showcase widgets — real app widgets copied from the module pages (markup: templates/partials/showcase/*.html),
   shown on the landing («прожектор», .spot.sw) and on sign-in (templates/auth/entry.html, .ae-widgets.sw).
   Moved out of landing.html on 2026-10-10 so both places use one copy. Changed a widget in a module —
   update its partial and the rules here. */

/* — каркас віджета (копія «WIDGET BASE» із index.html модулів) — */
.sw .w {
    position: relative; height: 296px; background: var(--surface); --wbg: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px var(--space-4) var(--space-4); overflow: visible;
    display: flex; flex-direction: column; text-align: left;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.sw .w-header {
    position: absolute; top: 0; left: 14px; transform: translateY(-50%);
    background: var(--border); padding: 1px; z-index: 2;
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);
}
.sw .w-header-inner {
    display: inline-flex; align-items: center; padding: 4px 18px; background: var(--wbg);
    clip-path: polygon(13px 0%, calc(100% - 13px) 0%, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0% 50%);
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap;
}
.sw .w-info {
    position: absolute; top: 10px; right: 12px; z-index: 5;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; padding: 0;
    background: var(--surface-raised); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 9px; font-weight: 800; cursor: help;
}
/* — Клієнти: Огляд (2 плитки + «Здоров'я бази») — */
.sw .w-overview { padding: 24px 0 0; }
.sw .ovr-cells { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sw .ovr-cell { position: relative; padding: var(--space-3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.sw .ovr-cell:nth-child(1), .sw .ovr-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
.sw .ovr-cell:nth-child(1) { border-right: 1px solid var(--border); }
.sw .ovr-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--accent-dim); color: var(--accent); }
.sw .ovr-cell.is-green .ovr-icon { background: var(--success-dim); color: var(--success); }
.sw .ovr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.sw .ovr-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sw .ovr-delta { font-size: 10px; color: var(--text-muted); }
.sw .ovr-info { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 9px; font-weight: 800; padding: 0; }
.sw .ovr-cell--wide { grid-column: 1 / -1; align-items: stretch; text-align: left; padding: var(--space-3) var(--space-4); }
.sw .bh-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-raised); margin: 4px 0 2px; }
.sw .bh-seg { height: 100%; }
.sw .bh-seg.bh-returned, .sw .bh-legend .dot.is-returned { background: var(--success); filter: brightness(0.68) saturate(1.3); }
.sw .bh-seg.bh-active, .sw .bh-legend .dot.is-once { background: var(--success); }
.sw .bh-seg.bh-sleep { background: var(--warning); }
.sw .bh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); }
.sw .bh-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sw .bh-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
/* — Оплати: «Виставлено всього» — */
.sw .pay-invoiced { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0; justify-content: center; }
.sw .pay-invoiced .head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.sw .pay-invoiced .num { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.sw .pay-invoiced .sub { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sw .pay-invoiced .split-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-raised); }
.sw .pay-invoiced .split-fill { display: block; height: 100%; }
.sw .pay-invoiced .split-fill.paid { background: var(--success); }
.sw .pay-invoiced .split-fill.unpaid { background: var(--warning); }
.sw .pay-invoiced .split-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); }
.sw .pay-invoiced .split-legend .row { display: inline-flex; align-items: center; gap: 6px; }
.sw .pay-invoiced .split-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.sw .pay-invoiced .split-legend .val { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
/* — донат (Записи «Статуси», Витрати «За категоріями») — */
.sw .apt-donut, .sw .exp-donut { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
.sw .apt-donut-chart, .sw .exp-donut-chart { width: 96px; height: 96px; flex-shrink: 0; }
.sw .apt-donut-legend, .sw .exp-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sw .apt-donut-row, .sw .exp-donut-row { display: flex; align-items: center; gap: var(--space-2); }
.sw .apt-donut-row .dot, .sw .exp-donut-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sw .apt-donut-row .name, .sw .exp-donut-row .name { flex: 1; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw .apt-donut-row .val, .sw .exp-donut-row .val { font-size: 11px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sw .apt-donut-row .pct, .sw .exp-donut-row .pct { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sw .w-switch { display: flex; gap: 4px; margin-top: 6px; }
.sw .w-switch button { padding: 4px 10px; font-size: 10px; font-weight: 700; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sw .w-switch button.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-dim); }
/* — Послуги: «Рух послуг» — */
.sw .mv-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.sw .mv-note { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; padding-bottom: var(--space-2); }
.sw .mv-rows { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sw .mv-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: center; padding: 7px var(--space-2); border-bottom: 1px solid var(--border); }
.sw .mv-row:last-child { border-bottom: none; }
.sw .mv-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw .mv-flow { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw .mv-delta { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw .mv-delta.up { color: var(--success); }
.sw .mv-delta.down { color: var(--danger); }
/* — Реклама: «Згасла реклама» — */
.sw .lk-dead-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--space-2); }
.sw .lk-dead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sw .lk-dead-row:last-of-type { border-bottom: none; }
.sw .lk-dead-main { min-width: 0; }
.sw .lk-dead-name { display: block; font-size: 0.84rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw .lk-dead-sub { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw .lk-dead-sub b { color: var(--text-secondary); font-weight: 600; }
.sw .lk-dead-days { font-size: 0.72rem; font-weight: 700; color: var(--warning); white-space: nowrap; flex-shrink: 0; }
.sw .lk-dead-days.crit { color: var(--danger); }
/* — Проєкти: «Маржа по проєктах» — */
.sw .pj-mg-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.sw .pj-mg-row { display: grid; grid-template-columns: 1fr 64px 48px; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
.sw .pj-mg-row:last-child { border-bottom: none; }
.sw .pj-mg-row.head { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding-bottom: 6px; }
.sw .pj-mg-name { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw .pj-mg-sum { text-align: right; color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw .pj-mg-row.head .pj-mg-sum, .sw .pj-mg-row.head .pj-mg-pct { color: var(--text-muted); font-weight: 700; }
.sw .pj-mg-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--success); white-space: nowrap; }
.sw .pj-mg-pct.neg { color: var(--danger); }