/* ====================================================================
   Unio Suite — Skin pra /rooms (e demais páginas autenticadas) Greenlight
   Baseado no design Figma node 254:10837 (Rooms page)
   Aplicado via useEffect na Rooms.jsx (link tag injection)
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Public+Sans:wght@400;500&family=Sora:wght@400;600&display=swap');

:root {
  --us-bg-app: #f9f9f9;
  --us-primary: #6100f9;
  --us-primary-300: #7d48ff;
  --us-primary-150: #eae1ff;
  --us-text: #212529;
  --us-text-subtle: #656971;
  --us-text-muted: #6c757d;
  --us-stroke: #dee2e6;
  --us-card-border: rgba(0, 0, 0, 0.18);
  --us-success-dot: #24ca68;
  --us-success-bg: #f0fbf4;
  --us-success-text: #126534;
  --us-card-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
}

/* -------- Body / app shell -------- */
body.uniosuite-app-shell {
  background-color: var(--us-bg-app) !important;
  font-family: 'Inter', 'Public Sans', system-ui, -apple-system, sans-serif;
}

/* Matar box-shadow + clip-path do .wide-white e .background-whitesmoke do Greenlight
   (helpers.scss usa box-shadow: 0 0 0 100vmax white pra simular bg full-width — meu CSS
    precisa OVERRIDE essas duas propriedades, não só background) */
body.uniosuite-app-shell .wide-white,
body.uniosuite-app-shell .background-whitesmoke,
body.uniosuite-app-shell .uniosuite-rooms-tabs,
body.uniosuite-app-shell .uniosuite-rooms-tab-pane,
body.uniosuite-app-shell #layout-content {
  background: var(--us-bg-app) !important;
  background-color: var(--us-bg-app) !important;
  box-shadow: 0 0 0 100vmax var(--us-bg-app) !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Wrapper Tabs ContainerS — centralizar 1320px e padding-top generoso */
body.uniosuite-app-shell .uniosuite-rooms-tabs {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 48px 24px 0 !important;
  background: var(--us-bg-app) !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* Container tab-content centralizado também */
body.uniosuite-app-shell .tab-content {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background: var(--us-bg-app) !important;
}

/* -------- Tabs (Salas / Gravações) -------- */
body.uniosuite-app-shell .nav-tabs {
  border-bottom: none !important;
  padding-top: 48px;
  padding-left: 0;
  margin-bottom: 0;
  background: var(--us-bg-app);
  gap: 8px;
}

body.uniosuite-app-shell .nav-tabs .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: var(--us-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px 6px 0 0 !important;
  padding: 8px 32px 10px !important;
  line-height: 24px !important;
}

body.uniosuite-app-shell .nav-tabs .nav-link:hover {
  color: var(--us-primary) !important;
  background: transparent !important;
}

body.uniosuite-app-shell .nav-tabs .nav-link.active {
  color: var(--us-primary) !important;
  background: white !important;
  border-bottom: 2px solid var(--us-primary) !important;
}

/* -------- Tab content padding -------- */
body.uniosuite-app-shell .tab-pane {
  padding-top: 48px;
}

/* -------- Search + "Nova sala" header (Stack do RoomsList) -------- */
body.uniosuite-app-shell .tab-pane > .hstack.pt-5,
body.uniosuite-app-shell .tab-pane .hstack.pt-5 {
  padding-top: 0 !important;
  margin-bottom: 24px;
  align-items: center !important;
  justify-content: space-between !important;
}

/* SearchBar wrapper container */
body.uniosuite-app-shell .input-group {
  background: white;
  border: 1px solid var(--us-stroke);
  border-radius: 6px;
  height: 44px;
  width: 301px;
  overflow: hidden;
}

body.uniosuite-app-shell .input-group:focus-within {
  border-color: var(--us-primary);
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12);
}

body.uniosuite-app-shell .input-group > .input-group-text,
body.uniosuite-app-shell .input-group > span {
  background: white !important;
  border: none !important;
  padding: 12px 14px !important;
  color: var(--us-text-muted);
}

body.uniosuite-app-shell .input-group > .form-control,
body.uniosuite-app-shell .input-group input[type="text"],
body.uniosuite-app-shell .input-group input[type="search"] {
  background: white !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: var(--us-text) !important;
  padding: 11px 14px 11px 0 !important;
  height: 44px !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell .input-group input::placeholder {
  color: rgba(33, 37, 41, 0.75) !important;
}

/* "Nova sala" button — pill brand roxo */
body.uniosuite-app-shell .btn-brand,
body.uniosuite-app-shell button.btn.btn-brand {
  background: var(--us-primary) !important;
  border: none !important;
  border-radius: 9999px !important;
  height: 56px !important;
  padding: 0 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

body.uniosuite-app-shell .btn-brand:hover,
body.uniosuite-app-shell button.btn.btn-brand:hover {
  background: #5300d6 !important;
}

/* (removido: ícone + via ::before — i18n string `room.add_new_room` JÁ tem "+ " no
   início, então adicionar via CSS duplicava o sinal. Deixar i18n cuidar do prefix.
   Se quiser ícone SVG dedicado no futuro, editar RoomsList.jsx pra usar <PlusIcon>
   antes do texto e remover o "+" da string i18n.) */

/* -------- Room cards -------- */
body.uniosuite-app-shell #room-card,
body.uniosuite-app-shell .card-shadow {
  width: 305px !important;
  height: 272px !important;
  background: white !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: var(--us-card-shadow) !important;
  padding: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.uniosuite-app-shell #room-card .card-body {
  flex: 1 0 0;
  padding: 16px 16px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Esconder o "room-icon" (Figma não tem) */
body.uniosuite-app-shell .room-icon {
  display: none !important;
}

/* Stack horizontal do top — reposiciona badge pra topo esquerdo */
body.uniosuite-app-shell #room-card .card-body > .hstack:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  min-height: 0;
}

/* Badge "Online" pill verde (style Figma) */
body.uniosuite-app-shell .online-badge {
  background: var(--us-success-bg) !important;
  color: var(--us-success-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  padding: 4px 8px !important;
  border-radius: 800px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

body.uniosuite-app-shell .online-badge .blinking-green-dot,
body.uniosuite-app-shell .online-badge::before {
  background: var(--us-success-dot) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 10px !important;
  display: inline-block !important;
  animation: none !important;
}

/* Stack do título + last_session */
body.uniosuite-app-shell #room-card .card-body > .vstack.my-4 {
  margin: 0 !important;
  gap: 8px;
}

body.uniosuite-app-shell #room-card .card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.34px !important;
  color: var(--us-text) !important;
  margin-bottom: 0 !important;
}

body.uniosuite-app-shell #room-card .text-muted {
  font-family: 'Public Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.084px !important;
  color: var(--us-text-subtle) !important;
}

/* Card footer */
body.uniosuite-app-shell #room-card .card-footer {
  background: white !important;
  border-top: 1px solid var(--us-card-border) !important;
  border-radius: 0 0 5px 5px !important;
  padding: 9px 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}

/* Botão "Participar" outline brand */
body.uniosuite-app-shell #room-card .btn-brand-outline,
body.uniosuite-app-shell #room-card .btn.btn-brand-outline {
  background: white !important;
  border: 2px solid var(--us-primary-150) !important;
  border-radius: 6px !important;
  min-width: 120px;
  padding: 8px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: var(--us-primary-300) !important;
  float: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell #room-card .btn-brand-outline:hover {
  border-color: var(--us-primary-300) !important;
  background: #faf8ff !important;
}

/* Botão copy (DocumentDuplicateIcon) — só ícone */
body.uniosuite-app-shell #room-card .btn.btn-icon,
body.uniosuite-app-shell #room-card .btn[variant="icon"] {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell #room-card .btn.btn-icon svg,
body.uniosuite-app-shell #room-card .btn[variant="icon"] svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--us-text-subtle) !important;
}

/* -------- Grid spacing -------- */
body.uniosuite-app-shell .row.g-4 {
  margin-top: 0 !important;
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

body.uniosuite-app-shell .row.g-4 > .col,
body.uniosuite-app-shell .row.g-4 > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 0 !important;
}

/* =====================================================================
   Header / Navbar (estilo Figma node 254:17308)
   ===================================================================== */

body.uniosuite-app-shell #navbar,
body.uniosuite-app-shell .navbar {
  background: white !important;
  height: 64px !important;
  padding: 0 24px !important;
  border-bottom: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.uniosuite-app-shell #navbar > .container,
body.uniosuite-app-shell .navbar > .container {
  padding: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo Meet — agora <img> inline no Header.jsx (uniosuite-meet-logo-img)
   Substituí Logo Greenlight nativo por SVG oficial Figma direto.
   Sem background-image — browser usa width/height nativos 116x30 do <img> */
body.uniosuite-app-shell .navbar-brand,
body.uniosuite-app-shell .uniosuite-navbar-brand {
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

body.uniosuite-app-shell .uniosuite-meet-logo-img {
  width: 116px !important;
  height: 30px !important;
  display: block !important;
  user-select: none;
}

/* User dropdown — simplificar pra avatar redondo + chevron pequeno */
body.uniosuite-app-shell #nav-user-dropdown,
body.uniosuite-app-shell .nav-item.dropdown {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

body.uniosuite-app-shell #nav-user-dropdown > a.nav-link,
body.uniosuite-app-shell .nav-item.dropdown > a.nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 4px 8px !important;
  background: white !important;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--us-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  cursor: pointer;
}

body.uniosuite-app-shell #nav-user-dropdown > a.nav-link:hover,
body.uniosuite-app-shell .nav-item.dropdown > a.nav-link:hover {
  border-color: var(--us-stroke);
}

/* Avatar circular pequeno — força 32x32 SOBRE o .small-circle Greenlight (40px nativo)
   E também o Bootstrap <Placeholder> que renderiza quando avatar não carregou (width 100% default!) */
body.uniosuite-app-shell .small-circle,
body.uniosuite-app-shell img.small-circle,
body.uniosuite-app-shell .placeholder.small-circle,
body.uniosuite-app-shell span.placeholder.small-circle,
body.uniosuite-app-shell .placeholder-glow > .small-circle,
body.uniosuite-app-shell .placeholder-glow .placeholder,
body.uniosuite-app-shell .nav-item.dropdown .small-circle,
body.uniosuite-app-shell #nav-user-dropdown .small-circle,
body.uniosuite-app-shell #nav-user-dropdown img,
body.uniosuite-app-shell #nav-user-dropdown .placeholder {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* Esconder nome user + chevron (Figma só tem avatar) */
body.uniosuite-app-shell .us-username-hide,
body.uniosuite-app-shell .us-chevron-hide,
body.uniosuite-app-shell #chevron-profile {
  display: none !important;
}

/* =====================================================================
   4 Ícones Header (Notification / Suporte / Settings / Apps) — Figma style
   ===================================================================== */

/* Header — match Figma node 254:17308 — 4 ícones + avatar */
body.uniosuite-app-shell .uniosuite-header-icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 4px !important;
}

body.uniosuite-app-shell .us-header-icon-btn {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: background-color .15s ease !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell .us-header-icon-btn:hover {
  background: #f0f0f0 !important;
}

body.uniosuite-app-shell .us-header-icon-btn:focus-visible {
  outline: 2px solid var(--us-primary) !important;
  outline-offset: 1px !important;
}

/* SVGs Figma têm fill inline com var(--fill-0, #444746) — força tamanho 24x24
   e mantém cor nativa (Material Google gray-800). */
body.uniosuite-app-shell .us-header-icon {
  width: 24px !important;
  height: 24px !important;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Separador visual antes do "Apps" — gap 8px vs 4px (Figma layout) */
body.uniosuite-app-shell .us-header-icon-btn--apps {
  margin-left: 4px !important;
}

/* Settings dropdown — engrenagem agora tem itens de perfil dentro */
body.uniosuite-app-shell .us-settings-dropdown.dropdown {
  display: inline-flex;
  align-items: center;
}

body.uniosuite-app-shell .us-settings-dropdown > .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline-flex;
  align-items: center;
}

/* Esconder caret default do dropdown na engrenagem */
body.uniosuite-app-shell .us-settings-dropdown > .dropdown-toggle::after {
  display: none !important;
}

body.uniosuite-app-shell .us-settings-dropdown .us-header-icon-btn--settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border-radius: 20px;
  transition: background-color .15s ease;
  cursor: pointer;
}

body.uniosuite-app-shell .us-settings-dropdown:hover .us-header-icon-btn--settings,
body.uniosuite-app-shell .us-settings-dropdown.show .us-header-icon-btn--settings {
  background: #f0f0f0;
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-menu {
  min-width: 240px;
  border: 1px solid var(--us-stroke, #dee2e6);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 23, 37, 0.12), 0 2px 6px rgba(23, 23, 37, 0.06);
  padding: 8px 0;
  margin-top: 8px !important;
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-item {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #171725;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-item:hover {
  background: #faf8ff;
  color: var(--us-primary, #6100f9);
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-item .hi-s {
  width: 18px;
  height: 18px;
  color: var(--us-text-subtle, #656971);
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-item:hover .hi-s {
  color: var(--us-primary, #6100f9);
}

body.uniosuite-app-shell .us-settings-dropdown .dropdown-divider {
  margin: 6px 0;
  border-color: var(--us-stroke, #dee2e6);
}

/* Header card no topo do dropdown — info user (avatar + nome + email) */
body.uniosuite-app-shell .us-settings-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, rgba(97, 0, 249, 0.04) 0%, rgba(23, 190, 187, 0.03) 100%);
  border-bottom: 1px solid transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-top: -8px;
}

body.uniosuite-app-shell .us-settings-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-image: url('/uniosuite/icons/avatar-ring.svg');
  background-size: 44px 44px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

body.uniosuite-app-shell .us-settings-user-avatar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
}

body.uniosuite-app-shell .us-settings-user-avatar-inner img,
body.uniosuite-app-shell .us-settings-user-avatar-inner .small-circle,
body.uniosuite-app-shell .us-settings-user-avatar-inner .avatar-small {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

body.uniosuite-app-shell .us-settings-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

body.uniosuite-app-shell .us-settings-user-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #171725;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.uniosuite-app-shell .us-settings-user-email {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--us-subtitle, #656971);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sign-out wrapper + botão */
body.uniosuite-app-shell .us-settings-signout-wrap {
  padding: 4px 12px 8px;
}

body.uniosuite-app-shell .us-settings-signout-btn,
body.uniosuite-app-shell .us-settings-dropdown .us-settings-signout-btn {
  display: block !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid var(--us-primary-150, #eae1ff) !important;
  color: var(--us-primary, #6100f9) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  height: 38px !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell .us-settings-signout-btn:hover {
  background-color: var(--us-primary, #6100f9) !important;
  border-color: var(--us-primary, #6100f9) !important;
  color: #ffffff !important;
}

/* Avatar — apenas visual no header (sem clique/dropdown).
   Anel gradient quadricolor (turquesa/purple/magenta/laranja) match Figma
   node 254:17286 — mesmas cores do logo Meet. */
body.uniosuite-app-shell .us-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  background-image: url('/uniosuite/icons/avatar-ring.svg');
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center;
}

body.uniosuite-app-shell .us-user-avatar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
}

body.uniosuite-app-shell .us-user-avatar-inner img,
body.uniosuite-app-shell .us-user-avatar-inner .avatar,
body.uniosuite-app-shell .us-user-avatar-inner .small-circle,
body.uniosuite-app-shell .us-user-avatar-inner .avatar-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* ====================================================================
   Apps dropdown — Modal de Ferramentas (Figma node 254:10909)
   Aberto pelo clique no ícone Apps do header. Card com 6 ferramentas.
   ==================================================================== */

body.uniosuite-app-shell .us-apps-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body.uniosuite-app-shell .us-header-icon-btn--apps.is-open {
  background: #f0f0f0 !important;
}

body.uniosuite-app-shell .us-apps-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1050;
  min-width: 280px;
  background: #ffffff;
  border: 2px solid var(--us-primary-150, #eae1ff);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 4px 4px rgba(213, 180, 254, 0.10),
    0 15px 7.5px rgba(213, 180, 254, 0.09),
    0 34px 10px rgba(213, 180, 254, 0.05);
  animation: us-apps-fade-in .14s ease-out;
}

@keyframes us-apps-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.uniosuite-app-shell .us-apps-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #121212;
  margin: 0 0 8px;
  padding: 0;
}

body.uniosuite-app-shell .us-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

body.uniosuite-app-shell .us-apps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0;
  border-radius: 8px;
  text-decoration: none;
  color: #5f6368;
  transition: background-color .15s ease, transform .12s ease;
  cursor: pointer;
}

body.uniosuite-app-shell .us-apps-item:hover {
  background: var(--us-primary-100, #faf8ff);
  text-decoration: none;
  color: #5f6368;
}

body.uniosuite-app-shell .us-apps-item.is-active {
  background: var(--us-primary-100, #faf8ff);
}

body.uniosuite-app-shell .us-apps-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

body.uniosuite-app-shell .us-apps-item.is-disabled:hover {
  background: transparent;
  transform: none;
}

body.uniosuite-app-shell .us-apps-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}

body.uniosuite-app-shell .us-apps-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

body.uniosuite-app-shell .us-apps-label {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #5f6368;
  text-align: center;
}

body.uniosuite-app-shell .us-apps-item.is-active .us-apps-label,
body.uniosuite-app-shell .us-apps-item:hover .us-apps-label {
  color: var(--us-primary, #6100f9);
}

/* Mobile: dropdown ajusta margin direita */
@media (max-width: 576px) {
  body.uniosuite-app-shell .us-apps-dropdown {
    right: -8px;
    min-width: 260px;
  }
}

/* ====================================================================
   Room detail — "dentro da sala" (Figma node 254:11002)
   Breadcrumb ← Início, hero (title + subtitle + 2 botões), tabs
   ==================================================================== */

/* Breadcrumb ← Início — link purple com seta */
body.uniosuite-app-shell .uniosuite-room-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--us-primary, #6100f9);
  text-decoration: none;
  padding-top: 12px;
}

body.uniosuite-app-shell .uniosuite-room-breadcrumb:hover {
  text-decoration: none;
  color: var(--us-primary-300, #7d48ff);
}

body.uniosuite-app-shell .uniosuite-room-breadcrumb .hi-s {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}

/* Room header — h1 title */
body.uniosuite-app-shell .uniosuite-room-detail h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 34px !important;
  letter-spacing: -0.456px !important;
  color: var(--us-text, #171725) !important;
  margin-bottom: 4px !important;
}

/* Subtitle "Não existem sessões anteriores" */
body.uniosuite-app-shell .uniosuite-room-detail .room-header-wrapper .text-muted {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: var(--us-subtitle, #656971) !important;
}

/* Botão "Copiar link de participação" — outline lilás (Figma) */
body.uniosuite-app-shell .uniosuite-room-copy-btn {
  background: #ffffff !important;
  border: 2px solid var(--us-primary-150, #eae1ff) !important;
  border-radius: 6px !important;
  padding: 8px 24px !important;
  min-width: 240px;
  height: auto !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: var(--us-primary-300, #7d48ff) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-shadow: none !important;
  text-transform: none !important;
}

body.uniosuite-app-shell .uniosuite-room-copy-btn:hover,
body.uniosuite-app-shell .uniosuite-room-copy-btn:focus,
body.uniosuite-app-shell .uniosuite-room-copy-btn:active {
  background: #faf8ff !important;
  border-color: var(--us-primary, #6100f9) !important;
  color: var(--us-primary, #6100f9) !important;
}

body.uniosuite-app-shell .uniosuite-room-copy-btn .hi-s {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8;
}

/* Botão "Nova sala / Iniciar / Entrar" — pill purple grande */
body.uniosuite-app-shell .uniosuite-room-start {
  background: var(--us-primary, #6100f9) !important;
  border: none !important;
  border-radius: 9999px !important;
  height: 56px !important;
  padding: 0 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-shadow: none !important;
}

body.uniosuite-app-shell .uniosuite-room-start:hover,
body.uniosuite-app-shell .uniosuite-room-start:focus,
body.uniosuite-app-shell .uniosuite-room-start:active:not(:disabled) {
  background: var(--us-primary-300, #7d48ff) !important;
  color: #ffffff !important;
}

body.uniosuite-app-shell .uniosuite-room-start .us-room-start-icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}

/* Tabs Greenlight (FeatureTabs) — Gravações / Apresentação / Acesso / Definições */
body.uniosuite-app-shell .uniosuite-room-detail + .nav-tabs,
body.uniosuite-app-shell .uniosuite-room-detail ~ .tab-content,
body.uniosuite-app-shell #navbar + main .nav-tabs.wide-white,
body.uniosuite-app-shell .nav-tabs.wide-white {
  background: var(--us-bg-app, #f9f9f9) !important;
  border-bottom: none !important;
  padding-top: 24px !important;
  gap: 8px;
}

/* Reset box-shadow trick do .wide-white nas tabs */
body.uniosuite-app-shell .nav-tabs.wide-white {
  box-shadow: 0 0 0 100vmax var(--us-bg-app, #f9f9f9) !important;
  clip-path: inset(0 -100vmax);
}

body.uniosuite-app-shell .nav-tabs .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #6c757d !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 32px !important;
  border-radius: 6px 6px 0 0 !important;
}

body.uniosuite-app-shell .nav-tabs .nav-link:hover {
  color: var(--us-primary, #6100f9) !important;
  background: transparent !important;
}

body.uniosuite-app-shell .nav-tabs .nav-link.active {
  background: #ffffff !important;
  color: var(--us-primary, #6100f9) !important;
  border-bottom: 2px solid var(--us-primary, #6100f9) !important;
  font-weight: 500 !important;
}

/* Tab content area background */
body.uniosuite-app-shell .background-whitesmoke,
body.uniosuite-app-shell .tab-content > .background-whitesmoke {
  background: var(--us-bg-app, #f9f9f9) !important;
  padding-top: 16px;
}

/* ====================================================================
   Apresentação tab — upload card (drag & drop)
   ==================================================================== */

/* Container do upload — wider + centralizado + bg branco card */
body.uniosuite-app-shell .presentation-upload {
  display: block;
  width: 100%;
  cursor: pointer;
}

/* Garantir que tab-content e tab-pane tenham largura completa */
body.uniosuite-app-shell .tab-content,
body.uniosuite-app-shell .tab-content > .tab-pane,
body.uniosuite-app-shell .tab-content > .tab-pane > .pt-3,
body.uniosuite-app-shell .tab-content .background-whitesmoke {
  width: 100% !important;
  max-width: none !important;
}

/* Card upload Apresentação — dashed lilás + dimensões generosas */
body.uniosuite-app-shell label.presentation-upload .card {
  background: #ffffff !important;
  border: 2px dashed var(--us-primary-150, #eae1ff) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 1.5px rgba(23, 23, 37, 0.06) !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 24px auto 0 !important;
  overflow: visible !important;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

body.uniosuite-app-shell label.presentation-upload:hover .card {
  border-color: var(--us-primary, #6100f9) !important;
  background: #faf8ff !important;
}

body.uniosuite-app-shell .presentation-upload .card-body {
  padding: 56px 48px !important;
}

/* Ícone — PNG nuvem Figma (node 254:11100, 99x70 nativo) — padrão Recordings */
body.uniosuite-app-shell .presentation-upload .icon-circle {
  width: 99px !important;
  height: 70px !important;
  border-radius: 0 !important;
  background: url('/uniosuite/empty-presentation.png') no-repeat center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  border: none !important;
  transition: transform .2s ease;
}

body.uniosuite-app-shell label.presentation-upload:hover .icon-circle {
  transform: scale(1.03);
}

body.uniosuite-app-shell .presentation-upload .icon-circle svg,
body.uniosuite-app-shell .presentation-upload .icon-circle .hi-l,
body.uniosuite-app-shell .presentation-upload .icon-circle img {
  display: none !important;
}

/* Title "Clique para enviar" + "ou arraste e largue" */
body.uniosuite-app-shell .presentation-upload .card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: var(--us-primary, #6100f9) !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.uniosuite-app-shell .presentation-upload .card-title .text-muted,
body.uniosuite-app-shell .presentation-upload .card-title span.fs-5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: var(--us-subtitle, #656971) !important;
}

/* Description "Carregue qualquer documento..." */
body.uniosuite-app-shell .presentation-upload .card-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--us-subtitle, #656971) !important;
  margin: 0 auto !important;
  max-width: 360px;
}

/* ====================================================================
   Acesso tab — empty state "Está na hora de adicionar utilizadores!"
   Reaproveita .icon-circle do upload + estilo padrão Unio
   ==================================================================== */

/* Tabs Apresentação/Acesso/Definições — neutralizar APENAS o wrapper visual
   white (bg/border/shadow) mas preservar padding/margin internos pra layout
   dos forms funcionar. */
body.uniosuite-app-shell .tab-content .card.card-shadow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

/* EXCEÇÃO 1: Card upload Apresentação mantém visual dashed lilás (drop-zone) */
body.uniosuite-app-shell label.presentation-upload .card.card-shadow {
  background: #ffffff !important;
  border: 2px dashed var(--us-primary-150, #eae1ff) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 1.5px rgba(23, 23, 37, 0.06) !important;
  max-width: 720px !important;
  margin: 24px auto 0 !important;
}

/* Icon-circle GERAL (cobre acesso + outros futuros) */
body.uniosuite-app-shell .icon-circle:not(.presentation-upload .icon-circle):not(.avatar-icon-circle) {
  width: 88px !important;
  height: 88px !important;
  background: var(--us-primary-150, #eae1ff) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px auto 24px !important;
}

body.uniosuite-app-shell .icon-circle:not(.presentation-upload .icon-circle):not(.avatar-icon-circle) > svg.hi-l {
  width: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  margin: 0 !important;
  color: var(--us-primary, #6100f9) !important;
  stroke-width: 1.6 !important;
}

/* Title h5 "Está na hora..." */
body.uniosuite-app-shell .tab-content .card .card-title.text-brand,
body.uniosuite-app-shell .tab-content .card .card-title.h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 26px !important;
  color: var(--us-text, #171725) !important;
  margin: 0 auto 8px !important;
  text-align: center;
}

body.uniosuite-app-shell .tab-content .card .card-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--us-subtitle, #656971) !important;
  max-width: 480px;
  margin: 0 auto 20px !important;
  text-align: center;
}

/* Botão "+ Partilhar acessos" — OUTLINE lilás claro (Figma 254:11203)
   white bg + border 2px #eae1ff + text #7d48ff, height 40px, radius 6px */
body.uniosuite-app-shell #shared-access-empty .btn,
body.uniosuite-app-shell #shared-access-empty button.btn,
body.uniosuite-app-shell #shared-access-empty .btn-brand-outline,
body.uniosuite-app-shell #shared-access-empty button.btn-brand-outline,
body.uniosuite-app-shell #shared-access-empty .uniosuite-access-empty-btn,
body.uniosuite-app-shell div#shared-access-empty button.btn.btn-brand-outline,
body.uniosuite-app-shell div#shared-access-empty button.btn.uniosuite-access-empty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 24px auto 0 !important;
  background-color: #ffffff !important;
  border: 2px solid var(--us-primary-150, #eae1ff) !important;
  color: var(--us-primary-300, #7d48ff) !important;
  border-radius: 6px !important;
  padding: 8px 23.72px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.uniosuite-app-shell #shared-access-empty .btn:hover,
body.uniosuite-app-shell #shared-access-empty button.btn-brand-outline:hover,
body.uniosuite-app-shell #shared-access-empty .uniosuite-access-empty-btn:hover,
body.uniosuite-app-shell div#shared-access-empty button.btn.uniosuite-access-empty-btn:hover {
  background-color: #faf6ff !important;
  border-color: #d6c3ff !important;
  color: var(--us-primary, #6100f9) !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.08) !important;
}

body.uniosuite-app-shell #shared-access-empty .btn svg,
body.uniosuite-app-shell #shared-access-empty button.btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  stroke: currentColor !important;
}

/* Título: Figma quer texto escuro #171725, NÃO text-brand lilás */
body.uniosuite-app-shell #shared-access-empty .card-title,
body.uniosuite-app-shell #shared-access-empty .card-title.text-brand,
body.uniosuite-app-shell #shared-access-empty .card-title.h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.017em !important;
  color: #171725 !important;
  margin: 0 0 8px !important;
}

body.uniosuite-app-shell #shared-access-empty .card-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  color: #656971 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Card-body Empty Access — text-align center (preserva inline-block do botão).
   NÃO usar flex column aqui (botão Modal pode quebrar layout). */
body.uniosuite-app-shell #shared-access-empty .card-body {
  text-align: center !important;
  padding: 48px 24px 56px !important;
  overflow: visible !important;
}

body.uniosuite-app-shell #shared-access-empty,
body.uniosuite-app-shell #shared-access-empty .card,
body.uniosuite-app-shell #shared-access-empty .card.card-shadow {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Wrapper CTA + botão dedicado .uniosuite-access-share-btn (JSX-side class) */
body.uniosuite-app-shell .uniosuite-access-cta {
  display: block !important;
  margin-top: 16px !important;
  text-align: center !important;
}

body.uniosuite-app-shell .uniosuite-access-share-btn,
body.uniosuite-app-shell button.uniosuite-access-share-btn,
body.uniosuite-app-shell .btn.uniosuite-access-share-btn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #ffffff !important;
  border: 2px solid var(--us-primary-150, #eae1ff) !important;
  color: var(--us-primary-300, #7d48ff) !important;
  border-radius: 6px !important;
  padding: 10px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  min-width: 220px;
  min-height: 44px;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(23, 23, 37, 0.05) !important;
  cursor: pointer;
}

body.uniosuite-app-shell .uniosuite-access-share-btn:hover {
  background-color: #faf8ff !important;
  border-color: var(--us-primary, #6100f9) !important;
  color: var(--us-primary, #6100f9) !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.08) !important;
}

/* ====================================================================
   Definições tab (#room-settings) — 2 colunas (Nome+Códigos / Switches)
   ==================================================================== */

body.uniosuite-app-shell #room-settings {
  padding-top: 16px !important;
}

/* Card wrapper — Figma 254:11299: white, radius 16px, shadow 2-layer
   IMPORTANT: sobrescrever a regra genérica .card-shadow (linha ~183) que aplica
   width 305px + height 272px + overflow hidden pros room cards da lista. */
body.uniosuite-app-shell #room-settings > .card.card-shadow {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10),
              0px 2px 4px -2px rgba(16, 24, 40, 0.06) !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 32px 12px 24px !important;
  display: block !important;
}

/* Divider 2px entre colunas — Figma 254:11301 */
body.uniosuite-app-shell #room-settings .border-end {
  border-right: 2px solid var(--us-stroke, #dee2e6) !important;
  padding-right: 12px !important;
}

body.uniosuite-app-shell #room-settings .ps-4 {
  padding-left: 24px !important;
}

/* Section titles h6 — Figma: Inter Medium 16px #171725 (não brand) */
body.uniosuite-app-shell #room-settings h6.text-brand {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  color: var(--us-text, #171725) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
  padding-left: 12px !important;
}

/* Input "Nome da sala" — Figma: h 38px, border #dee2e6 1px, radius 6px, 16px Regular */
body.uniosuite-app-shell #room-settings .form-control {
  height: 38px !important;
  padding: 6px 12px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #212529 !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell #room-settings .form-control:focus {
  border-color: var(--us-primary, #6100f9) !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
}

/* Form row "Nome da sala" — input + botão Atualizar lado a lado */
body.uniosuite-app-shell #room-settings .hstack {
  padding: 0 12px !important;
}

/* Botão "Atualizar" — Figma: brand purple solid, padding 7px 27px, min-w 120px */
body.uniosuite-app-shell #room-settings .btn-brand {
  background: var(--us-primary, #6100f9) !important;
  border: 1px solid var(--us-primary, #6100f9) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 7px 27px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  height: 38px !important;
  min-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin-left: 16px !important;
}

body.uniosuite-app-shell #room-settings .btn-brand:hover {
  background: var(--us-primary-300, #7d48ff) !important;
  border-color: var(--us-primary-300, #7d48ff) !important;
}

/* Botão "Gerar" — outline lilás 2px (Figma 254:11319/26: border-2 #eae1ff) */
body.uniosuite-app-shell #room-settings .btn-brand-outline {
  background: #ffffff !important;
  border: 2px solid var(--us-primary-150, #eae1ff) !important;
  color: var(--us-primary-300, #7d48ff) !important;
  border-radius: 6px !important;
  padding: 8px 23.72px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  height: 40px !important;
  min-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 12px !important;
}

body.uniosuite-app-shell #room-settings .btn-brand-outline:hover {
  background: #faf8ff !important;
  border-color: var(--us-primary, #6100f9) !important;
  color: var(--us-primary, #6100f9) !important;
}

/* Linha individual de setting — label + switch. Figma: padding 8px, sem borders */
body.uniosuite-app-shell #room-settings .room-settings-row {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  color: var(--us-text-subtle, #656971) !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
  align-items: center !important;
}

body.uniosuite-app-shell #room-settings .room-settings-row .form-check-label {
  color: var(--us-text-subtle, #656971) !important;
  font-weight: 400 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Switch toggle Bootstrap — Figma: 40x20, off=white+border #dee2e6, on=#6100f9 */
body.uniosuite-app-shell #room-settings .form-switch .form-check-input {
  width: 40px !important;
  height: 20px !important;
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 40px !important;
  cursor: pointer;
  margin: 0 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dee2e6'/%3e%3c/svg%3e") !important;
}

body.uniosuite-app-shell #room-settings .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
  border-color: #dee2e6 !important;
}

body.uniosuite-app-shell #room-settings .form-switch .form-check-input:checked {
  background-color: var(--us-primary, #6100f9) !important;
  border-color: var(--us-primary, #6100f9) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

body.uniosuite-app-shell #room-settings .form-switch .form-check-input:checked:focus {
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.25) !important;
}

/* "Apagar sala" — Figma 254:11387: border 2px #f0b2b2, color #cc0000, padding 8px 15.2px */
body.uniosuite-app-shell #room-settings .btn-delete {
  background: #ffffff !important;
  border: 2px solid #f0b2b2 !important;
  color: #cc0000 !important;
  border-radius: 6px !important;
  padding: 8px 15.2px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  height: 40px !important;
  min-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.uniosuite-app-shell #room-settings .btn-delete:hover {
  background: #fff5f5 !important;
  border-color: #cc0000 !important;
  color: #cc0000 !important;
}

/* Mobile: colunas viram pilha */
@media (max-width: 768px) {
  body.uniosuite-app-shell #room-settings .border-end {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--us-stroke, #dee2e6);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  body.uniosuite-app-shell #room-settings .ps-4 {
    padding-left: 12px !important;
  }
}

/* ====================================================================
   Toasts react-toastify — paleta Unio Suite (brand purple + tons sutis)
   Override CSS vars do toastify + estilos diretos com !important.
   Scope global (não só dentro de uniosuite-app-shell) pra cobrir login etc.
   ==================================================================== */

:root {
  --toastify-color-success: #6100f9;
  --toastify-color-info: #6100f9;
  --toastify-color-warning: #f3a712;
  --toastify-color-error: #dc3545;
  --toastify-color-progress-success: #6100f9;
  --toastify-color-progress-info: #6100f9;
  --toastify-color-progress-warning: #f3a712;
  --toastify-color-progress-error: #dc3545;
  --toastify-icon-color-success: #6100f9;
  --toastify-icon-color-info: #6100f9;
  --toastify-icon-color-warning: #f3a712;
  --toastify-icon-color-error: #dc3545;
}

.Toastify__toast {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #171725 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(23, 23, 37, 0.12),
    0 2px 6px rgba(23, 23, 37, 0.06) !important;
  border: 1px solid #eae1ff !important;
  padding: 14px 16px !important;
  min-height: 56px;
}

.Toastify__toast-body {
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  color: #171725 !important;
  align-items: center !important;
  gap: 10px;
}

.Toastify__toast-body > div:last-child {
  font-weight: 500;
}

/* Ícone — wrapper redondo lilás claro */
.Toastify__toast-icon {
  width: 32px !important;
  height: 32px !important;
  margin-right: 12px !important;
  background: #faf8ff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.Toastify__toast-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Success — checkmark roxo */
.Toastify__toast--success .Toastify__toast-icon {
  background: #faf8ff;
}
.Toastify__toast--success .Toastify__toast-icon svg {
  fill: #6100f9 !important;
}

/* Info — i roxo */
.Toastify__toast--info .Toastify__toast-icon {
  background: #faf8ff;
}
.Toastify__toast--info .Toastify__toast-icon svg {
  fill: #6100f9 !important;
}

/* Warning — laranja sutil */
.Toastify__toast--warning .Toastify__toast-icon {
  background: #fff7e6;
}
.Toastify__toast--warning .Toastify__toast-icon svg {
  fill: #f3a712 !important;
}

/* Error — vermelho sutil */
.Toastify__toast--error .Toastify__toast-icon {
  background: #fff5f5;
}
.Toastify__toast--error .Toastify__toast-icon svg {
  fill: #dc3545 !important;
}
.Toastify__toast--error {
  border-color: #f0b2b2 !important;
}

/* Botão X close */
.Toastify__close-button {
  color: #656971 !important;
  opacity: 0.5 !important;
  align-self: center !important;
  padding: 4px !important;
  transition: opacity .15s ease;
}
.Toastify__close-button:hover {
  opacity: 1 !important;
}
.Toastify__close-button svg {
  width: 12px !important;
  height: 12px !important;
}

/* Progress bar — gradient brand */
.Toastify__progress-bar {
  height: 3px !important;
  background: linear-gradient(90deg, #6100f9 0%, #7d48ff 100%) !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.Toastify__progress-bar--warning {
  background: linear-gradient(90deg, #f3a712 0%, #ffc043 100%) !important;
}

.Toastify__progress-bar--error {
  background: linear-gradient(90deg, #dc3545 0%, #ef5860 100%) !important;
}

/* Container — espaçamento desktop */
.Toastify__toast-container {
  padding: 16px;
}

.Toastify__toast-container--top-right,
.Toastify__toast-container--bottom-right {
  right: 16px !important;
}

@media (max-width: 576px) {
  .Toastify__toast-container {
    padding: 8px;
  }
  .Toastify__toast {
    border-radius: 10px !important;
  }
}

/* ====================================================================
   Modais Bootstrap genéricos (Shared Access, Delete confirms, etc) —
   estilo Unio Suite SEM scope body class pra garantir aplicação.
   ==================================================================== */

/* Dialog wider pra todos modais (modal-lg ou default) */
.modal-dialog {
  max-width: 600px !important;
  margin: 1.75rem auto !important;
}

.modal-dialog.modal-lg {
  max-width: 720px !important;
}

.modal-dialog.modal-sm {
  max-width: 380px !important;
}

.modal-dialog.modal-xl {
  max-width: 1000px !important;
}

/* Content (card branco com bordas arredondadas) */
.modal-content,
.modal-content.card-shadow,
.modal-content.border-0 {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(23, 23, 37, 0.18),
    0 2px 8px rgba(23, 23, 37, 0.08) !important;
  font-family: 'Inter', 'Public Sans', system-ui, sans-serif !important;
  overflow: visible !important;
}

.modal-header {
  padding: 24px 28px 12px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title,
.modal-header h4.modal-title,
.modal-header .h4.modal-title {
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
  color: #171725 !important;
  margin: 0 !important;
}

.modal-header .btn-close {
  width: 14px;
  height: 14px;
  padding: 8px;
  margin: 0 -8px 0 auto;
  background-size: 14px;
  opacity: 0.5;
  border-radius: 6px;
  cursor: pointer;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 12px 28px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #171725 !important;
  overflow: visible !important;
}

.modal-body label,
.modal-body .form-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #171725 !important;
  margin-bottom: 6px !important;
  display: block;
}

.modal-body .form-control,
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="search"],
.modal-body input[type="password"],
.modal-body select.form-select {
  height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #171725 !important;
  box-shadow: none !important;
  width: 100% !important;
}

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body select.form-select:focus {
  border-color: #6100f9 !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
  outline: none !important;
}

.modal-body textarea.form-control {
  height: auto !important;
  min-height: 88px;
}

.modal-body .btn-brand,
.modal-body button[type="submit"]:not(.btn-secondary):not(.btn-neutral):not(.btn-danger) {
  background: #6100f9 !important;
  border: 1px solid #6100f9 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  height: 44px !important;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none !important;
}

.modal-body .btn-brand:hover {
  background: #7d48ff !important;
  border-color: #7d48ff !important;
}

.modal-body .btn-secondary,
.modal-body .btn-neutral,
.modal-body button.btn-light {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  color: #171725 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.modal-body .btn-secondary:hover,
.modal-body .btn-neutral:hover {
  background: #faf8ff !important;
  border-color: #6100f9 !important;
  color: #6100f9 !important;
}

.modal-body .btn-danger,
.modal-body .btn-delete {
  background: #ffffff !important;
  border: 1px solid #f0b2b2 !important;
  color: #dc3545 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.modal-body .btn-danger:hover {
  background: #fff5f5 !important;
  border-color: #dc3545 !important;
}

/* Lista de usuários compartilhados (se aparecer) */
.modal-body ul.list-group,
.modal-body .list-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  max-height: 320px;
  overflow-y: auto;
}

.modal-body .list-group-item,
.modal-body ul.list-group > li {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
}

.modal-body .list-group-item:last-child,
.modal-body ul.list-group > li:last-child {
  border-bottom: none !important;
}

.modal-body .list-group-item:hover {
  background: #faf8ff !important;
  cursor: pointer;
}

/* Footer (botões ações) */
.modal-footer {
  padding: 12px 28px 24px !important;
  border-top: 1px solid #f3f4f6 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* Backdrop sutil */
.modal-backdrop.show {
  opacity: 0.45 !important;
  background: #171725 !important;
}

/* Mobile */
@media (max-width: 576px) {
  .modal-dialog,
  .modal-dialog.modal-lg {
    max-width: calc(100% - 24px) !important;
    margin: 1rem auto !important;
  }
  .modal-content { border-radius: 12px !important; }
  .modal-header { padding: 20px 20px 8px !important; }
  .modal-body { padding: 8px 20px 20px !important; }
  .modal-footer { padding: 8px 20px 20px !important; }
}

/* ====================================================================
   Override antigo do #shared-access-modal — manter compat
   ==================================================================== */

#shared-access-modal .modal-content {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(23, 23, 37, 0.18),
    0 2px 8px rgba(23, 23, 37, 0.08) !important;
  font-family: 'Inter', 'Public Sans', system-ui, sans-serif !important;
  overflow: visible !important;
  padding: 0 !important;
}

#shared-access-modal .modal-dialog {
  max-width: 560px !important;
  margin: 1.75rem auto !important;
}

#shared-access-modal .modal-header {
  padding: 24px 28px 8px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
}

#shared-access-modal .modal-header .modal-title,
#shared-access-modal .modal-title {
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
  color: #171725 !important;
  margin: 0 !important;
}

#shared-access-modal .modal-body {
  padding: 16px 28px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #171725 !important;
  overflow: visible !important;
}

#shared-access-modal .modal-body label,
#shared-access-modal .modal-body .form-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #171725 !important;
  margin-bottom: 6px !important;
}

#shared-access-modal .modal-body .form-control,
#shared-access-modal .modal-body input[type="text"],
#shared-access-modal .modal-body input[type="email"],
#shared-access-modal .modal-body input[type="search"] {
  height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #171725 !important;
  box-shadow: none !important;
}

/* search-bar tem ícone de lupa via background-image — manter padding-left
   pra texto/placeholder não sobrepor o ícone (ícone em x=13px, ~20px largura) */
#shared-access-modal .modal-body input.search-bar,
#shared-access-modal .modal-body input[type="search"].search-bar,
#shared-access-list input.search-bar,
#shared-access-list input[type="search"].search-bar {
  padding-left: 40px !important;
  background-position: 13px center !important;
  background-repeat: no-repeat !important;
}

/* ──────────────────────────────────────────────────────────
   Aba "Acesso" populada (#shared-access-list) — padrão Unio Suite
   ────────────────────────────────────────────────────────── */

#shared-access-list {
  padding-top: 8px !important;
}

/* Header: search à esquerda + botão "+ Partilhar acesso" à direita */
#shared-access-list > .hstack {
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

#shared-access-list .search-bar {
  min-width: 320px !important;
  max-width: 420px !important;
  height: 44px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #171725 !important;
  box-shadow: none !important;
}

#shared-access-list .search-bar:focus {
  border-color: #6100f9 !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
  outline: none !important;
}

#shared-access-list .btn-brand-outline {
  background: #ffffff !important;
  border: 1.5px solid #6100f9 !important;
  color: #6100f9 !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#shared-access-list .btn-brand-outline:hover,
#shared-access-list .btn-brand-outline:focus {
  background: #eae1ff !important;
  border-color: #6100f9 !important;
  color: #6100f9 !important;
  box-shadow: none !important;
}

/* Card branco arredondado contendo a tabela */
#shared-access-list > .card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.06),
              0 2px 4px -2px rgba(16, 24, 40, 0.04) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#shared-access-list .card-body {
  padding: 0 !important;
}

#shared-access-list .table {
  margin-bottom: 0 !important;
  font-family: 'Inter', sans-serif !important;
  color: #171725 !important;
}

#shared-access-list .table thead {
  background: #f9f9f9 !important;
}

#shared-access-list .table thead th {
  border-bottom: 1px solid #eef0f3 !important;
  padding: 14px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #656971 !important;
}

#shared-access-list .table tbody tr {
  border-bottom: 1px solid #f1f2f4 !important;
  transition: background-color 0.15s ease !important;
}

#shared-access-list .table tbody tr:last-child {
  border-bottom: none !important;
}

#shared-access-list .table tbody tr:hover {
  background: #faf7ff !important;
}

#shared-access-list .table tbody td {
  padding: 12px 24px !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Avatar circular com borda lilás suave */
#shared-access-list .small-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #eae1ff !important;
  object-fit: cover !important;
}

/* Nome do usuário em texto sólido (não brand color como link) */
#shared-access-list .table h6.text-brand {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #171725 !important;
  margin: 0 !important;
}

/* Botão lixeira — neutro, vira vermelho no hover */
#shared-access-list .btn-icon {
  background: transparent !important;
  border: none !important;
  color: #656971 !important;
  padding: 8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#shared-access-list .btn-icon:hover,
#shared-access-list .btn-icon:focus {
  background: #fdecec !important;
  color: #dc3545 !important;
  box-shadow: none !important;
}

#shared-access-list .btn-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Remover bg whitesmoke herdado do tab-pane na aba Acesso quando populada */
.tab-content #react-aria6851024886-2-tabpane-access.background-whitesmoke,
.tab-pane.background-whitesmoke:has(#shared-access-list) {
  background: transparent !important;
}

#shared-access-modal .modal-body .form-control:focus {
  border-color: #6100f9 !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
  outline: none !important;
}

#shared-access-modal .modal-body .btn-brand,
#shared-access-modal .modal-body button[type="submit"] {
  background: #6100f9 !important;
  border: 1px solid #6100f9 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  height: 44px !important;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#shared-access-modal .modal-body .btn-brand:hover {
  background: #7d48ff !important;
  border-color: #7d48ff !important;
}

#shared-access-modal .modal-body .btn-secondary,
#shared-access-modal .modal-body .btn-neutral {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  color: #171725 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

#shared-access-modal .modal-body ul,
#shared-access-modal .modal-body .list-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  max-height: 280px;
  overflow-y: auto;
}

#shared-access-modal .modal-body .list-group-item,
#shared-access-modal .modal-body li {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#shared-access-modal .modal-body .list-group-item:last-child,
#shared-access-modal .modal-body li:last-child {
  border-bottom: none !important;
}

#shared-access-modal .modal-body .list-group-item:hover {
  background: #faf8ff !important;
  cursor: pointer;
}

/* Backdrop sutil */
.modal-backdrop.show {
  opacity: 0.45 !important;
  background: #171725 !important;
}

/* Esconder nome do user no header (Figma só tem avatar) */
body.uniosuite-app-shell #nav-user-dropdown .hstack > span:not(.avatar):not(.avatar-small) {
  display: none !important;
}

/* Chevron dropdown */
body.uniosuite-app-shell #chevron-profile {
  width: 16px !important;
  height: 16px !important;
  color: var(--us-text-subtle) !important;
}

/* Dropdown menu reaberta — estilo Unio Suite */
body.uniosuite-app-shell .dropdown-menu {
  border: 1px solid var(--us-stroke) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1) !important;
  margin-top: 4px !important;
  font-family: 'Inter', sans-serif !important;
}

body.uniosuite-app-shell .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--us-text) !important;
}

body.uniosuite-app-shell .dropdown-item:hover {
  background: #faf8ff !important;
  color: var(--us-primary) !important;
}

body.uniosuite-app-shell .dropdown-divider {
  margin: 8px 0 !important;
  border-color: var(--us-stroke) !important;
}

/* Botão "Sair" dentro do dropdown */
body.uniosuite-app-shell .dropdown-menu .btn-brand {
  height: 36px !important;
  font-size: 14px !important;
}

/* =====================================================================
   Esconder elementos Greenlight legacy que não combinam com Figma
   ===================================================================== */

/* Footer "Greenlight" + branding extra (texto fixo no bottom) */
body.uniosuite-app-shell .footer,
body.uniosuite-app-shell footer,
body.uniosuite-app-shell #footer,
body.uniosuite-app-shell .greenlight-footer,
body.uniosuite-app-shell .powered-by,
body.uniosuite-app-shell .login-footer,
body.uniosuite-app-shell #login-footer {
  display: none !important;
}

/* Texto "test" sobreposto ao logo BBB no print — provavelmente subtitle do site */
body.uniosuite-app-shell .navbar-brand .small-subtitle,
body.uniosuite-app-shell .navbar-brand small,
body.uniosuite-app-shell .navbar-brand .subtitle {
  display: none !important;
}

/* =====================================================================
   Background container — eliminar bloco cinza fantasma atrás dos tabs
   ===================================================================== */

body.uniosuite-app-shell .tab-container,
body.uniosuite-app-shell .background-whitesmoke {
  background: var(--us-bg-app) !important;
  min-height: 0 !important;
}

/* Esconder Container Bootstrap default que pode estar render extra */
body.uniosuite-app-shell main > .container-fluid,
body.uniosuite-app-shell #app-container > .container > .container-fluid {
  background: var(--us-bg-app) !important;
  padding: 0 !important;
}

/* Wide-white classes (Greenlight usa pra extender bg) - reset pra match Figma */
body.uniosuite-app-shell .wide-white {
  background: var(--us-bg-app) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
}

/* Tabs container — eliminar bloco cinza estranho */
body.uniosuite-app-shell .nav-tabs {
  background: transparent !important;
}

/* Tab-content sem fundo extra */
body.uniosuite-app-shell .tab-content {
  background: var(--us-bg-app) !important;
}

/* =====================================================================
   Empty state — Aba Gravações (sem recordings)
   Figma node 254:10876 (recording empty): claquete roxa centralizada +
   título + subtítulo, SEM card/shadow/border
   ===================================================================== */

body.uniosuite-app-shell #recordings-list-empty {
  padding: 80px 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Card wrapper — eliminar fundo, sombra, border */
body.uniosuite-app-shell #recordings-list-empty .card,
body.uniosuite-app-shell #recordings-list-empty .card-shadow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: 100%;
  max-width: 600px;
}

body.uniosuite-app-shell #recordings-list-empty .card-body {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 32px !important;
}

/* Ícone — claquete PNG renderizada direto do Figma (node 254:10911, 82x96 nativo) */
body.uniosuite-app-shell #recordings-list-empty .icon-circle {
  width: 82px !important;
  height: 96px !important;
  border-radius: 0 !important;
  background: url('/uniosuite/recording-empty.png') no-repeat center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
}

body.uniosuite-app-shell #recordings-list-empty .icon-circle svg,
body.uniosuite-app-shell #recordings-list-empty .icon-circle img {
  display: none !important;
}

/* Título "Ainda não possui nenhuma gravação!" */
body.uniosuite-app-shell #recordings-list-empty .card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.34px !important;
  color: #171725 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  /* Greenlight aplica .text-brand (roxo); Figma quer #171725 dark */
}

/* Subtítulo "As gravações aparecerão aqui..." */
body.uniosuite-app-shell #recordings-list-empty .card-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: #656971 !important;
  margin: 0 !important;
  max-width: 600px !important;
  text-align: center !important;
}

/* =====================================================================
   /profile — Figma node 254:11389
   Layout: 2 colunas (sidebar 257px + card form), breadcrumb topo,
   título "Perfil" + subtítulo + botão "Nova sala", avatar redondo 150x150
   ===================================================================== */

body.uniosuite-app-shell.uniosuite-profile-page #profile,
body.uniosuite-app-shell.uniosuite-profile-page .uniosuite-profile-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  background: var(--us-bg-app) !important;
}

/* Breadcrumb "← Início" */
.uniosuite-profile-breadcrumb {
  margin-bottom: 32px;
}

.uniosuite-profile-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--us-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

.uniosuite-profile-back:hover {
  text-decoration: underline;
  color: var(--us-primary-hover, #5300d6);
}

.uniosuite-profile-back svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

/* Header (título + subtítulo + botão Nova sala) */
.uniosuite-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-bottom: 32px;
  gap: 32px;
}

.uniosuite-profile-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uniosuite-profile-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 34px !important;
  letter-spacing: -0.456px !important;
  color: var(--us-text) !important;
  margin: 0 !important;
}

.uniosuite-profile-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: var(--us-text-subtle) !important;
  margin: 0 !important;
}

/* Botão Nova sala — herda o estilo .btn-brand (pill roxo). Heroicon Plus pequeno. */
.uniosuite-profile-new-room svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2 !important;
  color: white !important;
}

/* Grid 2 colunas: sidebar 257px + card content flex
   IMPORTANTE: Bootstrap <Row> tem flex-wrap:wrap default → quebra em mobile.
   Pra desktop forço nowrap. */
body.uniosuite-profile-page .uniosuite-profile-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 32px !important;
  margin: 0 !important;
  width: 100% !important;
}

body.uniosuite-profile-page .uniosuite-profile-sidebar-col {
  flex: 0 0 257px !important;
  max-width: 257px !important;
  padding: 0 !important;
}

body.uniosuite-profile-page .uniosuite-profile-content-col {
  flex: 1 1 auto !important;
  padding: 0 !important;
  min-width: 0;
}

/* Sidebar (Dropdown Menu Figma) */
body.uniosuite-profile-page .uniosuite-profile-sidebar {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
  padding: 16px 8px;
}

body.uniosuite-profile-page .uniosuite-profile-sidebar .nav {
  gap: 4px;
}

body.uniosuite-profile-page .uniosuite-profile-sidebar .nav-link.us-profile-navlink {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--us-text) !important;
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  text-decoration: none !important;
}

body.uniosuite-profile-page .uniosuite-profile-sidebar .nav-link.us-profile-navlink:hover {
  background: #f5f3ff !important;
}

body.uniosuite-profile-page .uniosuite-profile-sidebar .nav-link.us-profile-navlink.active {
  background: #faf8ff !important;
  color: var(--us-primary) !important;
  font-weight: 600 !important;
  font-family: 'Sora', 'Inter', sans-serif !important;
}

/* Ícone wrappers (square colorido) */
.us-profile-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  background: #faf8ff;
}

.us-profile-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
  color: var(--us-text);
}

/* Ativo: ícone "Informações" tem bg primary roxo + ícone branco */
.us-profile-navlink.active .us-profile-icon-wrap--info {
  background: var(--us-primary) !important;
}

.us-profile-navlink.active .us-profile-icon-wrap--info svg {
  color: white !important;
}

/* Item "Excluir" — bg vermelho claro + ícone vermelho */
.us-profile-icon-wrap--delete {
  background: #fbeded !important;
}

.us-profile-icon-wrap--delete svg {
  color: #dc3545 !important;
}

.us-profile-navtext {
  flex: 1;
}

/* Card content */
body.uniosuite-profile-page .uniosuite-profile-card {
  background: white !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.10) !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .tab-content {
  background: transparent !important;
  padding: 32px !important;
  max-width: none !important;
}

/* AccountInfo: Row com 2 Col (form + avatar) */
body.uniosuite-profile-page .uniosuite-profile-card .tab-content .row {
  --bs-gutter-x: 32px;
  gap: 0 !important;
}

body.uniosuite-profile-page .uniosuite-profile-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.34px !important;
  color: #212529 !important;
  margin-bottom: 24px !important;
}

/* Form inputs */
body.uniosuite-profile-page .uniosuite-profile-card label.form-label,
body.uniosuite-profile-page .uniosuite-profile-card label {
  font-family: 'Public Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.084px !important;
  color: var(--us-text) !important;
  margin-bottom: 4px !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .form-control,
body.uniosuite-profile-page .uniosuite-profile-card .form-select {
  background: white !important;
  border: 1px solid var(--us-stroke) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--us-text) !important;
  height: auto !important;
  min-height: 38px !important;
  box-shadow: none !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .form-control:focus,
body.uniosuite-profile-page .uniosuite-profile-card .form-select:focus {
  border-color: var(--us-primary) !important;
  box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
}

/* Botões Resetar / Atualizar */
body.uniosuite-profile-page .uniosuite-profile-card .btn-brand-outline {
  background: white !important;
  border: 2px solid var(--us-primary-150) !important;
  border-radius: 6px !important;
  padding: 8px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: var(--us-primary-300) !important;
  min-width: 120px;
  height: auto;
}

body.uniosuite-profile-page .uniosuite-profile-card .btn-brand-outline:hover {
  background: #faf8ff !important;
  border-color: var(--us-primary-300) !important;
}

/* Botão "Atualizar" (variant="brand", roxo primary) */
body.uniosuite-profile-page .uniosuite-profile-card .btn-brand,
body.uniosuite-profile-page .uniosuite-profile-card .btn.btn-brand,
body.uniosuite-profile-page .uniosuite-profile-card form .btn-brand {
  background: var(--us-primary) !important;
  border: 1px solid var(--us-primary) !important;
  border-radius: 6px !important;
  padding: 7px 27px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: white !important;
  min-width: 120px;
  box-shadow: none !important;
  height: auto !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .btn-brand:hover {
  background: var(--us-primary-hover, #5300d6) !important;
}

/* Botão "Reset" (variant="neutral") — outline roxo Figma */
body.uniosuite-profile-page .uniosuite-profile-card .btn-neutral,
body.uniosuite-profile-page .uniosuite-profile-card .btn.btn-neutral,
body.uniosuite-profile-page .uniosuite-profile-card form .btn-neutral {
  background: white !important;
  border: 2px solid var(--us-primary-150) !important;
  border-radius: 6px !important;
  padding: 8px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: var(--us-primary-300) !important;
  min-width: 120px !important;
  height: auto !important;
  box-shadow: none !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .btn-neutral:hover {
  background: #faf8ff !important;
  border-color: var(--us-primary-300) !important;
  color: var(--us-primary) !important;
}

/* Botão "Apagar avatar" (variant="delete") — outline vermelho Figma */
body.uniosuite-profile-page .uniosuite-profile-card .btn-delete,
body.uniosuite-profile-page .uniosuite-profile-card .btn.btn-delete {
  background: white !important;
  border: 2px solid #f0b2b2 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #dc3545 !important;
  width: 100% !important;
  box-shadow: none !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .btn-delete:hover {
  background: #fff5f5 !important;
  border-color: #dc3545 !important;
}

/* Stack horizontal dos botões do form (Reset + Atualizar) — alinhar à direita */
body.uniosuite-profile-page .uniosuite-profile-card form .hstack.float-end,
body.uniosuite-profile-page .uniosuite-profile-card form .hstack {
  margin-top: 16px !important;
  float: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* FormSelect Idioma — Bootstrap Dropdown.Toggle renderiza com variant default
   Sobrescrever pra ter border cinza + texto preto (sem fundo roxo) */
body.uniosuite-profile-page .uniosuite-profile-card .dropdown .dropdown-toggle,
body.uniosuite-profile-page .uniosuite-profile-card .dropdown > button {
  background: white !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 6px !important;
  padding: 7px 13px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.176px !important;
  color: var(--us-text) !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .dropdown .dropdown-toggle:hover,
body.uniosuite-profile-page .uniosuite-profile-card .dropdown .dropdown-toggle:focus {
  background: white !important;
  border-color: var(--us-primary) !important;
  color: var(--us-text) !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .dropdown-toggle::after {
  border: none !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656971' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

/* Avatar grande 150x150 com iniciais */
body.uniosuite-profile-page .uniosuite-profile-card .avatar-set,
body.uniosuite-profile-page .uniosuite-profile-card [class*="avatar"] img {
  border-radius: 50% !important;
}

body.uniosuite-profile-page .uniosuite-profile-card .large-circle,
body.uniosuite-profile-page .uniosuite-profile-card .medium-circle,
body.uniosuite-profile-page .uniosuite-profile-card img.rounded-circle {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  background: var(--us-primary-150) !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  display: block !important;
}

/* "Carregar avatar" button (primary) */
body.uniosuite-profile-page .uniosuite-profile-card .btn-brand:not(.uniosuite-profile-new-room) {
  background: var(--us-primary) !important;
  border-radius: 6px !important;
  padding: 7px 24px !important;
  height: 38px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: white !important;
  border: 1px solid var(--us-primary) !important;
}

/* "Apagar avatar" button (outline red) */
body.uniosuite-profile-page .uniosuite-profile-card .btn-danger-outline,
body.uniosuite-profile-page .uniosuite-profile-card .btn[variant="danger"] {
  background: white !important;
  border: 2px solid #f0b2b2 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #dc3545 !important;
}

/* ====================================================================
   Modal Unio Suite — SetAvatar (upload foto) + outros Bootstrap modals
   Padrão das outras abas (Information / Senha / Apagar): card 16px,
   shadow leve, Sora 20px no título, Inter no body, botões .btn-brand/
   .btn-neutral, inputs com focus roxo.
   ==================================================================== */

body.uniosuite-app-shell .modal-backdrop.show {
  opacity: 0.45;
  background: #171725;
}

/* Dialog default — modais largos (sharing access, configs, etc).
   Modal avatar crop usa class própria `.uniosuite-avatar-crop-dialog` (480px). */
body.uniosuite-app-shell .modal-dialog,
body.uniosuite-app-shell .modal-dialog-centered {
  max-width: 600px !important;
  margin: 1.75rem auto !important;
  height: auto !important;
}

body.uniosuite-app-shell .modal-dialog.modal-lg {
  max-width: 720px !important;
}

/* SharedAccess modal — dialog dedicado com selector específico vencendo qualquer override */
html body .modal-dialog.uniosuite-share-modal-dialog,
.uniosuite-share-modal-dialog,
.uniosuite-share-modal-dialog.modal-dialog,
.uniosuite-share-modal-dialog.modal-dialog-centered,
div.modal.show > div.modal-dialog.uniosuite-share-modal-dialog {
  max-width: 720px !important;
  width: calc(100% - 32px) !important;
  margin: 1.75rem auto !important;
  --bs-modal-width: 720px !important;
}

html body .uniosuite-share-modal-content {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(23, 23, 37, 0.18),
    0 2px 8px rgba(23, 23, 37, 0.08) !important;
  width: 100% !important;
}

body.uniosuite-app-shell .modal-dialog.modal-xl {
  max-width: 1000px !important;
}

body.uniosuite-app-shell .modal-dialog.modal-sm {
  max-width: 380px !important;
}

/* Avatar crop modal — classe dedicada via dialogClassName no SetAvatar.jsx */
body.uniosuite-app-shell .modal-dialog.uniosuite-avatar-crop-dialog,
body.uniosuite-app-shell .uniosuite-avatar-crop-dialog {
  max-width: 480px !important;
  width: auto !important;
  height: auto !important;
  margin: 1.75rem auto !important;
}

body.uniosuite-app-shell .uniosuite-avatar-crop-dialog .modal-content,
body.uniosuite-app-shell .uniosuite-avatar-crop-content {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

body.uniosuite-app-shell .uniosuite-avatar-crop-dialog .modal-body,
body.uniosuite-app-shell .uniosuite-avatar-crop-content .modal-body {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  padding: 24px 28px !important;
}

body.uniosuite-app-shell .uniosuite-avatar-crop-dialog .modal-footer,
body.uniosuite-app-shell .uniosuite-avatar-crop-content .modal-footer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.uniosuite-app-shell .modal-content,
body.uniosuite-app-shell .modal-content.card-shadow {
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(23, 23, 37, 0.18),
    0 2px 8px rgba(23, 23, 37, 0.08) !important;
  background: #ffffff;
  font-family: 'Inter', 'Public Sans', system-ui, sans-serif;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

body.uniosuite-app-shell .modal-header {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--us-stroke) !important;
  align-items: center;
}

/* Title é <div class="modal-title h4"> — zerar margin-bottom default do .h4 */
body.uniosuite-app-shell .modal-header .modal-title,
body.uniosuite-app-shell .modal-header .modal-title.h4,
body.uniosuite-app-shell .modal-header h4.modal-title {
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 26px !important;
  letter-spacing: -0.3px !important;
  color: #171725 !important;
  margin: 0 !important;
}

body.uniosuite-app-shell .modal-header .btn-close {
  width: 14px;
  height: 14px;
  padding: 8px;
  margin: 0 -8px 0 auto;
  background-size: 14px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  border-radius: 6px;
}

body.uniosuite-app-shell .modal-header .btn-close:hover,
body.uniosuite-app-shell .modal-header .btn-close:focus {
  opacity: 1;
  box-shadow: none;
}

body.uniosuite-app-shell .modal-body {
  padding: 24px 28px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #171725;
  overflow: visible !important;
  max-height: none !important;
}

/* react-avatar-editor canvas — SetAvatar.jsx tweaked: width=240 border=20
   → canvas total 280x280 (cabe confortável no modal 460px). */
body.uniosuite-app-shell .modal-body canvas {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  border-radius: 8px;
  background: #faf8ff;
}

/* Wrapper dos controles de zoom (ícones lupa + range) */
body.uniosuite-app-shell .modal-body .py-2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 24px 0 8px !important;
  margin-top: 4px;
}

/* Ícones lupa pequena e grande — Heroicons da Greenlight */
body.uniosuite-app-shell .modal-body svg.hi-s {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: var(--us-primary) !important;
  margin: 0 !important;
}

body.uniosuite-app-shell .modal-body svg.hi-l {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  color: var(--us-primary) !important;
  margin: 0 !important;
}

/* Input range (controle de zoom/scale) */
body.uniosuite-app-shell .modal-body input[name="scale"],
body.uniosuite-app-shell .modal-body input[type="range"] {
  flex: 1 1 220px;
  max-width: 240px;
  width: 220px;
  height: 4px;
  background: var(--us-stroke);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin: 0 !important;
  vertical-align: middle;
  cursor: pointer;
}

body.uniosuite-app-shell .modal-body input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--us-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(97, 0, 249, 0.35);
  border: 2px solid #fff;
}

body.uniosuite-app-shell .modal-body input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--us-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
}

body.uniosuite-app-shell .modal-body .text-brand {
  color: var(--us-primary) !important;
}

body.uniosuite-app-shell .modal-footer {
  padding: 16px 28px 20px !important;
  border-top: 1px solid var(--us-stroke) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Botões dentro do modal — match padrão das outras abas */
body.uniosuite-app-shell .modal-footer .btn,
body.uniosuite-app-shell .modal-body .btn {
  height: 38px;
  border-radius: 6px !important;
  padding: 7px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  border: 1px solid transparent;
  box-shadow: none;
}

body.uniosuite-app-shell .modal-footer .btn-brand,
body.uniosuite-app-shell .modal-body .btn-brand,
body.uniosuite-app-shell .modal-footer .btn-primary,
body.uniosuite-app-shell .modal-body .btn-primary {
  background: var(--us-primary) !important;
  border-color: var(--us-primary) !important;
  color: #ffffff !important;
}

body.uniosuite-app-shell .modal-footer .btn-brand:hover,
body.uniosuite-app-shell .modal-body .btn-brand:hover,
body.uniosuite-app-shell .modal-footer .btn-primary:hover,
body.uniosuite-app-shell .modal-body .btn-primary:hover {
  background: var(--us-primary-300) !important;
  border-color: var(--us-primary-300) !important;
}

body.uniosuite-app-shell .modal-footer .btn-neutral,
body.uniosuite-app-shell .modal-footer .btn-secondary,
body.uniosuite-app-shell .modal-body .btn-neutral,
body.uniosuite-app-shell .modal-body .btn-secondary {
  background: #ffffff !important;
  border: 1px solid var(--us-stroke) !important;
  color: #171725 !important;
}

body.uniosuite-app-shell .modal-footer .btn-neutral:hover,
body.uniosuite-app-shell .modal-footer .btn-secondary:hover,
body.uniosuite-app-shell .modal-body .btn-neutral:hover,
body.uniosuite-app-shell .modal-body .btn-secondary:hover {
  background: #faf8ff !important;
  border-color: var(--us-primary) !important;
}

/* Botão "Apagar foto" no modal/profile (vermelho outline) */
body.uniosuite-app-shell .modal-footer .btn-danger,
body.uniosuite-app-shell .modal-body .btn-danger,
body.uniosuite-app-shell #profile-avatar .btn-danger {
  background: #ffffff !important;
  border: 1px solid #f0b2b2 !important;
  color: #dc3545 !important;
}

body.uniosuite-app-shell .modal-footer .btn-danger:hover,
body.uniosuite-app-shell .modal-body .btn-danger:hover {
  background: #fff5f5 !important;
  border-color: #dc3545 !important;
}

/* Bloco do avatar na página /profile (sidebar direito) */
body.uniosuite-app-shell #profile-avatar {
  text-align: center;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.uniosuite-app-shell #profile-avatar .avatar-icon-circle {
  background: var(--us-primary) !important;
  color: #ffffff !important;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 8px;
  right: 8px;
  top: auto !important;
  left: auto !important;
  box-shadow: 0 2px 6px rgba(97, 0, 249, 0.35);
  border: 2px solid #ffffff;
}

body.uniosuite-app-shell #profile-avatar .avatar-icon-circle svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

body.uniosuite-app-shell #profile-avatar .btn-brand {
  margin-top: 16px;
  width: 100%;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

body.uniosuite-app-shell #profile-avatar form {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* -------- Mobile -------- */
@media (max-width: 768px) {
  body.uniosuite-app-shell .input-group {
    width: 100%;
  }
  body.uniosuite-app-shell .tab-pane > .hstack {
    flex-direction: column !important;
    gap: 16px;
    align-items: stretch !important;
  }
  body.uniosuite-app-shell #room-card,
  body.uniosuite-app-shell .card-shadow {
    width: 100% !important;
    max-width: 305px;
    margin: 0 auto !important;
  }
}

@media (max-width: 576px) {
  body.uniosuite-app-shell .modal-content {
    border-radius: 12px !important;
    margin: 16px;
  }
  body.uniosuite-app-shell .modal-header,
  body.uniosuite-app-shell .modal-body,
  body.uniosuite-app-shell .modal-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.uniosuite-app-shell .modal-body input[type="range"] {
    width: 160px;
  }
}

/* Empty state Acesso — PNG user+ Figma (node 254:11199, 72x66 nativo)
   Mesmo padrão de Recordings: PNG como background no .icon-circle */
body.uniosuite-app-shell #shared-access-empty .icon-circle {
  width: 72px !important;
  height: 66px !important;
  border-radius: 0 !important;
  background: url('/uniosuite/empty-access.png') no-repeat center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  border: none !important;
}

body.uniosuite-app-shell #shared-access-empty .icon-circle svg,
body.uniosuite-app-shell #shared-access-empty .icon-circle img {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────
   #rooms-list-empty — Lista de salas vazia (Figma 254:10794)
   SEM card branco: layout flat sobre #f9f9f9, centralizado
   absoluto na página, gap 32px entre PNG/texto/botão
   ────────────────────────────────────────────────────────── */

/* Card wrapper — REMOVER background/border/shadow herdados.
   Sobrescreve a regra genérica .card-shadow (305×272 hidden) */
body.uniosuite-app-shell #rooms-list-empty {
  padding: 0 !important;
  background: transparent !important;
}

body.uniosuite-app-shell #rooms-list-empty > .card,
body.uniosuite-app-shell #rooms-list-empty > .card.card-shadow,
body.uniosuite-app-shell #rooms-list-empty .card,
body.uniosuite-app-shell #rooms-list-empty .card.card-shadow {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Card-body — flex column centralizado, gap 32px (Figma exato) */
body.uniosuite-app-shell #rooms-list-empty .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 32px !important;
  padding: 80px 24px !important;
  background: transparent !important;
  min-height: 60vh !important;
}

/* PNG avatar — 82x82 Figma exato (sem círculo, sem margin extra — gap 32 cuida) */
body.uniosuite-app-shell #rooms-list-empty .icon-circle {
  width: 82px !important;
  height: 82px !important;
  border-radius: 0 !important;
  background: url('/uniosuite/empty-rooms.png') no-repeat center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}

body.uniosuite-app-shell #rooms-list-empty .icon-circle svg,
body.uniosuite-app-shell #rooms-list-empty .icon-circle img {
  display: none !important;
}

/* Wrapper título+texto — gap 8px entre eles (Figma 254:10829) */
body.uniosuite-app-shell #rooms-list-empty .card-title,
body.uniosuite-app-shell #rooms-list-empty .card-title.text-brand,
body.uniosuite-app-shell #rooms-list-empty .card-title.h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.017em !important;
  color: #171725 !important;
  margin: 0 0 8px !important;
}

body.uniosuite-app-shell #rooms-list-empty .card-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: -0.011em !important;
  color: #656971 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Botão "+ Nova sala" — pill brand 56px exatamente como Figma 254:10832 */
body.uniosuite-app-shell #rooms-list-empty .btn-brand,
body.uniosuite-app-shell #rooms-list-empty button.btn.btn-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  background: var(--us-primary, #6100f9) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 0 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  height: 56px !important;
  width: 155px !important;
  min-width: 155px !important;
  box-shadow: none !important;
}

body.uniosuite-app-shell #rooms-list-empty .btn-brand:hover {
  background: #5300d6 !important;
}

/* ──────────────────────────────────────────────────────────
   Modal Parresia — default 480px (confirm dialogs) + 720px share
   ────────────────────────────────────────────────────────── */

/* Override do legacy `.modal-dialog { max-width: 460px }` que vinha do CSS antigo */
html body .uniosuite-modal-dialog,
html body .uniosuite-modal-dialog.modal-dialog,
html body .uniosuite-modal-dialog.modal-dialog-centered {
  width: 480px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: min(480px, calc(100vw - 32px)) !important;
  margin: 1.75rem auto !important;
}

html body .uniosuite-modal-dialog .uniosuite-modal-content,
html body .uniosuite-modal-content {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.18),
              0 4px 8px -4px rgba(16, 24, 40, 0.10) !important;
  width: 100% !important;
  min-width: 100% !important;
  padding: 8px 4px !important;
}

html body .uniosuite-modal-content > .modal-header {
  border: none !important;
  padding: 16px 24px 0 !important;
}

html body .uniosuite-modal-content > .modal-body {
  padding: 16px 28px 28px !important;
  font-family: 'Inter', sans-serif !important;
  color: #171725 !important;
  overflow: visible !important;
}

/* ──────────────────────────────────────────────────────────
   Modal "Apagar sala" (DeleteRoomForm) — layout Parresia
   ────────────────────────────────────────────────────────── */

.uniosuite-delete-room-modal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 8px 4px !important;
  gap: 0 !important;
}

.uniosuite-delete-room-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #fdecec !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
}

.uniosuite-delete-room-icon svg {
  width: 32px !important;
  height: 32px !important;
  color: #cc0000 !important;
  stroke: #cc0000 !important;
  stroke-width: 1.8 !important;
}

.uniosuite-delete-room-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.017em !important;
  color: #171725 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.uniosuite-delete-room-desc {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: #656971 !important;
  margin: 0 !important;
  max-width: 360px !important;
}

.uniosuite-delete-room-warn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: #cc0000 !important;
  margin: 6px 0 0 !important;
}

.uniosuite-delete-room-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  width: 100% !important;
}

.uniosuite-delete-room-cancel,
button.uniosuite-delete-room-cancel,
body.uniosuite-app-shell .uniosuite-delete-room-cancel {
  background: #ffffff !important;
  border: 1.5px solid #dee2e6 !important;
  color: #171725 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  height: 44px !important;
  min-width: 120px !important;
  box-shadow: none !important;
}

.uniosuite-delete-room-cancel:hover,
button.uniosuite-delete-room-cancel:hover {
  background: #f6f7f8 !important;
  border-color: #adb5bd !important;
  color: #171725 !important;
}

.uniosuite-delete-room-confirm,
button.uniosuite-delete-room-confirm,
body.uniosuite-app-shell .uniosuite-delete-room-confirm {
  background: #cc0000 !important;
  border: 1.5px solid #cc0000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  height: 44px !important;
  min-width: 120px !important;
  box-shadow: 0 2px 6px rgba(204, 0, 0, 0.18) !important;
}

.uniosuite-delete-room-confirm:hover,
button.uniosuite-delete-room-confirm:hover {
  background: #a30000 !important;
  border-color: #a30000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(204, 0, 0, 0.28) !important;
}

/* === Parresia recording progress card v1 === */
.parresia-progress-card {
  background: #fff;
  border: 1px solid #e0d4ff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(114, 41, 255, 0.12);
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  transition: opacity 0.3s, transform 0.3s;
}
.parresia-progress-card.ppc-done { opacity: 0; transform: translateY(20px); }
.parresia-progress-card .ppc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.parresia-progress-card .ppc-spinner {
  width: 14px; height: 14px;
  border: 2px solid #7229FF; border-top-color: transparent;
  border-radius: 50%; animation: ppc-spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes ppc-spin { to { transform: rotate(360deg); } }
.parresia-progress-card .ppc-label { font-weight: 600; color: #212529; flex: 1; }
.parresia-progress-card .ppc-eta { color: #6c757d; font-size: 11px; }
.parresia-progress-card .ppc-bar { height: 6px; background: #f0eaff; border-radius: 3px; overflow: hidden; }
.parresia-progress-card .ppc-fill { height: 100%; transition: width 0.6s ease, background 0.3s; border-radius: 3px; width: 0%; }
.parresia-progress-card .ppc-foot { margin-top: 6px; color: #6c757d; font-size: 11px; }
.parresia-progress-card .ppc-rec { font-family: monospace; opacity: 0.7; }

/* Fix Unio Suite 2026-06-01: card de convite/join (col-md-6) nao herda tamanho fixo de room-card */
body.uniosuite-app-shell .card-shadow.col-md-6 {
  width: min(720px, 94vw) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.uniosuite-app-shell .card-shadow.col-md-6 .card-body { overflow: visible !important; }
body.uniosuite-app-shell .card-shadow.col-md-6 .card-footer { display: block !important; }