/* UI V3 rooms: one rule set, shared theme/spacing tokens and dashboard photo mapping. */
#app-view .rooms-view {display:grid;gap:var(--v3-space-4);padding-top:var(--v3-space-3);min-width:0}
.rooms-view-header,.room-detail-top {display:flex;align-items:center;justify-content:space-between;gap:var(--v3-space-3);min-width:0}
.rooms-view-header {margin-bottom:var(--v3-space-4)}
.rooms-view-header h3 {margin:0;font-size:1.8rem;letter-spacing:-.035em;color:var(--v3-text)}
.rooms-view-header p {margin:var(--v3-space-1) 0 0;font-size:.85rem;color:var(--v3-muted)}
.room-create-open,.room-back,.room-detail-edit {min-height:var(--v3-touch);min-width:var(--v3-touch);border:1px solid var(--v3-border);border-radius:var(--v3-radius-sm);color:var(--v3-text);background:var(--v3-card);padding:var(--v3-space-2) var(--v3-space-3);cursor:pointer;flex-shrink:0}
.room-create-open {background:var(--v3-primary);color:var(--v3-primary-contrast);border-color:var(--v3-primary);font-weight:650}
.rooms-page-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v3-space-4)}
#app-view .rooms-page-card {position:relative;display:block;min-width:0;padding:0;overflow:hidden;border:1px solid var(--v3-border);border-radius:var(--v3-radius-md);background:var(--v3-secondary);cursor:pointer;text-align:left;transition:transform .16s,border-color .16s}
.rooms-page-art {display:block;position:relative;height:calc(var(--v3-room-height) + var(--v3-space-5));background-size:cover;background-position:center;background-color:var(--v3-secondary)}
.rooms-page-art::after,.room-detail-hero::after {content:'';position:absolute;inset:0;background:var(--v3-photo-overlay);pointer-events:none}
.rooms-page-copy {position:absolute;inset:auto var(--v3-space-4) var(--v3-space-4);display:grid;gap:var(--v3-space-1);z-index:1;padding-right:var(--v3-space-5);color:var(--v3-photo-text)}
.rooms-page-copy strong {font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.rooms-page-copy small {font-size:.78rem;color:inherit}
.rooms-page-chevron {position:absolute;right:var(--v3-space-4);bottom:var(--v3-space-4);z-index:1;color:var(--v3-photo-text);font-size:1.5rem}
.rooms-page-art.room-generic,.room-detail-hero.room-generic {background:var(--v3-secondary)}
.rooms-page-art.room-generic .room-fallback-icon {color:var(--v3-primary);background:var(--v3-card)}
.room-detail {display:grid;gap:var(--v3-space-4);min-width:0}
.room-detail-heading {flex:1;min-width:0;color:var(--v3-muted);font-size:.85rem}
.room-back,.room-detail-edit {font-size:1.2rem}
.room-detail-hero {position:relative;min-height:240px;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--v3-radius-md);background-size:cover;background-position:center}
.room-hero-copy {position:relative;z-index:1;padding:var(--v3-space-5);color:var(--v3-photo-text);min-width:0}
.room-hero-copy h3 {margin:0;font-size:2rem;letter-spacing:-.035em;overflow-wrap:anywhere}
.room-hero-copy p {margin:var(--v3-space-2) 0 0;font-size:.9rem;color:inherit}
.room-device-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v3-space-3)}
.room-device-row {display:grid;grid-template-columns:var(--v3-touch) minmax(0,1fr) var(--v3-touch);gap:var(--v3-space-3);align-items:center;min-width:0;padding:var(--v3-space-4);border:1px solid var(--v3-border);border-radius:var(--v3-radius-md);background:var(--v3-card);color:var(--v3-text)}
.room-device-row .device-copy strong {white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.room-device-row .device-copy small {display:block;margin-top:var(--v3-space-1);color:var(--v3-muted)}
.room-device-row .device-icon {width:var(--v3-touch);height:var(--v3-touch);background:var(--v3-secondary);color:var(--v3-primary);border-radius:var(--v3-radius-sm);display:grid;place-items:center}
#app-view .room-device-row .device-toggle {width:var(--v3-touch);height:var(--v3-touch);min-height:var(--v3-touch);border:0;background:transparent;position:relative}
.room-device-row .device-toggle::before {content:'';position:absolute;inset:12px 3px;border-radius:var(--v3-radius-lg);background:var(--v3-border)}
.room-device-row .device-toggle.is-on::before {background:var(--v3-primary)}
#app-view .room-device-row .device-toggle span {position:absolute;top:14px;left:5px;width:16px;height:16px;transform:none;background:var(--v3-card)}
#app-view .room-device-row .device-toggle.is-on span {transform:translateX(18px)}
#app-view .rooms-page-card:focus-visible,#app-view .rooms-view button:focus-visible {outline:3px solid var(--v3-primary);outline-offset:3px}
@media(hover:hover){#app-view .rooms-page-card:hover {transform:translateY(-2px);border-color:var(--v3-primary)} .room-back:hover,.room-detail-edit:hover {background:var(--v3-secondary)}}
.rooms-page-card:active {transform:scale(.99)}
/* Reuse the existing management editor; scope V3 treatment to rooms. */
#management-editor[data-editor-type^='room'] .management-editor-panel {background:var(--v3-card);color:var(--v3-text);border:1px solid var(--v3-border);border-radius:var(--v3-radius-lg);max-height:calc(100dvh - var(--v3-space-5) * 2);overflow:auto}
#management-editor[data-editor-type^='room'] .management-editor-field input {background:var(--v3-page);color:var(--v3-text);border:1px solid var(--v3-border);border-radius:var(--v3-radius-sm);min-height:var(--v3-touch);width:100%;min-width:0}
#management-editor[data-editor-type^='room'] button {min-height:var(--v3-touch);border-radius:var(--v3-radius-sm)}
#management-editor[data-editor-type^='room'] .management-editor-primary {background:var(--v3-primary);color:var(--v3-primary-contrast)}
#management-editor[data-editor-type^='room'] .management-editor-secondary {background:var(--v3-secondary);color:var(--v3-text)}
#management-editor[data-editor-type^='room'] :focus-visible {outline:3px solid var(--v3-primary);outline-offset:2px}
.room-create-form {display:grid;gap:var(--v3-space-3)}
@media(max-width:1180px){.rooms-page-grid,.room-device-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.rooms-page-grid,.room-device-list {grid-template-columns:1fr} .room-detail-hero {min-height:190px} .rooms-view-header h3 {font-size:1.5rem} .room-hero-copy {padding:var(--v3-space-4)}}
@media(max-width:640px){.room-create-form {grid-template-columns:1fr}}