/* Light device cards: the device list (Device/List) and the cards of the add-device steps (Device/Add). */
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; padding: 1.1rem; }

.dc-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bs-gray-200, #eff2f5); border-radius: .8rem;
    background: var(--bs-body-bg, #fff); box-shadow: 0 1px 2px rgba(20, 32, 74, .05); transition: box-shadow .15s, transform .15s; }
.dc-card:hover { box-shadow: 0 8px 22px rgba(20, 32, 74, .12); transform: translateY(-2px); }

.dc-hero { position: relative; display: flex; align-items: center; justify-content: center; height: 105px; color: #3a4189;
    background: linear-gradient(135deg, #f0f1fa 0%, #f7f8fd 100%); }
.dc-hero .dc-art { width: 50px; height: 50px; transition: transform .2s; }
.dc-card:hover .dc-art { transform: scale(1.06); }
.dc-hero > a.dc-hero-link { position: absolute; inset: 0; }

.dc-pill { z-index: 1; position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: .3rem; height: 20px; padding: 0 .5rem;
    border-radius: 999px; font-size: .6rem; font-weight: 600; background: #eceef4; color: #565e7a; }
.dc-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dc-pill.is-online { background: #e3f6ea; color: #11602f; }
.dc-pill.is-offline { background: #fde8e8; color: #b42318; }
.dc-edit { z-index: 1; position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: .45rem; background: #fff; color: #3a4189; box-shadow: 0 1px 2px rgba(20, 32, 74, .1); }

.dc-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .15rem; min-height: 0; padding: .65rem .75rem .75rem; }
.dc-badge { align-self: flex-start; margin-bottom: .25rem; padding: .1rem .45rem; border-radius: .45rem; background: #ecedf8; color: #3a4189;
    font-size: .65rem; font-weight: 600; }
.dc-title { overflow: hidden; font-size: .9rem; font-weight: 700; color: var(--bs-gray-900, #181c32); text-overflow: ellipsis; white-space: nowrap; }
.dc-line { overflow: hidden; font-size: .65rem; color: var(--bs-gray-600, #7e8299); text-overflow: ellipsis; white-space: nowrap; }
.dc-line b { font-weight: 600; color: var(--bs-gray-800, #3f4254); }
.dc-actions { display: flex; gap: .35rem; margin-top: auto; padding-top: .5rem; }