/* app/valuerooms.css — CSS de COMPOSANT de l'écran « Mes ValueRooms », scopée
   .vr-rooms (jumelle de app/create-room.css). ZÉRO hex littéral : toutes les
   couleurs viennent des tokens --vr-* (cascade platformDefaults -> tenant.branding),
   prouvé par app/valuerooms.css.test.mjs. Copiée dans public-installer/ par
   build-installer.mjs (lien <link> absolu, comme create-room.css). Tolérance
   documentée : box-shadow rgba(0,0,0,.30) (ombre neutre, pas une couleur de marque). */

.vr-rooms { font-family: var(--vr-font-body); color: var(--vr-on-surface); }

.vr-rooms-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vr-rooms-title { font-size: 16px; margin: 0; }
.vr-rooms-scope { font-size: 12px; color: var(--vr-text-muted); }

.vr-rooms-toolbar { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.vr-rooms-search {
  flex: 1; min-width: 180px; padding: 9px 12px; font-size: 13.5px; font-family: var(--vr-font-body);
  border: var(--vr-border-thin) solid var(--vr-border); border-radius: var(--vr-radius-control);
  background: var(--vr-surface); color: var(--vr-on-surface); outline: none;
}
.vr-rooms-search:focus { border-color: var(--vr-structure); }
.vr-rooms-count { font-size: 12px; color: var(--vr-text-muted); white-space: nowrap; }

.vr-rooms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vr-rooms-th {
  text-align: left; padding: 9px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vr-text-muted); cursor: pointer; user-select: none;
  border-bottom: var(--vr-border-thin) solid var(--vr-border); white-space: nowrap;
}
.vr-rooms-th:hover { color: var(--vr-on-surface); }
.vr-rooms-th[data-sorted="asc"]::after { content: " \2191"; }
.vr-rooms-th[data-sorted="desc"]::after { content: " \2193"; }

.vr-rooms-body .vr-rooms-row { cursor: pointer; }
.vr-rooms-body td { padding: 10px; border-bottom: var(--vr-border-thin) solid var(--vr-border); vertical-align: middle; }
.vr-rooms-row:hover td { background: var(--vr-border); }
.vr-rooms-ref { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; }
.vr-rooms-date { font-variant-numeric: tabular-nums; color: var(--vr-text-muted); white-space: nowrap; }

.vr-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: var(--vr-border-thin) solid var(--vr-border); color: var(--vr-text-muted); white-space: nowrap;
}
.vr-badge-exp[data-exp="expired"] { color: var(--vr-on-accent); background: var(--vr-accent-action); border-color: var(--vr-accent-action); }
.vr-badge-exp[data-exp="expiring"] { color: var(--vr-on-structure); background: var(--vr-structure); border-color: var(--vr-structure); }

.vr-rooms-empty { display: none; font-size: 13.5px; color: var(--vr-text-muted); margin: 16px 0 0; }
.vr-rooms-empty.show { display: block; }

.vr-rooms-detail { display: none; margin-top: 18px; }
.vr-rooms-detail.show { display: block; }
.vr-rooms-detail-card {
  background: var(--vr-surface); border: var(--vr-border-thin) solid var(--vr-border);
  border-radius: var(--vr-radius-card); padding: 16px 18px; box-shadow: 0 16px 50px rgba(0,0,0,.30);
}
.vr-rooms-detail-head { display: flex; align-items: center; gap: 12px; }
.vr-rooms-detail-title { font-size: 15px; margin: 0; }
.vr-rooms-close {
  margin-left: auto; padding: 7px 12px; font-size: 12.5px; font-weight: 700; font-family: var(--vr-font-body);
  border: var(--vr-border-thin) solid var(--vr-border); border-radius: var(--vr-radius-control);
  background: transparent; color: var(--vr-on-surface); cursor: pointer;
}
.vr-rooms-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 14px 0; font-size: 13px; }
.vr-rooms-meta dt { color: var(--vr-text-muted); }
.vr-rooms-meta dd { margin: 0; }
.vr-rooms-preview-btn {
  padding: 9px 14px; font-size: 13px; font-weight: 700; font-family: var(--vr-font-body);
  color: var(--vr-on-accent); background: var(--vr-accent-action); border: none;
  border-radius: var(--vr-radius-control); cursor: pointer;
}
.vr-rooms-preview-btn:disabled { color: var(--vr-text-muted); background: transparent; border: var(--vr-border-thin) solid var(--vr-border); cursor: not-allowed; }
.vr-rooms-preview { margin-top: 14px; }