/* ======================================================================
   LexperDesk — style strony: status klientow.
   ====================================================================== */

/* ======================================================================
   Status klientów (cross-client dashboard)
   ====================================================================== */
.ld-cs-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ld-ok); font-weight: 600;
}

.ld-cs-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ld-ok); display: inline-block;
}

.ld-cs-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 24px;
}

.ld-cs-kpi__c { background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 12px; padding: 16px 18px;
}

.ld-cs-kpi__l { color: var(--ld-text-muted); font-size: 13px; margin-bottom: 8px;
}

.ld-cs-kpi__v { font-size: 30px; font-weight: 600; letter-spacing: -.5px; display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; color: var(--ld-text-strong);
}

.ld-cs-kpi__v .d { width: 10px; height: 10px; border-radius: 50%;
}

.ld-cs-kpi__v--green { color: var(--ld-c-green-600);
}

.ld-cs-kpi__v--amber { color: var(--ld-c-amber-600);
}

.ld-cs-kpi__v--red { color: var(--ld-prio-p1-fg);
}

.ld-cs-sect { font-size: 14px; font-weight: 600; color: var(--ld-text-muted); margin: 0 0 12px;
}

.ld-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px;
}

.ld-cs-card { background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .12s, transform .12s; text-align: left; width: 100%; font: inherit; display: block;
}

.ld-cs-card:hover { border-color: var(--ld-primary-soft); transform: translateY(-2px);
}

.ld-cs-card:focus-visible { outline: 2px solid var(--ld-primary); outline-offset: 2px;
}

.ld-cs-card--offline { border-color: var(--ld-c-red-100); background: var(--ld-c-red-50);
}

.ld-cs-card__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px;
}

.ld-cs-card__name { font-size: 15px; font-weight: 600; color: var(--ld-text-strong);
}

.ld-cs-card__sub { color: var(--ld-text-muted); font-size: 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

.ld-cs-tier { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .4px;
}

.ld-cs-tier--mikro { background: var(--ld-c-blue-bg); color: var(--ld-c-blue-800);
}

.ld-cs-tier--mini { background: var(--ld-c-lilac); color: var(--ld-c-violet-700);
}

.ld-cs-tier--midi { background: var(--ld-c-green-bg); color: var(--ld-c-green-800);
}

.ld-cs-pill { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

.ld-cs-pill i { width: 7px; height: 7px; border-radius: 50%;
}

.ld-cs-pill--online { background: var(--ld-c-green-bg); color: var(--ld-c-green-600);
}

.ld-cs-pill--online i { background: var(--ld-ok);
}

.ld-cs-pill--warning { background: var(--ld-c-amber-bg); color: var(--ld-c-amber-600);
}

.ld-cs-pill--warning i { background: var(--ld-warn);
}

.ld-cs-pill--offline { background: var(--ld-c-red-bg); color: var(--ld-prio-p1-fg);
}

.ld-cs-pill--offline i { background: var(--ld-danger);
}

.ld-cs-mrow { display: flex; gap: 12px; margin-bottom: 14px;
}

.ld-cs-m { flex: 1;
}

.ld-cs-mh { display: flex; justify-content: space-between; font-size: 12px; color: var(--ld-text-muted); margin-bottom: 5px;
}

.ld-cs-mh b { color: var(--ld-text-strong); font-weight: 600; font-variant-numeric: tabular-nums;
}

.ld-cs-bar { height: 6px; background: var(--ld-c-slate-bg); border-radius: 20px; overflow: hidden;
}

.ld-cs-bar span { display: block; height: 100%; border-radius: 20px;
}

.ld-cs-bar--green span, .ld-cs-bar span.ld-cs-fill--green { background: var(--ld-ok);
}

.ld-cs-fill--green { background: var(--ld-ok);
}

.ld-cs-fill--amber { background: var(--ld-warn);
}

.ld-cs-fill--red { background: var(--ld-danger);
}

.ld-cs-foot { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ld-c-slate-bg); color: var(--ld-text-muted); font-size: 12px;
}

.ld-cs-foot b { color: var(--ld-text-strong); font-weight: 600; font-variant-numeric: tabular-nums;
}

.ld-cs-warn { color: var(--ld-danger);
}

.ld-cs-dash { color: var(--ld-text-muted);
}

/* detail */
.ld-cs-back { color: var(--ld-text-muted); font-size: 13px; font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 14px; display: inline-flex; gap: 6px; align-items: center;
}

.ld-cs-back:hover { color: var(--ld-text-strong);
}

.ld-cs-dhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px;
}

.ld-cs-dtitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.ld-cs-dtitle h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--ld-text-strong);
}

.ld-cs-ddom { color: var(--ld-text-muted); font-size: 13px; margin-top: 3px;
}

.ld-cs-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px;
}

.ld-cs-stat { background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 12px; padding: 14px 16px;
}

.ld-cs-stat__l { color: var(--ld-text-muted); font-size: 12px; margin-bottom: 6px;
}

.ld-cs-stat__v { font-size: 22px; font-weight: 600; color: var(--ld-text-strong); font-variant-numeric: tabular-nums;
}

.ld-cs-panel { background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
}

.ld-cs-panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--ld-text-strong);
}

.ld-cs-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px;
}

.ld-cs-res__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px;
}

.ld-cs-res__h b { font-size: 16px; font-weight: 600; color: var(--ld-text-strong); font-variant-numeric: tabular-nums;
}

.ld-cs-res__h .lbl { color: var(--ld-text-muted);
}

.ld-cs-res__sk { margin-top: 8px; color: var(--ld-text-muted);
}

.ld-cs-integ { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}

.ld-cs-chip { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--ld-border); border-radius: 10px; font-size: 13px; color: var(--ld-text-body);
}

.ld-cs-chip .s { width: 9px; height: 9px; border-radius: 50%; flex: none;
}

.ld-cs-chip .st { margin-left: auto; font-size: 12px; font-weight: 600;
}

.ld-cs-tbl { width: 100%; border-collapse: collapse; font-size: 13px;
}

.ld-cs-tbl th { text-align: left; color: var(--ld-text-muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--ld-border);
}

.ld-cs-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--ld-c-slate-bg); color: var(--ld-text-body);
}

.ld-cs-tbl tr:last-child td { border-bottom: none;
}

.ld-cs-mono { font-variant-numeric: tabular-nums;
}

.ld-cs-empty { color: var(--ld-text-muted); font-size: 13px; padding: 6px 2px;
}

@media (max-width: 1100px) {
    .ld-cs-kpi, .ld-cs-stats { grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Status klientów: wygasające poświadczenia Entra ─────────────────────── */
.ld-cw-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px;
}

.ld-cw-row { display: flex; align-items: center; gap: 12px; background: var(--ld-surface); border: 1px solid var(--ld-border); border-radius: 10px; padding: 10px 14px;
}

.ld-cw-badge { flex: none; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--ld-c-white);
}

.ld-cw-badge--dead { background: var(--ld-c-graphite-700);
}

.ld-cw-badge--red { background: var(--ld-danger);
}

.ld-cw-badge--amber { background: var(--ld-warn);
}

.ld-cw-app { font-size: 14px; font-weight: 600; color: var(--ld-text-strong);
}

.ld-cw-meta { font-size: 13px; color: var(--ld-text-muted); margin-left: auto;
}

/* ---------- status klientow: przebudowa ---------- */
.ld-cs-kpi__c--alert { border-color: var(--ld-primary); box-shadow: inset 3px 0 0 var(--ld-primary);
}

.ld-cs-kpi__s { margin-top: 6px; font-size: 12px; color: var(--ld-text-muted);
}

.ld-cs-kpi__u { font-size: 17px; font-weight: 600; margin-left: 1px;
}

.ld-cs-kpi__v--unknown { color: var(--ld-c-slate-400);
}

.ld-cs-note { padding: 12px 16px; border-radius: var(--ld-radius-sm); font-size: 13px; margin-bottom: 20px;
}

.ld-cs-note--unknown { background: var(--ld-c-slate-bg); border: 1px solid var(--ld-border); color: var(--ld-text-body);
}

.ld-cs-empty { padding: 28px; text-align: center; background: var(--ld-surface); border: 1px dashed var(--ld-border); border-radius: var(--ld-radius);
}

.ld-cs-empty__t { font-size: 15px; font-weight: 600; color: var(--ld-text-strong);
}

.ld-cs-empty__d { margin-top: 6px; font-size: 13px; color: var(--ld-text-muted);
}

.ld-cs-nometrics { margin-bottom: 14px; padding: 9px 12px; border-radius: 8px; background: var(--ld-c-slate-bg); color: var(--ld-text-muted); font-size: 12px;
}

/* Strzalka zamiast podpisu „kliknij, aby zobaczyc szczegoly" — afordancja ma byc w karcie. */
.ld-cs-card__go { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ld-c-slate-400); transition: transform .12s, color .12s;
}

.ld-cs-card:hover .ld-cs-card__go { color: var(--ld-primary-ink); transform: translateX(2px);
}

.ld-cw-row--dead { border-color: var(--ld-c-red-200); background: var(--ld-c-red-50);
}

/* ---------- responsywnosc ---------- */
@media (max-width: 600px) {
    .ld-cs-kpi,
    .ld-cs-stats,
    .ld-cs-res-grid {
        grid-template-columns: 1fr;
    }
}