/* widgets.css — dashboard widget card + look styles, shared by home.php and
   widget-builder.php (the preview must look exactly like the dashboard).
   Rendered markup comes from assets/widgets-render.js. */

/* ---- card grid ---- */
.hd-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:720px) { .hd-grid { grid-template-columns:repeat(2,1fr); } }
.hd-item.wide { grid-column:1 / -1; }
.hd-card { background:var(--p4-card-bg); border:1px solid var(--p4-divider); border-radius:16px; padding:16px; height:100%; display:flex; flex-direction:column; }
.hd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:12px; }
.hd-title { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--p4-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hd-sub { font-size:.74rem; color:var(--p4-muted); margin-top:3px; font-weight:500; }
.hd-body { flex:1; display:flex; flex-direction:column; min-height:0; }
.hd-empty { color:var(--p4-muted); font-size:.85rem; padding:6px 2px; }
.hd-err { color:#B03A2E; font-size:.8rem; padding:6px 2px; }
.hd-pin { display:inline-flex; align-items:center; gap:4px; font-size:.62rem; font-weight:800; padding:2px 7px; border-radius:999px; background:rgba(193,39,45,.12); color:#c1272d; letter-spacing:.04em; }

/* ---- looks ---- */
.hd-pills { display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.hd-pill { flex:1; min-width:64px; border-radius:14px; padding:12px 6px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.hd-pill .num { font-size:clamp(1.3rem,2vw,2.1rem); font-weight:900; line-height:1; }
.hd-pill .lbl { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:.35rem; opacity:.85; overflow:hidden; text-overflow:ellipsis; }
.pill-danger  { background:rgba(176,58,46,.14);  color:#B03A2E; }
.pill-warning { background:rgba(230,145,20,.16); color:#9a6a06; }
.pill-info    { background:rgba(37,99,235,.14);  color:#2563eb; }
.pill-success { background:rgba(25,135,84,.16);  color:#198754; }
.pill-grey    { background:var(--p4-card-tint);  color:var(--p4-muted); }
.hd-stat { flex:1; border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; justify-content:center; min-height:120px; }
.hd-stat .num { font-size:clamp(2.2rem,4vw,3.4rem); font-weight:900; line-height:1; letter-spacing:-.02em; }
.hd-stat .lbl { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-top:8px; opacity:.85; }
.hd-stat .sub { font-size:.76rem; margin-top:4px; opacity:.75; }
.hd-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.hd-table th { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--p4-muted); padding:6px 8px; border-bottom:2px solid var(--p4-divider); text-align:left; white-space:nowrap; }
.hd-table td { padding:7px 8px; border-bottom:1px solid var(--p4-divider); vertical-align:middle; }
.hd-table tr:last-child td { border-bottom:none; }
.hd-table td.num, .hd-table th.num { text-align:right; font-weight:700; white-space:nowrap; }
.hd-table tfoot td { border-top:2px solid var(--p4-divider); font-weight:900; }
.hd-day { display:inline-flex; align-items:center; border-radius:8px; padding:2px 8px; font-size:.72rem; font-weight:800; white-space:nowrap; }
.day-over { background:rgba(176,58,46,.14); color:#B03A2E; }
.day-warn { background:rgba(230,145,20,.16); color:#9a6a06; }
.day-ok   { background:rgba(25,135,84,.16); color:#198754; }
.day-grey { background:var(--p4-card-tint); color:var(--p4-muted); }
.hd-chip { display:inline-block; margin:2px; padding:2px 8px; border-radius:8px; font-size:.72rem; font-weight:700; background:var(--p4-card-tint); color:var(--p4-muted); }
.hd-chip.rep { background:rgba(176,58,46,.14); color:#B03A2E; }
.hd-chart { position:relative; height:220px; flex:1; }
.hd-item.wide .hd-chart { height:280px; }
.hd-prog { display:flex; flex-direction:column; gap:8px; }
.hd-prog-row { display:grid; grid-template-columns:minmax(80px,38%) 1fr auto; gap:10px; align-items:center; font-size:.82rem; }
.hd-prog-row .l { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hd-prog-row .m { height:10px; border-radius:999px; background:var(--p4-card-tint); overflow:hidden; }
.hd-prog-row .m > i { display:block; height:100%; border-radius:999px; }
.hd-prog-row .v { font-weight:800; font-variant-numeric:tabular-nums; }
.hd-list { display:flex; flex-direction:column; }
.hd-list-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; border-bottom:1px solid var(--p4-divider); font-size:.84rem; }
.hd-list-item:last-child { border-bottom:none; }
.hd-list-item .t { font-weight:700; }
.hd-list-item .s { font-size:.74rem; color:var(--p4-muted); margin-top:2px; }
.hd-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:.72rem; color:var(--p4-muted); }
.hd-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.hd-total { font-size:.74rem; color:var(--p4-muted); margin-top:8px; text-align:right; }
.hd-total strong { color:var(--p4-text); }