/* ---------- Cards ---------- */
.card-soft { background: var(--em-surface); border: 1px solid var(--em-border); border-radius: var(--em-radius); box-shadow: var(--em-shadow); }
.card-soft > .card-header { background: transparent; border-bottom: 1px solid var(--em-border); padding: 1rem 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-soft > .card-body { padding: 1.25rem; }

.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; height: 100%; }
.stat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.stat-label { color: var(--em-muted); font-size: .8125rem; font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: #22305f; }
.tone-primary { background: var(--em-primary-050); color: var(--em-primary); }
.tone-success { background: var(--em-success-bg); color: var(--em-success); }
.tone-warning { background: var(--em-warning-bg); color: var(--em-warning); }
.tone-danger { background: var(--em-danger-bg); color: var(--em-danger); }
.tone-info { background: var(--em-info-bg); color: var(--em-info); }
.tone-neutral { background: var(--em-neutral-bg); color: var(--em-neutral); }

.welcome-card { background: linear-gradient(120deg, #2f3c86 0%, #5b4fc9 100%); color: #fff; border: 0; overflow: hidden; position: relative; }
.welcome-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.welcome-card .text-muted-light { color: rgba(255, 255, 255, .75); }
.card-layer { z-index: 1; }
.task-due { width: 84px; }
.skeleton-light { background: rgba(255, 255, 255, .25); width: 160px; height: 38px; }
.closure-photo { max-height: 360px; }
.signature-thumb { height: 60px; max-width: 160px; object-fit: contain; }
/* Phones: two tiles per row leave ~150px each, so stack icon over text, let labels wrap and size numbers to fit. */
.stat-card > .min-w-0, .stat-card > span:last-child { min-width: 0; }
@media (max-width: 575.98px) {
    .stat-card { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .85rem .9rem; }
    .stat-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
    .stat-card .stat-label.text-truncate { white-space: normal; overflow: visible; }
    .stat-value { font-size: 1.3rem; overflow-wrap: anywhere; }
}

/* ---------- Client tasks (components/lead-tasks.js): the central work item of each client ---------- */
.lt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; }
.lt-card {
    background: var(--em-surface); border: 1px solid var(--em-border); border-radius: var(--em-radius-sm);
    padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0;
}
.lt-card.lt-main { border-left: 4px solid var(--em-primary); }
.lt-card.lt-done { opacity: .8; }
.lt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.lt-title { font-weight: 700; color: var(--em-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lt-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: var(--em-muted); align-items: center; }
.lt-desc { font-size: .82rem; color: var(--em-muted); white-space: pre-line; }
.lt-progress { display: flex; align-items: center; gap: .5rem; }
.lt-progress .progress { flex: 1 1 auto; height: .55rem; background: var(--em-surface-2); }
.lt-progress-label { font-weight: 700; font-size: .8rem; min-width: 2.6rem; text-align: right; }
.lt-counts { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: var(--em-text); }
.lt-count { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.lt-count .bi { color: var(--em-muted); }
.lt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .15rem; }
.lt-actions .lt-status { width: auto; min-width: 9.5rem; }
.lt-work { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.lt-completed summary { cursor: pointer; font-weight: 600; color: var(--em-muted); margin-top: .75rem; }
.lt-add { background: var(--em-surface-2); border: 1px dashed var(--em-border); border-radius: var(--em-radius-sm); padding: .75rem; margin-bottom: .75rem; }

/* Main-task chip in the Leads & Clients company cell. */
.task-chip {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; padding: .2rem .55rem;
    border: 1px solid var(--em-border); border-radius: 999px; background: var(--em-surface-2);
    font-size: .74rem; color: var(--em-text); cursor: pointer; max-width: 100%;
}
.task-chip:hover, .task-chip:focus-visible { border-color: var(--em-primary); color: var(--em-primary); }
.task-chip .progress { width: 46px; height: .4rem; flex: none; }
.task-chip .task-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phones: one column, full-width controls and comfortable (44px) tap targets. */
@media (max-width: 767.98px) {
    .lt-grid { grid-template-columns: 1fr; }
    .lt-actions { flex-direction: column; align-items: stretch; }
    .lt-actions .lt-status { width: 100%; min-height: 44px; }
    .lt-work { margin-left: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
    .lt-work .btn, .lt-toolbar .btn, .lt-add .btn { min-height: 44px; }
    .lt-add .form-control, .lt-add .form-select { min-height: 44px; }
    .task-chip { min-height: 32px; }
}