/* lock.css — homepage Locks card. The card shell reuses .bhyve-card (frosted +
 * night theme); these rules style the lock grid + items. Night-theme overrides
 * mirror bhyve.css and key on [data-sky="night"]. */

.lock-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.lock-item {
  flex: 0 1 220px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid #e3e6ef; border-radius: 10px; padding: 14px; background: #fff;
}
.lock-item-head { display: flex; align-items: center; gap: 8px; }
.lock-name { font-weight: 600; font-size: 14px; color: #1a1d26; min-width: 0; }

.lock-state { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; }
.lock-state .ph { font-size: 22px; }
.lock-state.locked   { color: #1f6b3d; }
.lock-state.unlocked { color: #b26a00; }
.lock-state.unknown  { color: #8a93a6; }

.lock-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: #5a6172; }
.lock-batt .ph { font-size: 15px; color: #1f6b3d; vertical-align: -2px; }
.lock-door.open { color: #9a1f1f; font-weight: 600; }

/* ── Night theme ── */
[data-sky="night"] .lock-item { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
[data-sky="night"] .lock-name { color: #eef2fa; }
[data-sky="night"] .lock-state.locked   { color: #4bd190; }
[data-sky="night"] .lock-state.unlocked { color: #f0b866; }
[data-sky="night"] .lock-state.unknown  { color: rgba(230, 236, 245, .5); }
[data-sky="night"] .lock-meta { color: rgba(230, 236, 245, .55); }
[data-sky="night"] .lock-batt .ph { color: #4bd190; }
[data-sky="night"] .lock-door.open { color: #ff9a92; }